On the Width of Webpages

Author Max Niederman
Published 2022-07-13

A rant on webpages wider than their viewports.

Websites should never be wider than their viewports. I think that most people understand this, but it’s incredible how often I come across sites which get this wrong. It seems that every other site I read on my phone looks like this:

Interesting Title

This is the body of the text. It goes on and on and on... until finally it is long enough to fill up enough space to properly make the point. Actual intelligible English may not be sufficient, though. At times, designers have even resorted to Latin-based gibberish to fool the eye. When you read the words "lorem ipsum dolor," know that you have been had.

A figure which extends past the viewport.

More body text. The body text never ends. It just keep going. ON AND ON AND

A flawed but common mobile layout.

An actual phone, of course, cannot simply render the content outside of the screen. Instead, browsers handle overflowing by allowing users to move the viewport by scrolling.

This is a good default for horizontal overflow, but it’s usually bad for vertical overflow. When mobile users scroll vertically, it is easy to accidentally scroll horizontally as well, which can be extremely distracting from the content.

Most web developers test their sites primarily on desktop browsers, where the viewport is much wider, so it’s easy not to notice the issue. Even when developers test using desktop browsers’ mobile emulation tools, they typically use a mouse or touchpad, so they are less likely to accidentally scroll horizontally.

Web developers should adopt the following priniples: