This article was first and in full length published on Webdesigner Depot.
In August 2011 7.12% of all website hits worldwide came from a handheld mobile device. By August 2012, that figure had risen to 11.78% (Source). We can literally watch as tablets and smartphones become our default choice for connecting to the internet. People have long gotten used to the web as an essential part of their lives, not willing to live another day, even another moment without being constantly connected.
This shift away from desktop to mobile requires web designers to refocus. Not necessarily away from desktop design, but certainly towards mobile design. There are several ways to approach a mobile web presence, such as a separate mobile site, or a mobile app. The most recent and increasingly popular approach is responsive web design.
Responsive design solves such a huge problem for web designers that it’s easy to lose sight of the fact that it throws up problems of its own. In this article I’d like to discuss both the opportunities and challenges that come with responsive design. I will shed some light on this new way of thinking and help you to make an informed choice for your next project.
Opportunities presented by responsive web design
Responsive web design is all about keeping it simple. The idea is to create one website to fit literally all screen sizes, be it a desktop or laptop screen, tablet or smartphone in landscape or portrait mode. Responsive websites are designed with a flexible grid. They use media queries to determine the screen size for every individual site visit and rescale the content accordingly.
Let’s take a look at some of the advantages that come with a responsive design approach.
1. Low maintenance
With a responsive design you only need to maintain one website. While the layout changes, the content stays the same across different devices. You can simultaneously update content or fix bugs for all devices.
For example, for news sites such as breakingnews.com this is of great advantage. Fast-changing content and frequent updates require very high maintenance. A responsive design not only saves time, but also money.
You can focus on one single website and put all your resources into the optimization and maintenance of that site. No more need to prioritize or handle different versions of your site separately.
2. Brand consistency
With one website that works on both desktop and mobile screens, you will find it much easier to keep up a consistent brand identity. No more style guides that need to be communicated between multiple parties, such as different agencies for the desktop and mobile versions of your site.
The look and feel of a responsive website will be consistent across all screen sizes. spigotdesign.com maintains a unique branding experience on all devices. This makes it very easy for people to recognize the website, no matter where and how they visit.
Responsive web design is highly user friendly. Not only can your visitors better relate to your brand if they recognize your website on mobile, they also know better how to use it. A consistent style and consistent content is important because users don’t expect it to be different just because they use a different device.
An important aspect of good usability is to meet your user’s expectations. If you manage to do that, they will have less trouble navigating your website. smashingmagazine.com makes it very easy for their readers to navigate the site on all devices, keeping up a positive user experience. A good experience increases the chance of a repeat visit.
You can find even more advantages of responsive design in the original article on Webdesigner Depot.
Challenges presented by responsive web design
Responsive web design is a relatively new approach to mobile web design. Some say it’s only a trend, others say it is a new way of thinking. Personally, I believe within the framework of the rapidly and constantly changing web, everything can be considered a trend in some sense. Let’s not go into this too deep here. Rather, let’s take a look at the challenges that we need to overcome to build successful responsive websites.
1. Development time
Probably the most obvious minus point about building a responsive website is that it takes more time. Obviously, for a regular desktop site you need way less preparation time, less resources to build it, and also testing it requires less effort.
It usually takes longer to convert an existing website into a responsive one than to build one from scratch. If you are thinking about going mobile, and doing so by making your website responsive, don’t underestimate the work you will also have to put into your existing desktop version.
2. Different devices remain different
The idea that you can simply build one website that works equally well on any device is a myth. Sure, there is only one set of code and your website remains the same regarding content and structure, but different devices require a different way of thinking.
People will browse your website according to their very specific needs and goals, and not to mention their unique context of use.
Designers from choiceresponse.com have clearly prioritized their content for mobile use. While the desktop version can display a lot of content at once, for smaller screens you need to know exactly what matters.
Imagine, you are responsible for a public transportation website. One user might visit the desktop version, browsing patiently, hoping to find a special bargain for his weekend trip. At the same time, someone else might be checking the mobile version, hoping to find out which platform he should run to before his train leaves in less than a minute.
One website, two situations, and two completely different user scenarios. In order to create a great user experience for all your users, you need to consider that people will use different devices in different circumstances and with different goals.
3. Different devices offer different interactions
Your desktop version not only differs from the mobile version in a hypothetical, but also in a very practical way. Interaction that works just fine on one device may be irrelevant on another. That is mainly because the way we interact with desktop and mobile devices differ. While we use keyboard shortcuts and a very defined mouse pointer to navigate through a website on one device, we have nothing more than our fingers on the other.
While the desktop version of forefathersgroup.com includes several links with a hover-over effect, the designer used these effects only for content that didn’t make it to the mobile version. Again the prioritising of content is very important in responsive design.
You can find even more challanges of responsive design in the original article on Webdesigner Depot.
Things to consider
Whether to go responsive is ultimately down to you, but if you do decide to give it a try, here are a couple of things you should consider before you get started.
Preparation is key
Thorough responsive web design starts long before your first photoshop mockup. Also long before your first wireframe. Good preparation is the key to successful design. The better you are prepared, the more time and money you will save in the end.
Since your website will vary on different devices, you need to have a clear picture in mind of how you want to structure your content for each of these devices. The smaller the device gets, the more choices you have to make regarding the priority of your content.
Don’t reinvent the wheel
There are plenty of tools and resources online to help you develop a responsive site.
Don’t try and reinvent the wheel by creating a new approach. Learning from the mistakes of others will speed up your development time considerably.
Test, test, and test again
This is nothing new, and shouldn’t come as a surprise. Early and repetitive user testing is essential for any successful design, responsive or not.
The different behaviour and the challenge to design for both touch and regular screens at the same time will require some excessive testing. Start to test on all the devices you own. If everything works, borrow devices from friends and family and test those. Last but not least, visit an electrical store and try out your site on their devices.