Responsive Web Design
So, you’ve invested in a mobile site for your website and think you’re all set for the future?
Then you may want to think again.
Mobile-first remains an important trend with tablets & mobile phones, outselling the “ancient” desktop computer. However, this doesn’t mean that having a mobile website next to your regular site is necessarily the best solution. Whilst the size of phones & tablets keeps changing – not to mention the difference between portrait & landscape mode – a single site can’t scale properly to all of them. The solution: Responsive design.
With so many different screens, how can you make your website adjust to all of them? (Image Credit)
Responsive design in a nutshell
Responsive design, simply put, enables your website to fluidly adapt to different screen sizes. Responsive design makes websites adaptive across a wide range of devices that are used to browse the internet, such as of desktops, laptops, tablets and mobile phones. Before further explanation, let’s take a look at Starbuck’s responsive site:
You can easily check if a website is responsive by resizing your browser window. Looking at the Starbucks example you’ll notice that the content (text, photos) scale up or down according to the size of your window.
Basically, this means that this website can be viewed with any device (whether it’s a desktop, tablet or mobile phone) and will always make full use of the size of your screen. No matter how big or small the size of your screen is, the content is always optimized for the relevant screen resolution. This effectively eliminates unnecessary resizing, panning, and scrolling when visiting your favourite site with different devices.
Starbucks made sure that their site displays well on each device you might own. (Image Credit)
All of this is possible because of flexible layouts. Once hardly feasible for any website, they are now far easier to implement. An image on your website could easily “break” your site when resized in the past, these days images can be automatically adjusted, opening up an important door for responsive web design.
In another example, try resizing the Adobe web page, and notice how the images properly scale to the size of the window.
Adobe has made their site responsive as well, with stunning results.
Advantages of Responsive design
2014 is predicted by Morgan Stanley analysts to be the year that mobile overtakes desktop internet usage.
This is mainly due to the fact that developing worlds have increased access to cheap mobile phones and data plans, but also in the western world we continue to see the popularity of mobile devices increasing. This shift from desktop to mobile requires web designers to find a way to adjust websites to respond to all the different screen sizes out there.
Mobile users are increasing dramatically. (Image Credit)
Certain companies already have separate mobile sites. However, this requires (1) spending extra resources and manpower for the separate site and (2) doesn’t solve the problem for all the different devices out there. An additional problem is that if a site has a high rate of content change, it’ll take a lot of hours to make updates to these separate websites. With responsive design, you only need to design one single site – dynamic and fluid by nature – therefore adaptable for each different type of device.
Let’s take a closer look at the different pros.
Pro: You want to go mobile with your site? Google recommends using responsive design! Regardless of what you might think of Google, when they make a recommendation concerning web design, it’s usually a smart thing to listen.
Pro: You don’t need to manage multiple versions of your content for your desktop and mobile site, one set is all you need.
Pro: Since you don’t need to develop and build separate websites, you save time and money. Please bear in mind that this only applies if you start from scratch.
Pro: With a responsive site there’s no need to set up (server-side) redirects to get mobile and desktop users to the right website. Redirects can be difficult and require expertise in server software configuration.
Now this looks rather promising, doesn’t it? But wait, you might ask, are there any cons?
(From Street Fighter 1994)
Let’s go through them before we can draw any valid conclusions.
One website changing its layout in a fluid manner in response to all the different devices that people use to browse the web seems like an easy and most elegant solution. However, responsive design may not always respond adequately to certain objectives you’ve set for your website.
Let’s take a look at the cons shall we?
Con: Making changes to your website so it’ll become responsive can be an expensive venture. That is, because it requires to completely redevelop the front-end codebase of a website. Of course, creating separate websites for different devices isn’t necessarily cheap either.
Con: People sometimes use different devices for different goals. A responsive site can look good both on a desktop and mobile phone. Now imagine visiting an online store with your mobile phone, then you might only be interested in finding a certain product – as quickly as possible. Though responsive design will adjust the layout accordingly, you might still have a hard time finding the product since space is much more valuable on mobile and it’s therefore challenging to set priorities. A mobile-first approach could resolve this, but then your website might not be optimal when it´s being visited with a laptop for example.
Con: Device interaction differs when browsing the internet. With your desktop you will most likely use a mouse and keyboard. On a tablet or mobile phone most people will be using their fingers or a stylus. A responsive website can be optimized for these different types of interactions, but you can’t make any unique changes that only work for a specific type of interaction.
Responsive design and User Experience
There is already a lot of great content out there to discuss the technical and financial aspects of responsive design, however, we at Usabilla are more interested in the user experience issues that might come up with responsive design.
It is for this reason that we’ve set up a Usabilla Survey to find out what users think of several responsive websites. We’re curious to know if people find responsive design user friendly and how it affects their experience. Do people still find their way if the layout changes? Do people have other goals and does that affect how they use a site? Do all people prefer a different layout for mobile? Is there a difference when people visit a mobile version first or a desktop version?
Your help would be greatly appreciated, please let us know what you think.
The results will be published on the blog soon.
Usabilla could use your help.
Alternatives to Responsive Design
At this point you might be convinced that responsive design is the way to go for your website, but you might lack the money or manpower to realize it. It might be interesting to know that there’s a cheap alternative, that (for the untrained eye) nearly looks the same.
Take a look at the following site, and again try changing the size of the window if you’re on a desktop.
You will notice that the different elements rearrange themselves when you make the window smaller, as is the case with responsive design. It might surprise you that this site is an example of adaptive design instead.
Although Foodsense seems to be having a responsive design, it is in fact adaptive.(Image Credit)
Just like responsive, adaptive design is characterized by having defined layouts for different resolutions. However, with responsive the design within each layout is “liquid” and resizes the width of the elements relative to the changing window size. With adaptive, the design within each layout is “static” and therefore resizing the window doesn’t change it.
Also, adaptive design caters to today’s devices only and not to any new devices with different widths released tomorrow.
On the plus side, adaptive design is quicker and easier to implement and might therefore be a valid choice for some.
While responsive design certainly has its merits, not every (big) company is yet convinced of implementing it. Microsoft certainly has though, for their website is already completely responsive.
However, Apple, of which you would expect to implement such an elegant design technique the moment it became available certainly hasn’t.
No Apple for you.
In the end it all boils down to what your intentions are for your website. If you want to have one site that is accessible for all the different devices out there and will look good on each and every one of them, then responsive design might be right up your alley.
But if you want your site to behave differently when it’s being accessed with different devices, specialised to those devices, then it might be wiser to look into building separate websites instead.