Responsive Design - Introduction

This seminal article sheds a light upon the differently distinct, diverse and discrete devices, screen sizes, browsers and orientation. We live in the world of ubiquitous computing, wherein we interact with a computing device from different locations, with innumerable screen sizes, and formats.  A successful website must have the interface designed in a manner that the contents fit consummately in any browser, screen size and device.

Flexible and Fluid Grids

A true responsive web design must implement the following three effectively

• Media Queries and media query listeners
• A flexible grid-based layout that uses relative sizing
• Flexible images and media, through dynamic resizing / CSS

A lot of factors influence responsive web design. Just because the user is viewing the website in the mobile browser, it does not entail he views different or truncated content. The structure of the content can be altered, with different font or/and layout with priority to certain areas.

For example, a restaurant website could have the Menu or Online Order as a priority content for smaller screen sizes.

While mobile phones and tablets are becoming ubiquitous, displays are becoming larger and larger. As designers we have to server both side of the spectrum and for that we need innovation in design.

To experience how a responsive design works, resize the size of your browser while you are at hashbrown.in, and you will see responsive design at work as the website scales seamlessly.

our next discussion of responsive web design would focus on Media Queries.