What is Responsive Web Design?



What is Responsive Web Design?

If you buy something through our links, we may earn money from our affiliate partners. Learn more.

Have you asked yourself, “What is responsive web design?” Responsive web design is an approach whereby a designer creates a web page that “responds to” or resizes itself depending on the type of device it is being seen through.  That could be an oversized desktop computer monitor, a laptop or devices with small screens such as smartphones and tablets.

Responsive Web design has become an essential tool for anyone with a digital presence. With the growth of smartphones, tablets and other mobile computing devices, more people are using smaller-screens to view web pages.




Drive Traffic to Your Website



Win $100 for Vendor Insights



Sell Your Business



These websites have to also consider the mobile-first index just announced by Google in April 2018. As more small businesses increase their mobile presence, their website, eCommerce, Google Business page, social media pages and other assets have to be easily accessible across all devices.

What is Responsive Web Design?

The purpose of responsive design is to have one site, but with different elements that respond differently when viewed on devices of different sizes.

Let’s take a traditional “fixed” website.  When viewed on a desktop computer, for instance, the website might show three columns. But when you view that same layout on a smaller tablet, it might force you to scroll horizontally, something users don’t like. Or elements might be hidden from view or look distorted.  The impact is also complicated by the fact that many tablets can be viewed either in portrait orientation or turned sideways for landscape view.

On a tiny smartphone screen, websites can be even more challenging to see. Large images may “break” the layout. Sites can be slow to load on smartphones if they are graphics heavy.



However, if a site uses responsive design, the tablet version might automatically adjust to display just two columns. That way, the content is readable and easy to navigate. On a smartphone, the content might appear as a single column, perhaps stacked vertically.  Or possibly the user would have the ability to swipe over to view other columns.  Images will resize instead of distorting the layout or getting cut off.

The point is: with responsive design, the website automatically adjusts based on the device the viewer sees it in.

How Does Responsive Web Design Work?

Responsive sites use fluid grids. All page elements are sized by proportion, rather than pixels. So if you have three columns, you wouldn’t say exactly how wide each should be, but rather how wide they should be in relation to the other columns. Column 1 should take up half the page, column 2 should take up 30%, and column 3 should take up 20%, for instance.

Media such as images is also resized relatively. That way an image can stay within its column or relative design element.



Related Issues

Mouse v. touch: Designing for mobile devices also brings up the issue of mouse versus touch.  On desktop computers, the user normally has a mouse to navigate and select items.  On a smartphone or tablet, the user mostly is using fingers and touching the screen.  What may seem easy to select with a mouse, may be hard to select with a finger on a tiny spot on a screen. The Web designer must take “touch” into consideration.

Graphics and download speed: Also, there’s the issue of graphics, ads and download speed. On mobile devices, it may be wise to display fewer graphics than for desktop views so that a site doesn’t take forever to load on a smartphone.  Larger ad sizes may need to be exchanged for smaller ads.

Apps and “mobile versions”:  In the past, you might have thought about creating an app for your website — say an iPad app or an Android app.  Or you would have a mobile version specifically for BlackBerry.

But with so many different devices today, it’s getting harder to create apps and different versions for every device and operating platform.



Why Small Businesses Need to Switch to Responsive Web Design

More people are using mobile devices. A recent Pew study 77 % of Americans now own smartphones in 2018 which is up from just 35% in Pew Research Center’s first smartphone ownership survey carried out in 2011.

Check your traffic and you might just be shocked at how many visitors are getting to your website through mobile devices.  (In your Google Analytics, select “Audience” on the left side, then “Mobile” to see what proportion of traffic is from mobile devices. You can even drill down to see which devices are sending the traffic.)

Responsive design templates are everywhere now, for purchase.  If, for instance, you have a WordPress site you can visit a reputable template gallery such as ThemeForest and search for “responsive WordPress themes.”  Purchase one for under $50. Your Web developer can then customize it for your logo and brand.

Editor’s Note:  Here at Small Business Trends, we are working on a new responsive design. Shouldn’t you?



Photo via Shutterstock


More in: 82 Comments ▼

Annie Pilon Annie Pilon is a Senior Staff Writer for Small Business Trends, covering entrepreneur profiles, interviews, feature stories, community news and in-depth, expert-based guides. When she’s not writing she can be found exploring all that her home state of Michigan has to offer.

