Best Practices in Web Design
Good website design can mean different things to different people and, as this HubSpot article points out, someone could spend years learning design, usability and User Experience (UX). Some websites are flashy but bells and whistles don’t always mean better. While they may look impressive, they aren’t always easy to use or navigate, leaving visitors lost and frustrated. These days it’s all about simplicity. Good design should make a website easy to navigate, quick to load and mobile friendly.
Trends come and go but the basic elements of good website design never go out of style. By adhering to a few basic design principles your company can create a professional online presence that is not only visually captivating but also drives the actions that impact your bottom line.
The Basics
For starters, users expect certain things when they land on a web page. It should be easy for them to find the information they need, including who you are and what you do, and how to contact you. It is common practice to include your logo in the upper left corner and the contact information in the upper right and this information can also appear in the footer. It is also common practice to include main navigation across the top and to have your social media icons link to those sites.
As you can see at the top of this web page, our header adheres to these basic web design principles.
Breadcrumbs are also important. They are a navigational aid in the user interface that allows a visitor to know where they are so they can get back to a different part of a website. Per Smashing Magazine, “breadcrumbs are horizontally arranged text links separated by the “greater than” symbol (>); the symbol indicates the level of that page relative to the page links beside it.” An example would be: Home>Services >About Us. Breadcrumb navigation is laid out in the backend, in HTML and CSS.
Now, let’s take a deeper look at what constitutes good web design, visually. A website should be easy on the eyes and have no more than three typefaces and only a few colors. All pages should have a consistent look and feel. They don’t need to be identical, but they should use the same color scheme and fonts. Also, page templates could be used so certain types of content are always displayed in a similar fashion. For example, standard pages would all look a certain way whereas a blog page would have a different look and feel, yet fit in with the website’s overall design.
All graphics, illustrations or photos must have a purpose, otherwise, they just create clutter. Also, black text on a white background is easier to read as there is enough contrast for those with visual impairments. If you do want to use colors, make sure there is enough contrast between the text and the background for readability. The most important thing is to have content people can read instead of content that simply looks good.
The most important information should be in the top half of the website, also called “above the fold.” This goes back to the days of newspaper journalism and the inverted pyramid. The most important information appears first because people may not get a chance to read the rest or scroll down a web page.
Content
Content needs to be chunked, with the use of white space, bullet points, headings, and sub-headings to help draw the reader’s eye through the content. This is because viewers scan in an F pattern, rather than read, what they see online. They also look for keywords. Content should be written in plain language at no more than an eighth-grade reading level so it can be better understood. Alternative text (alt-text) should also be used. Alt-text is a word or phrase inserted as an attribute in the HTML of a document that describes the content of an image. This makes a website more accessible to those with disabilities, who may be using a screen reader to decipher the content.
If you are linking to another web page, it’s best to use a descriptive phrase instead of simply “click here.” For example, learn how to make your website disability-friendly with these tips from Mashable. If linking to content on your own website it should open in the same window. This keeps viewers on your website longer and will help with search engine rankings. If linking to an external website, have the link open in a new window.
Three Clicks and a Call to Action
After landing on a web page, users must be able to complete an action within three clicks. If not, they may leave without taking any action and you will have a higher bounce rate. Therefore, the call to action needs to be clear and easy to understand. The design can be a button that encourages someone to contact you or to make a purchase, or a graphic that links to a downloadable asset. Here is an example from our home page which encourages the viewer to download our 2016 Hiring Trends report.
Responsive Design
These days, responsive web design is a necessity because more people are viewing websites and conducting searches on mobile devices than on traditional desktop computers. Responsive design uses CSS and HTML to make content look good on any screen, whether a laptop, tablet or smart phone. If your website isn’t responsive you need to upgrade to a responsive theme to stay relevant to your audience/customers.
If you need some inspiration and great web design ideas, check out the Webby Awards – it’s like the Academy Awards for all things internet.
At this point you may be asking yourself, what does McKinley know about great web design, their website isn’t exactly Webby-worthy! To that we say, ouch, that’s a bit harsh! In all seriousness, though our website adheres to many of the principles outlined in this article, it needs a makeover. Fortunately, here at McKinley, we practice what we preach and are in the process of redeveloping our website. Stay tuned – we hope to unveil it during in the first half of 2017.
