Responsive Web Design : references
“Responsive Web Design (RWD) as the name implies, is a style of Web development where content responds to the device on which it is being rendered. Web site is crafted to use W3C CSS3 media queries with fluid proportion-based grids, to adapt the layout to the viewing environment, and probably also flexible images. As a result, users across a broad range of devices and browsers will have access to a single source of content, laid out so as to be easy to read and navigate with a minimum of resizing, panning and scrolling.”
The term ‘Responsive Web Design’ was coined by its creator, Ethan Marcotte – his book is highly recommended reading “A Book Apart – Responsive web design” In the book, Ethan covers where the term ‘Responsive Web Design’ came from and why it was required.
As a start, its’ important to understand that responsive web design is not one particular technology or item but in fact it is a collection of techniques and ideas, which together establish a new way of thinking in moving the web design industry forward.
There are three very important elements in responsive web design.
- Flexible Layouts: Your first step should be to create a flexible layout. As the browser width changes, fluid grids will re size and reposition the content as necessary. Tiny Fluid Grid is a wonderful tool for creating flood grids. It’s free to use, and there is no reason you shouldn’t try it.
- Flexible Images: As obvious as it seems, adjustable images are very important. Here are a few ways this task in achievable. You can ultimately re size the image on the fly, or dynamically crop the image. By combining both methods you are enabling the image to re size automatically when it’s below a specific size.
- Media Queries: Media Queries behave similar to conditional comments. For example, you can have one stylesheet for a large display meanwhile providing different stylesheet for mobile devices with different width’s. Media queries allow designers to create multiple layouts using the same content. To achieve scalability, CSS media queries are used to apply different page styling according to certain parameters, like min-width and orientation.
Some of the good references about responsive Web Design
- What’s responsive Web design all about?
- Beginner’s guide to responsive web design
- Responsive Web Design Process
- Responsive web design: 50 examples and best practices
- Responsive Web Design Template
- Tutorials to master responsive web design
- 15 Detailed Responsive Web Design Tutorials
- Responsive Web Design Course
- Responsive Web Design sample Website zip
- 21 top tools for responsive web design
- Responsive Web Design – Ideas, Technology, and Examples
- 10 Beautiful examples of responsive Web design
- The 1140 CSS grid
- Create a Responsive Web Design with Media Queries