Best practice in web design

Planning is essential when it comes to designing a website. Lack of planning can lead to money lost, poor user experience and a website that reflects negatively on your business.

Set your website objectives

Website planning begins by first identifying your website's purpose. Typical reasons why businesses develop websites include:

• building brand awareness
• finding new customers
• saving money through online processes
• selling products or services
• improving 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 customers, new prospects, stakeholders, suppliers and partners.

Plan your website content

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.

Thorough market research will help you lay a firm foundation for your website. You will want to research your competitors, your products, your target markets and consider internal resources and processes to inform your project.

See how to set up an e-commerce website (video tutorial).

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.

Plan your website structure

When it comes to planning your website, it may help to sketch your site structure using a site map, wireframes or simple tools like Word or PowerPoint, or use free online tools that serve a similar purpose. 

Create a flowchart showing:

• main pages (eg homepage, about, contact us)
• sub-pages and key sections
• logical user flow from entry points to key actions (eg buy now' or 'contact form')

Use bulleted lists or indentations if software is unavailable. Label each page with its purpose, priority (high/medium/low) and key content. 

You may want to share your draft site map with a few target users or colleagues. Ask if they can find key information (eg products, contact details) in three clicks or fewer, and refine the structure based on feedback.

Aim to make your customer journey as simple as possible - the principles of user-centred design can help with this.

As a UK-registered business, you must display key details about your company on your website. Failure to do so can lead to fines, regulatory action, customer complaints, and damaged reputation.

Publish registered business details

You must display on your website the registered information relating to your business's identity. This includes:

• your company name
• registered number
• place of registration
• registered office address
• contact details, including an email address
• how to contact the business by non-electronic means (eg phone or post)
• VAT number of business, if applicable
• details of any trade body or regulator registration

For sole traders and partnerships, you must display the address of the primary place of business. If the company is in liquidation, you must also display this information 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.

Privacy and cookie information

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 cookie statement - to explain how you use cookies on your site (see more below)
• a website disclaimer - to outline liability for the use of your website and its information

Read about privacy information under the UK General Data Protection Regulation.

Cookie information and consent

Under privacy laws, you must tell users if you set cookies on your website, unless those cookies are strictly necessary to provide an online service they have requested (for example, to remember items in a shopping basket or ensure security in online banking).

For non-essential cookies (such as those used for analytics and marketing), you must get consent via a banner or pop-up. Consent must be clear, granular, and include an option to 'accept all' or 'reject all' cookies. Pre-ticked boxes are not allowed.

You must also explain in a clear statement what these cookies do and why. Your cookie statement can appear as a standalone page on your website or in your privacy policy.

The Information Commissioner's Office provides more information about cookies and similar technologies. See our sample privacy notice and sample website disclaimer if you need these documents for your business.

Selling online to consumers

If you sell online, you must also include on your website:

• terms and conditions (ToC) for website use - see guidance on website ToC
• delivery and returns policy

These are all required as part of the consumer protection regulations. As a website operator, you will also have a legal duty to address any web accessibility issues on your website.

Before you create a website, you should consider technical issues relating to web design that impact how users view and interact with your site across devices. Specifically, you should consider:

• browser compatibility
• screen resolutions
• web technologies
• internet speed

Browser issues and web design

Web pages should be able to display correctly across different browsers - popular options include Firefox, Chrome, Edge, Safari and Opera. Test for compatibility issues in as many browsers and operating systems as you can, 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 use most to access your website. This helps you prioritise testing.

Design your website for common screen sizes

In 2026, typical screen sizes include:

• 1366x768 pixels for desktops
• 375x667 pixels for mobile screens
• 768x1024 pixels for tablets

Higher resolutions, such as 1920x1080 pixels for desktops and 414x896 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. Design responsively to avoid cutting off content on smaller screens, and read more about mobile web design best practices.

Download speeds and design

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

To minimise risks of slow response times, reduce image sizes, avoid heavy animations or video on key pages, and use modern formats like WebP. Average webpage size is now around 2MB - aim lower for better performance and SEO. Slow sites can hurt both user retention and search rankings. 

Avoid problematic technology

Some older web technologies can prevent users from viewing your site or break accessibility, usability or search indexing. These include:

• HTML frames
• heavy Javascript that blocks content
• Flash (now obsolete)
• complex AJAX without fallback

Whenever possible, choose modern, accessible alternatives. See more on web accessibility issues and learn how to design a user-friendly website.

In Northern Ireland, the Disability Discrimination Act 1995 (DDA) makes it unlawful to discriminate against disabled people through your website. This applies to websites offering goods, services or facilities to the public.

In practice, this means that your website must be designed in a way that allows disabled people to access it, eg by using auxiliary aids or services such as screen readers.

Elsewhere in the UK, the Equality Act 2010 replaced the DDA, but similar duties apply. 

Why web accessibility matters

Accessibility means designing websites that people with visual, hearing, mobility or cognitive impairments can use. Almost 1 in 5 people in Northern Ireland have a disability (2025 data). Good accessibility improves your site's usability for everyone, boosts SEO and widens your customer base. 

Follow Web Accessibility Standards

The World Wide Web Consortium (W3C) has produced accepted accessibility guidelines for websites. These set out three levels of conformance:

•  A (priority 1) – the minimum level of access has been met
• AA (priority 2) – an acceptable level of access has been met
• AAA (priority 3) – a completely accessible website

The UK government recommends that websites must satisfy priority 1 and should satisfy priority 2 of the guidelines.

Check if your website is accessible

You can use a range of free online tools and services to check if your site is accessible. Examples of these tools include WAVE and Lighthouse (in Chrome DevTools) for automatic testing. Test manually with a screen reader like NVDA (free) or VoiceOver (Mac).

Make 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

The Equality Commission for Northern Ireland (ECNI) has published a range of resources that deal with the rights of access to goods, facilities, services (including online services) and premises. These resources include:

• advisory guides for employers and service providers
• good practice videos
• publications and relevant codes of practice
• customisable templates, checklists and policies
• links to further help and advice from other organisations

Browse ECNI's resources on accessible goods and services and see suggestions of our best practices for accessible websites.

The WC3 website provides detailed guidance and resources on getting started with web accessibility.

Accessibility is essential for good 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 important for businesses?

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. Other users 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 improve web accessibility

If you are building a website from scratch or redesigning it, make sure that you develop HTML-compliant and accessible pages from the outset. Use cascading style sheets where possible to separate content from visual design presentation. This can give you more flexibility and improve the accessibility of your content.

You should also test on real devices and assistive tools throughout development for the following basic accessibility considerations:

Keyboard navigation

Users should be able to tab around the screen to access each area of the site, including close any potential pop-up windows without using the mouse. Visually impaired users may not be able to see a cursor and may rely on text-to-speech software to tell them where the focus is on the page.

High colour contrast

Contrast ratio between text and background needs to meet minimum standards (WCAG 2.1 AA minimum 4.5:1 ratio) to ensure those with visual impairments or reading disability can still access the site. Colour is a strong design element, but avoid using it to convey information. It will be inaccessible to colour-blind people, as well as screen readers.

Clear site structure

Use proper headings (H1, H2, H3...) and semantic HTML for 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 or via screen reader and that you provide headings in an appropriate hierarchical order to aid navigation and understanding.

If you are using tabular data, introduce table headers so that screen readers can understand them.

Image alt text 

Text alternatives convey the purpose of an image or function to provide an equivalent user experience. They are commonly added to graphic content, such as pictures, icons, button, illustrations and charts. They help people who have visual impairments and may rely on screen readers to navigate a site. Decorative images should get empty alt text (alt="").

Video and audio

Add captions, narrations or transcripts for media, both archived and live. 

Form labels consistency

Every form element, such as text field, checkbox or dropdown list, should be marked using the 'label' element. Users should be able to navigate, understand and input form data without being able to see the page (eg using a screen reader). This includes recovery from any errors, such as the failure to fill in all required fields.

Meaningful links

Screen reader users may choose to read only the links on a web page, so link text should make sense even if read out of context. Avoid ambiguous phrases like 'clink here' or 'more'.

File format

Distinguish between different types of content, including PDF files, Word documents, PowerPoint presentations and flash content. If you can't make them accessible, consider using HTML or alternative. Users should be able to navigate and read any downloadable material by using assistive technology.

Skip repetitive elements

Provide a 'skip to main content' or 'skip navigation' link to help a user with impaired mobility or relying on a screen reader to access content more quickly.

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.

Please note this is not a complete list of all accessibility requirements. These are only some of the main considerations of accessible design. You can implement most of these easily without any effect on your site's look and feel.

For more recommendations, see W3C's detailed guidance on accessibility principles.

User-friendly design - or usability - is crucial to the success of any website. It helps visitors find information fast, reduces frustration and increases user satisfaction.

What makes a website user friendly?

User-friendly is a term that describes features and functions that make using a device, system or 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:

• intuitive graphical user interfaces (GUIs)
• descriptive and clear navigations
• helpful visual cues
• online help systems
• customisation

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.

User interaction

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 you can 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.

Balanced content and layout

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.

Mobile compatibility

People are increasingly using mobile phones and tablets to access the internet, so optimising your website for mobile is a necessity. Create a responsive design that adapts to all screen sizes. Test touch targets (minimum 44x44 pixels) and fast mobile loading. See more on mobile website design best practices.

Consistency is a key factor in web design for both visual elements and functionality. It 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

Consistent navigation

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. Place navigation menus in the same position on every page (usually top or left sidebar). Use the same labels and order throughout.

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 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 (typically about two or three) - 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, logo, colours or tone, make sure to incorporate them into your design. Your website should:

• reinforce your corporate brand
• use your logo and visual image 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.

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.

Ease of finding information

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
• content 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.

Follow the 'three click rule'

The 'three click rule' is an unofficial design rule that suggests that users should reach any information in no more than three clicks from the homepage. For complex sites, use breadcrumb trails (eg Home > Services > Web design) to show their location and aid backtracking.

On mobile phones and tablets, use hamburger menus (three-line icon) or bottom navigation tabs. Ensure touch targets are large enough (minimum 44x44 pixels) and spacing prevents accidental taps.

Mobile responsiveness may also help with optimising your website for search engines. For more, see search engine optimisation.

Most users now access websites on smartphones. A mobile-optimised site prevents lost sales and improves your search rankings.

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 create 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 an 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 on 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.

Remember to test your designs - use Google's Mobile-Friendly Test tool and Chrome DevTools device simulation, and always test on actual phones, since emulators can miss touch accuracy and network speed issues. See also mobile marketing and m-commerce.