Our Blog

Web Design Best Practices Cheat Sheet

By Snap Agency November 18, 2014

Whether you’re an SEO Strategist, into content marketing, or an e-commerce expert, we always want to empower our team to be able to have an eye for the broader web design decisions of the rest of the team.  Since Snap Agency is a conversion centric shop, we are always thinking about what conversion centric best practices are. Because good-looking visuals also play a part in a customers online experience, some visual web design best practices will be included here. This is a living breathing list of web design best practices that change as trends change, and more is revealed.

 

Use basic/conventional navigation and logo placements to allow for your user to think about your websites proposition

The logo is generally in a place of prominence at the top left of a site, because that’s where users eyes go first, and this rule should only be broken if it’s very intentional.

Navigation is most commonly on the top, to the right of the logo, and occasionally on the left under the logo if the vertical space on the window needs to be utilized.

 

Include a visually stimulating Slider and/or Main Image that clearly shows your main point of differentiation

 

Sliders have been shown to be not very effective because people perceive them as ads. If they are used they should have clear navigation for the user to have as much control as possible. Right and left arrows, paging indication (often dots on the bottom) so they can flip through them that way as well. Many organizations use carousels because it satiates their inner organizational stakeholders, which is a very relevant consideration, but not ideally what you want driving the trajectory of your website, but rather the needs of the end user of the website.

 

The image should directly communicate the business the organization is in. If you blur your eyes and stand ten feet back, you should be able to tell what industry the website is for, or what product it is selling.

 

 

Include Call-to-action Buttons for a visitor’s obvious next steps

 

Sometimes referred to as the ‘big orange button’, to give the user a clear next step is important. This button should be as big as possible, still giving visual space to the other elements.

 

Many sites have shown it effective to have a strong call to action over the main image. In conjunction with some powerful and crafted copy to invite the website visitor to do what the company wants them to.

 

The text on the ‘call-to-action’ should be as specific and clear as possible. Replace vague text like ‘Get Started’ with something more descriptive like “Get a Free Quote Now” or replace “Contact Us” with something more direct like “Start the conversation with [company] now”

 

 

Featured 3 or so Prominent items on the Home page to give the visitor some options

Not always the case, but often sites can feature 3 or more items directly underneath the main image with call to action. These could be products or core business offerings. As 3 core messages in a speech are much more easily recalled than a list of ten main points, these 3 core items can provide a more memorable impression of what the business offers.

 

Provide a website visitor some options to quickly get your contact information

Some people come to a site in a hurry to find contact information. Examine the type of business the website is being made for; is it a type of business where the customer may need to get ahold of them at a moments notice? If so it may be appropriate to include some quick contact information on the right of the header above the navigation.

 

For mobile, a site in this category would likely benefit from some easy contact buttons. These often could be added in the form of full-width buttons at the bottom of the site.

Screen Shot 2014-11-18 at 9.49.57 AM

It also might be appropriate on mobile to have a telephone icon on a button next to the menu button.

 

Buttons on mobile should be at least 44 pixels by 44 pixels, so that they are easily tappable by peoples fingers.

 

Make your contact page comprehensive, including any ways that a visitor might want to contact you, and make it easy to do so

Often this page should include Phone contact information, Address,  and a Contact Form

 Phone and the address, depending on the business the company is in can be included in the footer on every page for quick access, but should be on the contact form as well.

General use contact forms should be 5 or less fields. 3 is optimal for the most submissions generally. People find unneccessary fields they have to fill out annoying and sometimes decide not to fill out the form.

 For some industries it’s important to qualify the person filling out the contact form, so some more questions will be needed, but this should be rarely.

 

Amp up the content on your inner pages (500+ words, and 1,500 words for main service pages)

Inner pages without imagery should be somewhat rare. Usually it’s important to include a relevant photo from the industry that relates to the material.

For being visible on search engines, a sites main pages should contain at least 500 plus words. If they don’t have this, consider amping up the content of the page so that it’s not penalized.

With all that text, make sure you include some visuals as well so the text is not overwhelming. Also consider line-length and text-size so that text is readable. Ideal line-length is 45-75 characters, which is a shorter line than you might have previously thought.
Line Length, Content, "We don't read every word individually"

Product pages do best when they are treated as the visual feast they are, and feature a extremely large and distinct add to cart button

Images are how most people shop on the site. In e-Commerce the images need to be high-quality and have several. If this is not the case, consider suggesting investing in photography, and making sure that this takes high priority on the site, so that visitors can get the best possible idea of what the product would look.

 

The Add to cart button should be a different highly-visible color from most of the elements around it. It should be as large as possible still keeping sufficient space between it and the other elements.

 

Allow your users to scan your blog posts quickly, and find the one they want to read

 

The blog listings are best when they allow people to scan different posts and decide on that they would like to read, and then click into an individual post.

 

If they are currently showcasing a full blog post, it would make sense if once they have more than 3 posts to parse make them into excerpts and to have images.

 

Create a consistent format and style for the featured images of your blog so they gel with each other

 

To increase the professional look and overall experience of a blog, it’s good to have featured images presented for each, to give a visual clue of what the post is about without reading.

 

It’s important that the different images don’t clash heavily with each other and give a cohesive feel although they may not directly relate to each other in content.

 

Create compelling blog posts by emphasizing relevant imagery

 

Consider using the featured image at the top full-width with the title over top of it, to peak peoples interest in the topic in a visual way. This is a very common convention right now among popular blogs, amongst others.

 

Mix any relevant images throughout the article, left or right aligned with text around them, or centered without text wrapping, if they are larger.

 

Don’t miss opportunities to have call-to-action buttons strategically placed at the end of blog articles or other inner pages

A common missed opportunity is having a blog post end without a clear next step for the reader. Use ‘suggested posts’ , comments, next and previous post buttons, and or a ‘big orange button’ type call to action to contact the business or whatever their main goal is.

 

 

Double check your social connections, and your Contact information in the footer

 

Once again, mobile buttons in the footer for call and email could be added. Address and phone number could be present in the footer to increase trust and availability. Also, check the social links, making sure social links are properly linked. Relevant social links should have a look that matches the rest of the site visually.

 

Thank you for reading! I hope this was useful for you. Share any further web design best practices in the comments!