“Your site is out of date!” Let’s be honest, you hope I’m not talking to you. You’re thinking to yourself “Nah, we’ve been constantly tweaking it since it launched 2 years ago.” Even if that is true or it only launched a year and a half ago, is that still fresh enough? Start thinking of how long ago the wire-framing and design process started before that? A 2 year life span for a website design doesn’t seem that old, but consider what has happened in the past two years.
Back in February 2010, desktop browsing accounted for 98.14% of device browsing. Mobile + tablet browsing was in its infancy but it hadn’t quite made a strong presence at 1.65%. Most people were fairly content doing the majority of their browsing on a desktop or zooming and pinching to look at sites on their (i)phone. Fast-forward 2 months to April 2010 and the unveiling of the original iPad. Labeled by most people as a game-changer, people could now browse (most of) the web from anywhere they went on a much larger screen than before. Not long after, tablets became the focus of competitors trying to get a slice of the market. As more tablets emerged, their technologies trickled down and more advanced phones followed. All of this meant that more and more people were getting access to full websites on the go.
In less than 2 years mobile + tablet browsing shot up from 1.56% to 8.77%. In the past 3 months alone, mobile browsing has seen an average growth of 1.08%. Desktop browsing is suffering the hit, dropping to 90.84% at the end of January 2012. Click here to see a more detailed version of these numbers. Stay with me, I’m slowly getting to my point.
Sites today are being looked at on devices and in places designers weren’t even considering two years ago. Designs that tried so hard to get that no-scroll look on the homepage bow to the dimensions many people are using now. Elements that were ‘prominent enough’ or even ‘subtle enough’ before are now lost on a smaller screen. Where does that sidebar content go when the user zooms in to read the main content? And what about your ad placement? Nobody wants to pay the same amount for an ad placement that isn’t going to be seen nearly as much. There’s obviously a lot to consider and thankfully some good options out there.
Responsive Web Design
Responsive Web Design is an increasingly popular choice. Hell, even if you don’t think it fits for your needs, at least know what it is so you can throw that term out there to sound hip. Seriously though, its popularity is based on its flexibility. It centers around framing out your design based on how it will look and shift when the design is displayed on different dimensions. One of the most popular examples is The Boston Globe. Open it up in your browser, then drag the corner of your browser in and watch how the columns resize automatically. They ultimately collapse under each other as the viewport gets smaller. A lot of planning goes into this method as you must decide which content shifts around so your most important items are always the most prominent. When done right you get an extremely flexible solution that keeps the design integrity on multiple devices. There are lots of people talking about this now but the one I’ll mention is Ethan Marcotte since he was the first to introduce me to it and one of the key figures in The Boston Globe redesign.
The thought of designing your site centered around the mobile experience first is another way to ensure your site is effective for the mobile trend. Luke Wroblewski has been talking about this since 2009 and the idea of starting with the mobile site and then progressively enhance to devices with larger screens is gaining a lot of traction lately. According to Luke, “Mobile devices require software development teams to focus on only the most important data and actions in an application… So when a team designs mobile first, the end result is an experience focused on the key tasks users want to accomplish without the extraneous detours and general interface debris that litter today’s desktop-accessed Web sites. That’s good user experience and good for business.” Cloud Four has another nice summary of things that need to be taken into consideration here.
I’m confused, but in a good way
So now you’re cursing me because you went from thinking your site was modern, listening to why it isn’t, getting presented with two fantastic options, and now you’re left wondering which is best for you. While the two approaches seem like a complete contrast of direction, they’re really quite similar in their objectives and can actually be used together. Brad Frost shows us how to create a mobile-first responsive web design. The main objectives are defining the core pieces of your site and making sure they are prominent on any screen, presenting the user with a dynamic yet consistent brand experience and creating a site that is flexible enough to adapt with future screen variations. In other words, setting your site up so you’re not sitting here in 2 years listening to me tell you how you need to adapt your site again.