5 Key Responsive Web Design Elements

by 22 11/14/2011

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

Print Friendly

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

22 COMMENTS

suttida

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

November 14, 2011 Reply

XuDing

Thank you so much for pointing out these 5 elements.

November 15, 2011 Reply

    Rober

    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.

    February 6, 2012 Reply

Corey Smith

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

November 16, 2011 Reply

    Brian Schwartz

    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.

    November 16, 2011 Reply

      Corey Smith

      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 Reply

        Brian Schwartz

        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.

        November 16, 2011 Reply

          Corey Smith

          I’ll watch for the play by play.

          November 16, 2011

Tom Gillard

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

November 22, 2011 Reply

James

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

http://www.responsivedesign.co.nz

November 24, 2011 Reply

Kyle Lanning

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.

January 9, 2012 Reply

jay

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.

May 2, 2012 Reply

Ernie

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

June 23, 2012 Reply

WebFrootz

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

November 28, 2012 Reply

Jessica H

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!

May 29, 2014 Reply

    neil

    Jessica, glad we could help :)

    May 30, 2014 Reply

Emilda Daniel

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

July 14, 2014 Reply

    Neil Patel

    Emilda, glad we could help. Thanks for the feedback :)

    July 14, 2014 Reply


Leave comment

Some HTML allowed

Get conversion optimization & A/B testing articles FREE >>>