Chapter 8 – More on Links, Layout, and Mobile
Now that you've had some experience coding HTML and CSS you're ready to explore the topics in this chapter, including relative hyperlinks and named fragment hyperlinks, captioning a figure, more new HTML5 structural elements, ensuring compatibility with older browsers, styling for print, styling for mobile browsers, and responsive web design techniques as you configure CSS3 media queries to target mobile devices. Resource websites and chapter links are listed below.
Design for the Mobile Web
Responsive Web Design and CSS Media Queries
- Ethan Marcotte's Responsive Web Design Article
- Responsive Web Design Resources
- Media Queries Examples
- Define Responsive (a visual example)
- W3C CSS3 Media Queries
- Sample Media Queries
- Using Em Units in Media Queries
- Media Queries for Standard Devices
- Responsive Design Breakpoints
- Twitter Media Query Examples
Designing for the Mobile Web
- JCPenny and JCPenny Mobile Site
- White House and White House Mobile Site
- 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
- Opera Mini: Web Content Authoring Guidelines
Quick Browser Tools for Testing RWD & Media Queries
Testing Mobile Display
- Opera Mobile Emulator (Windows Only download and install)
- Mobilizer (Windows and Mac download and install)
- Web-Based Opera Mini 6 Simulator (Runs in a browser window)
- iPhone Emulator (Runs in a browser window)
- iPhoney (Mac only download and install)
- iOS SDK (Mac only)
- Android SDK
Mobile First Approach
- http://www.lukew.com/ff/entry.asp?933
- http://www.lukew.com/ff/entry.asp?1137
- http://www.techradar.com/news/internet/mobile-web-design-tips-mobile-should-come-first-719677
Responsive Images
- Responsive Web Design: preserving image aspect ratio
- Responsive Images Community
- Responsive Images in Practice
Responsive Images and the New Picture Element
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.
Chapter Updates
- Page 256, HTML5 Shim (AKA HTML5 Shiv)
The HTML5 Shiv has moved from Google to GitHub at https://github.com/aFarkas/html5shiv- Download https://github.com/aFarkas/html5shiv/archive/master.zip
Extract the .zip file. Locate the dist/html5shiv.js file and copy it into the same folder as your web page. - Include the following code in the head section of your web page.
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->
- Download https://github.com/aFarkas/html5shiv/archive/master.zip
Questions or Comments
The author would like to hear from you!
Feel free to complete the contact form with your questions or comments.
Review Games
Review activities are available for this chapter. Check your knowledge of chapter terms and concepts