Website redesign: start with a grid

 

For example, in the screenshot, below you can see that underneath the main mage there are 4 boxes, each of 3 columns in width. On other pages there are elements which spread over 1, 2, 3 and 4 separate elements. Such a wide variety of layouts would not be possible using a layout with less than a 12 column grid - even of we never intend to use all 12 at once.

volute-site-600

If you are going to go with a grid (and I suggest that you do), then use 12 columns. The crucial grid is horizontal; vertically, the content is likely to be variable in height, so can’t be precisely aligned. Scripts can be written to auto-align adjacent elements to match the tallest element in a group, however.

Flexibility for the mobile web

Another key reason for a regular grid layout is that our new site is designed to respond to the different screen widths that it is likely to be viewed on. Unlike buildings, which have defined plot dimensions, or magazines which have a paper size, we can’t be sure how people are going to view our website; is it on a laptop? An iPad? A Samsung Galaxy phone? Each has a differing screen size and proportion, meaning a site designed to exclusively fit on one will fail badly on others.

Our solution is to allow the layout to morph - different elements are placed in differing positions on different screen sizes. This responsive design, as it is known, is the equivalent in insisting that a building has the same accommodation, regardless of the plot dimensions; a sprawling single storey building would become a compact mid-height structure and then a point tower block as the plot size diminished. Clearly this isn't possible in the physical world but in the digital world it is already a reality.

An example of responsive design

Check out our website for the NHS Children’s Kidney Network, EMEESY to see this in action. Viewing on a computer, drag and resize the browser window and see how the elects reposition themselves as the browser window gets smaller. This ensures the ability to browse and easily comprehend the site, no matter what device you use to view it on.

emeesy-small

Find out more

If you’d like to know more about responsive design call us on 0115 914 5839 or email us at hello@volute.co.uk

Tagged in: Architecture Business