Optimizing Sites for Mobile Devices
2 likes2,991 views
This document provides tips for optimizing websites for mobile devices. It recommends adopting a mobile-first approach when planning and designing sites. Key tips include using responsive design techniques like fluid grids and media queries to create flexible layouts, managing resources responsibly by minimizing requests and file sizes, and taking advantage of mobile capabilities. Testing on multiple devices is also emphasized. The document encourages optimizing the user experience for the always-connected, mobile context.
![Media Query syntax
link
rel="stylesheet"
href="desktop.css"
media="[not
|
only
]
screen
[and]
(expression)"
or
@media
[not
|
only
]
screen
[and]
(expression)
{
}
The keywords “not”, “only”, and “and” can be used to filter results,
while expressions can be used to check for specific media features](https://image.slidesharecdn.com/optimizing-120519120348-phpapp02/85/Optimizing-Sites-for-Mobile-Devices-16-320.jpg)
Optimizing Sites for Mobile Devices
- 1. Optimizing sites for MOBILE DEVICES james williamson | lynda.com
- 2. Howdy again y’all james williamson | senior author @jameswillweb on the Twitter
- 3. Today I want to talk about techniques you can use to plan and develop sites so they perform well on mobile devices. (it’s kind of a big deal)
- 4. We are now in the age of mobile 500 million 180 million present Cambrian Jurassic Cupertino
- 5. Or are we? It might be more accurate to call it “The Age of Constant Connectivity”
- 6. This means that over time we need to change the way we approach design. We need a fundamental shift in content planning and site architecture to help us design always-connected user experiences
- 7. ...but that’s an entirely different presentation (maybe next year) However, it’s now critical for you to have a strategy in place for how your site looks and performs on mobile devices.
- 8. So what does that entail? Changing the way we plan sites to include mobile Using responsive design techniques that allow flexible layouts Managing resources responsibly Taking advantage of device capabilities
- 9. Planning for mobile Mobile needs to be an equal partner, if not the primary platform you design towards Check out Mobile First* Popularized by Luke Wroblewski, it emphasizes starting the design process with mobile in mind. *http://www.lukew.com/presos/preso.asp?26
- 10. Remember contexts when designing Mobile devices are always on and always there fat-fingers... 44px x 44px Mobile users are not distracted, not on-the-go, and not disengaged Don’t block access because someone’s on a mobile device Mobile capabilities increase what you The Thumb Zone can do, not limit you!
- 11. Use responsive design techniques Fluid grids Media Queries Responsive Images Responsive Web Design by Ethan Marcotte http://www.abookapart.com/products/responsive-web-design
- 12. Use fluid layouts with breakpoints desktop tablet mobile DESOLVE DESOLVE fine urban photography DESOLVE GALLERIES GEAR INTERACT SHOP GALLERIES GEAR INTERACT SHOP GALLERIES GEAR INTERACT SHOP WE LOVE URBAN PHOTOGRAPHY explore our photos our favorite equipment contact, follow, or submit your own buy our stuff We’re betting you do to. Welcome to our site, a growing collection of gal- We’re betting you do to. Welcome leries taken by a small group of pas- to our site, a growing collection of WE LOVE URBAN PHOTOGRAPHY sionate urban photographers. Visit our galleries taken by a small group of galleries, buy some of our prints, or passionate urban photographers. drop us a line. While you’re at it, feel Visit our galleries, buy some of our free to submit a gallery of your own. prints, or drop us a line. While Welcome. you’re at it, feel free to submit a gallery of your own. Welcome. We’re betting you do to. Welcome to our site, a growing collection of WE LOVE URBAN PHOTOGRAPHY galleries taken by a small group of passionate urban photographers. Visit our galleries, buy some of our prints, or drop us a line. While you’re at it, feel free to submit a gallery of your own. Welcome. Don’t lock breakpoints into fixed sizes (960px, 720px, 320px), keep layouts fluid within your breakpoints to account for multiple devices and screen sizes
- 13. Calculating percentage-based element widths For each breakpoint, determine an “ideal” target size (For example 960px for desktop) Determine percentages based off this target size Margin and padding values are calculated as percentages of the containing block (the parent element)
- 14. It’s not always going to be this hard Flexbox is coming! (http://www.w3.org/TR/css3-flexbox/) Other layout modules are being designed with mobile in mind Grid template, CSS Regions, Multi-column Layout, etc. (check out www.w3.org/Style/CSS/current-work.en.html for more info)
- 15. Using Media Queries CSS Media Queries allow you to control the application of styles based on the presence or absence of specific media features @media only screen and (max-‐width:480px) { ... } like viewport width!
- 16. Media Query syntax link rel="stylesheet" href="desktop.css" media="[not | only ] screen [and] (expression)" or @media [not | only ] screen [and] (expression) { } The keywords “not”, “only”, and “and” can be used to filter results, while expressions can be used to check for specific media features
- 17. Media Query syntax Media Features width* color* height* color-‐index* device-‐width* monochrome* device-‐height* resolution* orientation scan aspect-‐ratio* grid device-‐aspect-‐ratio* *accepts “min-” and “max-” prefixes
- 18. Meta Viewport tags Meta viewport tags can be combined with media queries to help ensure consistent experiences. CSS @viewport may eventually replace <meta name="viewport" content="width=device-‐width, initial-‐scale=1.0"> for example, this meta viewport sets the viewport to the device width and sets the initial zoom to 100%.
- 19. Strategies for using media queries Use inline syntax to reduce http requests Use width instead of device-width to target viewports Combine them with global styles for more maintainable code
- 20. Responsive Images Live Wo r m s Yeah, that.
- 21. Responsive Image challenges Desktop and mobile layouts usually require different image sizes Larger images add unnecessary overhead for mobile devices Screen density differences now allow the use of higher resolution images for some screens
- 22. Responsive Image techniques Use Background Images Through media queries, you can change image requests based on layout (Android 2.3 > still downloads ALL background-images) Larger decorative background images will clip if inside a fluid parent element Since no img element is used, images are non-semantic
- 23. Responsive Image techniques Make images fluid By setting width or max-width to percentage values, you can make images scale along with layout Still forces mobile devices to download large image sizes Image scaling can harm performance on mobile devices
- 24. Responsive Image techniques Use javascript to replace images Use javascript to determine which image is appropriate and then serve that image Multiple libraries have been created to enable this Can be tricky to ensure that only the image you want is downloaded If the technique requires you to remove the src attribute, your code become non-semantic
- 25. WHATWG to the rescue?! Recently, the WHATWG added the srcset attribute to the img tag This allows you to pass a comma separated list of multiple images and the conditions (width, height, resolution) that trigger their use Current unsupported Ignored the recommendation of the Working Group that proposed the picture element Is a big mess
- 26. Managing resources Why the hell isn’t this faster?!! Mobile devices deal with a combination of varying bandwidth and latency issues. You can ease your users pain by managing resources wisely.
- 27. Fewer server requests are better Condense multiple CSS and javascript files into single files when possible Minify scripts and files and use gzip compression to reduce file size Use CSS Sprites to limit image requests Use data-URLs in place of images when feasible In many instances CSS can be used in place of images
- 28. Only load resources if you need them Often, external scripts won’t be used on pages or on mobile devices at all Use asynchronous loading and detection scripts to serve only what each context needs There are multiple options available, but Modernizr 2.0 combines feature detection, media query testing, and yepnope.js to give you a robust set of options (http://modernizr.com)
- 29. Take advantage of mobile capabilities Embrace the Possibilities
- 30. Mobile device capabilities Geolocation Orientation / Accelerometers SMS Touch / Gesture support Audio & Video capture OMG! THEY CAN MAKE PHONE CALLS (some of them) Thinking about these capabilities during the planning process can result in more fulfilling user experiences
- 31. HTML5 and standards can help APIs for Geolocation, Touch Events, and SMS can help make it easy to add these capabilities to your site HTML5 form elements are well supported in mobile browsers HTML5 audio/video formats are widely supported
- 32. Testing...testing...testing Always test your site on as many browsers and devices as you can Emulators are good, but actual devices are better Pay as close attention to loading times and server requests as you do page layout or functionality
- 33. Testing...testing...testing Web Inspector Remote (weinre) | remote debugging http://people.apache.org/~pmuellr/weinre/ Webkit Remote Debugging http://www.webkit.org/blog/1620/webkit-remote-debugging/ Blaze mobile testing | Mobile performance testing http://www.blaze.io/mobile
- 34. A few things to remember.... Make mobile an equal partner when planning and designing your sites. Use standards-compliant, clean, accessible code as the foundation for all your sites. Create responsive designs that work across multiple screens Mange resources carefully and limit server requests Take advantage of device capabilities to enhance user experiences
- 35. THANK YOU james williamson | lynda.com jwilliamson@lynda.com @jameswillweb on the Twitter www.simpleprimate.com