Chapter 7 More on Links, Layout, and Mobile
Now that you've had some experience coding HTML and CSS, you're ready to explore a variety of techniques in this chapter, including relative hyperlinks and named fragment hyperlinks, CSS sprites, ARIA landmark roles, three-column page layout, styling for print, styling for mobile browsers, configuring CSS3 media queries to target mobile devices, and exploring the new CSS3 Flexbox layout model.
CSS Sprites
CSS pseudo-classes are used in combination with background images to configure image "rollovers". When using CSS Sprites, you take this a step further: combine all multiple background images in one file and use positioning properties to display the appropriate image. See the following tutorials for an introduction to this popular technique
Web-based sprite generators can help you get up and running with CSS Sprites quickly:
Responsive Web Design
- Ethan Marcotte's Responsive Web Design Article
- Return of the Mobile Stylesheet
- W3C CSS3 Media Queries
- Use of CSS in the Wild
- Viewport Sizes
- Responsive Web Design Basics - Google
Media Queries Examples & Tutorials
- CSS-Tricks Media Queries Code Snippets
- Media Queries Examples
- Sample Media Queries
- Ems in CSS Media Queries
- Retina Display Media Query
- How to Choose Breakpoints - Google
Designing for the Mobile Web
- W3C Mobile Web Initiative
- W3C Mobile Web Best Practices (MWBP 1.0)
- Flip Cards for MWBP 1.0
- Mobile First
- Mobile Web Development
- Mobile First Helps with Big Issues
- Mobile Should Come First
- Opera Mini: Web Content Authoring Guidelines
Testing Mobile Display
- Chris Pederick's Web Developer Extension (Resize > Display Window Size)
- Opera Mobile Emulator (Windows Only download and install)
- Mobilizer (Windows and Mac download and install -- free seven day trail)
- Web-Based Opera Mini 6 Simulator (Runs in a browser window)
- iPhone Emulator (Runs in a browser window)
- iPhoney (Mac only download and install)
- Am I Responsive
- DevicePonsive
- Responsive Test
- Screenfly
- iOS SDK (Mac only)
- Android SDK
Responsive Images
- Flexible Images with CSS
- W3C Spec: Picture Element
- HTML5 Hub Picture Element
- Improving Responsive Images with the Picture Element
- A Complete Guide to the Picture Element
- Responsive Images Community Group
- Responsive Images: Use Cases and Documented Code Snippets
- Responsive Images Sizes Attribute
- Browser Support
Exploring CSS3 & HTML5
Adobe's new resource site, http://theexpressiveweb.com, showcases new HTML5 & CSS3 coding techniques, including CSS3 Animations, CSS3 Media Queries, HTML5 Canvas, Web Storage, and more! The site is organized by coding techniques, called "features" by Adobe — and provides for each feature with an overview, examples, browser support chart, detection and fallback strategies, and list of related Adobe technologies.
CSS3 Flexible Box Layout
You have used the CSS float property to create the look of two-column and three-column
web pages. While the float layout technique is still a common practice, there
is a new emerging flexbox layout technique that uses the CSS3 Flexible Box Layout
Module (http://www.w3.org/TR/css3-flexbox/) which is currently in W3C Candidate Recommendation status. The purpose of flexbox is to provide for a flexible layout—elements contained within a flex container can be configured either horizontally or vertically in a flexible manner with flexible sizing. In addition to changing the horizontal or vertical organization of elements, flexbox can also be used to change the order of display of the elements. Due to its flexibility, flexbox is ideally suited for
responsive web design!
Check out the following resources to explore Flexbox:
- http://css-tricks.com/snippets/css/a-guide-to-flexbox
- http://demo.agektmr.com/flexbox
- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
CSS Grid Layout
The purpose of CSS Grid Layout (https://www.w3.org/TR/css-grid-1/) is to configure a two-dimensional grid-based layout. The grid can be created as either fixed-size or flexible and contains one or more grid items that can be individually defined as fixed-size or lexible. CSS Grid Layout is optimized for two-dimensional page layout. In addition to configuring grid organization of elements, CSS Grid Layout can also be used to change the order of display of the elements. Check http://caniuse.com/css-grid for the current level of browser support.
Visit the following resources to explore CSS Grid Layout:
- https://hackernoon.com/getting-started-with-css-grid-layout-8e00de547daf
- http://gridbyexample.com
- https://css-tricks.com/snippets/css/complete-guide-grid
- https://www.sitepoint.com/seven-ways-you-can-place-elements-using-css-grid-layout
Review Activities
Review game activities are available for this chapter.
Check your knowledge of chapter terms and concepts.
Chapter Updates
- Hands-On Practice 7.5 (pages 314-320)
The chapter7/7.5/index.html file in the Student Files has an error. Edit the HTML and change id="floatright" to class="floatright".
- Hands-On Practice 7.10 (pages 338-339)
Use the Firefox browser to test your work. It seems that Chrome's support of the image element's srcset and sizes attributes is a bit buggy.
- Page 347
To configure the grid shown in Figure 7.37 you also need to configure the third row (footer row). The code sample in the middle of the page should be:
#mygrid { display: grid; grid-tempolate-colulmns: 150px 1fr; grid-template-rows: 200px auto 100px; } - Page 355
Remove the second opening main tag from the code sample.
- Hands-On Exercise #8, #9, #10, #11, Page 358
The chapter7/7.5/index.html file in the Student Files has an error. Edit the HTML and change id="floatright" to class="floatright".
- Pacific Trails Resort Case Study
Page 368, Task 6, #2d
Configure a medium dark blue (#124373) background color for the nav element selector.
Questions or Comments?
The author would like to hear from you! Send an e-mail to webdevfoundations@gmail.com