What is Responsive Web Design?

responsive web design

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, a 10-inch tablet, a 7-inch tablet, or a 4-inch smartphone screen.

Responsive Web design has become one of the hottest trends in 2013.  This is due in part to the  growth of smartphones and other mobile devices. More people are using smaller-screen devices to view Web pages.

In fact, Mashable even dubbed 2013 the Year of Responsive Web Design. Pete Cashmore wrote,  ”For those of us who create websites and services, all this leads to a singular conclusion: A million screens have bloomed, and we need to build for all of them.”

What Does Responsive Web Design Look Like?

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 versions for every device and operating platform. As Smashing Magazine wrote, “When will the madness stop? It won’t, of course.”  A responsive design that is flexible enough to be viewed on multiple devices just makes sense.

Why Small Businesses Need to Switch to Responsive Web Design

More people are using mobile devices. A recent Pew study found that 45% of American adults own a smartphone, and 31% own a tablet computer. As we reported yesterday, smartphone shipments outpace those of regular mobile phones, and tablet growth is surging.

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?

Responsive Design Photo via Shutterstock

More in: , 63 Comments ▼

Annie Pilon - Staff Writer


Annie Pilon Annie Pilon is a staff writer for Small Business Trends, covering entrepreneur profiles and feature stories. She is a freelance writer specializing in marketing, social media, and creative topics. When she’s not writing for her various freelance projects or her personal blog Wattlebird, she can be found exploring all that her home state of Michigan has to offer.

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

    • Anita Campbell

      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. Hi, Thank you for the post.

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

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

  1. Pingback: What is responsive web design? – Advertising Agency Chicago | The Daily Twitch

  2. Pingback: What is Responsive Web Design? - Small Business...

  3. Pingback: What is Responsive Web Design? - Small Business Trends | Dyno Web Design

  4. Pingback: What is Responsive Web Design? - Small Business...

  5. Pingback: Web Design Tips For Any Type Of Website • Welcome to Pine Valley Life

  6. Pingback: What is Responsive Web Design?

  7. Pingback: Google+ Upgrade Rolls Out: Beautiful New Look

  8. Pingback: Year 2013 | Shinyee

  9. Pingback: 10 Ways to Improve Your Business with Mobile Technology

  10. Pingback: What is a Responsive Website? | rdhenker

  11. Pingback: 5 Technological Breakthoughs Your Website Redesign Must Have

  12. Pingback: 5 Technological Breakthoughs Your Website Redesign Must Have | AMP Web Agency

  13. Pingback: 5 Technological Breakthroughs Your Website Redesign Must Have | AMP Web Agency

  14. Pingback: Web Services CT | Small Business Digital Marketing Checklist

  15. Pingback: Increase Website Traffic: Your Ultimate Blueprint to More Traffic

  16. Pingback: Top 5 WordPress Plugins for a New Startup | Fresh Infos

  17. Pingback: Google Local Plus "101" With Local Search Expert Mike Blumenthal

  18. Pingback: Pixel Werkz | Company Blog

  19. Pingback: Changes In Web Design | NowSell.com

  20. Pingback: Top Marketing Trends for 2013

  21. Pingback: The Mobile Imperative: Why Organizations Need Apps and Responsive Websites Yesterday | Dactyl Studios

  22. Pingback: 4 Ways Your Business Can Get Personal Online

  23. Pingback: The Brand For You 4 Ways Your Business Can Get Personal Online

  24. Pingback: Why are Mobile Friendly Websites Important? What is Responsive Design?

  25. Pingback: 8 Things That Might Be Missing from Your Small Business Website

  26. Pingback: Multi-Screen Ecommerce Strategy: Beyond the Single Shopping Screen

  27. Pingback: Small Business Mobile Marketing Strategy

  28. Pingback: Debunking the Top Mobile Technology Myths

  29. Pingback: Your Google Analytics Guide to Data Collecting

  30. Pingback: Top Marketing Trends for 2013 | yMarketingMatters

  31. Pingback: Web Design Mistakes and Blunders That Will Sink Your Project

  32. Pingback: O que é Web Design Responsivo? | Blog da Revelare

  33. Pingback: Greenshoots – What is Responsive Web Design?

  34. Pingback: The Brain Trust Weekly: Responsive Design

  35. Pingback: 5 Points to Remember About Your Mobile SEO Strategy

  36. Pingback: Healthcare.gov Lessons: What You Need to Know About IT Projects

  37. Pingback: 3 Key Business Marketing Trends for 2014

  38. Pingback: 3 Trends for Small Business in 2014 | Addison Richmond Consulting, LLC

  39. Pingback: Best Tips for Social Media and Digital Marketing Success in 2014 | yMarketingMatters

  40. Pingback: Is Your Site Responsive? - wpContent

  41. Pingback: Fordyce Letter by Barb Bruno:Everyone Is Going Mobile. How About You? | The Recruiting WELL Blog and Forums (Development)

  42. Pingback: VerticalResponse Moves to Drag and Drop, Adds Freemium

  43. Pingback: Desktop vs. Tablet vs. Mobile: A Unique User Experience | inSegment Digital Marketing BloginSegment Digital Marketing Blog

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Compare your business to the industry - Try our new tool