Responsive web design is the practice of adjusting the layout through HTML and CSS configuration based on browser-size. This is great for configuring your site for mobile environments. Responsive web design caught on about a year ago, but it’s use is growing especially for basic mobile applications of full-scale websites. Responsive web design does not account for changes in behavior, but there are ways to accommodate both behavioral and structural changes together.
For an example of a responsive web design you can look at this site in different browser sizes. The easiest way is to reduce your browser window size and watch the site adjust to it. As the browser window reaches certain widths the layout of the website is adjusted accordingly.
320 and up
When I first came across responsive design I found it via 320 and up. This site provides a boilerplate template starting from the smallest screen and designing up rather than designing from the big picture and adjusting down. Media queries in your CSS files will adjust layouts accordingly and only when certain parameters are met. In the case of 320 and up, and this website, it’s when a width reaches a minimal pixel value.
320 and up focuses on the following pixel widths:
The Beginner’s Guide to Responsive Web Design
If you’re looking into learning about how to develop sites in this manner you should consider looking into the beginner’s guide by Think Vitamin. I really like the examples provided and the way responsive design is described. There are three key points to consider in any responsive design: fluidity, media queries (what browser sizes are you considering), and of course your website goals.
Why Should You Provide Responsive Web Design
It’s important to keep in mind you more users are going mobile for viewing websites. If you’re considering a responsive design you should ask yourself these questions: How does my website look on a smaller resolution? Does it fit on the screen? Am I expecting a lot of mobile traffic? Do I want to offer mobile features? Is my navigation structure too difficult for smaller browsers? Is my site easy to use from a mobile device?
Are you looking for a responsive web design? Contact me for more information.
© Frank Gärtner – Fotolia.com (image)