Best practice in web design
Usability plays a key role in web design. No matter if you are working on a simple portfolio site, an online shop or a web app, your visitors should be able to quickly and easily access the information they need.
Not only that, you must also keep in mind the legal issues when designing your website. It must be accessible to people with disabilities and comply with the Disability Discrimination Act 1995 (DDA).
This guide looks at all of the web design best practices, taking into account the DDA. It tells you what to consider when planning your website, how to approach the main technical issues in web design and design a user-friendly website.
Planning your website
Planning is essential when it comes to designing a website. Failing to plan properly can lead to money lost, poor user experience and a website that reflects negatively on your business.
Website project planning
Website planning begins by first identifying your website's exact purpose. Typical reasons why businesses develop websites include:
- building brand awareness
- finding new customers
- saving money
- selling products
- providing improved customer support
The key to effective planning is realising that you are not building a website for yourself. You're creating it for your prospective audience, which can include: your current and potential customers, new prospects, stakeholders, suppliers and partners.
Website content planning
Decide on the type of content you will need to support the objectives of your site and how to present this online. Think about balancing the amount of text, images and interactive content that you wish to publish on your site. 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. Think about:
- what will make them visit your website
- what they will want when they get there
- what will encourage them to return
If you are creating an e-commerce website, provide unique descriptions for your products or services. This will help with search engine optimisation and ensure that you stand apart from your competitors.
When you are planning content for your site, don't forget you are legally required to publish certain company information - see business websites: legal requirements.
Website structure planning
When it comes to planning your website, it may help to map out its structure in a diagram or by using wireframes. You can do this on paper or with simple digital tools like Word or PowerPoint.
A key structural element is a site map, often shaped like a flow chart. You can build a site map in Word, or with specialised commercial software and even some freeware. An outline with bulleted lists and indentations can serve the same purpose. Indicate pages, sub-pages and other structural breaks elements that will make up your website. See how to develop a project plan for your website.
Make your customer's journey on your site as effective and efficient as possible - see how the principles of user-centred design can help with this.
Business websites: legal requirements
As a UK-registered business, you will need to disclose certain information about your company on your website. This is a legal requirement. Failure to comply can result in fines, action taken by the regulators, customers or consumer protection bodies, as well as damage to your reputation.
Is your business website legal?
You must display registered information relating to the identity of your business. This includes:
- company name
- registered number
- place of registration
- registered office address
- contact details, including an email address
- details of how to contact business by non-electronic means
- the VAT number of business, if applicable
- details of any trade body or regulator registration
For sole traders and partnership, you must display the address of the principle place of business. If the company is being wound up, you must also display this on your website.
This information doesn't have to be on every page of your website, but it must be easily found. For example, you might want to put it on the 'contact us' or 'about us' page. Some websites have this information in the footer section of each page.
As well as registered information, you must also publish on your site:
- a privacy notice - to explain what personal data you collect and how you use it
- a disclaimer - to outline your liability for the use of your website and its information
Read about privacy notices under the GDPR (General Data Protection Regulation).
Cookie information and consent
Selling to consumers
If you sell online, you must also include on your website:
- terms and conditions - see sample website usage terms and conditions of use
- delivery and returns policy
These are all required as part of the consumer protection regulations. Read more about consumer contracts.
Remember that, as a website operator, you will also have a legal duty to address any web accessibility issues on your website.
Main technical issues in web design
Before you create a website, you should consider the technical issues relating to web design, specifically:
- browser compatibility
- screen resolutions
- web technologies
- internet speed
Web pages should be able to display across different browsers, including Internet Explorer, Firefox, Safari and Chrome.
When building your site, test your web pages for browser compatibility issues in as many browsers and operating systems as you can. Remember to test on most recent browser versions, as well as the older ones - not all of your visitors may be using up-to-date software.
If you are updating an existing site, use web analytics tools to see what browsers your customers are currently using to access your website.
The most common screen resolution size in recent years has been:
- 1366x768 pixels for desktops
- 360x640 pixels for mobile screens
- 768x1024 pixels for tablets
Higher resolutions, such as 1920x1080 pixels for desktops and 375x667 for mobiles, are gaining in popularity. It's important to consider these sizes carefully. If you design your website for higher resolutions, some low-resolution screens and older devices may not be able to display all of your content. Read about mobile web design best practices.
Not all internet users have high-speed access, so connection speed should also influence your webpage design. Research suggests that:
- nearly half of web users expect a webpage to load in 2 seconds or less
- 40 per cent of people abandon a website that takes more than 3 seconds to load
Too many images or rich media - such as animations or video - will slow down the speed at which your webpage loads. This can result in your customers leaving the site. Since page speed is a ranking factor, slow speeds can also hurt your search ranking.
Try to keep file and image sizes to a minimum. The total size of a webpage should be no more than 40 to 60 kilobytes.
Some web technologies can prevent users from viewing your site or affect indexing of your website by search engines. These include:
- HTML frames
If using any of these technologies, consider the potential risks to the usability and accessibility of your website. See more on web accessibility issues and learn how to design a user-friendly website.
Web accessibility issues
The Disability Discrimination Act 1995 (DDA) makes it illegal for a website provider to discriminate against a disabled person. In practice, this means that you must design your website so that disabled people can access it using technology - eg screen readers.
What is accessibility on a website?
Accessibility describes the practice of enabling access to websites for people with disabilities. It aims to address all the different needs of users, including those with visual, mobility, auditory and cognitive difficulties.
What are the Web Accessibility Standards?
The World Wide Web Consortium (W3C) has produced a number of accepted accessibility guidelines for websites. These set out three levels of conformance:
- W3C Priority 1 - websites must comply, otherwise some users will find it impossible to access the site
- W3C Priority 2 - websites should comply, otherwise some users will find it difficult to access the site
- W3C Priority 3 - websites may comply, otherwise some users will find it somewhat difficult to access the site
The UK government recommends that websites must satisfy priority 1 and should satisfy priority 2 of the guidelines.
Is your company website accessible?
You can use a range of free online tools and services to check if your site is accessible.
Reasonable adjustments for disabled website users
If your website isn't accessible, it may put a disabled person at a substantial disadvantage compared to people who are not disabled. You may be required under the DDA to make 'reasonable adjustments'.
This means that, by law, you must:
- change a practice, policy or procedure that makes it impossible or unreasonably difficult for disabled people to use your service - eg using very small text that puts vision-impaired people at a disadvantage
- provide an auxiliary aid or service if it would enable (or make it easier for) disabled people to use the service - eg offering an alternative point and click interface for visitors that can't use a keyboard
How to make a website accessible?
People with different abilities will navigate websites in different ways, depending on their needs and preferences. Some may configure standard software and hardware to suit their needs. Others may use specialized software or hardware that helps them perform certain tasks.
You can make many adjustments to help disabled people to use your website. The WC3 website provides guidance on getting started with web accessibility. You can also see our best practices for accessible websites.
Best practices for accessible websites
Accessibility is an important part of web design. For public authorities and commercial websites in Northern Ireland, it is also a legal requirement under the Disability Discrimination Act 1995.
Why is web accessibility so important?
People with disabilities use a wide range of tools and techniques to help them navigate the web. For example, some may configure standard software such as browsers to their specific needs. Others may prefer to use specialised tools, eg screen or text readers, assistive scanning keyboards, etc. For these tools to work, you must build websites and applications in a way that supports the use of assistive technologies.
How to implement web accessibility?
You should follow key principles of accessible design when developing your website and content. You can implement most of these easily without any effect on your site's look and feel.
Provide alternative text - it offers a textual alternative to graphic content, such as pictures, icons, button, illustrations and charts. Alternative text helps people who have visual impairments and may rely on screen readers to navigate a site.
Provide captions, narrations or transcripts for media - this applies to videos, archived audios as well as live audio.
Don't use colour to convey meaning - colour is a strong design element, but you should avoid using it to convey information. It will be inaccessible to colour-blind people, as well as screen readers.
Mark-up your site structure - use headings, lists, tables and other structural elements to give meaning to a web page or order of information. Make sure that all functionality is available from a keyboard.
Use headers for data tables - if you are using tabular data, introduce table headers so that screen readers can understand them.
Label form content correctly - every form element, such as text field, checkbox or dropdown list, should be marked using the 'label' element. Make sure users can submit the form and recover from any errors, such as the failure to fill in all required fields.
Make links understandable - screen reader users may choose to read only the links on a web page, so links should make sense even if read out of context. Avoid phrases like 'clink here' or 'more'.
Distinguish between different types of content - this includes PDF files, Word documents, PowerPoint presentations and flash content. If you can't make them accessible, consider using HTML or alternative
Allow users to skip repetitive elements on the page - provide a 'skip to main content' or 'skip navigation' link at the top of the This can help a user with impaired mobility or relying on a screen reader to access content more quickly.
Provide clear and easy-to-read content - content should be accessible to people with diverse cognitive abilities, as well Write it in plain English and make it as simple, and as easy-to-read as possible.
Design to standards
If you are building a website from scratch, make sure that you develop HTML-compliant and accessible pages from the outset. Use cascading style sheets where possible to separate content from presentation. This can give you more flexibility and improve accessibility of your content.
Characteristics of a user-friendly website
User-friendly design - or usability - is crucial to the success of any website. It plays a great role in improving the performance of your site, meeting the needs of your audience and increasing user satisfaction.
What is user-friendliness?
User-friendly is a term that describes features and functions that make using a device, system or a website easier. There are many ways to define 'user-friendly' and many more ways to put this concept into practice across your website or application.
Examples of user-friendly elements may include:
- graphical user interfaces (GUIs)
- descriptive navigations
- visual cues
- online help systems
Tips for building a user-friendly website
Here are some essential characteristics you should include in your website to make sure your visitors find the information they need quickly and easily.
While you are planning your website, think about:
- who your users are
- what they will want to do when they come to your site
- how they will want to interact with your website
- how can you use 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, make sure that the user always knows where they are and what they need to do to return to the higher levels of the site. Remember also to follow best practices for accessible websites.
Hierarchy of information
Don't make users navigate through too many layers of the site to find the information they want.
Provide clear 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. Follow accepted conventions for website navigation - this will help make your website more intuitive for the user.
Amount and placement of content
Consider how much content you should put on a webpage. Avoid putting too much, as it may prevent the user from locating the information they need. Use links to divide content between pages. Use elements like headings and subheadings to help users scan the page before reading it in more detail.
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. Find out how to plan your website content and structure.
People are increasingly using mobile phones and tablets to access the internet, so optimising your website for mobile is a necessity. See more on mobile website design best practices.
Consistency in web design
Consistency is a key factor in web design for both visual elements and functionality.
Consistency ensures that your website looks coherent and works harmoniously across all its different elements, such as headers, footers, sidebars and navigation bars. It also:
- gives your users a more positive experience
- enables users to carry out tasks more quickly and efficiently
- improves usability and learnability of your website
- eliminates pain points and difficult navigation
- saves money and time on design
Navigation elements offer users a road map to all the different areas and information within the site. In order to work effectively, navigation should be clear and consistent across your website.
Visitors to your website should be able to move from page-to-page easily and always know where they are. Difficult website navigation can tempt them to leave your site.
Page layouts and menu structure
It is a good idea to use templates to create a common page layout across your site. Create smooth transitions between pages by having consistent elements on each page. For example:
- have menus in the same position on each page
- have same fonts and colours throughout the site
- have a clear, visual hierarchy to the elements on your page
- ensure that your business logo appears on each page
- make sure that your logo links back to the homepage
- include a search box on each page in the same location
You should also consider the placement of any marketing messages and 'calls to action', such as newsletter sign-up, special offers or discounted products or services. Place these prominently as positioning can improve customer response rates.
Fonts and typography
Designing for a website restricts your font choices. If you specify a font that a user does not have on their computer or mobile device, their browser will substitute a default font, changing the look of the page.
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. The web page will also look clearer if you choose fewer fonts and type sizes.
Remember to test your web pages on multiple browsers to see what effect these have on the overall appearance.
Branding in web design
If you already have a recognisable brand or image, make sure to incorporate it into your design. Your website should:
- reinforce your corporate brand
- use your company logo consistently throughout the site
- be part of your wider marketing strategy in an attempt to reach your target audience
While you are making sure that your website is consistent and true to your brand, don't forget it also needs to be accessible and usable. Read about web accessibility issues.
See other characteristics of a user-friendly website.
Website navigation best practice
When it comes to websites, the navigation acts like a compass guiding users to different areas around the site. Keeping it simple, organised and consistent throughout the website helps with the overall user experience.
Navigation bars and buttons
Navigation menus are most often placed horizontally at the top of a website, or vertically on the left. It is important to be:
- consistent with the placement of navigation - this can increase the visual appeal of your design and make it easier for the users to find their way around your site
- clear and concise when assigning categories in your navigation - this can help users to quickly and easily access information about your company or products
Remember also that every graphic you add to your website for navigational purposes increases the download time for the user, so keep navigation buttons simple and reuse the same ones throughout your site.
The success of your website will largely depend on how easy it is for users to find the information that they require. In addition to providing good navigation, you can help your users find information by including:
- a site map
- a search facility
- well-organised content, which you
- planned and tested with users in mind
You can also use links within your site to relate different 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 using 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 search engine optimisation.
The 'three click rule'
Bear in mind the 'three click rule'. This is an unofficial design rule that suggests that users should be able to find any information on your site within no more than three mouse clicks. This may not always be achievable if you are designing a large site. In this case, keeping the user informed of where they are, where they have come from and where they are going, should be enough to keep them on task.
Mobile web design best practice
Mobile web design is necessary for most modern businesses. Devices such as smartphones and tablets are widespread and people are increasingly using them to shop, interact and conduct business online.
If your company relies on a desktop website, at the very least you should check how compatible it is with mobile devices. If your customers can't access your website on the go, you may well be missing out on potential sales and business.
How to create a mobile-friendly website?
You can take different approaches to creating a mobile-friendly website. The three most common strategies are:
- responsive design
- adaptive design
- designing a separate mobile version of your website
There are pros and cons to each. What is best for your business will depend on your circumstances, your existing website and the experience you wish to provide to your customers.
What is responsive design?
Responsive web design involves using HTML and CSS to create grids, layouts and other website elements that automatically respond and adapt to the user's device based on screen size, platform and orientation.
Such design provides optimal viewing experience across a wide range of devices. It also removes the need to have two separate versions of the website and duplicate content. This makes responsive sites easier to maintain and configure for search engines. Learn more about responsive web design.
Responsive vs adaptive design
Adaptive design involves creating several distinct layouts for specific screen sizes, including mobile phones, tablets and desktop computers. The website detects the type of device a user is accessing from and delivers the pre-set layout for that particular device.
This can work well and preserve resources if you wish to retrofit an existing desktop site. However, the results don't always display optimally for a wide variety of screen sizes. Most new websites now use responsive as it takes less work to build and maintain.
Separate website for mobile and desktop
Some businesses choose to take the 'separate websites' approach. They create mobile-dedicated websites designed specifically for mobile devices.
This strategy uses server-side logic to send a different version of the site to a user depending on the device they are using. There are typically higher costs associated with maintenance of, what is effectively, two different versions of the site, and greater potential for issues around search engine indexation.
Tips for mobile web design
When designing a mobile website, regardless of the approach you take, basic web design principles still apply. Keep the website as simple as possible and consider:
- Using CSS layouts (cascading style sheets) - to support cross platform compatibility.
- Page layout and information hierarchy given the limited screen space - divide content into smaller segments across pages to minimise download time and make them easier to read.
- The types of content that you use - eg the use of rich media (including animations and video). These will increase download times and may not be supported across all devices.
- The placement of navigation and its ease of use on mobile devices - consider visual cues to provide a better user experience. Use spacing between buttons to extend the clickable area.
- Use mobile-appropriate technology - such as drop-down lists or radio buttons for information input, rather than entering free text (which can be difficult on a keypad).
- Optimising e-commerce functionality for mobile, eg the shopping cart - reduce the steps customers have to take to complete a purchase to improve conversion rates.
- If you have a separate mobile version of your website, as opposed to a responsive site, always give users the option to visit your main website and vice versa.
See also mobile marketing and m-commerce.