One of the buzzwords these days in web development is “responsive design.” According to Mashable, this is supposedly the Year of Responsive Web Design. Simply put, a responsive website scales to fit the device it is displayed on. If you grab the bottom right corner of your browser window and drag to the left, you’ll see how this blog scales to fit multiple devices. Pretty rad isn’t it? Now, this technology isn’t necessarily new, but now more than ever, it’s becoming the way of the web. Check out the examples below (both good and not so good) and play around with resizing the window.
Responsive design is one of several solutions aimed at addressing a new design methodology — the mobile first methodology. With more and more users now getting their internet content served up on their mobile devices, many designers are creating websites with the mobile layout in mind first, and then scaling up for tablets and desktops.
From a design perspective, responsive sites tend to be relatively simplified compared to standard websites. Many responsive websites tend to look alike when you strip away the UI finish. Simplified navigations that run across the top and 3 column grid layouts are super common. This is a necessary result of a responsive framework, where every element of a site needs to expand gracefully as it is scaled up from mobile. Essentially, designers have to create one column websites that are usable, which is a pretty fun design challenge.
Although responsive websites involve a nifty bit of coding, it may not be the solution for everyone. From what I’ve seen on the web, certain types of websites and industries are more conducive to responsive design. It works extremely well for creative agency and freelance designer websites. They are super for portfolio websites. They work great for blogs too. They are not so great for merchant or media-rich websites. Sites like Amazon and Youtube serve up a completely separate mobile site from their desktop brethren (a mobile solution, but not necessarily a mobile-first solution).
I’m a believer in responsive design, despite its drawbacks. But I also believe it’s not the only mobile solution. Given that, I’ve taken the time to learn it and implement it (if anyone at SEP needs to know more about it, you know where to find me). It has changed the way I think about coding websites (tricky at first to get your head around coding 3 or more layouts in one css file). The future SEP website redesign will most likely be responsive to deliver a rich mobile experience.
We have yet to see if 2013 will take responsive web design into ubiquity. Many big websites and industries have yet to embrace any mobile solution, let alone responsive web design. In the meantime, we can google responsive web design, or RWD, and see many examples of it in action. A favorite of mine is awwwards.com (for web design inspiration). And if you want to play around with coding a responsive site, you can check out the Initializr webpage, which happens to be…you guessed it, responsive.
