|
 | 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 */ }
| 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 | |
| |
| | | | 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 | | | | Follow me on: | | | |
Advertisement
 | |
No comments:
Post a Comment