C&B Notes

Web Design for the Future

The explosive growth of mobile devices over the last decade has led to a proliferation of apps and mobile sites that attempt to legibly present information on a small screen.  The best way to present a consistent user experience remains the web browser, and new responsive design approaches promise to allow developers to show one face to the world.  The Verge recently launched a redesigned website that allows it to kill both its app and its mobile site.

Browsing the Web on your phone hasn’t always been what it is today.  Even browsing on the first iPhone, one of the first phones with a real Web browser, was still pretty terrible.  Browsing on a small screen back then required constant tapping to zoom in on content optimized for much larger screens.  Images took forever to load over the iPhone’s slow EDGE network connection, and then there was all that Flash content.  That didn’t load at all.  And this was the iPhone; browsing the Web using Blackberry or other OSes crippled mobile browsers.  It was distinctly worse.  It wasn’t necessarily the devices’ fault, though mobile browsers did, and in many cases still do, lag well behind their desktop brethren.  Most of the problem was the fault of Web developers.  The Web is inherently flexible, but developers confined it by optimizing sites for large desktop monitors.

To address this, a lot of sites started building a second site.  It sounds crazy now, but just a few years ago the going solution for handling new devices like the Blackberry, the then-new iPhone, and some of the first Android phones was to use server-side device detection scripts and redirect users to a dedicated site for mobile devices, typically a URL like m.domain.com.  These dedicated mobile URLs — often referred to as M-dot sites — typically lacked many features found on their “real” desktop counterparts.  Often, sites didn’t even redirect properly, leaving you on the homepage when you wanted a specific article.  M-dot websites are a fine example of developers encountering a problem and figuring out a way to make it even worse.  Luckily for us, most Web developers did not jump on the M-dot bandwagon because something much better soon came along…

* * * * *

In 2010, Web developer Ethan Marcotte wrote a little article about something he called Responsive Web Design.  Marcotte suggested that with the proliferation of mobile devices and the pain of building dedicated M-dot sites, it might make more sense to embrace the inherently fluid nature of the Web. Instead, he argued, let’s build websites that were flexible.  Marcotte envisioned sites that used relative widths to fit any screen and worked well no matter what device was accessing it.

Marcotte’s vision gave developers a way to build sites that flex and rearrange their content based on the size and characteristics of the device in your hand.  And while responsive Web design wasn’t perhaps a panacea, it was pretty close.  Responsive design started when a few more prominent developers made their personal sites responsive, but it quickly took off when Marcotte and the developers at the Filament Group redesigned the Boston Globe website to make it responsive.  The Globe redesign showed that responsive design worked for more than developer portfolios and blogs.  The Globe redesign showed that responsive design was the way of the future.