Francesco Consultancy Professional Website Design Guide
“Most business owners are well past the stage of knowing how important it is to have a website presence – but still very few really know quite how powerful it can be, when looking at the bigger picture.
People already know that their website is their biggest customer facing brand element. It speaks to more people than your company brochure or sales team ever could. They also know they have the options to trade online, generate leads, communicate and educate staff, and to use their website as a business tool. But again, very few have seen the whole strategy come together successfully.
If you look at the bigger picture, and cover off a well‐rounded internet strategy – your website can be at the heart of your new campaign to drive targeted visitors looking for your service or product through to you and your sales team.”
Mr James Dale – MD Francesco Consultancy Ltd November 2009
Best practice in web design
Irrespective of whether you are intending to use a flat ‘brochure‐ware’ website or an interactive e‐commerce site, the overall look and feel of your website will play an important role in its usability.
It is important that visitors to the site can quickly and easily access the required information. The design should present the content in an intuitive manner, making effective use of colour, layout and site organisation.
There are also legal issues to consider in the design of the website. You have to ensure that you comply with the Equality Act 2010.
This guide provides advice on the principles of good web design, taking into account the requirements of the Act. Although it is possible to design a basic website yourself, you will benefit from the help of a professional website design or digital agency, such as Francesco Consultancy Ltd.
Planning your site
It is essential from the outset that you clearly identify what the purpose of your site is. Typical reasons why businesses develop websites include:
- building brand awareness
- saving money
- selling products
- providing improved customer support
Remember that what you want the website to accomplish and what your visitors require from the site may differ. You may be concerned about the visual aspects of the site, while your visitors probably care more about how quickly they can find information.
Content and audience
Establish the type of content you will need to support the objectives of the site and how this should be presented. Look at what your competitors are doing and try to understand what the business opportunities are for your website.
Learn as much as you can about the audience you are trying to reach. Try and understand what will make them visit your website, what they will want when they get there and what will encourage them to return.
This should be part of a user‐centred approach to the design of your website ‐ ensuring that the customer journey is effective and efficient.
Highlight the customer benefits of using your website, eg include supporting information such as testimonials and case studies. If creating an e‐commerce website, provide unique descriptions for your products or services.
This will help your search engine ranking and ensure that you stand apart from your competitors. See the Francesco Consultancy Ltd guide on search engine optimisation.
There is some information you must display on your website as a minimum. All companies in the UK must clearly state the company registration number, place of registration, registered office address and if the company is being wound up on all of their websites. A common place to put this information is in the ‘About us’ or ‘Legal info’ page of the site ‐ it does not have to appear on every page.
It is a good idea to create a diagram that shows the structure of your website ‐ including the proposed content, navigation and layout of your web‐pages.
A popular technique for mapping out a website is to use wireframes. This allows you to create a skeleton of the site that shows the basic elements you intend to include.
The wireframe is made up of labelled boxes that illustrate the overall navigation and the blocks of content that each webpage will contain. The wireframe can be drawn using packages such as Word, PowerPoint or Illustrator.
Wireframes are very easy to change, so the initial design can be shown to customers or friends who are representative of your intended audience. Their comments can then be quickly incorporated to arrive at an agreed design. Wireframes often provide the basis for more functional prototypes ‐ once the basic design has been agreed.
This is the basic design process that we at Francesco Consultancy utilise when in initial design/concept meetings with our Clients.
Technical website design considerations There are several technical issues to consider when designing your website.
You will have to design web‐pages that can be displayed by many different browsers. Common browsers include Microsoft Internet Explorer, Mozilla Firefox, Apple Safari and Google Chrome. Francesco Consultancy are experts will all browser interfaces.
You should test your web‐pages in as many browsers and different operating systems as possible during the development process to ensure that they will display properly. You should also ensure that your web‐pages work in previous versions of the browsers, as some of your audience may not have updated their software.
If you are enhancing an existing site you can use web analytics to see what browsers your customers are currently using to access your website. See the page on website monitoring in our guide on maintaining your web content and technology.
The most common resolutions, expressed in pixels, is 1024 x 768, although there is a growing trend towards higher resolutions. If you opt to design your website for a higher resolution, then you need to be aware that some screens with lower resolutions may not display all of the content.
Many users are now also accessing the internet from mobile devices such as smart phones and net books. It is also worth considering how your site will appear when it is accessed from such devices.
Not all internet users have high speed access, so connection speed should also influence your webpage design.
Too many images or rich media will slow down the speed at which the webpage loads. Generally, pages should load within eight seconds or less. If your pages download slowly, your users will probably move on to another site. Slow download speeds may also impact negatively on your search engine ranking. For more information see the Francesco Consultancy Ltd guide on search engine optimisation.
Try and keep file and image sizes to a minimum ‐ generally the total size of a webpage should be no more than 40 to 60 kilobytes.
Some web technology can prevent users from viewing your site or affect indexing of your website by search engines. These technologies include:
- HTML frames
If using any of these technologies you need to consider what the potential risks may be to the usability and accessibility of your website. Consult Francesco Consultancy for more advice and which Technologies are right for your website.
The Equality Act 2010 makes it illegal for a website provider to discriminate against a disabled person by refusing to provide a service that is generally available, providing a service of a lower standard, or failing to comply with a duty to make reasonable adjustments.
The World Wide Web Consortium (W3C) has produced a number of accepted guidelines, which are divided into three priorities:
priority 1 ‐ websites must comply otherwise some users will find it impossible to access the site priority 2 ‐ websites should comply, otherwise some users will find it difficult to access the site
priority 3 ‐ websites may comply, otherwise some users will find it somewhat difficult to access the site.
The Equality Act 2010 requires that, where a provision, criterion or practice of a business puts a disabled person at a substantial disadvantage compared to people who are not disabled, the business must make ‘reasonable adjustments’. Therefore, the website owner must:
change a practice, policy or procedure that makes it impossible or unreasonably difficult for disabled people to use the service provide an auxiliary aid or service if it would enable (or make it easier) for disabled people to use the service.
Making websites accessible
There are many adjustments you can make to your website to make it easier for disabled people to use. For example, your web designer can attach a text description to every image and link on the site. This means that blind users, who rely on a browser that reads out the contents of the webpage, can hear a description of what an image is and where a link will take them.
Checking if your site is accessible
There are a number of tools and services that can help you check that your site is accessible, Francesco can advise you on best practice accessibility of your site.
Designing the site
When designing your website, plan a theme and structure that will hold all the pages together. You should convey an image of good basic operational functionality, neatness, and a professional appearance.
Create a common theme of colours, fonts, graphics and page layouts. Simplicity and consistency in your visual design can be the most effective way of presenting your online brand.
Plan to create a unified look for the various sections and pages of your site, so that the users are aware that they are moving around within a single site as they move from page to page. Use templates to create a common page layout across your site.
Create smooth transitions from one page to another by having consistent elements on each page, for example:
- placing navigational elements in the same position on each page
- using the same fonts and colours throughout the site
- having a clear, visual hierarchy to the elements on your page
All of this will help to reinforce the identity of the site. Also think about the placement of any marketing messages and ‘calls to action’. These should be prominently placed so that there is no ambiguity ‐ improving customer response rates.
Don’t be afraid to use white space or blank areas in your webpage design. Good use of white space can help define areas of your page and can be used to structure and separate content. A lack of white space can give the impression that the page has too much content and can confuse the user.
If you already have a recognisable brand or image that you can capitalise on, incorporate it into your design. The brand and image of your business should be reinforced by your website. Consistent use of your company logo throughout the site will help in this. Your website should be part of your wider marketing strategy ‐ integrating online and offline communications to reach your target audience.
Designing for the user
The key to designing a successful website is understanding the needs of your audience and reflecting these in your design.
When planning your website, think about who your users are and what they will want to do when they come to your site. Consider how the user will want to interact with your website ‐ perhaps by selecting the products or services that you offer or through searching your website using keywords. How can you use hypertext or internal links to help the user navigate around your site? Use linked text and short descriptions, and organise links into related topics. When using internal links, ensure that the user always knows where they are and what they need to do to return to the higher levels of the site.
Hierarchy of information
Don’t make users navigate through too many layers of the site to find the information they want. Provide prominent navigation aids so the user can quickly find the information they need. A standard navigation bar that is in the same place on every page enables the user to move quickly through the site. Try to stick to accepted web conventions for navigation, as this will help make your website more intuitive for the user.
Amount and placement of content
Consider how much content should be contained on a webpage. Avoid putting too much information on a page, as this may make it more difficult for the user to locate the information they need.
Use links as a method of dividing content between pages.
Also think about where you place elements on the page, for example marketing messages or ‘calls to action’ may be more effective if placed ‘above the fold’. This refers to the area of the page that is immediately visible once the page has loaded and before the user has scrolled down the page in the browser window.
Designing for the web restricts your font choices. If you specify a font that a user does not have, their browser will substitute a default font, changing the look of the page.
Choice of fonts
The webpage will look clearer if you choose fewer fonts and type sizes.
Choose different size fonts of the same type throughout the site. Consistency will help you to develop a strong visual identity for your site. It will also aid the user by emphasising key elements of the page and improving page scan‐ability.
Availability of fonts
The user’s browser and operating system determine how a font will be displayed, so you can’t be absolutely sure how your page will look. In addition, if the font is not available, then the user’s system will default to a standard font. It is best practice to choose standard fonts for pages and specify a font family ‐ this will help reduce the possibility of the page being displayed using system fonts. Remember to use commonly available fonts and test your web‐ pages on multiple platforms to see what effect these have on the overall appearance.
Ensure the page is legible
The size and face of the type used on the page determines the legibility of the text. Remember that it’s harder to read on screen than from a paper copy, so keep fonts big enough to be comfortably read online.
To make things easier for the user you can add more white space around the blocks of text and between lines, both of which will help with clarity. Make sure that you have enough contrast between your text colour and the background colour. Dark backgrounds frequently make the text difficult to read, so opt where possible for darker text on a lighter background.
Ensure that you take into account accessibility issues when deciding on the fonts and colours that you want to use in your website design. Francesco Consultancy can help and advise you with this.
Develop a simple and consistent navigation scheme. Links should be presented clearly and the words or images that the user clicks on must be clear, concise and relevant to the information they are leading to.
Always ensure that the navigation buttons are placed in the same place on all of the pages on the site. An exception to the rule is the homepage ‐ where the focus is often on brand and identity. Here, the navigation may be treated differently. You should remember that every graphic you add to your website for navigational purposes increases the download time for the user. So keep your navigation buttons simple and reuse the same ones throughout your site. It is now commonplace to have the company logo as a link back to the home page.
The key to the success of your website will be largely based upon how easy it is for users to find the information that they require. You should consider including a site map and a search facility to help in the location of information. Together with clear and consistent navigation, users will be able to find what they are looking for on your site through a combination of browsing and search.
As part of a user‐centred approach to the design of your website, how your content is organised needs to be considered in the planning phase. Content organisation or information architecture should be planned and tested with users in mind.
In addition to your site navigation think about how you can use hypertext or internal links to provide contextual linking to related ideas or content. Try to anticipate what information users are likely to want next, but at the same time leave them free to make their own navigational choices.
If it’s a large website consider the use of a breadcrumb trail to show users where they are within the website.
This can also improve your visibility in the search engines. For more information see the Francesco Consultancy Ltd guide on search engine optimisation.
The ‘three click rule’
Bear in mind the ‘three click rule’ which means that users starting at your home page should be able to get to the information they require in three mouse clicks. While this is not always achievable, by taking it into account at the site design stage you are more likely to get close to it.
What you should do next
Once you have had a chance to review all of your options available with regard to Website Design and you have come to the conclusion that a professionally designed and built website is a vital part of your Company or Business’ promotion and marketing strategy, you need to enter into a formal agreement with an established and reputable Website Developer, such as Francesco Consultancy Ltd.
Francesco Consultancy Ltd will review your website and business requirements, and then make suggestions and produce creative proposals for you to consider. We will then build you and test for you an SEO Optimised site to your requirements. Choosing the right partner to undertake the creation of an SEO optimised website on your behalf is an important decision to make – we at Francesco Consultancy believe we are the right partner for you.
We cannot guarantee to get your website to the top of every search engines top rankings, but what we can guarantee is to do all that is possible to ensure that your website is optimised to achieve the very best that it can on your behalf. Francesco Consultancy Ltd. will do all that is possible to maintain that position and to ensure that your website is generating the maximum business generation and return on investment for you.
Please contact us today for a free initial consultation or just some impartial advice on: 0844 292 0842 or e‐mail us at: email@example.com