HTML 5 and CSS 3, Illustrated Complete Unit O: Adapting Your Web Site for Mobile Devices

1. HTML 5 and CSS 3, Illustrated CompleteUnit O: Adapting Your Web Site for Mobile Devices

2. Objectives • Evaluate design for mobile devices • Apply @media rules • Implement conditional style sheets • Create a mobile-specific layout • Decrease page load time HTML 5 and CSS 3 – Illustrated Complete

3. Objectives (continued) • Incorporate sprites • Implement geolocation • Optimize a mobile site for search engines HTML 5 and CSS 3 – Illustrated Complete

4. Evaluating Design for Mobile Devices • Several unique needs: • Viewability on small screens at a variety of sizes and resolutions • Navigation features that can be manipulated on a touchscreen • Minimal download size • Touch screen interpretations • Code calculates most likely point on screen that a user meant to touch and executes events based on that touch HTML 5 and CSS 3 – Illustrated Complete

5. Evaluating Design for Mobile Devices (continued) • Mouse pointer vs. touch selection HTML 5 and CSS 3 – Illustrated Complete

6. Applying @media Rules • Media queries: conditional statements that you can include in an @media rule. • Enable browser feature checks • Apply style rules based on set requirements • Table O-1 describes some of the media features that CSS3 supports HTML 5 and CSS 3 – Illustrated Complete

7. Applying @media Rules (continued) HTML 5 and CSS 3 – Illustrated Complete

8. Implementing Conditional Style Sheets • Conditional style sheets: style sheets specified using media queries within link elements • Indicate which style sheet browsers should load • Used to change the way Web pages are displayed in browser windows over a certain size HTML 5 and CSS 3 – Illustrated Complete

9. Implementing Conditional Style Sheets (continued) • Mobile display using conditional style sheet HTML 5 and CSS 3 – Illustrated Complete

10. Creating a Mobile-Specific Layout HTML 5 and CSS 3 – Illustrated Complete • Layout adaptation • Quickest, easiest way to make site mobile-friendly • Separate set of HTML and CSS documents is best way to account for mobile capabilities and limits • Mobile devices vary greatly compared to computers • Important to create style sheets to account for screen size

11. Creating a Mobile-Specific Layout(continued) • Mobile-specific page with hideable nav bar HTML 5 and CSS 3 – Illustrated Complete

12. Decreasing Page Load Time • Speed optimization especially important to consider for mobile users • Often access site over slower connections • Web developers agree on many best practices for decreasing page load time • Table O-2 details a few that apply equally to larger and smaller Web sites • Minified: compressed version of mobile style sheet HTML 5 and CSS 3 – Illustrated Complete

13. Decreasing Page Load Time (continued) • Modernize script element moved to bottom of body selection HTML 5 and CSS 3 – Illustrated Complete

14. Incorporating Sprites • Sprite: combination of simple image editing and CSS code that enables multiple background image loads for a Web page with a single server request • Combine all background images into single image • Use CSS background-image properties to control which part of the compound image is displayed in each instance HTML 5 and CSS 3 – Illustrated Complete

15. Incorporating Sprites (continued) • Nav bar style rules incorporating sprites HTML 5 and CSS 3 – Illustrated Complete

16. Implementing Geolocation • Geolocation: HTML5 objects and methods that enable you to obtain and work with a user’s precise location • Calculate distances • Display relevant maps • Provide other information that pertains to a user’s location • API key: unique string that links map-related requests to your account HTML 5 and CSS 3 – Illustrated Complete

17. Implementing Geolocation (continued) • Distance calculated based on user’s current position HTML 5 and CSS 3 – Illustrated Complete

18. Optimizing a Mobile Site for Search Engines • SEO for mobile includes unique practices • Setting server configuration options • Vary depending on server configuration • Ensuring that mobile and non-mobile pages link to each other • Cloaking: configuring a site so different content goes to crawlers and to browsers HTML 5 and CSS 3 – Illustrated Complete

19. Optimizing a Mobile Site for Search Engines (continued) • HTML and CSS code for desktop site link HTML 5 and CSS 3 – Illustrated Complete

20. Summary • Growth of mobile devices has increased situations where potential audience of a Web site can access its content • Web pages for mobile devices have unique needs • CSS enables specification of target display medium for style rule or sheet HTML 5 and CSS 3 – Illustrated Complete

21. Summary (continued) • Conditional style sheets can be created to ensure accurate load on mobile devices • Mobile-specific layouts can be created • Decreasing page load time is important and there are best practices for doing so • Incorporation of sprites enables multiple background image loads HTML 5 and CSS 3 – Illustrated Complete

22. Summary (continued) • Implementing geolocation enables you to work with a user’s specific location • Optimization of a mobile site for search engines calls for unique practices including server configuration and linking settings HTML 5 and CSS 3 – Illustrated Complete