A Look at Responsive Web Design

Dec 20, 2011
CSS HTML
By

Responsive web design is widely thought of as a design trend, but it’s much more than that.

It is an approach to web development that allows a website to break itself down smoothly across multiple monitor sizes, screen resolutions, and platforms, be it a computer, tablet or mobile device.  It allows the developer to create a site that is optimized for each platform, both in navigation, readability and load time.

In this tutorial, we take a look at what responsive web design entails for the developer.

Using Multiple Image Sizes

There’s no need for a mobile device to be loading an image that is 1920 px wide by 1200 px tall and a quarter mb.  That will only slow down the time it takes for a viewer to load the site on their mobile device and eat through their monthly data quota.  A great example of a site that keeps their main image but resizes it based off the screen resolution of the viewer is Sony.  You’ll notice, amongst other changes, how the main image has changed in size between the larger version and the mobile version thanks to CSS media queries.

Sony

Another approach to quickening load times and determining how things should be displayed on different devices is to completely drop your main image.  That’s exactly what Fork CMS did with their site.  The main image resizes between the widescreen and more traditional square monitor ratio version of the site, but then is completely dropped from the design once you get down to the mobile sized version.  However, I did find it a little interesting that the designers chose to keep the image towards the bottom of the site throughout each version, but drop the main image.  The main image helped establish the site and give it some character, by excluding that main image on the mobile version the site loses a bit of character.

Fork CMS

Navigation

Text links are another thing to take in to consideration when developing a responsive website. On a computer text links aren’t a big issue, but once you get to browsing a scaled down version of a site on a mobile phone it can be hard to hit the desired target area of a small text link. Converting a text link to a slightly bigger button, or swapping text for an icon, will make the site more navigable on a touch screen mobile phone.

A good example of a site that’s navigation changes from text links to buttons is the website for the Clean Air Commute Challenge. You’ll see how in the larger, widescreen mode of the site there are four main navigation links across the top of the page. However, once the site is squeezed in to meet the dimensions of a mobile site the text links convert to larger, easier to target, buttons.

Clean Air Commute Challenge

To see a good example of a site where the navigation switches from links to icons have a look at the 2011 dConstruct site. Notice how their three main navigation links, Conference, Workshops and Location, change to icons once the site is narrowed to the parameters of a tablet device or mobile phone. This makes it easier for the viewer to navigate the site regardless of what device they’re on. You will also notice with the dConstruct site that the images don’t swap themselves out at certain points, rather they simply grow and shrink on the fly as the page shrinks or grows.

2011 dConstruct

Flexible Dimensions

Optimizing a site to be responsive and change across platforms is easy to do thanks to CSS. With CSS you are able to define the maximum and minimum height and width of elements, allowing them to grow, shrink and adapt to the specific parameters in which the site is being viewed. Setting the width to adapt is also easily achievable by setting your height and width to a percentage.

Working with percentages to size elements of your website can be a little trickier than creating a site where everything has a fixed pixel dimension. However, there is a fairly simple way to determine what the percentage is that you need to define an element of your site. If you are developing a page and want the main content area to be 1,000 px wide at a specific resolution and you want to include a navigation column on the left-hand side that has a width of 200 px, you will have to convert that to a percentage. You can easily convert a fixed pixel size to a percentage by taking the width of the navigation column, dividing it by the full width of the column, then multiplying it by 100. In this instance we would take 200 (the width we want our navigation column), divide it by 1,000 (the full width of our content area) and then multiply it by 100. The result is 20, meaning to give our site elasticity and allow it to be responsive we would define the width of our navigation column to 20%, rather than 200 px.

For a good example of a site with flexible dimensions, look no further than the page you’re on. Try decreasing the width of the page by dragging your browser window in and see how the main content area resizes itself to adapt to the new dimensions.

Developer Drive

Along with setting your structured elements to be flexible in size, it’s also important to make your text a dynamic attribute as well.  This is accomplished much like the height and width, but rather than using a percentage sign to define your font size, or the “px” abbreviation for defining a specific pixel size, you define it as em.

