A Brief Overview of Responsive Design

Posted in Tips, Web Design • Posted on 17 Comments

The ever-changing landscape of the web and the technologies that access it demand for shifts in how we view websites. Most recently a trend called ‘Responsive Design’ has emerged, which allow for users viewing websites on mobile devices to access them in a user-friendly manner. Accommodating these users is something everyone should take into account for their web strategies in the future, as it enhances the overall viewing experience for mobile visitors.

Many clients may demand a mobile version of their website – one for the Blackberry, another for the iPhone, the iPad, netbook, and even the Kindle. How does one accommodate this growing population? In this article I will describe the growing prevalence of Responsive Design and factors you should consider when designing for mobile visitors.

What is Responsive Design?

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. The website should accommodate for:

  • Resolution
  • Image Size
  • Scripting Abilities

In short, a website should have the technology to respond to the user’s preferences.

“Today, anything that’s fixed and unresponsive isn’t web design, it’s something else. If you don’t embrace the inherent fluidity of the web, you’re not a web designer, you’re something else.”

“Web design is responsive design, Responsive Web Design is web design, done right.”

-Andy Clarke

Check our Responsive Website Design E-Book

Responsive Website Design E-Book is a product of 1stwebdesigner to get people who are interested in responsive design started  in this amazing new trend. The e-book covers the basics of responsive design, great examples, resources, and advice on how to create the perfect responsive website.

Taking A Closer Look

In creating a Responsive Website, your goal is to accommodate the user’s viewing device, such as the iPhone. A Responsive Website can be achieved through these short features:

  • The site must be built with a flexible grid foundation.
  • Images that are incorporated into the design must be flexible themselves.
  • Different views must be enabled in different contexts via media queries.

A responsive web design will usually use CSS @media queries to style the page according to specific rules, such as min-width.

Flexibility

Part of any good web design in these modern times is a flexible grid. This practice will accommodate a variety of browsers already that demand the design be flexible and fluid.

Grid

  • Defining your own parameters for columns, spacing and containers is often the best solution for a web design and can be just as flexible as any existing system out there.
  • Size and spacing are the two main components to focus on in creating your flexible grid system.
  • In place of pixels, use ems and percentages as your units of measurement.

Tiny Fluid Grid is a great tool for creating fluid grids. It lets you make grids with up to 1200px maximum widths, and is based on 1kb grid.

70+ essential resources for creating liquid and elastic layouts has everything you need to get started creating your own flexible layouts.

This sample website is on a flexible grid that changes the layout depending on the size of the browser’s viewport.

Images

Another feature of Responsive Web Design is images that move and scale with your flexible grid.

  • To maintain fast loading times, use images of a manageable size. Using the width and height attributes to scale them for more text content on smaller devices isn’t a good usability practice.
  • An alternative to scaling is cropping. The CSS overflow property (e.g. overflow: hidden) gives us the ability to crop images dynamically as the containers around them shift to fit new display environments.
  • The option is available to have multiple versions available of the same image and then serve up the appropriate sized version depending on the user.
  • Finally, you have the option to hide images altogether. Media queries that serve up a stylesheet which sets the display: none property for images takes care of this function.

Unstoppable Robot Ninja has a simple script that automatically resizes your images.

Zomigi allows you to selectively hide parts of your image dynamically.

Media Queries

Media queries allow designers to build multiple layouts using the same HTML documents by selectively serving stylesheets based on the user agent’s features, such as the browser window’s size.

Other parameters Media Queries deal with:

  • Orientation
  • Screen Resolution
  • Color

Media queries and responsive design allow us to think outside of the constraints of a screen size or resolution and start building websites that flexibly adapts to all mediums.

Adaptive Layouts with Media Queries:
NET magazine offer some insightful info on the history of responsive or adaptive website designs and the introduction of the media query module along with tips on how to implement such features yourself.

Working with Media Queries
Nathan Staines has written a great guide to the basics of responsive web design with usable code samples.

How to use CSS3 Orientation Media Queries
1stWebDesigner has some fun with CSS3 media queries to show what kind of effects can be produced. See how the orientation media query in particular can be used to change the colour of an image based on the orientation of the device or browser.

Understanding Its Value

