Average Distance Decreases

The average distance between pages mostly increased over the first eight or nine years but then decreased through until the present. Layout distance declined the most, 44% between 2012 and 2019.

Why?

Because we used interpretable features, though, we can figure out why. Sites shifted from a variety of colored backgrounds to mostly off-white with colors and images on top. For layout, pages used to have a variety of dense column patterns, but now they use lots of blank space.

Source Code

We also looked at the source code. While code overlap between pages has gone down, software library overlap has gone up. This pattern occurs first in the websites from technology and consumer services companies, and it correlates with another pattern: mobile support

Regression

But this could just be a coincidence. So we did a regression analysis to measure which libraries similar-looking sites tend to have in common. We found that UI libraries which are often used for responsive web design tend to predict for more similar layouts, while others predict less similar layouts

Software Libraries and Complexity

  • Javascript and CSS solved many problems on the early web, but caused technical complexity to explode.
  • Steve Jobs’ 2007 post "Thoughts on Flash" encouraged interaction on the web to converge on JavaScript
  • Libraries help manage that complexity and improve accessibility and usability, but drive homogenization.

Mobile Support and Responsivity

  • The rise of mobile web browsing brought existing problems involving screen resolution to the fore.
  • While some sites added alternate versions for mobile users, a solution emerged in responsive web design.
  • While responsive sites look resonable on many different screen sizes, they limit the space of visual deisgns.

Negotiation Over Wireframes

  • As the web became more important, stakeholders have become increasingly invested in the web.
  • When many parties are involved, web design develops into a long, negotiated process, centered around a wireframe.
  • Negotiations tend to lead to more conservative design choices, often shaped by the affordances of wireframing tools.

Like many sites made after 2012, this site is based on a template (this one is from purecss.io). It is responsive and makes use of a variety of CSS frameworks.