Breaking Development: 20MB Responsive Websites

by April 9, 2013

In his presentation at Breaking Development in Orlando FL Mat Marquis walked through modern techniques for making responsive Web sites performant. Here's my notes from his talk on Twenty Megabyte Responsive Websites Are the Future.

  • Responsive Web design has been asked to solve many of the hard problems on the Web today. But it is just a technique that combines a flexible grid, fluid media, and media queries. It has great uses but it will not solve every issue we face today.
  • One of the most common critiques against responsive Web design is that it creates large (file size) Web sites, thereby slowing Web pages down. But we can make responsive sites perform well, we just have to the work to make it possible.
  • Flexible grids are perhaps the most exciting part of responsive Web design. Use target divided by context to set up a proportional grid the covers the unknown unknowns. A fluid grid fills in the gaps in various screen sizes and allows your content to flow into any sized container.
  • Media queries give you the ability to adjust that layout based on the capabilities of a screen. There is no default recommended set of breakpoints. Don't use breakpoints based on popular devices. This list is always changing and you'll paint yourself into a corner.
  • Your first breakpoint is no breakpoint. After you hit a larger screen size, your layouts can become more complex through additional styles.
  • Use ems for your breakpoints instead of pixels. This helps you account for varying browser zoom levels.
  • Flexible images and media can be enabled by setting max-width of images to 100% or media query adjustments on elements like video.
  • These three techniques can be used to create a responsive Web site but is it a responsible Web site?

Progressive Enhancement

  • Universal access is the fundamental goal of the Web. We need to stop creating the Web just for the best circumstances: high-end phones, fast connections, the latest software.
  • Progressive enhancement starts with the baseline mark-up the defines the structure of information and content.
  • Keeping our functionality independent of Javascript improves performance. All your users are non-Javascript users while a page is downloading.
  • Load the essential parts of a page first. Then load the rest of non-essential elements in the background after all the core content has loaded.
  • Ajax Include pattern: rather than hiding large screen content with display:none, start with a simple link (and data attributes) to allow people to access content on small screens through an action. Then on larger screens load in the additional content in the background automatically.
  • Provide a basic stylesheet to all browsers then an enhanced stylesheet to modern browsers and Internet Explorer.
  • The same approach can work for Javascript. Load a simple set of basic Javascript to check the capabilities of the browser then load additional code as appropriate. The same test can apply: understands media queries or is IE.
  • Make sure you minify and gzip all these files. You can automate this process along with other tasks using a service like Grunt. You can concatenate files on the server to reduce requests.
  • With all this optimization work, you'll have a much more performant site... but you'll still have to manage images.

Images

  • A progressive enhancement approach can be applied to images as well: start with a small image, then load larger images if the screen is large enough for it.
  • Browser pre-fetching of images broke this solution and all other hacks to tackle it didn't work. So a working group was put together to develop a standard to solve responsive images in the browser.
  • The picture element and srcset were both proposed and are working their way through the standards process. The two options each have their benefits and actually can complement each other.
  • A few weeks ago the picture element hit first working draft. Implementors are starting to develop this and discovering questions. A WebKit merge is almost ready.
  • This is a developer driven standards process, which is a great effort but we need to get things done.
  • To make use of the picture element today, you can use the picture polyfill for a DIV-based solution.
  • Focus on improving the techniques you are using instead of scrambling to react to new things. Building the right way allows you to create more future friendly solutions that work well on today's and tomorrow's devices.