1 / 20

Lesson 15 – Unit 0 ADAPTING YOUR WEB SITE FOR Mobile DEVICES

Lesson 15 – Unit 0 ADAPTING YOUR WEB SITE FOR Mobile DEVICES. WHAT IS A MOBILE SITE AND WHY DO YOU NEED ONE ?. Unique Needs . Viewability small screen variety of sizes Variety of resolutions Navigation features that can be manipulated on a touchscreen Minimal download size.

yahto
Download Presentation

Lesson 15 – Unit 0 ADAPTING YOUR WEB SITE FOR Mobile DEVICES

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lesson 15 – Unit 0ADAPTING YOUR WEB SITE FOR Mobile DEVICES

  2. WHAT IS A MOBILE SITE AND WHY DO YOU NEED ONE?

  3. Unique Needs • Viewability • small screen • variety of sizes • Variety of resolutions • Navigation features that can be manipulated on a touchscreen • Minimal download size

  4. Mouse pointer vs. touch selection

  5. Media queries: • Conditional statements that you can include in an @media rule. • Enable browser feature checks • Apply style rules based on set requirements

  6. Conditional Style Sheets: • Style sheets specified using media queries within link elements • Indicates which style sheet should be loaded. • Can change the way Web pages are displayed in browser windows over a certain size

  7. Layout adaptation • Quickest and easiest way to make site mobile-friendly. • The best way to deal with mobile capabilities is to create separate sets of HTML and CSS documents.

  8. 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

  9. Minified: • Compressed version of mobile style sheet and scripts.

  10. Minified:

  11. Sprites • 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 http://www.w3schools.com/css/css_image_sprites.asp

  12. Sprite EXAMPLES http://www.w3schools.com/css/css_image_sprites.asp A sprite for TASK.

  13. Nav bar style rules incorporating sprites

  14. Additional INformation • Rules for Mobile Performance Optimization • https://queue.acm.org/detail.cfm?id=2510122 • 9 Tips to Optimize Mobile Site Speed • http://blog.woorank.com/2013/02/9-tips-to-optimize-mobile-site-speed/ HTML 5 and CSS 3 – Illustrated Complete

  15. 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

  16. WarningDISTANCES ARE NOT WHAT THEY MAY SEEM TO BE!! You want to go from MIT Sloan School of Management to Fenway Park HTML 5 and CSS 3 – Illustrated Complete

  17. 2.1 miles HTML 5 and CSS 3 – Illustrated Complete

  18. As the bird FLIES only 1.35 miles HTML 5 and CSS 3 – Illustrated Complete

  19. AVOIDING THE APPEARANCE OF Cloaking: • Cloaking - configuring a site so different content goes to crawlers and to browsers • http://support.google.com/webmasters/bin/answer.py?hl=en&answer=66355

  20. Additional Information • Google Webmaster tools - Developing mobile sites • http://support.google.com/webmasters/bin/answer.py?hl=en&answer=72462&topic=2370586&ctx=topic • GOMOMETER • http://www.howtogomo.com/en/d/test-your-site/#gomo-meter

More Related