Beyond 100vw

How about undoing years of Responsive Web Design on purpose?

Essay

Responsive Web Design turned 10 last year. Sure enough, the mobile web is even older. And by that I mean the proper mobile web, not the Wireless Application Protocol that preceeded it.

When Apple unveiled the first iPhone in 2007, they wanted the proper web on it. At that point in time, websites were best viewed in X×Y resolution, and the majority of sites out there did their best to make sure they would not look great on this new handheld form factor.

So Apple had to invent the viewport meta tag, and the rest is World Wide Web history. Weirdly, even after more than a decade, this tag is still not standardized.

The Virtual Viewport

Adopting the viewport meta tag didn’t happen overnight. In the early days, users had to zoom in and out on mobile devices. According to MDN, …

Narrow screen devices (e.g. mobiles) render pages in a virtual window or viewport, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once. Users can then pan and zoom to see different areas of the page. For example, if a mobile screen has a width of 640px, pages might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 640px space.

Far from ideal, which is why today we are creating websites that adapt to any screen size. Our efforts would be in vein though, if the virtual viewport behavior would kick in. As MDN goes on to say, …

[This] mechanism is not so good for pages that are optimized for narrow screens using media queries—if the virtual viewport is 980px for example, media queries that kick in at 640px [or less] will never be used, limiting the effectiveness of such responsive design techniques.

This is where a viewport meta tag like the one shown below comes in. Adding it to a page ensures all media queries work as expected, and we are using the actual screen size[1] to display our content.

<meta name="viewport" content="width=device-width,initial-scale=1">

Breaking out

What if we went back to having two[2] scrollbars? Seriously?

With the latest redesign of this site, I did just that. I didn’t ditch the viewport meta tag though. I do need the actual screen width as a starting point, so no shrinking. But below a certain breakpoint—usually handheld territory—the width of the page is wider than the width of the screen, on purpose. To do so, I’m setting the body width beyond the viewport width. There are numerous ways to achieve this, but the code below should get you started.

body {
	width: calc(100vw + 20rem); /* simplified example */
}

There is one key difference to the zoom in and out days of the early mobile web. I made sure my visitors are able to consume the content by going top to bottom. I’ll write about the details of this redesign in an upcoming Editorial blog post, but in a nutshell:

  • Independent of screen size, the layout always features two columns;
    • a wider one for the primary content on the left,
    • and a sidebar on the right.
  • The main article is shown in the left column, which fits on the screen.
  • So reading the article is possible by scrolling down only.
  • Certain elements however, like source code blocks or prominent images, span across both columns.
  • Some not so essential things, e.g. article thumbnails, protrude into the sidebar, even though they are tied to what is going on in the left column.
  • Other not so essential things, e.g. article summaries, live exclusively in the sidebar.
  • Even in the left-most scrolling position, I made sure a small portion of the sidebar is visible, so my visitors have a clue that scrolling in both axes is a feature here.

As always, it was an iterative redesign, but now in its final form, I found »breaking out of the actual viewport« to be an interesting design decision. Eventually, not just the main content, but everything—header, navigation, footer—adheres to the two columns in some shape or form, leading to off-centered appearances that I wouldn’t have thought of otherwise.

But most importantly, this makes it possible to use one layout for all screen sizes, with almost no media queries[3].

Is it a good idea?

I do not know.

An innovative idea? You decide.

On this day five years ago, on stage at dotCSS, I myself said: This is about …

[…] the design patterns we have at our disposal. And this is where we seem to be stuck. We have the continuous long scroll on mobile, we have the hamburger menu. We need to expand our repertoire. And to do so, we need to innovate. And innovation can’t be done on localhost, innovation needs to be done out there, in the open.

Let’s go out there, and innovate.

Footnotes

  1. To keep things simple, I’m neglecting that a pixel is not a pixel. ↩︎
  2. Sometimes websites flip from vertical to horizontal scrolling for aesthetic reasons, so they too go beyond 100vw. But those sites are a different story, as they still have only one scroll axis. ↩︎
  3. And without fancy math. ↩︎