We all know that mobile devices and tablet computers are experiencing explosive growth right now. So how do you make sure that a new website today looks as good on an Android phone and an iPad as it does on a large computer screen?

Responsive Design is a graphic user interface design approach. It’s the idea that development and design on the web today should fluidly respond to the user’s environment based on the device platform, orientation of the device, and the overall size of the screen.

When incorporating Responsive Design into a website there are some key things to consider.  The site needs to be built inside of a flexible grid.  This will account for the screen size of the device and render the site differently based on it. Any images used within the design need to be flexible as well. And be sure to enable different views for different behaviors using media queries.

Creating the site within a flexible grid will allow the layout of the website to change based on the size of the browser’s viewport.  You can create this grid manually or use a pre-built framework such as Skeleton.  Skeleton is a great framework already built to support responsive and mobile-friendly development.

The next piece to consider is what to do with the images you place in the design.  Images will need to scale and move within the flexible grid to allow users to see them on all kinds of devices. There are several solutions for this, but here are two popular ways of adding flexibility to your images:

1. Use the CSS overflow property (overflow: hidden) to dynamically crop images as the size of the containers they are in shift and change. The “Berkshire Salon and Day Spa” is a beautiful example of images cropping or disappearing altogether to accommodate device width — try resizing your browser window, and notice how the design responds to the viewer’s new dimensions.

2. The use of the CSS max-width property is an easy fix.  Set the <img> with a max-width of 100%.  This will narrow and widen your image to the width of the device or browser size.

Lastly, utilize media queries via CSS3.  This is nothing new to style sheets — defining what kind of media your style sheet will use has been around for quite some time.  A stylesheet designed for printing websites on paper (print.css) will differ from your core style sheet.  The same concept is used when defining style sheets for devices.  For example, you could create a style sheet that will only be used on devices with a maximum width of 480 pixels:

link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="style.css"

Basically what this is doing is checking to see if the device uses a screen (as opposed to, say, print or braille) and if the device’s screen has a width equal to or less than 480 pixels (for example, an iPhone held in its portrait orientation).  If so, the page will be rendered using the CSS in the “style.css” style sheet.  For some great information on media queries and responsive design check out this amazing article by Ethan Marcotte.

The recipe for responsive design is fairly simple, but it does require designers and developers to change their way of thinking to create for entirely new experiences and audiences.  Nevertheless, it’s exciting to think of the new era we are entering, creating custom solutions for a wide range of users on a wide range of devices.