Are you reading this on your computer? Cool, me too–well, writing I mean. The Cuberis site looks great to me, don’t you think? Oh wait, you’re reading this on your phone? The site still looks pretty good, though, I’m sure. I’m sorry, you said you’re reading this on your tablet? Are you holding it horizontally or vertically? Does the site still look okay? Yes, yes it does – thanks to Responsive Design.
Defining Responsive Design
Responsive design is ensuring a website’s content and experience is optimized for the different ways we interact with different devices. We’ve designed the Cuberis site so that its content adapts to the device you’re using. Things move and rearrange to optimize your viewing experience. You’re looking at the same content, just presented in a way that makes sense for how you’re accessing it. (If you haven’t yet, pull out another device and load up this blog post. You’ll see what I mean.)
Responsive design really began gaining ground in 2012—the first prominent site I’m aware of that featured it was the Boston Globe, and that site is still a hallmark. If your site was built before or around 2012, I’d bet my bottom dollar that if you pull it up on your phone, you won’t have the sort of optimized experience that you find on the Boston Globe site or here on our site. You’ll likely see a zoomed out version of the same layout you’d see on your desktop. This is obviously less than ideal—text is hard to read and the layout probably doesn’t make sense for the screen size. So much web traffic nowadays comes from mobile users, it’s a big deal when your site doesn’t look great. In fact, 79% of people say they will go back to search and try to find another site to meet their needs after visiting a site not optimized for mobile.
In our designer Jayson’s words:
Though information hierarchy is important in design for the web (and design in general), it becomes absolutely critical when designing for mobile devices. The portrait view of mobile devices forces content to stack vertically and as a result, sites tend to become very long. A well-designed mobile approach is one that rethinks the nature of information access, truncating info where appropriate, and restructuring the site in a way that holds true to the original intent, but streamlines the user experience.
Implementing Responsive Design for The Sutherland
We recently completed a responsive overhaul for The Sutherland’s website. The site was built in 2011 and was designed statically. It looked great on a computer, but not so much on a tablet or smartphone. Our project was to take the existing site and make it responsive. The goal was to change as little code—and therefore design—as possible, but to also let the content on the site adjust to fit comfortably on smaller screens.
The first thing Jayson and I did was pour some coffee and figure out how we wanted the site’s content to transition to mobile screens. Because the layout of the site is relatively simple, we only needed one breakpoint. For all practical purposes if you’re looking at the site on a portrait-oriented tablet device or anything smaller, you’ll see the condensed menu and a single-column layout, and on anything larger, you’ll see the site in its original state.
One of the cooler things we did was our treatment of the hamburger menu.
Here’s Jayson’s explanation of hamburger menus:
The hamburger menu is a perfect example of responsive design in action. The hamburger is a toggle that hides and shows the menu navigation. This frees up valuable real estate on all pages. Though the navigation is critical to the user experience, the user won’t bother navigating through a site if he or she has no idea what the site is about. Minimizing the menu allows for more above-the-fold real estate, giving the user a better sense of place. In the case of The Sutherland homepage, we used the hamburger to hide the navigation items, allowing the wonderful photography of The Sutherland to shine. Tapping the hamburger reveals an elegant, centered menu.
From a design standpoint, hamburger menus—much like hamburgers themselves, now that I think about it—often feel chunky and heavy. This works for sites utilizing flat design, but it wouldn’t fit into the Sutherland’s aesthetic. To make the hamburger work with The Sutherland’s branding, we mirrored the double lines present in the site’s borders. We also gave it a nice little transition between open and closed states. It’s unconventional, but it makes a lot of sense paired with the rest of the site.
Responsive Design is Design with the future in mind.
When The Sutherland’s site was originally built, we didn’t know that in a few years people would be looking at it on their phones – back then, phones were for, y’know, calls. I don’t know how people will be looking at sites in 2017, but our design and development philosophy is to plan for anything. A perfect example of this is the recent release of the iPhone 6 and 6 Plus. A year ago if you’d told me there’d be an iPhone with a 414x738px screen, I’d call you crazy. But that’s a reality now, and I’ll be a monkey’s uncle if my sites won’t look good on it. And a year from now when there’s a new device out, my sites will look good on that, too.
Responsive Design isn’t necessarily a complete redesign.
Responsive overhauls are totally feasible for businesses who are either happy with their site’s current design, or who don’t have the resources for a complete redesign. There are plenty of frameworks available to developers, such as Bootstrap or Foundation, that make it quick and easy to build (or rebuild) sites that you know will look great on any device. We have the tools to make the transition to responsive design painless and affordable for anyone.
Your site probably looks great on your computer, and your desktop-based visitors are probably very impressed with you. But it’s 2014, and you can’t forget about your mobile-based viewers–both current and future. The mobile web is the future, and don’t you think those users deserve just as amazing of an experience as anyone else?