Enhancing Mobile Website Experience: Techniques and Best Practices

Lesson 15 – Unit 0ADAPTING 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

Mouse pointer vs. touch selection

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

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

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.

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 and scripts.

Minified:

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

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

Nav bar style rules incorporating sprites

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

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

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

2.1 miles HTML 5 and CSS 3 – Illustrated Complete

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

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

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

Enhancing Mobile Website Experience: Techniques and Best Practices