LESSON 15 – UNIT 0 ADAPTING YOUR WEB SITE FOR MOBILE DEVICES

WHAT IS A MOBILE SITE AND WHY DO YOU NEED ONE? As of October 2014, 64% of American adults own a smartphone.

3

4

APPROACHES TO DEAL WITH MOBILE DEVICES 1.Website 2.Mobile Website 3.Mobile App 4.Hybrid - combination of website and app 5

6

COMPARISON OF DESKTOP WEBSITE TO MOBILE WEBSITE For each of the following compare on desktop vs. on phone. Is the content the same? How is the layout different?  www2.gccaz.edu  cnn.com  espn.go.com    Facebook 7

UNIQUE NEEDS 1.Viewability small screen variety of sizes variety of resolutions 2.Navigation features that can be manipulated on a touchscreen 3.Minimal download size 8

Mouse pointer vs. touch selection 9

How do we deal with the variety of device display sizes?

MEDIA QUERIES : Conditional statements that you can include in rule. Enable browser feature checks. Apply style rules based on set requirements.

MEDIA QUERIES EXAMPLES :

CONDITIONAL STYLE SHEETS: Indicates which style sheet should be loaded based upon certain criteria. 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: Remove all unnecessary characters from source code without changing its functionality. These unnecessary characters usually include white space characters, new line characters, and comments. Javascript, CSS and HTML utility that compresses your code.

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

A sprite for TASK. SPRITE EXAMPLES

Nav bar style rules incorporating sprites.

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

WARNING DISTANCES ARE NOT WHAT THEY MAY SEEM TO BE!! 22 You want to go from MIT Sloan School of Management to Fenway Park

MILES

24 AS THE BIRD FLIES ONLY 1.35 MILES

AVOIDING THE APPEARANCE OF CLOAKING: Cloaking - configuring a site so different content goes to crawlers and to browsers.

ADDITIONAL INFORMATION Rules for Mobile Performance Optimization 9 Tips to Optimize Mobile Site Speed site-speed/ 26

MORE ADDITIONAL INFORMATION Google Webmaster tools - Developing mobile sites wer=72462&topic= &ctx=topic GOMOMETER

28