Best practices in web design

Best site navigation practices
When it comes to websites, browsing acts as a compass that guides users to different areas around the site. Keeping it simple, organized and consistent on the website helps the overall user experience.
• Navigation bars and buttons
Navigation menus are most often placed horizontally at the top of a website, or vertically to the left. It is important to be:

  • consistent with navigation placement – this can increase the visual appeal of your design and make it easier for users to find their way around your site.
  • clear and concise when assigning categories in your navigation – this can help users quickly and easily access information about your company or products.
    Also remember that each graphic you add to your website for navigation purposes increases the download time for the user, so keep the navigation buttons simple and reuse the same ones throughout the site.
  • Finding information
    The success of your website will largely depend on how easy it is for users to find the information they are asking for. In addition to providing good navigation, you can help users find information including: a site map, a search facility, well-organized content.
    You can also use links on your site to relate different ideas or content. Try to anticipate what information users want, but at the same time, leave them free to choose their own choices.
    If it’s a large website, consider using a route to show users where it’s on the site. This can improve your visibility in search engines. For more information, see Search Engine Optimization.
    • “Three click rule”
    Remember “Three click rule”. This is an unofficial design rule that suggests that users should be able to find any information on your site in no more than three mouse clicks. This may not always be feasible if you design a large website. In this case, keeping the user aware of where they are, where they came from and where they are leaving should be enough to keep them busy.

Mobile web design best practices

Mobile web design is necessary for most modern businesses. Devices like smartphones and tablets are spreading, and people are using them more and more to shop, interact and do business online.
If your business is based on a desktop website, you should at least check how compatible it is with mobile devices. If your customers can’t access your site on their mobile, you may be missing out on potential sales and business.

How to create a website for your phone?
You can take different approaches to creating a mobile friendly website. The three most common strategies are:

  • receptive 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 want to offer your customers.

What is receptive design?
Responsible web design involves the use of HTML and CSS to create grids, layouts, and other site elements that respond automatically and adapt to the user’s device, based on screen size, platform, and orientation.
Such a design provides an optimal viewing experience across a wide range of devices. It also eliminates the need to have two separate versions of the site and copy. This makes responsive sites easier to maintain and configure for search engines.

Adaptive design
Adaptive design involves creating several separate layouts for specific screen sizes, including mobile phones, tablets, and desktop computers. The website detects the type of device from which a user is accessing and provides the default layout for that device.
This can work well and save resources if you want to retrofit an existing desktop site. However, the results do not always display optimally for a wide variety of screen sizes. Most new sites now use answers because they require less work to build and maintain.

Separate mobile and desktop site
Some companies choose to take the “separate websites” approach. They create dedicated mobile 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. In general, there are higher costs associated with maintenance, which is effectively two different versions of the site and a higher potential for search engine indexing issues.

Mobile web design tips
When designing a mobile website, regardless of the approach you take, the basic principles of web design still apply. Keep the site as simple as possible and consider:

  • Use of CSS layout (cascading style sheets) – to support platform compatibility.
  • Page layout and information hierarchy due to limited screen space – Divide content into smaller segments of pages to reduce download time and make it easier to read.
  • The types of content you use – for example, the use of rich media (including animations and videos). These will increase download times and may not be supported on all devices.
  • Placement of navigation and ease of use on mobile devices – consider visual cues to provide a better user experience. Use the spacing between the buttons to expand the clickable area.
  • Use mobile-appropriate technology – such as drop-down lists or buttons for entering information, instead of entering free text (which can be difficult on a keyboard).
  • Optimize the functionality of mobile e-commerce, for example, shopping cart – reduce the steps that customers need 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, you give users the option to visit your main site and vice versa.