Gijs Heerkens

Visitor expectations šŸ•¹

Since the invention of the Web in 1989, a set of standardised best practices for building websites, has evolved. Visitors subconsciously expect you to follow these standards, but many webmasters still donā€™t get that.

I want to talk about four common front end web standards that still need some attention around the web:

Disclaimer: this is my personal opinion, based on what Iā€™ve learned through the years.

Menus

The main menu is the starting point for a visitor to find their way on your website. As to not confuse the visitor, it should be the same on all pages.

The main menu should be displayed horizontally, in the header bar. The first menu item should always be ā€œHomeā€ and the last men item should always be ā€œContactā€.

Visitors wonā€™t find ā€œContactā€ easily if itā€™s hided in some small secondary menu, and even though everyone knows a logo links to the home page nowadays, ā€œHomeā€ should still appear in the menu.

The most important site sections should appear in the main menu, Iā€™d advice to limit it to five items, excluding ā€œHomeā€ and ā€œContactā€, to keep it clear. You can use foldable submenus below each menu item.

If you have more very important sections, review your site structure. For SEO purposes, your menu structure should correspondent with your site structure. This includes both main and submenu items.

Less important sections can be placed in the footer menu. Donā€™t expect anyone to use this menu, but it might add some value for SEO.

Even Amazon doesnā€™t include ā€œHomeā€ and ā€œContactā€ links in their main menu.

Buttons

When you look at a web page from a distance, the button should be the first thing you notice.

Buttons guide visitors through your website, and should be consistent throughout the website.

A button should be outstanding in size, font and especially colour. The button should have an opposite colour from your websiteā€™s main colour, to make it stand out.

When you buy a standard template, oftentimes the buttons have the templateā€™s main colour. Like in the template Iā€™m using.

Holy shit! Iā€™m doing it wrong myself šŸ˜‚.

Copy

The main task of copy is to convey words to the reader. So you have to make sure it is clearly legible. Big fonts work better than small fonts, even if it ā€œdoesnā€™t look niceā€. Beauty is less important than usability on a website.

Use at least 16 pixels.

Black text on bright backgrounds works best to read on a screen.

Font use should be consistent throughout the website in order to not confuse the visitor. Different types of headers should have the same size in all instances to be recognised as such.

Donā€™t use different font sizes or different fonts for paragraphs all over the website. A smaller font indicates that a text is less important and will probably not being read.

Furthermore, decide how you want to address the visitor. This can be informal or formal, as long as you are consistent (doesnā€™t apply for English), and it can be plural or singular.

Hey Zuck, your copy is too small.

Hyperlinks

On a website, an underlined word implies that itā€™s clickable. So donā€™t underline words that are not hyperlinks.

Hyperlinks should get a distinctive colour, the websiteā€™s main colour is fine, and be underlined. If you want to do it perfectly, the styling of hovered, visited and active links should be different.

Google does it wrong. Almost all words on this page are hyperlinks but not underlined.
Exit mobile version