Although many web designers understand the basics of CSS and HTML, there are many design and development 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, learn about four common website design mistakes to avoid in order to find a balance between great design and pragmatism.
1. Avoid 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 device such as a tablet, objects' heads are often partially or completely cut off. While specific CSS rules can be set for different widths, these rules may not apply 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.
2. Avoid information overload.
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 on 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 into greater detail.
The recent trend in web design of using large amounts of white space for a clean look is not only aesthetically pleasing, but it’s also a functional way to display easily digestible information that helps keep users’ attention.
Everything you need to plan, build, and launch a stunning website can be found in Mastering the Art of Website Redesigns.
3. Avoid keeping key information below the fold.
Another UX consideration to take into account when designing your website 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 and drive high conversion rates.
4. Avoid choosing design over SEO.
Thoughtful design can have a real impact on driving potential customers, but it’s important that web 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?
Designers must also consider what the impact will be on SEO when they use animations in a website design. Many animations are built using JavaScript, which executes after the page has loaded. This means, from a practical standpoint, that when Google or other search engines crawl the website, the crawler may only see what is statically on the website and not what is brought in by the animation. This can be a huge oversight, where the desire to present the website creatively prevents the website from ever being found.
Learn more about website design.
Keep these items in mind when designing your website to maximize the user experience and ensure healthy conversion rates. For more tips on website design, download our free e-book, Mastering the Art of Website Redesigns.
