Document first web design

How to design a web page?

Add content for basic html document (header, h1, h2, p, etc)
Style for small screen
Style for big screen

I wanted to see if there's a simple way to discriminate between "mobile" (phone, tablet, foldable) and "desktop" (laptop, desktop). The defacto is to set CSS media queries, and change styles based on min or max width. I don't like this approach because there's no defacto mapping of screen size to device type and it's always felt hacky. Modern mobile devices are getting such high resolution that they can be the same or greater resolution as a desktop.

I was searching around the blogosphere to see what's the most effective tactic these days for design. Unfortunately little has changed, even worst more and more people are saying design "mobile first". That means start with the mobile view and add media queries as needed as you expand the screen size.

People are forgetting the core of what html is: a markup language for documents.

Mobile First is bad

There's more than just mobile devices
Pushes everyone on the low density mobile landscape.
Optimized for touch, still a lot of mouse and no pointer readers

Document First

It's a pretty simple idea: start with your web page looking like an actual page of paper. Then progressively enhance it as needed.

Design priority order:

Printer first: barebones html
Offline browser: navigation, minimum styles
Mobile: additional styles and themes, ie font sizes, layouts
Desktop: complex styles

Benefits:

Helps creater focus on the content itself rather than be distracted with ancillary design styling.
Accessibility: simple and semantic html is easy for screen readers and other tools to understand.
Widest range of device support: simple html is easy to render.
Using semantic elements makes it easier for robots, like Googlebot, to index.
Responsive by default.
Adding mobile and desktop layouts is easy.

Code in the bare information using the semantic html elements. You know, put the main header in <header>, put subheaders in <h#>, paragraphs in <p>, etc.

I suggest using as much as the system default styles as possible, enable user's preferred color scheme with the advent of dark mode:

<meta name="supported-color-schemes" content="light dark">
<meta name="color-scheme" content="light dark">

Then include minimal styles inline within the html document. This is useful if the user decided to download the page and read it offlien without downloading any other resources. They still get a somewhat decent experience.

Rational

Read "A history of HTML" on The World Wide Web Consortium's site.

Printer first

HTML was invented as a publishing language for research documents. It's really easy to have a legible html by using just the barebone elements and nothing else. It even prints out on paper like a normal document.

Design your website with the minimal needed so that someone can print out the page, with no additional resources linked, and still read it.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="Noah Pavuk">
<meta name="supported-color-schemes" content="light dark">
<meta name="color-scheme" content="light dark">
<style>
  .todo   { font-family: monospace; color: red; }
  .done   { font-family: monospace; color: green; }
</style>
</head>
<body>
<header>
<h1>My site title</h1>
</header>
<main>
<h2>Some topic</h2>
<p>Some long tangent about some topic by some person on the internet.</p>
</main>
<footer>
  <p>Thanks for reading!</p>
</footer>
</body>
</html>

Offline browser

The first letter 'H' in HTML is for Hypertext, that's what people call links, URLs, URIs, anchors. This enables HTML documents to create a web. It's a pretty important part of the world wide web today, whether you're linking intra-site or inter-site, users need some way to surf around.

Now that you have a minimal webpage, you'll probably want some form of navigation between content. Keep it simple at first and use relative links. This also makes it accessibile offline and easy for others to archive. A really simple navigation:

<nav>
 <a accesskey="h" href="./sitemap.html"> UP </a>
 |
 <a accesskey="H" href="./index.html"> HOME </a>
</nav>

Mobile design

Now you have a document that prints out, and is navigable. The next layer should be mobile design. This is because mobile design is generally more simple than desktops. Keep in mind, many mobile devices have data caps and slower speeds, so try to keep things light. I generally keep the main content full width because there's limited screen space.

Viewport meta tag helps for mobiles, it keeps the pixel scale normal
Perhaps link an external stylesheet and add some minimal styles.

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta name="author" content="Noah Pavuk">
<meta name="supported-color-schemes" content="light dark">
<meta name="color-scheme" content="light dark">
<link rel="stylesheet" href="./css/styles.css" type="text/css" media="screen">
<style>...</style>
</head>

Full page

Now we need to start thinking about desktops (laptops included). These are screens that are ideal for more information density. If we keep everything full width, it might end up too wide. The bare minimum needed is a CSS style that limits the max-width of the main content to some size, I like 60rem. 60 rem is nice because it's 80 12pt characters wide and agnostic to the users device. Why 80 characters? Well a lot of computer terminals default to 80 characters wide and I'm used to it. It's long enough so read line by line while keeping decent information density, not too long where the reader loses track of the line when scanning back to the beginning of the next line.

#content {
    max-width: 60rem;
    margin: 0 auto;
}

Conclusion

That's it folks. An accessible website that's lightweight, easy to ready/navigate, and supports a wide range of devices. The trick is to keep things simple. Remember these are just my suggestions, there's no right or wrong way of doing web sites ;).

Advanced things for a future article:

Lazy loading: Load images, javascript, whatever in the background.
Custom elements: Additional features like fancy navbar or plastic buttons can be coded as custom elements. It's more modular and fits in well to the idea of progressive enhancement.
Progressively (and conditionally) upgrade to SPA style. For instance reading a series of articles, pre-load the next's minimal content and simply append/swap when the user decides to continue to the next. This is the most advanced topic and easiest to backfire. If done right, it makes the pages "flash" less between hyperlinks, feel more responsive, and save bandwidth for everyone involved. As of <2024-10-23 Wed> I do not do this on the website.