October 6, 2012 in Mobile Web Design, Responsive Web Design

Responsive Web Design: Flexible, grid based layout

A flexible grid based layout means that the layout of the web page should be defined in a relative value. This flexible grid allows the website to respond to different device widths. If you set a web page to be 90% width of the screen size then every device that views that web page would have a good reading experience.

Traditionally ‘non-responsive’ websites have a set width, set in a fixed value. A fixed value of 900px (900 pixels).

#content{width: 900px;}

This would display fine on a traditional desktop PC – which large screen size can easily accommodate 900 pixels, but a mobile device with a screen width of 320px the same layout would not read well, with the content area not able to display fully on the small screen.

But if we set a relative value as the width then the screen is mostly irrelevant:

#content{width: 90%;}

This content area would respond to the screen size.

About Anthony

Anthony Brewitt is Design Bit, has been for years - he's an experienced WordPress Designer, and Muggle-born Marketing Philosopher. Let’s talk about your website; your marketing, blog design, and that cool new mobile web thingy. Contact Anthony

Leave a Reply