Website conventions you say? But I want my website to look different!
Designing with website standards and conventions is crucial for ensuring everyone including nonhuman web crawlers can easily access every page of a website across the internet. These standards also help make websites feel familiar from site to site, making it easier for the everyday user to navigate from one page to the next and easily find what they are looking for. But it’s also important to remember that your website can still look different even if your web designer is pushing you to follow website standards. Keep these website conventions in mind and you’ll make it easy for users to navigate your website, while also enjoying creative freedom.
Why Are Website Conventions Important?
Website conventions are essentially patterns that help to set users’ expectations and guide users as they navigate a site. Though there’s no instruction manual for navigating a website, or the internet in general, most of us learn how to use online resources in a relatively short amount of time. This is, in part, because of website conventions. Our pre-set expectations, formed by our previous experiences with other websites, give us a starting point for understanding most web properties. Though these conventions might change slightly year over year, leading to larger changes over longer time periods, the change is slow enough that users can adapt.
Sometimes, upending conventions makes room for innovation. Other times, it’s simply disorienting. The difference between the two is often decided by the usefulness of the convention—if an expected way of doing things isn’t useful, upending this convention might make an improvement. However, upending a convention that serves a useful purpose will create confusion.
So what do website conventions do? Why are they important? If you’d like to get especially creative and you’re considering upending website conventions, consider the purpose the convention might serve, such as:
- Provide a navigation roadmap: when buttons, links, and other website elements behave in an expected way, users can navigate the site without confusion. If a site deviates significantly from a user’s expectations, they can quickly become confused, and simply click away.
- Make room for web crawlers: web crawlers are digital robots that are designed to scan a page and send key information back to their source, such as Google. These robots are designed to crawl a page in a specific way, and deviation from website conventions creates roadblocks for them. If this happens, your site may encounter problems, like suffering SEO penalties.
- Allow for accessibility: many people do not read the web in the traditional way. Some people might use a screen reader or use magnification or devices that assist in navigation. Website conventions help to make the web accessible, and allow assistive devices to use websites more easily.
Below are the top 7 website conventions you should follow when designing your site:
1. Logo Placement
This is a big one when following website conventions. Logos should be placed highest up on the page and 99% of the time, placed on the left side of the page. Sometimes, it’s acceptable to place the logo top center, but when in doubt, align left. Now let’s talk size. Your logo is already in one of the most important spots on the page, so there is really no need to make it bigger. The logo should also always link back to the homepage.
Why is this important?
This website convention helps users return to the homepage at any time, making the site easier to use, and aids in brand recognition. With this logo placement, users can immediately tell where they are on the web and what your site is about.
2. Main Navigation
Site navigation is an important website convention for users to find the information they are looking for. With that being said, main navigation should be placed along of the top of the page, either to the right of the logo or below the logo. Less is more is also important for the number of pages included in the main navigation. We suggest anywhere from 5-7 pages in the first level of navigation and no more than three levels for sub navigation. This will prevent users from being overwhelmed with your content and help them find what they’re looking for more easily.
Why is this important?
Navigation is critical to site usability and navigation. If users can’t find what they’re looking for quickly, they’ll click away. Website conventions help users know immediately where and how to navigate a site, so they don’t have to hunt. There are some conventions you might bend or shirk to get creative, but this isn’t one of them. Changing navigation conventions will not only confuse users, but it also can affect accessibility and SEO.
3. Content Hierarchy
Website conventions for website content is to create a content hierarchy. This means that content should be made up of headings and paragraphs. Heading One should be used only once and the highest up on the page. This should contain the message and value of the page. After Heading One you may have some content or you might use the second heading called Heading Two. Any sub heading within Heading Two will be Heading Three and so on. Make sure these headings are keyword-focussed on the page to aid with SEO and bring relevant visitors to your web pages organically through search.
Why is this important?
Proper content organization is especially important for SEO and accessibility. Web crawlers that determine where your content shows up when users enter a search use hierarchical content conventions to “understand” what a page is about. If your content organization doesn’t make sense with the web crawler’s programming, the web crawler will consider your page disorganized, less valuable to users, and therefore less likely to show up in a search.
4. Using a Grid
A grid system is a structure made up of a series of horizontal and vertical lines that intersect and are used to organize and arrange content and images. Not only does a grid system allow you to achieve consistency but it also creates flow and hierarchy on a page.
Why is this important?
The grid pattern for a website layout is similar to a house layout; while there are many ways to construct a house, there are a few standards that must be met, or the design starts to affect the functionality of the home. For example, ceilings must be at least a certain height, and you generally wouldn’t walk through one bedroom to get to another. A website grid pattern is similar; you can make many changes, but this organizational system helps to keep content where it makes sense.
5. Link Styling
Another website convention to follow is link styling. Cross linking between pages and linking to other sources is a common practice but in order to differentiate link text from page text, you’ll want to use a different color for each. Page text is usually some shade of black, whereas link text should be a brighter color and, sometimes, bold or underlined. We typically recommend using the company’s primary or secondary color for links.
Why is this important?
Color contrast helps users quickly recognize links that they can click on, so they can navigate the site more easily. The general convention is black text with blue link text, but this can be adjusted, as long as there is adequate color contrast. Avoid using colors that are too light, since they tend to get lost in white backgrounds, or colors that are too dark, as they’ll blend in with regular text.
6. Buttons
Buttons should also follow website conventions. They should have some sort of background and hover effect. The background color is typically the same color as the link text or a secondary color. Buttons should be used for more important calls to action whereas link text can be used within paragraphs of information.
Why is this important?
Buttons are another part of users’ expectations. A user knows, from their previous experience, that a button leads to another page, usually on the same website. There are many ways to style buttons and, as long as the buttons use adequate color contrast and proper sizing, users will generally recognize buttons when they see them.
7. Colors
Colors should be determined base on your company’s brand standards. But if your company does not have brand standards then we recommend using 2-3 colors and 1-3 neutrals (white, black, gray). If you need more color then use tints and shades of the colors already chosen. This is an important website convention because it keeps your website cohesive and connects your branding on and off the web.
Why is this important?
Your color scheme is important for brand recognition, but it’s also important for accessibility. As previously mentioned, colors without adequate contrast can be difficult to read or interpret. Use a color contrast checker tool to make sure your color contrast is right. As long as these standards are met, there’s plenty of room to get creative.
We want you to have a unique website that’s easy for your users to navigate and find the information they are looking for. So by following these simple website conventions, you’ll be on the right track to achieving a user-friendly website. Are there any website conventions you follow that aren’t mentioned? Let us know in the comments!