Em simply stands for the letter “M”, which is the widest letter in the font and is a dynamic font measurement.  Meaning a site that uses % to define the height and width of elements, paired with font that is defined in em’s and media queries that select appropriate image sizes and content to be displayed, the result will be a fluid, responsive website.

Author: Scott Stanton
Scott Stanton has spent the past decade working nights as a freelance web designer, only to write about the latest design trends at his day job as a freelance writer. Hang on Scott's every word @TheScottStanton.
  • Tom

    lycos.com just released a new home page that is completely responsive.

  • Device

    I hate this! I want the full web site on all my devices, iPhone, iPod touch, Android, Kindle Fire, etc.

    Being on a device does not mean I am on a mobile data connection. I may be on WIFI and some of these devices are WIFI only.

    Being on a Desktop browser does not mean broadband. I may be tethering, on MIFI, have poor internet connectivity, or even be on dialup. Image file sizes should always be minimized, and never ever a quarter Megabyte. Ever.

    Stop breaking every web site just because the user is on a device!

  • http://www.webdesignerdevelopers.com/ Web Designer Developers

    Good noteable points are discussed .
    Nice post , thanks for sharing the info .

  • http://frontendpost.com/ FredTheWebGuy

    Ultimately it comes down to serving the user, not the device. The device is the tool and responsive design helps achieve that. I don’t have a problem with omitting certain features from, say, a smartphone, as long as the key content and actions are available to the user. If it’s in keeping with the spirit of UX and goal conversion, then RWD is your ally.

    • Jeff

      Well put Fred!

  • http://www.logoonlinepros.com/ Corporate Logo Design

    Thanks for featuring remix amongst such a beautiful designs!

  • Olaf Dunn

    One the big problems with Responsive Web Designs is that the underlaying markup still exists in the page. With so much hidden from the browser view (display:none) and CSS for all UI groupings, it actually adds page weight.
    A more constructive approach would be to combine Responsive Web Design with server sided detection to produce markup that the device supports, adding some flexibility for CSS media queries to handle orientation changes and user zoom level.
    As a very valid commenter posted below, the user should have the option to choose which version of the site they wish to see, using responsive personalization, remembering the users choice, and giving that to them on every visit.

  • http://www.zfort.com/ Web design companies

    Very well written article. Much interesting information especially about navigation. In my opinion, intuitive navigation is the key to success in usability and responsive web design. Thanks.

  • Elvy Info

    This is one of the highly attractive, informatics, well-written and highly crisp blog that has been explained in fabulous manner to help out reader and visitors. All information found here is genuine and realistic.

  • http://www.businessmasterygroup.com/ Web Design El Paso

    Good helping one & informative stuff defined .
    Thanks for sharing the info.

  • http://www.kiranbloger.blogspot.com Kiran

    Nice post , thanks for sharing the info .

  • http://twitter.com/lizzz lisette beentjes

    Excellent article. No problem with different output for different channels whatsoever. If anything: better service to the user, so they won’t have to miss out on parts of the site that wouldn’t fit into their device otherwise.

  • http://twitter.com/smithapat Smitha Patwardhan

    Great article & was of real help, as it directly speaks about the needy pointers to keep into consideration while creating a Responsive Design…
    Thank You

  • http://twitter.com/smithapat Smitha Patwardhan

    Great article & was of real help, as it directly speaks about the needy pointers to keep into consideration while creating a Responsive Design…
    Thank You

  • http://www.indianseocompany.co.in/ seo company in India

    Thanks for sharing the post here. Keep up the good work. All the best.

  • http://twitter.com/StevenGardner StevenGardner

    Love the post. I want to run an idea past you all. My idea is to serve up relevant image sizes, quality and website features based on connection speed and not the type of device.
    To do this I thought I could time a small download file and based on the speed of the download I could set images and styles.

    What do you all think?

  • http://www.yepi-yepi.com/ Yepi Friv

    I totally agree with you. Btw, I love your design