91Ï㽶»ÆÉ«ÊÓƵ

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.

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 91Ï㽶»ÆÉ«ÊÓƵ

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 91Ï㽶»ÆÉ«ÊÓƵ 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.

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.

Make your customer's journey on your site as effective and efficient as possible - the principles of user-centred design can help with this.

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, and 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 the business by non-electronic means
• the 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 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.

Privacy 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 disclosure - to explain how you use cookies on your site
• a 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 people if you set cookies on your website, unless those cookies are essential to provide an online service at someone's request (for example, to remember what's in their online basket, or to ensure security in online banking).

You must explain in a clear statement what cookies do and why, and - if no exemptions apply - you must also seek users' consent to the use of cookies by giving them an option to accept or refuse their placement on their devices. You can use pop-ups, splash pages, message bars, banners or other solutions to seek consent.

Your cookie statement can be a standalone page on your website or included with your privacy policy. The Information Commissioner's Office provides more information about .

See our sample privacy notice and sample website disclaimer if you need these documents for your business.

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. 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 the technical issues relating to web design, specifically:

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

Browser issues

Web pages should be able to display across different browsers, including Firefox, Chrome, Edge (successor to Internet Explorer), Safari and Opera.

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.

Screen resolutions

According to , the most common screen resolution sizes in recent years have been:

• 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, have gained in popularity over the last year. 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.

Download speeds

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. For context, the average size of a desktop web page in 2022 was 2286.3KB and of a mobile web page was 2006.6KB. (Source: )

Technology

Some web technologies can prevent users from viewing your site or affect indexing of your website by search engines. These include:

• HTML frames
• Javascript
• Flash
• AJAX

If using 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.

In Northern Ireland, the Disability Discrimination Act 1995 (DDA) makes it illegal for a website provider to discriminate against a disabled person.

In practice, this means that a website providing goods or services to the public must be designed in a way that allows disabled people to access them, eg by using auxiliary aids or services such as 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 :

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

Is your company website accessible?

You can use a range of 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

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 .

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 - see suggestions of our best practices for accessible websites.

The WC3 website provides detailed guidance and resources on .

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. 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 91Ï㽶»ÆÉ«ÊÓƵs 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 presentation. This can give you more flexibility and improve the accessibility of your content.

At the very least, you should address these basic accessibility considerations:

Keyboard accessibility

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.

Consider colour contrast

Contrast ratio between text and background needs to meet minimum standards 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.

Mark-up 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 or via screen reader and that you provide headings in an appropriate hierarchical order to aid navigation and understanding.

Use headers for data tables

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

Provide text alternative for images

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.

Provide captions, narrations or transcripts for media

This applies to videos, archived audios as well as live audio.

Label form content correctly

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 (using a screen reader). This includes recovery 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 link text should make sense even if read out of context. Avoid ambiguous 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. Users should be able to navigate and read any downloadable material by using assistive technology.

Allow users to skip repetitive elements on the page

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.

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.

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 .

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

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.

Mobile compatibility

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

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.

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.

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.

The 'three click rule'

The 'three click rule' 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.

If your website is large or has a complex structure, consider using a breadcrumb trail to show users where they are within the website. This will help with navigation and can also improve your visibility in the search engines. For more, see search engine optimisation.

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 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 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 91Ï㽶»ÆÉ«ÊÓƵ 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 91Ï㽶»ÆÉ«ÊÓƵed 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.