1 / 13

Lesson o / 15 – ADAPTING YOUR WEB SITE FOR Mobile DEVICES

Lesson o / 15 – ADAPTING YOUR WEB SITE FOR Mobile DEVICES. 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 :

clem
Download Presentation

Lesson o / 15 – 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 o / 15 – ADAPTING YOUR WEB SITE FOR Mobile DEVICES

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

  3. Mouse pointer vs. touch selection

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

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

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

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

  8. Minified: • Compressed version of mobile style sheet

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

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

  11. Nav bar style rules incorporating sprites

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

  13. Cloaking: • Configuring a site so different content goes to crawlers and to browsers

More Related