5 Key Responsive Web Design Elements

by Brian Schwartz

Last updated on February 22nd, 2018

We live in exciting times.

Over the last few years we have focused on building mobile websites that are text-heavy versions of the main site.

While these sites are faster for users on a mobile device, they often remove the design characteristics that make the site uniquely branded for the company and remove necessary call-to-actions and advertising.

To make things more complicated,  most laptop & desktop screens are now wider than 1024 pixels.  But most designers still build sites at 960 pixels wide because netbook & tablet monitors are small and developers don’t want to make people scroll horizontally.

Responsive Web Design is a way of building a website that responds to the size of the browser. Rather than building a unique mobile version developers build a flexible design that changes dynamically to the actual width of the browser.

Here are five key elements to consider when creating a responsive web design.

Element 1:  Navigation

As shown in this example of foodsense.is, the site navigation is laid out in different locations depending on the width of the browser. For mobile users the navigation is top and centered (for easy access) for other widths it is either top right corner or below the logo. Responsive design shouldn’t scale the navigation to huge proportions on a large screen device.

Food Sense Repsonsive Website Design

Element 2:  Columns

One important point to understand is that responsive web design doesn’t just scale a site when it’s first served to a user, but also scales if someone makes their browser larger or smaller. A good example of this can be found on a recently celebrated responsive design – The Boston Globe.

As a major newspaper, the Boston Globe made responsive architecture and design a part of their launch as a pay-wall based site. The site works and looks great regardless of the device you are viewing it from.

The Boston Globe responsive web design is a textbook example of a design that preserves its integrity regardless of the browser size.

The Boston Globe site can display one column of content or three, depending on the browser width.

Boston Globe Responsive Web Design

A responsive website will scale headlines, images, text and ads in the right proportions while maintaining the integrity of the design, both when the website is first served, and when the browser is re-sized.

Element 3:  Calls to action

Good responsive design considers the critical calls to action that should be displayed prominently regardless of the screen or browser size.

Mogo Tix clearly displays the “Get Started For Free” call-to-action on their responsive design.

Mogo Tix Responsive Web Design

Element 4: Branding

Simply scaling or moving elements around on a flexible grid, doesn’t address the issue of sites losing their unique branding when building a mobile version.  Building a responsive design requires designing for three or four widths. A designer’s eye is important to make sure that the design reflects the brand at all sizes.

Notice how London & Partners keeps many of the branding elements of the site visible no matter what the screen size.

London and Partners Responsive Design

Element 5: Padding and White Space

Cognition, Happy Cog’s Blog does a nice job of preserving padding and white space on various screen sizes. This ensures the items on the page have the appropriate information hierarchy. Nothing feels too crowded or misaligned.

Cognition - Happy Cog's Responsive Design

Responsive web design presents the information from the site in the best visual manner regardless of screen size.  Unlike print design, web design has always been presented on canvases of varying sizes.Responsive Web Design is the latest & most flexible solution to design that addresses these differences.

What are other elements that should be considered in your responsive design?

Image courtesy of practicalowl



Get updates on new articles, webinars and other opportunities:


Comment Policy

Please join the conversation! We like long and thoughtful communication.
Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment.
Finally, please use your favorite personal social media profile for the website field.


Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. July 14, 2014 at 12:51 am

    Responsive web development become ever more important., with mobile and tablet used browsing. This article give important information. Thank you 🙂

    • Neil Patel says:
      July 14, 2014 at 2:35 pm

      Emilda, glad we could help. Thanks for the feedback 🙂

  2. Jessica H says:
    May 29, 2014 at 5:31 pm

    This was great! We are undergoing a company wide redesign for our site, and I was recently asked for some suggestions. This was very helpful. Thanks!

    • neil says:
      May 30, 2014 at 11:43 am

      Jessica, glad we could help 🙂

  3. WebFrootz says:
    November 28, 2012 at 8:13 pm

    The Boston Globe example is truly impressive! Great tips, from now will be mindful of these important elements in our responsive design efforts

  4. Ernie says:
    June 23, 2012 at 3:37 pm

    Great post. I’m glad I stumbled on it. Here’s a responsive site I built if anyone cares to check it out:boostforward

  5. jay says:
    May 2, 2012 at 2:24 am

    I think navigation is the problem thing,You no longer can use fancy jquery/image based menus without trouble.Any way this thing is the new fad.

  6. Kyle Lanning says:
    January 9, 2012 at 2:10 pm

    Call to action or where’s the banana. Seth Godin states in his book “If that banana isn’t easy to see and easy to get, your visitor is gone with a quick click on the “Back” button.” Read this great book “The Big Red Fez: How To Make Any Web Site Better” – Seth Godin.

  7. James says:
    November 24, 2011 at 7:50 pm

    So great! I love Skeleton http://www.getskeleton.com, you can easily create a responsive layout. I have made a simple UI to make it even easier for designers and developers


  8. Tom Gillard says:
    November 22, 2011 at 3:08 pm

    Great post. responsive web design is an exciting concept. will definately be using this as a reference when designing responsively.

  9. Corey Smith says:
    November 16, 2011 at 8:46 am

    Great post. I am curious why your site doesn’t conform to these guidelines?

    • November 16, 2011 at 9:25 am

      Corey, I’ve finished the re-design of my site to be Responsive just haven’t finished the buildout. This topic ended up being topical for me as I worked through these concerns.

      Look for a new Spoke site that is HTML5, responsive and built on ExpressionEngine to launch around the end of the year. Thanks for reading.

      • Corey Smith says:
        November 16, 2011 at 10:33 am

        When I wrote my blog post on responsive design, I didn’t actually post it until my website was responsive. I didn’t want some jerk to say to me, “I am curious why your site doesn’t conform to these guidelines?”

        • November 16, 2011 at 10:49 am

          Corey – I wrote this as a post on a blog I contribute to, instead of on the site that is becoming responsive. Also, none of the examples listed reference my site. The goal of this post is to provide a reference to others on design elements to consider…

          The cobbler’s kids shoes are falling apart. If only the clients’ would keep me less busy, our new site would be done. When I finish deploying our site, maybe I’ll do the play by play like you did.

          • Corey Smith says:
            November 16, 2011 at 12:36 pm

            I’ll watch for the play by play.

  10. XuDing says:
    November 15, 2011 at 3:20 am

    Thank you so much for pointing out these 5 elements.

    • Rober says:
      February 6, 2012 at 2:12 pm

      Hey Gary, takhns for the link to the Yoko WordPress theme. I’ve been poking around for a minimalist responsive design WordPress theme and haven’t seen that one. I think you’re totally right about the size/complexity of sites using that design style. I am impressed at how well the Boston Globe site turned out, but I doubt the RD techniques are carried throughout the entire site. Newspapers use far too many vendors to make that work in every nook and cranny of their site. However, with each progression of HTML and CSS I think that will become easier. If I were a mobile platform provider, I’d be nervous at the implications of this type of design. For the right kind (size/complexity) of site, it makes mobile platform providers irrelevant.

  11. suttida says:
    November 14, 2011 at 4:06 pm

    Definitely agree with you on all 5 points especially navigation! Great post.

    • November 14, 2011 at 4:12 pm

      Thanks Suttida. Appreciate the feedback!

Show Me My Heatmap

Really easy to understand the user behavior with the new @CrazyEgg reports! @qubitTV #UX #prodmgmt

Francisco Mingote


What makes people leave your website?