featured Design

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.
(Image Credit)

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.

Drawbacks

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.

Conclusion

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.

43 comments

  1. Rakesh sharma

    That gave an overall picture on responsive web design, But adaptive
    design does not look as promising however.

  2. JTech Communications

    This is an excellent primer on responsive design, we are a web development company and we have the capability to build responsive websites (our web site is responsive) and I very much agree that responsive isn’t always the answer. Responsive can be very expensive to build, and won’t necessarily improve your website that much today. The advantage in responsive design comes in its ability to deal with everything, so you won’t just be ready for the phones and tablets of today, but you will also be ready for whatever comes after them. And something else will definitely be coming.

    We wrote a blog about responsive design at https://www.jtechcommunications.com/blog/blog-detail-7 if you would like to read some of our UX designer’s thoughts on responsive design.

  3. Randy Lek

    Thank you!
    I enjoyed your blog post on responsive design as well, thank you for sharing.

  4. John Murphy

    Nice share. My bet will always go for responsive web design. This is the only way to make your website viewed from desktop, mobile or any other device such as tab.

  5. Responsive Web Design

    Use enjoy responsive design just because of its user friendly nature. Today we all know that everything is depending upon the responsive, so for your website if you use responsive web design it is the best option.

  6. Web Design Llanelli

    Responsive design is a key these days as the mobile and tablet users are increasing every day which means your site has to be user friendly.
    Thank you for sharing this!

  7. Web design Midlands

    Great… keep up the nice work!

  8. Jasa Pembuatan Website

    Frankly, responsive design is a new item. At least my place. Some of my clients do not really care about this one feature.

    But in my opinion, this is just a matter of time. Most of them have not realized that responsive design will help their business. More precisely their own.

  9. Sarel Jan

    For the majority of websites responsive design is the best option, only go for multiple device-specific websites if that’s the only way you can convey a specific message or present certain functionality.

  10. Redspark Technologies Pvt. Ltd.

    Thank you for sharing this! I hope now most of viewers know that Responsive design is important thing that a website must have. With increasing number of mobile tablet and ipad users one has to have responsive website. And Thanx to image websites also.

  11. Web Design California

    Responsive and adaptive web designs were developed to build mobile-friendly websites to able to cater to the guys on-the-move (which includes professionals, travelers and youngsters using smart-phones & tablets). It makes life easier for these people to browse sites hassle-free. With the introduction and the increment found in the usage of such mobile devices, responsive & adaptive web design methods are soon becoming the standard in the industry.

  12. Paul

    Great article, we no longer design websites that are not responsive and have spent the last year redesigning most of our clients sites to fully responsive. Defo the way of the future!

  13. Tusitiodevideojuegos.Blog.Com

    Hello, this is certainly such a great topic to read about.

  14. betuned

    Great post by you, responsive websites are very much compulsory nowadays..
    We also make responsive websites.Thanks for the post

  15. Spark Email Design

    Thanks for sharing this wonderful article. This post really helps to mobile, tablet and ipad users.

  16. smithwillsens

    Thank you for sharing this post :)

  17. Raffel

    Such Great Article.

  18. Website Design Milton Keynes

    Thanks. I think I may just have to upgrade my website and SEO packages company to responsive layout.

  19. ThinkNEXT

    Nice post..
    I would like to share more about this-
    It is a web design approach to provide a optimal viewing experience-easy reading and navigation with a minimum resizing and scrolling.The practice consist of mixture of grids and layouts,images and an intelligent use of CSS queries.This would eliminate the need of design and development phase for each new gadget on the market.

  20. sowhan

    Thanks for sharing this wonderful articleI enjoyed your blog post on responsive design as well. Great article

  21. lemon

    great post..
    thank for sharing wonderful post. this is a awesome post man !!!

  22. Malta Fragweb Design

    Great, i prefer to develop already existing responsive themes to cut the time for editing.

  23. Ayesha Goyal

    Responsive websites provides a nice expertise to the users because the web site will change relying upon the screen size of the device.

    Responsive web design technology uses different elements with fluid grids. It generally serves the scroll problem faced while browsing sites on the mobile devices or tablets. It is in increased demand since the use of smartphones and mobile devices.

  24. responsive web design Melbourne

    I love Responsive web designs. With them you can reach out every size of devices easily.

  25. Zinfoway Technologies

    Yes I agree with you. Responsive design is very useful for all the viewers. Thanks for sharing this useful article.

  26. Convert PSD to Responsive

    I have read your blog in this blog you have shared such a nice and informative information.

  27. Web designing in Lucknow

    Thanks for sharing this- good stuff! Keep up the great work, we look forward to reading more from you in the future!  

  28. jack

    Responsive web designs are very important

  29. Mark

    Great Article!! Responsive website design is a concept where a website is built with multiple size screens and the design elements rearrange themselves according to to best fit the visitor’s screen. Thanks for sharing

  30. Jessy Thames

    Reliable information Randy, and thanks for sharing it up! Responsive design has really influenced most of the business portals and most of the business persons look for the design in particular. The usability keeps increasing. Your material brings in a better picture of preferring the technique.

  31. Vivek Choudhary

    Great Article…..

    Thanks for sharing this Post.

  32. Anneli Semos

    Informative blog about responsive web design. As mobile users are increasing day by day, everyone wants to have a mobile–friendly website so that they could visit more on the website. As per the need of the customers, web application development companies are developing the responsive websites for the compatibility of the users. So the responsive website design is the present and future of web design and development.

  33. adam

    Current market trend is for “responsive designs” and it will rule the web for long coming years.

    Few good responsive designs: http://visitresponsivewebsites.com/

  34. seovid

    Your article is indeed helpful.I really dint get the alternative idea mentioned.does that really work?. So small business owners can also make a responsive website :) . Thank you so much for sharing this information

  35. David @ Web Developmentd

    Responsive designs are widely used nowadays. This article is really informative. Thanks for sharing.

  36. dedicated servers

    Thanks for sharing such a great post regarding Responsive Web Design.

  37. Web Design Halifax

    This is a great article on responsive web design. Thank you for sharing it with all of us.

  38. Pegsweb

    The graphics used in this article are awesome. But I have an important note. What do you think of combining Javascript with media queries to achieve the best user experience possible. Because depending on resolution only doesn’t give us the whole picture specially with high resolution tablets.

  39. Lisa Davis

    Responsive web design is the best choice for a website. Because it’s friendly user interface is very easy to use. Thanks for sharing this amazing post with us and I also like the content of your post it is written in the beautiful way.

  40. Lisa Davis

    Responsive web design is the best choice for a website because of it’s friendly user interface. Thanks for sharing this amazing post with us and I also like the content of your post it is written in the beautiful way.

  41. Rob

    Really enjoyed the aspect of this article that considers the benefits and drawbacks of responsive web design, this gives the article a comprehensive overview of the importance of responsive design. I think it is worth emphasising that online shopping is rapidly becoming the go to method of buying and therefore it is essential that your website is optimised for a range of devices so that customers can access your products on-the-go. Responsive web design allows your website to adapt to any screen size without having to create a separate mobile set.

  42. Digi Dust

    Responsive web design is a technique for building websites that work on mobile devices, tablets, and desktop screens.

  43. CactimediaDubai

    Our webpage design should be easy to process because if our webpage is too heavy then it’s gonna take much time to load. What’s the best in the market nowadays, its “Mobile App”. Everyone is using smartphone so he or she wants to open a webpage on his or her phones. It’s enough from my side, At the end, i agree with Randy’s thought and everything has PRO and CONS.

Leave a Reply

Your email address will not be published. Required fields are marked *