Web Page Layout and Search Engine Optimisation


A web page can be considered as having the following main areas:-

Header : Navigation : Main Content Area : Side Panel : Footer
These sections are so common in page design that as of HTML 5, (HTML is the computer code that tells your browser how to lay out the page), these divisions or sections are buillt into the code.

The advantage of this is that not only does it give designers a consistent way of laying out pages; the names of the divisions tell Google what kind of content to expect. For example Google sees a division called Navigation or just Nav; it knows this area will contain all the important links in the website. If google sees Footer, it will expect the name and address of the company and some links etc. Its basically a way of standardising we pages and communicating to Google extra information and its priority on the page.

The diagram below shows the most basic divisions with a grey background for clarity

Typical Page Layout - designed for Search Engine Optimisation and HTML 5

Now the techie bit is out of the way, lets see how we can use this system of design to maximum effect.

For example we dont have to have the Navigation at the top of the page, we can have it anywhere and Google will still treat it as the menu bar. We can also have additional divisions or features that add interest like a SLIDER or further content area

Below you can see how moving the Navigation and adding a slider, together with making the backgound white improves the look and functionality of the website.

Page layout optimised for SEO

Note also the inclusion of the two icons in the Footer. This is where we would expect to see Social Media links / icons.

SLIDER : A series of images or section of content that changes through time by SLIDING or FADING from the current panel into the next and so on until all the panels in the sequence have been displayed. The slider usually loops, but can also be manually changed, typically by clicking a right / left naviagtion or one of a series of dots or icons. Apart from being visually apprealing, a slider is a great way of maximising the use of screen area on a busy web page. Each panel in the slider will typically link to another page on the website.

Responsive design demonstration by Calco UK

Faster Responsive design demonstration by Calco UK


Use your phone camera (or tablet) to scan the QR Code below and view our responsive design demo.

QR Code - click to see the Calco UK Responsive designs demo


Tap / click the image below to try out our responsive design. You should re-size your browser to various sizes and see how the website reposnds if you are using a normal desktop or laptop computer!

Responsive designs Demo by Calco UK

or a high speed version :-

Responsive wordpress website example : high speed


How to fix Wordpress - click here

How to back up Wordpress - click here

One click install Wordpress



Go to your control panel

Click the install Wordpress icon


You may be asked for an email address at some point. You should use one from the same domain as your wordpress installation. SO if Wordpress is installed on :- www.abcd.com then your email should be something like tom@abcd.com

Worried about installing Wordpress on your "99" hosting package?

Call or email and we will do it for you!

01599 534964 | sales@calcouk.com


All Calco UK Wordpress INstallations on 1st Choice Platform come with a TWO STEP back-up for Wordpress.

1. Go to your control panel and click back-up & Restore (top section). Click FULL Backup (or partial if you know what you are doing) and follow the instructions to download the zip file back-up.

2. On the same page as above you will have seen a small note that says .. Please note that this only backs up the web site files (as available via FTP). This means, for example, that databases are not backed up here: you can modify and back them up from the databases page. Click this link and follow the instructons. Download your Zip file and keep it safe.



Website design with Calco UK is as easy as 1 - 2 - 3
1. Hosting » 2. Design » 3. SEO