Responsive web design allows websites to automatically adjust their layout depending on the screen size and orientation of the device being used. It uses flexible grids, images and CSS media queries to detect screen size and orientation and rearrange the layout accordingly. The key aspects are a flexible grid, images that scale with the grid, and using media queries to apply different CSS styles based on screen properties. This allows a single website to be accessible and usable on any device.

1. Cordell Giesen

2. What is Responsive Design?
Responsive Web design is the approach 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.

3. 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.
Google: responsive design
http://www.abookapart.com/products/responsive-web-design
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
http://fuelyourcoding.com/10-tools-frameworks-for-responsive-design/
http://digg.com/newsbar/topnews/70_essential_resources_for_creating_liquid_elastic_layouts

4. Flexibility
• Good web design is a flexible grid.
• A variety of browsers already demand flexible and fluid design.

5. 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.
mattkersley.com/responsive/

6. 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.

7. Media Queries
Media queries allow designers to build multiple layouts using the same HTML
documents by selectively serving style sheets 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 offers 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 color of an image based on the orientation of the device or browser.

8. 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.

10. Cordell Giesen