Back to Home Back to Notes

Abandoning the Old Web

Replacing table cells, flex columns, and fluff with viewports.
13th July, 2019

Over the years, the web has evolved to support a wide variety of features but it's still hard to guarantee a consistent layout on all browsers, running on all operating systems, at all possible device widths. I imagine that it's a frustrating experience for many, to build responsive sites that seamlessly adapt according to the end user's constraints. Personally, it's been annoying to start with code bloat (because of CSS toolkits/libraries that implement many features that I don't need) or have to hunt for my own code that implemented a very small subset of responsive layouts. Needless to say, testing the same code on different browsers and configurations is painful enough that there are commercial products that cater to this demand; and I find myself too poor unwilling to spend money to solve this problem.

So here I am, using viewport heights and widths for these pages. They seem to work on all browsers, operating systems, and device widths. I understand that there will be some configuration(s) for which my pages render in a wonky form, but I am tired of chasing those bugs.

As a gross simplification, the CSS in these pages specifies distances in terms of the total height and width of the browser window, specifically, the viewport. So if you use a wide display, you'll see more horizontal spacing between elements. Here's an example:

  div#content {
    padding: 4vw 0;
    margin: auto;
    width: 90vw;
    max-width: 728px;
  }

The above snippet shows the CSS for the core content in these pages. The padding field requests 4% of the browser's total width as padding on the left and right side of the content block, with zero padding on the top and bottom. Within the remaining space, the content block is horizontally center-aligned to fit 90% of the browser's width. The max-width field ensures that the width of the content block does not exceed 728 pixels, so that lines don't become exceedingly long on ultra-wide screens.

Save for a handful of layouts that are specified using fixed pixels, the rest of the entire site uses viewport heights and widths. There is not Javascript code either. Hopefully, your experience using these pages is as smooth as mine.

But if the layout breaks for you, it might be time for you to switch to a newer browser.

PS: The simpler layout also helps text-mode web browsers such as elinks to render the page quite well (see screenshot below).

Back to Notes