Tuesday, June 18, 2013

About Web Design / HTML: Responsive Design

If you can't see this email, click here


Web Design / HTML

Design Basics



From Jennifer Kyrnin, your Guide to Web Design / HTML
I’ve been doing web design for a long time now (since 1995) and one of the things I find most interesting about it is how it has adapted to the way people browse the web and the way web browsers function. So when the idea of responsive web design came along I was in love. Here was a way of designing one design but making it work for whatever device came to view it. No more fiddling with browser detection scripts or worrying about older or less compliant browsers. I could design pages that responded to what they were given and display the content appropriately.

What is Responsive Design

Responsive design is just that—design that responds to the browser or device that is viewing it. This means something different to every web designer out there, but here are some examples.

  • A product listing on a desktop monitor might display product thumbnails in a 6x6 grid, but as the screen size gets smaller, the grid shrinks to 4x9, and then 2x18, and finally 1 at a time.
  • On a small cell phone screen a website might be one column, but as the customers move to a small tablet it grows to two columns and then even three or four on a computer monitor.
  • A site viewed on an iPad or tablet (or device with that size screen) might have more app-like styling while on a larger screen more web page features might creep in
  • A web page with one primary article and several sidebar articles might only show links to the sidebar articles on smaller screens, while displaying them in less prominent columns on a larger monitor.

How to Build a Responsive Design

The short answer to this question is you use CSS media queries. CSS media queries are a way of styling your web pages for only specific devices. In other words, you are querying the media and then displaying the CSS if your rule matches the media of the device accessing it.

You can query on lots of different aspects of the media, but the most common is to look at the device width. Smartphones and cellphones often have 480px in width, and that is usually the smallest I design for. Tablets vary in widths, but 768px is a good break point—smaller than that it helps to have a simplified design and larger than that can often handle more columns and complexity.

One thing people often forget is that CSS media queries can query on more than just width. You can test for lots of other things, including whether they are viewing your site on a retina display:

@media   (-webkit-min-device-pixel-ratio: 2),   (min-resolution: 192dpi) \{   /* Retina-specific stuff here */  }
Search Related Topics:  responsive web design  layout  css3 media queries

More Help with Responsive Design and Media Queries

There are lots of resources on my site for learning about responsive design and media queries. Here are a few:


Related Searches
Featured Articles


More from About.com

Run Your First 5K
Even couch potatoes can be ready for a 5K with just a couple months of training. Read more...>

Help! I'm Too Busy
Time and stress management tips to help you feel as though you have more time. Read more...>

This newsletter is written by:
Jennifer Kyrnin
Web Design / HTML Guide
Email Me | My Blog | My Forum
Sign up for more free newsletters on your favorite topics
You are receiving this newsletter because you subscribed to the About.com Web Design / HTML newsletter. If you wish to change your email address or unsubscribe, please click here.

About.com respects your privacy: Our Privacy Policy

Contact Information:
1500 Broadway, 6th Floor
New York, NY, 10036

© 2013 About.com

What’s New on About Web Design
To Slash or Not to Slash
Inspiration: Say It With Bacon
Poll: Do you use drop-down menus for nav?
Follow me on:
Facebook Twitter


No comments:

Post a Comment