Layout and spacing in web design

A question we typically get asked is:

I think the page would look more comfortable if the images were dropped down so that they are more central to the page, and the same goes for the Contact Page where the content could all sit on the page better a little lower down.

Sounds a simple and reasonable request. But is it?

Remember that a web page is not like a sheet of paper where you can move things around relatively easily. A web page is actually a page of computer code which is interpreted by the browser. The browser reads the code and displays the various elements – text and images – as it sees fit on the page, and limited by its own idiosyncrasies.  Every browser/computer displays a page slightly differently and the position of text and images can vary significantly depending on the viewer’s browser/computer settings. Things are complicated because we now have to design for mobile phones too, which adds another set of limitations to the position of elements on a web page. One set of code has to suit all – PCs and mobile devices.

In practice this means that the web page code has to be in as purer form as possible. It’s up to the browser to sort out how things should be displayed. If web designers add ‘artificial’ gaps and line breaks, it may look fine on your PC, but on a small mobile device (remember that mobiles are now the most common way of accessing a website) it may result in large gaps and odd layouts.

We don’t advise adding any artificial spacing on a web page simply because it looks more aesthetically pleasing on a PC. You may find that the change in code results in odd fomatting and gaps on a mobile. Best to go with pure code and let the browsers sort out where to display the page elements for an optimum viewing experience.



Pin It on Pinterest

Share This