Responding to Build Responsively

This past Monday and Tuesday I had the pleasure of attending the Build Responsively Workshop in Columbus, Ohio. Hosted by Sparkbox (@hearsparkbox), the workshop provided in-depth discussions of the web’s newest trend: responsive web design (“RWD”).

Responsive web design is not a passing fad. Hundreds of millions of mobiles devices of all shapes and sizes access the Internet everyday. Fixed-width websites must be shrunk, scrolled, and zoomed on small mobile screens, making for lousy mobile experiences. Responsive design addresses these issues by reshaping and resizing content to be ideally presented at any shape and size. Ultimately, content is king and should be the primary drive behind responsive design.

Ben Callahan, Rob Tarr, and Drew Clemens of Sparkbox presented various topics on RWD over the course of two days. What follows is a brief look at each section and some of my takeaways.

Day One: Monday

Responsive Web Design 101

This first session simply answered the question “what is responsive web design?” Ethan Marcotte’s famous definition came up right away: the use of fluid content, a flexible grid, and CSS 3 media queries to create a design that adapts (or responds) to its browser environment. We also addressed the advantages and disadvantages of Large Resolution First versus Small Resolution First design strategies. The general takeaway: proper responsive design is done small resolution first, designing for the most important content first and scaling up as more screen real-estate becomes available. This was fantastic review for me and a great introduction for anyone new to the topic.

Responsive Design & Planning

How does one start to design, plan, and implement a responsive design? It is not trivial when done properly. Designing at a fixed 960 pixels places constraints on developer and makes content secondary. A strong planning strategy is necessary to nail what content is most important early in the design process. A small resolution prototype can be created quickly and styled up into large-resolution formats. Collaboration between content, design, and development teams is critical throughout these early phases.

Getting a Good Start

Because RWD is a paradigm shift and not necessarily a technological shift, the majority of today’s development tools are fine for starting responsive design. Due to limitations imposed by older browsers and the cost of developing across multiple devices, some new tools can make responsive design easier.

  • Built-in browser inspector tools are a good start for examining and debugging media queries
  • Adobe Shadow is a relatively new product designed to mirror your site across devices for immediate testing
  • Sass is a CSS precompiler that comes highly recommended for writing media query-heavy stylesheets
  • Modernizr takes some of the pain out of supporting older browsers by providing HTML5/CSS3 functionality to unsupported browsers

There are many more tools available, of course, so feel free to email me at brandonbruno@computol.com to get a discussion started.

The Nitty Gritty

The down-and-dirty details of implementing responsive design took over our afternoon and dove into many topics. Of particular interest: challenges to responsive design. Images is the big one: should a 1MB image be pulled down to a mobile device with limited bandwidth? Of course not. How, then, do we serve the 50kb version? This is a problem with solutions of constant growth and maturation. 

One of my favorite (and most commonly used) bits from this session: the CSS3 box-sizing property that can really help designers keep a consistent design.

Ads were a close second challenge: when sold based on size and placement, how can ads gracefully scale down to mobile and still be worth their costs? There are no easy answers yet.

Day Two: Tuesday

Ask Ethan Marcotte

Bright and early, right at 9:00am, everyone at Build Responsively joined Ethan Marcotte via Skype to talk about responsive web design. Ethan is generally regarded as the grandfather of RWD, having written the first widely-read article on the concept and wrote a follow-up book.

In between some lighthearted jokes (and plenty of GIFs), Ethan proved to be very informative. I walked away with a few nuggets:

  • Media query breakpoints should be based on what works for content, not existing devices (i.e. 320px, 480px, 720px, etc.).
  • Content should always be accessible. If specific JavaScript or CSS is required to display content, your design has failed. Content should always be available even in no JS/CSS situations.
  • Responsive web design is a new paradigm and may not be easy to sell to customers or management. It is important to demonstrate the benefits of RWD.

Emerging Patterns

What new design patterns are emerging from the growing field of responsive web design? Menu design is important to consider: how can complex menus fold down in a responsive design and still be useful? Tables are interesting: how can tables present big data sets on small screens that is still relevant and useful to the user?

Most interesting were solutions to the responsive images issue. Picturefill is a pure-JavaScript solution that loads images based on comparisons to active media queries. sencha.io provides an image proxy service that inspects the source device, pulls your images, and serves the properly-resized images. Adaptive Images provides a local, PHP-based proxy system for serving responsive images similar to sencha.io.

Responsive Retrofitting

Turning an existing, well-established, and fixed-width design into a responsive design is no small feat. While it may be preferred to redevelop an existing design to be responsive from the ground up, this is not always possible. The task then becomes removing design from a large resolution base until a small resolution solution is reached.

One major pro to this approach: because this is generally done with subtractive CSS, existing code never has to be touched.

Because responsive design relies heavily on CSS, it is possible to retrofit a whole site or individual features of a site with just a new CSS file. Markup structure will most likely dictate the ease of this approach, however.

Responsive JavaScript

Most responsive behavior is defined by clean, solid markup and percentage-based styles. JavaScript can come into play to provide necessary functionality (menus) or to simplify responsive behavior. For example:

  • fittext.js can make text (think <h1>, for example) fit into a container and then scale it appropriately
  • respond.js attempts to provide max/min width media query support for older and incompatible browsers, but mainly IE 6, 7, and 8
  • eCSSential loads stylesheets based on the current valid media query and defers unnecessary files
  • Jasmine is a simple JavaScript testing framework with an easy syntax

Bonus points: Check out Responsive-Retrofitting, a Sparkbox-developed bookmarklet that allows certain website to become responsive. This script pulls down a CSS file based on the current site (try Apple’s site) and uses pre-determined responsive styles. This is really a playground for responsive developers.

What’s Next

Build Responsively closed with a quick summary of what the next step is for responsive web design at large. The Responsive Dip seems to be where we are, and I can agree with that sediment. We are in an awkward place right now. Wide browser support for RWD concepts isn’t 100%. Designing responsively isn’t always an easy process. Images and big data don’t always translate well to the small screen, both technically and logically.

We are at a crossroads though. We understand the problems and challenges that face us, and we know that we have to solve them in an increasingly mobile world. Mobile-first design is a big step in the right direction. Making sure content comes first and keeping it accessible - this is the future of responsive web design.

The Big Takeaway

If I had to pick my three biggest takeaways from the excellent Build Responsively workshop in Columbus, they would be:

  • Responsive web design is all about the priority of content. Content is everything.
  • Devices should not dictate the size and shape of the content. Content should respond to the size and shape of the environment (whether browser or device).
  • Proper, accessible responsive design is done mobile-first (or small resolution first) and scaled up as more space becomes available (using additive CSS) .

Sponsors

Because myself and everyone at Build Responsively benefited from our generous sponsors, I want to give one final shoutout to them. A Book Apart, Rosenfeld, Ais, Adobe, and of course GitHub, who sponsored the opening night party at Claddagh Irish Pub. A huge “thank you” goes out to all these companies. 

//Brandon