Skip to content

Increasing Readability in Web Design

DBS Interactive
Laptop with creative web design floating around it

Web design has come a long way in the twenty years since the first website was published. The ease of use that today’s users experience on sites like Google and necessarily resulted from the trials of the early days.

Screenshot of an example of early web page

The first website.

While design techniques may come and go, one overarching goal of our efforts is increased usability. Here are a few ways to improve the readability of a web page.

Split up the Content

What Google did:

Google isolated the most frequently-used part of the page (the search bar) and moved the other stuff to the top and bottom. The result is a less-crowded page.

Screenshot of early Google search page from 2007

Google, 2007

the homepage of google in 2022

Google, 2022

Use High-contrast Colors with your Typography

What ESPN did:

Since 2005, the sports media giant ESPN replaced much of the green and gray backgrounds seen below with white backgrounds. The result? The text is easier to read, which is especially important on dimmer mobile screens.

Screenshot of early ESPN page from 2005, 2005

homepage of espn in 2022, 2022

Use Icons

What Yahoo! did:

See the big blue box under the Yahoo search bar in the screenshot below? Generally, the more stuff is crowded into a content box, the less likely it is that people will actually read and digest it before eye strain or frustration provokes them to navigate elsewhere. Instead of keeping that style, Yahoo opted to only display a fraction of the services they offer. Moreover, they accompanied each service with a unique icon. This serves to aid the user in quickly finding what he or she is looking for.

Screenshot of Yahoo page from 2005

Yahoo, 2005

homepage of Yahoo in 2022

Yahoo, 2022

Remove Extra Visual “Stuff”

What did:

In some cases, it is necessary to distinguish a hyperlink from regular text so that the user knows what text, when clicked, will lead to another page. But on other pages, such as’s landing page, the user already knows that almost everything on that page is clickable. In this case, underlined links may make the task of reading them more difficult. Looking at the changes to the left-hand sidebar between 2005 and 2022, one can see that Amazon got rid of the underlining as well as the bullets in this list. The result is greater readability.

Screenshot of Amazon page from 2007, 2007

homepage of amazon 2022, 2022

Increase Spacing between Elements

What eBay did:

Adding more content does not always make a website better. eBay improved the appearance of their homepage by increasing the font size of the important stuff and completely removing other parts of the page. The result is a cleaner, less cluttered page.

Screenshot of eBay page from 2005

eBay, 2005

homepage of eBay 2022

eBay, 2022

Anyone can use these techniques to make a good website great.