The Importance of User Centred Website Design

It seems that in business in the modern world you need to have a website, but in order to stand out, it’s important to have a good website. And by good, we don’t mean it just looks good, but that it is user friendly too.

All too often in web design, they are made over complicated with too much detail and without any consideration for the user, which just makes them inaccessible and frustrating. Of course, you know your business inside out, what you do, how you want to market yourselves and the type of content you want, but it’s actually more important to be objectives and think about what your customers want to read and how they will use your website.

If you get this right with a responsive and User Centre Design, then your website is far more likely to be a success with your target demographic and put you ahead of the competition.

What is User Centred Design?

User Centred Design relates to several methods used in web development to ensure you have a fully functional, user friendly, optimal website and this is something that at Bolton Web Designers we fully advocate in all our web development and design.

The process loosely follows these core indicators: Plan, Analyse, Design, Test and Refine. If you take the time to approach your website design using these elements, you’ll find the process much more constructive and effective in the long run.

Plan – First of all you need plan of action for your website and put together a Project Team to manage the process.

Analyse – It’s then time to conduct detailed analysis – review your current website, research your target demographic, how they use your website and create scenarios that will test the user journey.

Design – Here’s where you begin to determine your site requirements, create a content inventory, sitemap and develop a prototype to launch the site for testing.

Test and Refine – Once the site is launched, it’s vital to test the usability of the site with the target demographic and evaluate the feedback. This will ensure the site is fully optimised for the target audience user experience and identify any flaws; allowing you to make changes and refinements for a better functioning site for the end user.

The User Journey

Whatever style of website design you have in mind, whether you’re an SME or a large corporation, the key is to put yourself in the shoes of your target audience, conduct thorough research and take the user journey. No one likes a website that is difficult to navigate or takes too long to load the relevant information, so during your planning, analysis, design, testing and refinement stages always have the user journey in mind.

If you’d like to know more about User Centred Design for your website, don’t hesitate to get in touch with the friendly team at Bolton Web Designers.

Adding headers and footers to your wordpress blog using serif webplus

Before we start here’s an example of wordpress blog that has had webplus made headers and footers added to them


Lets assume that you already know how to install a wordpress blog onto your server if not here is an article written by Brian from the serif forum

also you can view the Q&A section here from the forum


Quick note:

You can add your header and footer to most in fact probably all wordpress themes apart from the ones that have the word RESPONSIVE in the description,  the code in your theme may look a little different but you will still be editing the same files as i show you below


Good luck


This tutorial will demonstrate how to add your header and footer to the default theme Twenty Ten



That theme comes pre-installed when you install wordpress, any other theme can be used but be warned some themes can be more complicated than others to do.



First of all lets remove all the crap that we don’t need like the header image and footer

Login to your admin section of your wordpress account and on the left navigate down to appearance and there you will see the word Header (click it)


Your admin section will look slightly different than this one as the newest version of WordPress has a slightly different layout


A new page will open and near the bottom you will see the button named Remove Header Image click that and save


Next lets remove the Proudly powered by WordPress. link in the footer

Follow the steps above but now click Editor now on the right you will see a list of  different pages you can edit you now need to click on the Footer.php a new screen will now open with a load of code but don’t worry you don’t have to be a super geek to what we are going to do today

You now have to locate this bit of code once you have delete it and save

<div id=”site-generator”> <?php do_action( ‘twentyten_credits’ ); ?> <a href=”<?php echo esc_url( __( ‘’, ‘twentyten’ ) ); ?>” title=”<?php esc_attr_e( ‘Semantic Personal Publishing Platform’, ‘twentyten’ ); ?>” rel=”generator”><?php printf( __( ‘Proudly powered by %s.’, ‘twentyten’ ), ‘WordPress’ ); ?></a> </div><!– #site-generator –>
</div><!– #colophon –> </div><!– #footer –>

You are now ready to add the header and footer from your webplus site, this is where it gets a bit complicated so take your bloody time or just go and pester Mick on the Irc channel if you get stuck 🙂


Ok this is the site that we are going to extract the header and footer from and add those to the blog

This can be seen at



First of all open your site in webplus and add a new link in the navagation bar to your blog



As you can see the link is an absolute link that’s the full address including  http:// of your wordpress blog not blog.html the full address, also keep the rest of the details the same as i have above


Now your header will have a link to the blog like the image below, if everything looks correct upload your modified site to the normal place on your server



————————————————————————— ————————————————————————————-

[to_like id=”1234″]

Now for the tricky part

The tools that you will need are

1, an external editor like Dreamweaver/ coffee cup ( download) or notepad which comes installed in every version of windows

2, a big bag of strong coffee

3, defiantly no kids running around screaming


In webplus you now need to make a new page just with your header on it and name it header.htmlthen make the page height the same height as the header ( see below)



Next do exactly the same just for the footer and name it (footer.html) once you have completed the header and footer you now have to publish your header and footer pages to a folder on your desktop ie:

1, Make a folder on your desktop named head-foot

2, Go back into webplus and publish the header and footer to the new folder on your desktop named head-foot like this

3, Click File

4, Click Publish File

5, Click Publish to disk Folder

6, Click Choose folder

7, Locate new folder on destop named head-foot

8, Click Ok ok etc etc

Now your header and footer has been published in the head-foot folder on your desktop


Open the folder on your desktop and right click on the header.html and open that with which ever editor you are using.

Ok now opened in your editor you will see the html for the header so we dont get mixed up with which code we need lets delete some

Delete anything that has a  <meta> tag or < title > tag and the Doc type at the top, so for example on the header i am using this will be deleted


<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “”><!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”><html lang=”en”><head><meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″><meta name=”Generator” content=”Serif WebPlus X4″><title>header</title>

<meta name=”description” content=”.”>

<meta name=”keywords” content=”” />


Next you will have to change evey link in the header to an absolute link so for example if you have

<img src=”wpimages/wp5dfa1fbb.jpg” width=”420″

you will need to change it to

<img src=”http://your-site/wpimages/wp5dfa1fbb.jpg” width=”420″

The reason for this is that all images and scripts used for the header are not in the same directory/ folder that your blog is stored in,  you will need to do this for every link and when i say EVERY that means EVERY link otherwise it will NOT work.

There are other ways to do this but if you know that there are other ways I really doubt that you need this tutorial


Now go back into the wordpress admin and locate Editor as discussed earlier then click Header.php

next you need to add the css and any links to external stylesheets/ javascript etc  from the webplus header so anything above the </head> tag needs to be copied then inserted into the header.php


Below is the code that i need for my header

<script type=”text/javascript” src=””></script>

<script type=”text/javascript” src=””></script>

<link rel=”stylesheet” href=”” type=”text/css”>

<script type=”text/javascript” src=””></script>

<style type=”text/css”>

<!–body{margin: 0px; padding: 0px;}

a:link {color: #2c3651;}

a:visited {color: #1f5b8b;

}a:hover {color: #2c3651;

}a:active {color: #2c3651;}


.Body-P        {        margin:0.0px 0.0px 12.0px 0.0px; text-align:center; font-weight:400;


.Body-C        {        font-family:”Georgia”, serif; font-size:48.0px; line-height:0.92em;         color:#6b6b6b;


.Body-C0        {        font-family:”Georgia”, serif; font-size:15.0px; line-height:1.20em;         color:#6b6b6b;


/*Master Page StyleSheet*/



<script type=”text/javascript” src=””></script>

<script type=”text/javascript”><!–var blankSrc = “wpscripts/blank.gif”;–></script>


Before you copy the code remove the crap which is in bold above so you end up with something like this


<script type=”text/javascript” src=””></script>

<script type=”text/javascript” src=””></script>

<link rel=”stylesheet” href=”” type=”text/css”>

<script type=”text/javascript” src=””></script>

<style type=”text/css”>


.Body-P        {        margin:0.0px 0.0px 12.0px 0.0px; text-align:center; font-weight:400;


.Body-C        {        font-family:”Georgia”, serif; font-size:48.0px; line-height:0.92em;         color:#6b6b6b;


.Body-C0        {        font-family:”Georgia”, serif; font-size:15.0px; line-height:1.20em;         color:#6b6b6b;


/*Master Page StyleSheet*/



<script type=”text/javascript” src=””></script>

<script type=”text/javascript”><!–var blankSrc = “wpscripts/blank.gif”;–></script>


Ok now we have the correct code it now needs to be pasted into your the header.php in wordpress, you will paste it just above the </head> tag in the header.php file

Next we need to add the code for the body

Locate this in the header.php

<body <?php body_class(); ?>>

and delete

Go back to your webplus header and copy everything  from and including <body      to the last      </div> then paste that in the same place you have just deleted <body <?php body_class(); ?>>

One thing you must do  is change  text-align:center;   to   text-align:left; in the first line of code in your webplus header otherwise all the text will be centered

Save the header.php and view your wordpress site and hopefully you will see the header attached



Next we will add the footer and this is where it becomes difficult depending on how much info you have in your footer

I assume that you have made a page in webplus with just your footer on it/ published it to a folder on your desktop and opened it in your editor. Do exactly the same as the header by adding absolute links to all images/ scripts etc

Goto your editor which you have opened the footer from your webplus site and locate the style sheet which looks like this


{        margin:0.0px 0.0px 12.0px 0.0px; text-align:left; font-weight:400;



{        margin:0.0px 0.0px 12.0px 0.0px; text-align:center; font-weight:400;


Etc Etc

Now here comes the tricky part because the header and footer have been made in separate pages in webplus you may have to change the selectors ie:  .Body-P   .Body-P0 and so on as the header and footer may be sharing the same selectors which will mess up the layout

You MAY  have a matching selectors in your header and  footer so you need to change the selectors in your footer ( not on all occasions)

ie: .Body-P    to    .Body-PP

and change any other part that corresponds to the same selector

<div class=”Body-P”>


<div class=”Body-PP”> and so on, it doesn’t matter what you call them as long as the corresponding parts match  also do remember to delete this crap that webplus adds

body {margin: 0px; padding: 0px;}

a:link {color: #2c3651;}

a:visited {color: #1f5b8b;}

a:hover {color: #2c3651;}

a:active {color: #2c3651;}


Now copy everything  inside <style> and </style>

Open the header.php again

and paste it with the rest of the css in the header


Go back to your footer made in webplus and copy everything from the first <div right down to the bottom of the page DO NOT copy the first line beginning with <body

Go to the footer.php in wordpress and paste the code directly over this right at the bottom



Save and preview in your browser and hopefully you should see the header and footer attached



If you ever update your theme your work will be overwritten so make sure you copy


then once updated it should only take a few mins to add the code again


If there is something i have not mentioned please feel free register and  post in the comments box below

Also if  you don’t feel like you can manage this please feel free to contact me through the quote button at the top and if i have time i will sort it out for you


Ok, it looks like you have finally made it to the end of this. Thanks for putting up me and I hope that the advice I gave will help some of you.

Warm regards Lee