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

Advertisements

Tags:

About balajiit

BalajiIT Solutions is a leading IT company providing end-to-end IT services and solutions to Corporate and Government Clients and various other PSUs. offering entire web based services, Software Development, outsourcing and IT Consulting.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: