03/20/2013 - No Comments!

Responsive Web Design Bootcamp, Notes

In his webcast Responsive Web Design (RWD) Bootcamp hosted by O'Reilly Books, Jonathan Stark introduces the core concepts behind RWD and his recommended best practices for getting started in this evolving movement. Jonathan has authored three O'Reilly books including Building Android Apps with HTML, CSS & JavaScript & Building iPhone Apps with HTML, CSS & JavaScript.

Here are my notes from his webcast:

Think content, not container

  • Web designers initially addressed the abundance of emerging mobile browsers with "m." sites providing specific mobile experiences.
  • This caused various problems, one being link sharing. Even if a user accesses from a certain device, doesn't mean who they share it with will be on the same device.
  • Think of your content as your product, not the website itself on a desktop browser. That is just one experience of your content. Do not think about the containers that users may be viewing your content within, just the content itself.
  • Don't force users into an app when they are trying to access your content.
  • Download our app! messages become very frustrating very quickly to the user. Especially a power user wanting to digest more than the average bear.
  • Separate "m.", "t.", etc versions of your website are not scalable solutions with today's ever mushrooming variety of devices.
  • Drop your website's chrome. As a designer, focus on creating a scalable system, not just a pretty interface.
  • Provide core content to those users trying to access it. Fit it to whatever the user's device is accessing from.
  • Google has endorsed RWD as their preferred way to index your site's Search Engine Optimization (SEO).
  • Radical device fragmentation among devices. The gap is only widening. All sorts of input methods, physical sizes, etc.
  • As a designer, you will have no clue what your canvas looks like when beginning a new design. You aren't designing for a certain device. Can't just open up a 1000px canvas in Photoshop and start deciding where the navbar is, sidebar goes, etc.
  • You must think of your content as product. The website itself is not the product, it is just one experience of your content. Think in units of content, not containers. Don't build pages, build systems of elements.

Progressive Enhancement

  • Always start small with a RWD site. It is much easier to add things than it is to strip things away later in the process. Especially so when multiple stakeholders are involved.
  • Design from the content out, not from the canvas in.
  • Some designs are very difficult to implement using RWD. Designers have a really hard time breaking the canvas-first habit. However, Once you make the switch, you won't want to go back. Overall it is a much better approach. Jonathan likens it to the switch from writing websites with tables to using pure CSS some years back.

Emerging Responsive Design Patterns

  • Pattern exists to use a grid system that snaps to 1 single column once the screen width is a certain # of pixels.
  • Use ems and percentages as your primary units of measurement. Because they are relative. At 100% zoom, 1em correlates to 16px on most browsers. Don't use pixels because users can zoom their browser, and break all of your assumptions. Many users use the zoom. Many devices use zoom as a default setting, like apple TV, to compensate for users sitting further away on their couches.
  • Doesn't define border widths with relative units. Looks clunky when scaled up, if it's meant to be a subtle, 1 or 2 pixel look. A 1% border can get huge quickly when user fiddles with zoom settings.
  • Your base, mobile styles should be outside of any media queries. This allows for progressive enhancement. Users coming on some old, outdated blackberry device will still be served the default, mobile optimized experience.

Media Query Best Practices

  • @2x image replacement using a pixel density media query. You could put the @2x images in for everything, but then you'd be downloading images that are much larger than they need to be for devices that don't need them.. Remember, progressive enhancement is key.
  • Q&A Question: Do all images load on mobile devices, regardless of media queries? No. Most browsers are smart enough to only load the last defined image in your CSS. You do actually get the bandwidth savings by using @2x background images within a media query.
  • Editorial/content images should expand and contract while maintaining aspect ratio on your RWD site. Use width:100%;, inherits the width of its parent container. Browsers are smart enough to generate the correct height values on the fly.
  • Videos tend to have more trouble with aspect ratio. You have to set both the width and the height here. Recommends a library called fitvids.js. It calculates the height based on the width and fixes this issue for you.
  • Think about line lengths when defining your responsive breakpoints. Resize your window until it looks bad, put a breakpoint, resize browser until it looks bad, add breakpoint, repeat.
  • RWD is very typography driven. It's about enhancing your content's legibility across any and all devices.
  • Media queries cascade. This is another reason it's easier to start small and build up your styles with media queries; instead of trying to drill down your site and override styles. Easier to add CSS than to subtract it.

In Summary

This presentation was more of an overview than I personally hoped it would be, but quite motivational nonetheless. I was especially struck by the idea of thinking of content as your product, not the container it will be experienced in. In an ongoing project at work, I'm building up a system of elements within a style guide for the site's content. It's designed to adapt to the any container it may be opened in, which makes me think I'm headed in the right direction! Looking forward to more from Jonathan.

Jonathan can be found on twitter @jonathanstark.