25 Responsive Design Sites and counting

Fifteen months ago Schoolyard launched it’s first responsive design website, and last week we launched responsive website number twenty-five. We wrote the following blog upon launching the first, and as we enter a new year where we will launch perhaps 40 more responsive websites, we think it’s worth a read. If you’ve not heard of responsive design, then read on, and if you’re not yet convinced that multiple-sites and apps for different devices will soon be a thing of the past, then perhaps these words will begin to sway your point of view. Jeffrey Zeldman describes Responsive Design as follows: Our understanding of “responsive design” should be broadened to cover any approach that delivers elegant visual experiences regardless of the size of the user’s display and the limitations or capabilities of the device.

The phrase was formally defined by Ethan Marcotte in May 2010, and codified in his 2011 book of the same title http://bit.ly/r1sYjQ. The argument is for designers to create a single design theme that anticipates the capabilities of the device on which the site is being displayed, and adjusts formatting to accommodate those capabilities—as an alternative to creating separate themes for different devices. In short: create one design that displays legibly on all devices. The alternative point of view is that a one-size-fits-all design theme cannot address the differing user interface requirements of an array of devices: people use a Blackberry and a desktop very differently, and we should design separately for them. One comment on Zeldman’s recent blog post http://bit.ly/r8K6lS appeals to the web community not to descend into a “tastes great; less filling” debate, and simply embrace this direction. As an aside, it is remarkable how often the web cognoscenti refer to beer in their ongoing dialogue. A recent post presenting concerns about responsive design links from here:  http://bit.ly/q7jVRH. Our view is that most, if not all of the once-valid concerns raised here have already been addressed.

Jared Ponchot, a friend of ours at Lullabot, has posted a very well-informed piece on the topic http://bit.ly/qLtSQj that anyone interested in web design in the independent school community would do well to read; for one thing, it’s a lot shorter than Ethan’s book! (although in truth, if you’re directly involved with your school’s website you would do well to read the book too.) Jared offers a concise history of the responsive design movement, and describes solutions for addressing some of the issues it presents: media queries, fluid grids, and one that we have aggressively embraced: “Progressive Enhancement.” In lay terms, Progressive Enhancement refers to an approach where the designer starts at the lower end of the spectrum working increasingly upward, so devices with lower capabilities (i.e. smaller, older smart phones) do not have to wait for content to be degraded in order to display.

Fifteen months into responsive design at Schoolyard we believe our sites meet the standard of elegance at each level, as described by Zeldman, but of course this is as subjective as the word elegance itself. Look at our latest site, for Cambridge Montessori School on a variety of devices—or simply open a browser window and then slowly pull it narrower to where it is the width of an iPad, and then the width of a phone—and you’ll see what all the fuss is about. With more and more school families accessing information via mobile devices, we believe schools will increasingly turn to responsive design for their websites. The new responsive website for Cambridge Montessori School: http://bit.ly/ZOXMoB