Responsive Web Design
Digital Next | Industry Savvy

Responsive Web Design

on / by Randy Lek

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.


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.

| | | | | |
Article by

Randy Lek

Studying Applied Cognitive Psychology in Leiden, but doing my internship at Usabilla in Amsterdam right now. Gives me an excuse to visit the lovely museums they have there. =)

Share your thoughts

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

  • 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 if you would like to read some of our UX designer’s thoughts on responsive design.

    • Randy Lek

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

  • 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.

  • 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.

  • 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!

  • Great… keep up the nice work!

  • 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.

  • 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.

  • 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.

  • 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.

  • 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!

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

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

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

  • Thank you for sharing this post :)

  • Such Great Article.

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

  • 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.

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

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

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

  • 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.

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

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

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

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

  • Responsive web designs are very important

  • 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

  • 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.

  • Great Article…..

    Thanks for sharing this Post.

  • 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.

  • adam

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

    Few good responsive designs:

  • 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

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

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

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

  • 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.

  • 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.

  • 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.

  • 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.

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

  • 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.

  • It was a very nice write up!! Thanks for sharing with us. Responsive website design is a need for user in the modern days as 60% of the people visit websites in Mobiles and it’s necessary to create it Mobile friendly so that a person can access it in any of the device. I think we must focus on its advantages rather than the disadvantages as its every user’s requirement today.

  • Andrew Jhonson

    For Responsive Web Design Tutorial Step By Step For Beginners, you can go on the below link:

  • B C Gupta

    This post is very useful for website desing

  • Ken Denmark

    Hi there,

    I found your blog very interesting. Yes, very interesting!

    Because especially if you are the business owner, you should know the essential of your business on how to stand above the crowd.

    Like if your business has services like website developing especially responsive website designs, you should know how to engage people to avail your service. Because website developing nowadays is very popular and powerful business. You should know how to stand out of it, how to compete with your competitors, and of course customers should know that if they’ll come to you they know that they got the right place.

  • Lori Beck

    Thank You For Sharing this useful Post to design a responsive website

  • poojanain

    Really have good to know this information .Thanks for sharing.Keep posting..

  • pooja nain

    Thanks for sharing, your post is awesome.

  • arun sharma

    Thanks for sharing. This post is very useful for website desing.

  • Shanti Eye Hospital

    Thanks for sharing. This post is very useful for website desing.

  • Clout Technologies

    Nice Post ! This post is very useful for website desing. Here providing best website desing Industrial training.

  • Sirigroup is a best Website design company in Bangalore

  • Nisha Marcosi

    Thanks for sharing such a nice post! Day by day, the number of devices, platforms, and browsers that need to work with your site grows. I think if you want to increase your sale or business,then responsive web design is must. I was also in need of responsive web design about a month ago, then I had found a team on Designjuice which make awesome website.
    Guys, do try them, their work is awesome. Here is the link :

  • techno vinity

    Hello, Awesome post that I have come across after such a long time. Recently, I was looking for professionals who could make my website responsive. One of my friends advised me about Technovinity Systems ( it just worked great
    for me.

  • Cara Mooralian

    Awesome resources! There are a couple of blogs which are quite new for me.
    I also spend a lot of time on the following blogs:

  • Morgan

    Thanks for sharing! Great resources and explains everything in depth. I agree with what you said about the dramatic rise in mobile users correlating with the need for designers to expand their sites. I think responsive design is user friendly and is a great for user experience in general.

  • Responsive Web Design

    The entire idea of responsive web design has been summarized in this blog. Pretty useful.

  • Really have too good post. Your Blog is very interesting, A number of devices and platforms that need work with your site grow. Responsive website is mobile friendly and user friendly. If you want to increase your business then responsive website design is important.

  • Titanwater

    Whole house water filters – Shop best quality filters in Los Angeles, US. We are providing whole house water filter, softener and water conditioners at Best Prices.

    Providing the Best range with best Quality of whole house water filter, KDF MediaGuard, Reverse Osmosis Water Filter, Color Changing Resin Deionization in latest Design with Latest Technology at your door on reasonable prices in the US.

    For more information you can check it out here :

  • Titanwater

    Reverse Osmosis Water Filter – Exclusive range of Hydroponics Ro filter at our store in Los Angeles, US. Best quality with latest technology Hydroponics water filter system.

    In Hydroponics Reverse Osmosis System we include 5 stages Reverse Osmosis Water Filter System with booster pump 150GPD, 200GPD, 300GPD, 600GPD, 1000GPD Lp membrane 1:1 ratio. With our RO Water Filter, you will save more water, stabilize pH levels.

    For more information you can check it out here :

  • Titanwater

    Commercial RO System – Exclusive range of Light commercial filter at our store in Los Angeles, US. Providing Best quality with latest technology Commercial water system.

    All kinds of Light Commercial water system includes Drinking water filter with Booster pump, 5 Stage filter, Automatic Backwash timer valve, Filter Cartridge and many more on lowest price with best quality at our store.

    For more information you can check it out here :

  • Titanwater

    Reverse Osmosis Water Filter – Exclusive range of Hydroponics Ro filter at our store in the Los Angeles US. Best quality with latest technology Hydroponics water filter system.
    In Hydroponics RO System we include 5 stages Reverse Osmosis Water Filter System with booster pump 150GPD, 200GPD, 300GPD, 600GPD, 1000GPD Lp membrane 1:1 ratio. With our RO Reverse Osmosis Water Filter, you will save more water, stabilize pH levels.
    This filter is essential for the health of beneficial micro-organisms.

    For more information you can check it out here :

  • Titanwater

    Drinking Water Filter – Shop 1ST Stage-Sediment Filter 5 Micro, 2ND Stage – GAC Carbon Filter and 3RD Stage – CTO Carbon Block Filters and many more at Best Prices in the US.

    Replacement Filter for Home Drinking Water Filter can also be used in Standard Reverse Osmosis System includes Undersink Water filter, Countertop Water Filter, GAC Carbon water Filter and many more with Removing Chlorine, Sediment and Volatile organic compounds (VOCs) from water.

    For more information you can check it out here :

  • Titanwater

    Filter Media – Vast collection of Filter Media at our famous store in Los Angeles US. Providing Best quality of water filter and components on lowest price.

    All kinds of Replacement Filter Media, GAC Media FRP Tank, water control valves, Resin Deionization, KDF Mediaguard and many other Media on Best price with Best quality.

    For more information you can check it out here :

  • Titanwater

    Big Blue Water Filter – Shop Best Quality Big Blue Water Filter System, Micro Sediments, Big Blue Housing Filter at Reasonable Prices in Los Angeles, US.

    Buy Huge variety of Big Blue Water Filter, Dual Water Filter, 5 stage Big Blue Water Filter and many other superior quality filters.

    Providing Purify, Fresh, Hygenic water through our best quality with latest technology used Big Blue Water Filter, Dual Big Blue Housing Filter System, Mico Filter, Sediments,Filter Cartridge in Los Angeles, US.

    For more info you can check it out here :

  • Big players now becoming quite interested in AMP.

  • Nurse Practitioner Liability – Np Error includes Failure to provide oversight, Breach of Contract, Patient is harmed, Harm is Foreseeable in New Jersey, US.

    According to Recent Case Law Physician had a duty of care to the patient of an NP, even through the Physician never saw or evaluated the patient and the Facts are Dr. had a Collaborative Practice Agreement (CPA) with NP, who owned her medical practice.

    For more info about Nurse Practitioner Liability you can check it out here :

  • Abby Jones

    Hi Randy,

    You have created a well-written and simple article. I mainly liked the pros and cons of having a responsive web design. It clearly lets us take a decision with respect to our website.

    Thank you.

  • Ajay Jain

    Thanks for sharing! Nice Post

  • Eduparna webmasters

    very Good blog and very much informativeas well as interesting thanks for sharing for more blog you can visit here :

  • responsive websites are so very important nowadays, people access internet more on mobile instead of desktops or laptops. It is very important for people doing business online to understand that making a website responsive could increase 10-15% (not sure with the exact numbers) chances to get more traffic on the website. Thank you Randy for sharing such information with us, would certainly help many of us.

  • i totally agree with sheetal, thanks randy you shared such a beautiful knowledge.

  • Shaligram Infotech

    Hi guys responsive website is essential for promoting business services and product people can develop responsive website to get targeted traffic and get more visitors. Shaligram infotech is one of the best service provider of responsive website development get more information about visit website at

  • Utkarsha

    Responsive websites are very essential nowdays.Totally agreed with randy..As today everyone is in search of user friendly apps and easily accessible features it is very important aspect to have a responsive will not only make the website attractive but will also make it more easy to use.Maxsolz is one of the best company providing responsive website at a very affordable price.For more information visit our website

  • great post Randy, i really enjoyed reading this. cheers!

  • Amazing Tips! I am looking for tips on responsive design and this blog make useful for me. Thank You for sharing such helpful information.

  • Those are some really good tips! Responsive design, simply put, enables your website to fluidly adapt to different screen sizes. Websites have to be made compatible with all these devices. You will also prefer– YourDesignPick for responsive web design. Thanks for sharing!

  • Very Useful information provided by you.

  • Wow.. thats amazing I must say.. Thanks a lot for it

  • This is very useful blog to all blog lover, i read your all posting. Thanks for sharing.

Pin It on Pinterest