There are obviously a lot of benefits towards getting behind Responsive Design as the number of mobile users continues to rise. It’s important to note, however, that before you go redesigning your website to first evaluate who the current users are that are coming to your site and what they’re using to access it. Responsive Design may not really be needed for some sites than others, and is best to address the topic on a case-by-case basis.

Responsive Web Designs in Action

Simon Collison

Build

Lanyrd

Luca Vercellio

Clean Air Challenge

Ribot

Sasquatch

Owltastic

Resources

Responsive Web Design by Ethan Marcotte

Media Queries – a collection of sites using media queries

Summary

People who browse the web undoubtedly have different wants and needs depending on the device they’re using. As we see this become more common, designers will have the possibility of expanding their skills in creating mobile-ready design solutions for their clients. The web is growing and with it comes a world of possibility of designers and developers who wish to pursue it.

14 Written Articles

17 Comments Best Comments First
  • Debbie

    Thursday, July 7th, 2011 08:50

    5

    Thanks for the article. The idea that websites should respond and adapt to all devices and situations – smart phones, tablets… is game changing. Designer Ethan Marcotte, in his book Responsive Design explored the concept in architecture. In architecture responsive design looks at how physical spaces respond to the people passing through them and calls on the designer to re-imagine what a space can do.

    +2
  • Flavio Mester

    Wednesday, July 6th, 2011 16:08

    1

    Great article. As we’re making our site design/building tools platform-independent, this info comes in handy.

    0
  • Renato Alves

    Friday, July 8th, 2011 23:12

    8

    This article came handy when I’m in the process of my blog redesign and I’ll adapt it to mobiles devices as well. Alot of information about it. I’m sure it will help me at least understand the core principale to a better user experience on mobiles. :)

    0
  • Sohail Amir

    Thursday, July 7th, 2011 18:54

    6

    Great article, I’m looking to create bespoke versions of my site for all mobile devices soon so this is a useful bookmark!

    0
  • Randy

    Thursday, July 7th, 2011 04:29

    4

    I heard someone said that to design a website, one should begin to think for mobile platform instead of PC.
    I agree with this. This is new challenge and opportunity.

    0
  • apipkin

    Wednesday, July 6th, 2011 20:01

    2

    Thank you for a great article! YUI3 Grids (http://developer.yahoo.com/yui/3/cssgrids/) uses percentage based measurements for column sizes and would be easy to use for flexible/fluid layouts.

    0
  • Ryan

    Thursday, July 7th, 2011 06:46

    3

    the link ’70+ essential resources for creating liquid and elastic layouts’ leads to a 404 page. Great article btw.

    0
    • mia

      Friday, July 8th, 2011 10:30

      7

      summer reading thank you for the tip

      0
  • Vanessa G.

    Wednesday, July 13th, 2011 20:32

    9

    Very nice article!

    The link to “70+ essential resources for creating liquid and elastic layouts” still does not work and I tried to search the article and it seems that the search box you have up there is not working either.

    0
  • dewex

    Thursday, July 14th, 2011 00:39

    10

    Phonegap is pretty cool.

    0
  • TJ

    Thursday, March 8th, 2012 16:37

    16

    This is another fine article to add to the collection.

    I have to say that it’s becoming increasingly more important to design websites that are fluid enough to be viewed and optimized for a variety of devices. Responsive design is definitely gaining the much needed attention that it deserves. I’m looking forward to seeing this area of design evolve.

    0
  • Christina Cruz

    Thursday, April 12th, 2012 16:43

    17

    This is a great article. Thank you for sharing.

    0
  • Saket Jajodia

    Wednesday, February 22nd, 2012 21:31

    15

    Thanks a lot Stephanie for this overview of responsive design on a new project of mine and now thinking of making it with a responsive design so that I don’t have to make any separately for small screens..!!

    0
  • James

    Thursday, February 23rd, 2012 03:20

    14

    http://www.responsivedesign.co.nz/

    I have developed a responsive website UI that generates the almighty Skeleton code. Check it out. Great post by the way

    0
  • Jayne

    Sunday, August 7th, 2011 21:34

    11

    Great article about having to constantly adapt to the amazing technology which we have available to us. Website which were designed several years ago – which at that time would have had cutting edge scripts/coding are now sadly not adaptable to these technologies so it is important for business owners to kep their web coding up to date.

    0
  • Craig

    Monday, January 2nd, 2012 10:11

    12

    Great article. Responsive Web Design will be a BIG trend in 2012

    0
  • Joseph Buarao

    Wednesday, January 18th, 2012 09:17

    13

    I never this. thanks for sharing..

    0
  • Christina Cruz

    Thursday, April 12th, 2012 16:43

    17

    This is a great article. Thank you for sharing.

    0
  • TJ

    Thursday, March 8th, 2012 16:37

    16

    This is another fine article to add to the collection.

    I have to say that it’s becoming increasingly more important to design websites that are fluid enough to be viewed and optimized for a variety of devices. Responsive design is definitely gaining the much needed attention that it deserves. I’m looking forward to seeing this area of design evolve.

    0
  • Saket Jajodia

    Wednesday, February 22nd, 2012 21:31

    15

    Thanks a lot Stephanie for this overview of responsive design on a new project of mine and now thinking of making it with a responsive design so that I don’t have to make any separately for small screens..!!

    0
  • James

    Thursday, February 23rd, 2012 03:20

    14

    http://www.responsivedesign.co.nz/

    I have developed a responsive website UI that generates the almighty Skeleton code. Check it out. Great post by the way

    0
  • Joseph Buarao

    Wednesday, January 18th, 2012 09:17

    13

    I never this. thanks for sharing..

    0
  • Craig

    Monday, January 2nd, 2012 10:11

    12

    Great article. Responsive Web Design will be a BIG trend in 2012

    0
  • Jayne

    Sunday, August 7th, 2011 21:34

    11

    Great article about having to constantly adapt to the amazing technology which we have available to us. Website which were designed several years ago – which at that time would have had cutting edge scripts/coding are now sadly not adaptable to these technologies so it is important for business owners to kep their web coding up to date.

    0
  • dewex

    Thursday, July 14th, 2011 00:39

    10

    Phonegap is pretty cool.

    0
  • Vanessa G.

    Wednesday, July 13th, 2011 20:32

    9

    Very nice article!

    The link to “70+ essential resources for creating liquid and elastic layouts” still does not work and I tried to search the article and it seems that the search box you have up there is not working either.

    0
  • Renato Alves

    Friday, July 8th, 2011 23:12

    8

    This article came handy when I’m in the process of my blog redesign and I’ll adapt it to mobiles devices as well. Alot of information about it. I’m sure it will help me at least understand the core principale to a better user experience on mobiles. :)

    0
  • Sohail Amir

    Thursday, July 7th, 2011 18:54

    6

    Great article, I’m looking to create bespoke versions of my site for all mobile devices soon so this is a useful bookmark!

    0
  • Debbie

    Thursday, July 7th, 2011 08:50

    5

    Thanks for the article. The idea that websites should respond and adapt to all devices and situations – smart phones, tablets… is game changing. Designer Ethan Marcotte, in his book Responsive Design explored the concept in architecture. In architecture responsive design looks at how physical spaces respond to the people passing through them and calls on the designer to re-imagine what a space can do.

    +2
  • Randy

    Thursday, July 7th, 2011 04:29

    4

    I heard someone said that to design a website, one should begin to think for mobile platform instead of PC.
    I agree with this. This is new challenge and opportunity.

    0
  • Ryan

    Thursday, July 7th, 2011 06:46

    3

    the link ’70+ essential resources for creating liquid and elastic layouts’ leads to a 404 page. Great article btw.

    0
    • mia

      Friday, July 8th, 2011 10:30

      7

      summer reading thank you for the tip

      0
  • apipkin

    Wednesday, July 6th, 2011 20:01

    2

    Thank you for a great article! YUI3 Grids (http://developer.yahoo.com/yui/3/cssgrids/) uses percentage based measurements for column sizes and would be easy to use for flexible/fluid layouts.

    0
  • Flavio Mester

    Wednesday, July 6th, 2011 16:08

    1

    Great article. As we’re making our site design/building tools platform-independent, this info comes in handy.

    0

Comments are closed.

54.92.231.100 - unknown - unknown - US