10 Web Design and Development Mistakes

Ten web design mistakes that can make a website harder to use, navigate and understand.

Since Dreamkatcha was formed, our aim from the start was to raise standards in web design.

We are strong advocates of accessibility, clear design, and aim to raise the bar a little higher each time. In our time, we have seen some websites that were acceptable in the 1990s and should have stayed there. These examples highlight ten common mistakes in website design and development, with practical reasons to avoid them.

10. Neglecting Cross Browser Compatibility

Visitors use a range of phones, tablets and desktop computers. Responsive layouts help content adapt to different screens, but browser compatibility also needs testing. Check key pages and interactions across an agreed range of browsers and devices, including navigation, forms and keyboard access, rather than assuming that a responsive layout covers everything.

9. Automated Music

Unexpected background music can distract visitors and interfere with their browsing. Give people control over when audio starts. The embedded audio file may be charming for 10 seconds but hearing the same muzak each time you load the site is irritating at the very least. Why not see some of our latest projects and see for yourself.

8. Ignoring White Space

A balance between content and whitespace is an essential ingredient of any website. The browser, irrespective of their device or PC does not want to be bombarded with an overkill of text, graphics, audio and video files. Potential customers may take their business elsewhere.

7. Too Many Stock Images

Sometimes you can tell from a great distance if the web designer has plumped for stock images. For example the clichéd pictures of women with white teeth and call centre headsets. Go for original images featuring your own work. Hire a photographer or teach yourself, and invest in some high-quality photographic equipment. A well-focused original image with a DSLR or a film camera adds more value to your site than a stock image.

6. Images Of Text

Images of text can create accessibility barriers because visitors cannot adjust them like ordinary text. Use real text styled with CSS wherever possible. W3C’s guidance on images of text explains the issue and exceptions such as logos. Keep essential written information available as readable page content, rather than relying on an image alone.

5. Too Many Big Images

Big images can either take forever to load or be a pain to navigate on a mobile phone. If you’re designing for mobile devices as well as desktop PCs, ensuring the scalability of images is important. With loading time another issue, image sizes should strike a balance between clarity and file sizes.

4. No Clickable Logo

With responsive web design in its ascendency, the use of a clickable logo is more important than ever. Today’s web designers and visitors to your website associate the clickable logo as the back to the Home link.

3. Confusing Navigation

In cyberspace, there is nothing worse than getting lost on a website due to arcane navigation systems. It is imperative that your website has the same navigation on all of its pages, with primary links given pride of place. Pull-down menus from primary links could be used to direct users to secondary pages.

2. Inconsistent Style

What’s worse than inconsistent navigation? An inconsistent style throughout your website. CSS (Cascading Style Sheets) helps apply shared styling across pages. Reusable styles can make a site easier to maintain; inconsistent presentation alone does not determine whether a page can be indexed. A consistent house style throughout your website allows for continuity from the Home page to the Sitemap.

1. Splash Pages

Our final example is the splash page: an introductory screen visitors must pass before reaching the information they came for. These were particularly common on older websites and can create an unnecessary extra step. The idea of a splash page was to ‘greet’ visitors to the client’s website, usually with a self-indulgent Flash or Shockwave movie clip. But, in the dial-up era, they were slow and added little value to the site. Avoid an extra entry screen unless it serves a clear purpose. Visitors should be able to reach useful content promptly, with essential information accessible to both people and search engines.

Finally…

Use these ten points to review your website’s clarity and ease of use. The original 2017 article highlighted Lings Cars as an unconventional design example; a distinctive visual style can have a deliberate purpose, but it still needs to suit its audience. Our article on brutalist web design explores that contrast. For practical checks, read our guide to website usability.

Contact Dreamkatcha today to discuss a start-up business,  web design or logo design project.