82 Reactions
  1. Shawn Hessinger

    Hi Annie,
    Fantastic post! This consideration is hugely important given the growing number of mobile devices especially. It’s so critical to have your Website accessible no matter what device your audiences are using.

  2. Excellent post. Glad to read such informative post while approaching the responsive web design concept in our organization. Being in web design and development industry, Dev Digital highly recommend using the same concept for all our projects.

  3. Yes, it is very much impressive and when I heard about last few month back I just decided to make my own website responsive.

  4. Nice article considering the current rising trend of smartphones and tablets. Came across this book Responsive Web Design by Example. Good read to learn about web designing.
    (http://www.packtpub.com/responsive-web-design-by-example/book)

  5. This is a very important thing to know about. Especially since mobile devices are exceeding PC usage. Using responsive web designs are going to become a must for companies to survive.

  6. Copi Valdivieiz

    Responsive Web Design is the new Birth of “Template Switching” whixh was nto as good as the this new version. What i read is that the Pixel of the web page get customized as per the display pixels and this is primarily done so that more and more people could access the site on the go. With increased internet accessibility the Responsive Web Design has become a hot cake indeed.

  7. The future of web design is often said to be the RWD. However, there are different controversies which encompasses this theory. People say that it ruins SEO and speed optimization. It may be true at some circumstances, but I agree that the future of web would heavily rely on RWD. Any new technologies are subject to bugs and discrepancies and we cannot avoid that. Excellent info about RWD. Thanks!

  8. To be sure – most RWD sites designed today are not truly Responsive but a mix of Responsive + Adaptive. To make a website 100% responsive is usually a lot more work and sometimes unnecessary. This distinction is not known by everyone.

    • Thanks for that distinction.

      That may be getting a bit detailed for our purposes. We’re using the term in a more general sense to convey that a website should be resizeable to view in multiple browser sizes and device sizes. We’ll leave it up to Web designers to figure out how to accomplish that end result.

  9. Hi Annie,

    The image on the top should say “desktop” vs ” computer”.

    Emil

  10. Hi Annie, great post. U really made it simple even for a newbie like me. In my quest to learn more aboput the RWD, I have registered for a webinar on Best practices in Responsive Web Design.

    [Edited by Editor]

  11. I agree that businesses need to start using responsive websites. Its a trend that will increase month to month. Take full advantage of it. Although it may cost more, its worth it in the long run.

  12. We just put together a responsive design and have seen a HUGE drop in the bounce rate, increased user engagement and much longer viewing times among mobile browsers. Anyone else having good experiences with responsive websites ?

  13. A recent research by Litmus suggests that 42% of the emails are opened on mobile phones. Now, this is not a surprising number because the last few years have shown clear signs of increase in the use of mobile internet. This can be validated by the same research which states that there has been over 138% rise in mobile email consumption in the last 1.5 years.

  14. Hello Annie, here you share such an informative post about responsive web design which is the latest and hot demand trend in web designing field.

  15. Responsive web design not only helps improve the user experience for small business websites, but it also improves conversions, and who doesn’t like that?

  16. This is a great article. Responsive Web design (RWD) is a Web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices

  17. Excellent article. There’s still a lot to be examined as to the benefits of responsive design. We recommend responsive to many of our clients, not to mention a careful examination of the AI/wireframe, content strategy and CTAs.

  18. MD. SHAHADATH Hossain

    Hi, Thank you for the post.

    Is there any easy way to identify the site if it is responsive or not?

  19. RKG Digital documented a significant increase in mobile visitors coming from organic search in its latest quarterly digital marketing report (an increase of 11% since 2013 for a total of 38% in 2014).

  20. making it easier to stay engaged with your brand.

  21. The impact is also complicated by the fact that many tablets can be viewed either in portrait orientation, or turned sideways for landscape view.

  22. I’m hopping your fiancé likes traveling to?! I wish you the best ! Many more far far travels!
    Keep up your smiling! Your Enthusiasm! your blessed & have blessed the youtube Community! Thanks!

  23. Have you ever tried opening a high resolution website in 5 inch mobile? That is called a responsive website which shrinks the website without removing/hiding any important content.

  24. Nice article with few words.

  25. Hello Annie Pilon,
    Thanks for pointing excellent issues.
    Responsive website design is mandatory nowadays, because of :
    1. 50% web visitors are from mobile device. so you website must be responsive or mobile friendly.
    2. Advantages on google mobile search. In 2015, google update algorithm for mobile search. Only mobile friendly website can be search positions for mobile search.

    So, website should be mobile friendly or responsive for better performance or better leads.
    Cheers
    Ben

  26. It is surprising that a lot of people are still unfamiliar with a responsive web design when it should be common by now. After all, websites are now viewed in mobile gadgets more than ever.

  27. Nice Article.

    It seems that this post has cover the almost main points about Responsive web design.

    Yes, It is true that due to the growth of smartphones and other mobile devices, the importance of Responsive web design is increasing day by day.

    Thanks Again for such a great post.

  28. I read a study last year from Litmus showing that 56% of emails are now opened on mobile! Crazy numbers, wondered what the stats for 2017 will be!

  29. Great and helpful blog to everyone. Thanks a lot for sharing this amazing article.

  30. Great article

  31. This article is helpful Thanks for sharing

  32. Great post on responsive web design. Kudos

  33. Thanks for suggesting this amazing article mate. It has really helped me and I guess a lot of other people as well.

  34. Can you tell us more about this? I’d love to find out
    some additional information.

  35. Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries

  36. Great post! We are linking to this particularly great content on our website.

  37. Nowadays, modern website builder comes with GRID system to solve responsive issue. Which makes your website 100% compatible with any device.

  38. Hi Annie , M new for this, Can u pls send me few Responsive Web Design Templates for reference.





Win $100 for Vendor Selection Insights



Tell us!
No, Thank You