I can not browse the internet like a normal person because I build websites for a living. I constantly critique the websites I find and open up my code inspector to see how a particular effect was achieved. With surprising frequency I have come across websites (including quite a few for huge companies) that are generally beautifully constructed, but that have a glaring visual error that somehow made it past quality control testing. The following mistakes are the offenders that make me cringe the most.
1. Formatting that Forces a Horizontal Scroll Bar
Horizontal scroll bars are expected on websites that were built with a fixed width. However, when a horizontal scroll bar appears on a responsive website, it is symptomatic of an element on the page overflowing beyond that page’s 100% width container.
In a lot of cases I’ve noticed that this phenomenon is specific to only one page or type of page on a website, which helps explain how this issue could have been missed during testing. Elements introduced by content managers into a blog post, for example, can cause this issue on single pages. Often, this issue is not a problem on all widths, but may impact just some screen widths.
A few things that can cause overflow to happen are:
- fixed width elements that are wider than the current viewport width
- elements where overflow should be, but is not set to “hidden”
- when a percentage width is combined with a fixed width and therefore “outgrows” the available screen real estate
- iframes
- images or videos that are not responsive
Fixing this particular problem can be tricky and typically involves some detective work. The key element of fixing the problem is identifying which element or elements on the page are causing the overflow. From there, one can make a decision about how to approach fixing that particular issue.
When I run across this issue on a website I am building, I typically will look for the source of the problem by hiding entire sections of the DOM one at a time to see if the scroll bar disappears once a particular element is hidden. Usually I add display: none; to elements using my code inspector to remove them one at a time. In particularly persnickety cases I may comment out entire sections of code that I have identified are NOT the problem so that I can more easily continue to inspect other parts of the page.
2. Favicons from Software or Frameworks
Building a website on top of an open source content management system like WordPress or Drupal is an awesome thing, but leaving the WordPress or Drupal logos as the favicon for your website is not. I also frequently see websites that still have the favicon from the Genesis Framework, which is a popular theme framework for WordPress.
The fix for this problem is simple: create your own favicon that utilizes the logo or branding of the client. Though I don’t recommend it, another option is removing the favicon entirely: no favicon is better than someone else’s favicon.
3. Very Wide Blocks of Text
There are a whole host of typographic sins that are committed constantly on the internet, but this particular problem can be very subtle, which is why I think it is often overlooked.
Wide blocks of text are a problem for readability of content. It is difficult for the human eye to focus on a line of text much beyond 100 characters. Historically, this is part of why newspapers have generally been typeset using narrow column widths.
Typically, if a website was designed with typographic best practices in mind, the comps for mobile, tablet, or desktop screen widths would not have included wide blocks of text. When this issue appears, I think wide text blocks have usually been introduced unintentionally in the development phase of the project. A developer may have failed to pay attention to what happens in between established breakpoints or they may have actively introduced wide text blocks when improvising design between or beyond established breakpoints.
Solutions to fix this particular problem are varied and heavily depend on the design of the particular site in question. Often the fix is to continue a design pattern from a different breakpoint, to establish a maximum width for a particular section, or to add a new breakpoint to address this specific issue.
Conclusion
I’m a stickler for visual details and it drives me nuts when I see these mistakes in the wild. Are there other visual mistakes you’ve noticed that consistently appear on websites you visit? Let me know in the comments.