Although many web designers understand the basics of CSS and HTML, there are issues that can easily be overlooked, especially when a website is passed off to a marketer or client who is then in charge of making updates. In this post, I will detail some common mistakes to avoid in order to find a balance between great design and pragmatism.
Banner Background Issues
One of the biggest mistakes to avoid in web design is using background and banner images that don’t scale well. Lifestyle images that include people using the promoted services or products are often used on websites . Banner images are often set in CSS as what is known as “cover” which allows an image to take up the full real estate of a banner background without stretching or distorting the image.
With lifestyle images, the biggest issue is using people’s faces near the edges of a banner. When the banner height changes based on content, or the website is viewed on a smaller width such as a tablet, people’s heads are often partially or completely cut off. While specific CSS rules can be set for different widths, these rules may not be applicable to an image added by a client or marketer. When using background images, it’s best to use images that won’t be aesthetically damaged by having sections cut off.
If a design is being made for a company that requires a consumer to be educated about the product or service before purchase, it’s common for clients or designers to want to pack too much content on a page in order to try and answer all possible questions. This is where information architecture and user experience (UX) are especially valuable. It’s important to use white space to draw attention to the most important content and guide the potential customer down the sales funnel.
Having too much information in one space, such as the home page, is likely to cause the user to skim in order to find what is relevant. It’s a better idea to force the user to interact with how you’ve logically laid out the information into bite-sized chunks. This could mean having an overview of services offered, while linking to additional pages that go in greater detail. The recent trend in web design of using large amounts of white space for a clean look is not only aesthetically pleasing, it’s also a functional way of displaying easily digestible information.
Below the Fold
Another UX consideration to take into account is content below the fold. This simply means content that requires scrolling in order to be seen without scrolling. It’s important that top-of-the-funnel information be available above the fold or you may find end users navigating away from relevant information. This is especially true with calls to action or lead generation items such as forms. There must be a cohesive melding of marketing and design in order for a website design to be effective.
Choosing Design over SEO
Thoughtful design can have a real impact on potential customers, but it’s important that designers work with marketing consultants or have a good grasp of search engine optimization (SEO) fundamentals before creating designs that provide little SEO value. For instance, an elegant image and text slider may illustrate information well, but does the design take into account the need for an H1 element that supports SEO? Do the subsequent sections of the page have other necessary H2 or H3 elements present for the same reason?