Posts By :

BWD

User-Centred-Design-Image

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.

nhs-logo-880x495

NHS Bolton GP Federation

Our latest bespoke site helps to connect GPs with their patients, and vice versa

The NHS Bolton GP Federation is being introduced to give working people in Bolton easy access to GP appointments at a time that best suits them; in the evenings, at weekends and on bank holidays. And the team here at Bolton Web Designers have been working hard to provided them with an accompanying online presence which meets the needs of both the GPs and their patients.

Extended access to GP appointments has already been well received in nearby Bury, following the successful launch of Bury’s GP Federation last year. And patients in Bolton are now also set to benefit, accessing a greater range of services, continuity of care, longer consultations and extended opening hours.

Our team have developed Bolton’s new online hub to be completely mobile responsive and accessible from any device. Its clean, simple and modern design aims to project the credibility and professionalism of this brand new GP Federation. A Federation which is actively engaging 50 practices in Bolton to collectively make a difference in the community.

The site’s GP login area allows rotas to be uploaded and schedules to be monitored, keeping everyone up-to-date and in the loop. This way, information can be shared across practices quickly, easily, and in one central place. Improved communication of this kind can ultimately improve lives.

In addition, company branding and logo design has also been produced to give the Federation its own distinct identity whilst appealing to a wide audience demographic. A number of initial concepts were developed, with the Federation selecting their preferred design which was then smoothly integrated into the site.

channel-4

Bolton Web Designers Client in the National Media

Bolton Web Designers Client in the National Media , The Sunday Times, Daily Mail and Channel 4 – George Clarke’s Amazing Spaces

Bolton Web Designers designed a website a number of years ago for Cool Canvas and recently got the call from the client that the site needed a face lift after 5 years.

Cool Canvas creates natural outdoor wooden play areas for children in a variety of environments. Their work has been commissioned by wildlife trusts, parks, nurseries and public parks to name but a few. They also have recently received recognition for their unique quality of work in The Sunday Times, Daily Mail and Channel 4 which meant more traffic to the website. The original site had served its purpose when it was originally designed and developed but as the client grew so did the their portfolio and projects they took on.

Bolton Web Designers were briefed to redesign the site in order to facilitate their growing needs and to bring the design up to date so that is was fully responsive, contemporary in design and easy to manage for the client. We made sure that redesign didn’t change too much of the fun and organic aspect the site and the fantastic range of products on offer. We also had to make sure the projects and products were simply organised and displayed with ease. However, the biggest challenge of all was to create a new site from scratch (design and development) within 5 days so that it was ready before the client appeared in the papers and TV.

After a few sleepless nights and bribing the development team with plenty of coffee and cakes, we created a site that both the team at Bolton Web Designers and the client at Cool Canvas are truly proud of

Cool Canvas will be featured on th 5th June 8pm on Channel 4, George Clarke’s Amazing Spaces

The Natural Play Areas site can be viewed in our portfolio

ser

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

1, http://fluxcomputerrepair.com/computer-repair-blog-covering-computer-repair-services-for-home-and-business/

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

http://www.scribd.com/doc/46937454/Installing-and-Integrating-WordPress-With-WebPlus

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

http://forums.serif.com/showthread.php?t=84362&highlight=wordpress

 

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

default1

 

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

editor5

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( __( ‘http://wordpress.org/’, ‘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 http://seriftemplates.gimboo.co.uk/serif-webplus-templates.html

gimboo-design2

 

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

blog-link1

 

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

 

header1

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

[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

[to_like]

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)

 wp-just-headder

 

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” “http://www.w3.org/TR/html4/loose.dtd”><!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=”http://gimboo.co.uk/wp/wpscripts/jsNavBarFuncs.js”></script>

<script type=”text/javascript” src=”http://gimboo.co.uk/wp/wpscripts/wp_navbar_menub.js”></script>

<link rel=”stylesheet” href=”http://gimboo.co.uk/wp/wpscripts/wp_navbar_menub_H1.css” type=”text/css”>

<script type=”text/javascript” src=”http://gimboo.co.uk/wp/customnavtree5.js”></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*/

–>

</style>

<script type=”text/javascript” src=”http://gimboo.co.uk/wp/wpscripts/jspngfix.js”></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=”http://gimboo.co.uk/wp/wpscripts/jsNavBarFuncs.js”></script>

<script type=”text/javascript” src=”http://gimboo.co.uk/wp/wpscripts/wp_navbar_menub.js”></script>

<link rel=”stylesheet” href=”http://gimboo.co.uk/wp/wpscripts/wp_navbar_menub_H1.css” type=”text/css”>

<script type=”text/javascript” src=”http://gimboo.co.uk/wp/customnavtree5.js”></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*/

–>

</style>

<script type=”text/javascript” src=”http://gimboo.co.uk/wp/wpscripts/jspngfix.js”></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

.Body-P

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

}

.Body-P0

{        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”>

to

<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

</body>

</html>

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

 

WARNING

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

header.php
&
footer.php

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