Breaking Development: Mobile First Responsive Design

by April 8, 2013

In his presentation at Breaking Development in Orlando FL Jason Grigsby walked through the importance of performance in multi-device designs and techniques for helping you achieve it . Here's my notes from his talk on Mobile First Responsive Design:

  • The Web has always been a balancing act of competing priorities: SEO, marketing, performance, and now device diversity. To manage diversity, many people are jumping into responsive web design solutions.
  • But can a one size fit all solution (like responsive web design) compete with a tailored solution (like separate mobile sites)? Do we need unique solutions for search engine optimization, context, advertising, and performance?
  • Studies show that people expect pages to load in two seconds or less. Slow Websites are the main reason people abandon e-commerce Websites. People expect things to load faster on mobile.
  • If given the choice between optimizing for performance or optimizing for mobile design, performance should win out.
  • When early responsive designs came out, they were overly focused on layout design and not performance. Just looking at images, popular RWD implementations could save 80% of their file size on mobile.
  • An important part of the solution to RWD performance is mobile first responsive Web design. Yet looking at over a hundred responsive Web design, the majority were the same size on mobile as on the desktop. So most responsive sites are not being built mobile first. Instead a lot of responsive designs take desktop desktop sites and simply hide things using techniques like display: none.

Responsible Responsive Design

  • 1: Build mobile first responsive designs.
  • Mobile first responsive designs is a technical approach to responsive designs. Start with a baseline mobile experience and enhance with a media query cascade that starts from small screens and adapts design as screens get bigger.
  • With this approach, older versions of IE will be served the simple mobile layout. To manage Internet Explorer, you can use IE conditional comments or include a polyfill that adds media query support to older versions of IE.
  • Mobile first design doesn’t mean starting from scratch. Its a useful process even if you have an existing desktop site. Start by asking what would the mobile version of this site or app look like? You’ll determine what priorities matter on key screens and flows. By the time you’re done, you’ll be likely to able to make the desktop version better based on what you learned designing for mobile.
  • 2: Keep CSS images in their place.
  • Images that are hidden using display:none are still downloaded by Web browsers. To ensure images don’t get downloaded, scope them inside media queries. Setting display:none on a parent element does not download images.
  • 3: Conditionally load JAvascript based on capabilities
  • The Ajax Include pattern allows you to serve simple default elements to small screens and then enhance as screen size increases. Matchmedia() allows you to use Javascript to test whether a media query applies. Use this test to load the appropriate Javascript needed for a device.
  • 4: Deliver different sized images to different screen sizes.
  • Our image tags only include one source attribute but there are two reasons we want to serve different sources: resolution switching and art direction.
  • Resolution switching: it doesn’t make sense to send the same resolution image to all screen sizes. We want different versions and sources so each device can load the most appropriate assets.
  • Art direction: resizing images only goes so far. We often want to crop images differently, adjust the placement of images and type, or display images at varying levels of detail.
  • Things are moving forward with a standards process for solving these responsive image use cases. In the meantime, you can use the picturefill Javascript library to simulate the picture element.
  • 5: Handle high resolution images carefully. The difference between a Blackberry Curve image and a MacBook Pro Retina display is 1,433% percent bigger in file size. In memory that is 3,222% bigger.
  • If you use Javascript to swap out high resolution images, browsers are likely to download both the high resolution and standard resolution image.
  • The image-set proposed spec allows the browser to make decisions about which image to serve based on screen capabilities and (hopefully soon) bandwidth considerations.

Image Solutions for the Web

  • What would an ideal image solution look like? Images are 60% of file size on Web pages so if we could solve them, we’d be doing good.
  • Use vector-based images or icon fonts wherever you can. IcoMoon is a tool that can help you create custom icon fonts. Only use the characters you need in an icon font.
  • Media queries can be used within SVG images. These media queries are dependent on the size of the image window not the screen. So an SVG image can be modified at several different sizes. This is very exciting.
  • Encourage people to upload the highest quality image possible.
  • Provide an automatic image resizing and compression service. Allow images to be resized to any size using URL parameters.
  • “Save for the Web” should be a thing of the past. Instead centralize the process in a service.
  • Provide a way to override resized images for art direction needs
  • Integrate image compression best practices
  • Bonus: detect support for WebP image format and use it. WebP files are 25%-34% smaller compared to JPEG file size.
  • Plan for the fact that whatever you implement will be depreciated. Make it easy to change as new solutions emerge for images on the Web.
  • Its unlikely a responsive design will ever be as fast as something specifically tailored for one device. Responsive design is about adapting to the unknown. If we do the extra work to make mobile first responsive designs fast, we can get the benefit of reaching many different devices with a performant solution.