Last week we talked about the visual aspects of good design and how you can use the visuals of your website to appeal to your audience, reflect your brand, and utilize good design standards to make your site work for you.
When websites were first becoming more design-oriented, designers swung a bit too far away from functionality in the effort to make a site visually appealing. In today’s online world, striking the balance between visual and functional is a delicate act. A site has to look good, but it also has to be responsive, follow accessibility standards, be easy to navigate, actually work, and still somehow stand out from your competition. This can be a challenge, especially if you don’t know what standards your company needs to follow.
Do Your Research
Perhaps the most helpful thing you can do for your company’s current or future website is to research what web requirements your industry may need to meet. W3C is a great resource for standards and requirements, and they list the standards by industry. Don’t worry if the information seems technical—the important aspect of this research is to be aware of a few things your site may require, which will help you choose a designer or agency that is the right fit for your needs.
We especially want to call out an issue that has come up in the last few years for websites, and that is ADA web accessibility. What is this? Web accessibility is using a set of development practices that ensure your site is easier to access for people with disabilities, like having your text readable for text-to-voice, being able to navigate your site using only a keyboard, titling images properly so a screen reader can describe them, etc. Depending on your industry, you may fall under higher levels of accessibility requirements. The Department of Justice is still working on a ruling of what set of standards will be required, but there are a lot of things a developer can do for your site to manage the accessibility now. ADA management is an important question to ask any potential designer or agency you may be looking to partner with.
Let’s start with navigation. It’s important, it should sit at the top of every page, and it’s how users find anything on your site.
- The site logo. Whenever you see a website logo at the top of a page, you probably assume that it links back to the home page. This has become standard practice across the web. Make sure you do that on your own site.
- Simplify the links. We talked about the importance of simplicity last week (link), and this is especially true in your navigation.
- Does it respond? If your site is mobile-friendly, the navigation menu should adjust with a smaller screen. Usually, this looks like a dropdown menu
2. H Tags
No, we don’t expect you to know what h tags are and how to use them properly. It is good to be aware of them, though, and to understand their purpose. “H” stands for “heading,” so h tags are a bit of code a developer will stick around the words that are meant to be content headers. Visually, headers help break up content into bite-sized chunks. Functionally, h tags help search engines and accessibility tools properly understand and read through your page. Check in with your designer/developer to make sure h tags are being used in your content headings.
Depending on your audience and industry, your site may be either image-driven or image-supported. Either way, properly sizing, naming, and tagging your images is important.
- Size. Any website images (unless you run a stock photo site like Thinkstock) should never be more than 72 dpi—this is the resolution of the image.
- Name. There are over 400 million image.jpg files out on the internet. Search engines use image names as well as the text on your website in search results, so get creative and descriptive in your image file names.
- ALT tags. Similar to file names, alt tags are descriptions of your images placed in the code of your site. Alt tags are required for accessibility. You can check if your images have alt tags by hovering the mouse over an image and see if text pops up.
Forms are a wonderful way for people to contact you or sign up for updates to their email. If your site doesn’t have forms, it would be worth using a plugin or talking with your designer about getting a contact form. Also, regularly check that all your forms are working. If you use a contact form or a subscribe form for people to sign up for your blog, make sure it works! Send yourself an email from the form every few months, and make sure you get it.
5. Bootstrap and Parallax
Having your pages do cool things when scrolling through them became more possible and easier to use a few years back with the code frameworks of Bootstrap and Parallax. Now you’ll see chunks of text scrolling over layered images in some sections, icons that fade in only when you reach that part of the page, and lots of neat little features. We love the frameworks, but in moderation. Having sections of your page moving and jumping and doing “cool” things can actually be a huge distraction, and can even cause visitors with disabilities to leave your site. If you absolutely must have some of these features, use them wisely and sparingly, and consider avoiding designers who use a lot of these on their sample sites.
We began with navigation, so it’s only appropriate that we end with the footer. As unimportant as this aspect of your site may seem, the footer is not to be ignored. Here is where people generally expect to find basic contact information, perhaps an address, navigation, and social media links. Carefully plan what content you’ll put in your footer, because if people reach your footer and haven’t received clear direction of what page they’re to go to next, they’ll rely on your footer to help them navigate to the next important part of your site. Or they’ll leave. So don’t forget the footer.
Knowing what your site may require for functionality can improve your website and help you get the results you want from it. Research the standards for your industry and work with your designer to problem-solve what functions best fit your needs.
Other articles related to website design: