63 lines
2.6 KiB
Plaintext
63 lines
2.6 KiB
Plaintext
extends templates/main.jade
|
|
|
|
block title
|
|
| How to make a minimal website usable | xigoi
|
|
|
|
block content
|
|
h1 How to make a minimal website usable
|
|
p Minimal websites are cool. Most “modern” websites include a lot of unnecessary bloat with tons of tracking scripts and annoying layout elements that take up half of the page. It's nice to get rid of all of this fluff and build a website from the ground up. Even plain HTML is a big improvement; however, the resulting site will look quite ugly and have some usability problems. Here are some little bits of code that can be added to improve the experience without creating another overweight monster.
|
|
|
|
h2 HTML
|
|
|
|
h3 Character encoding
|
|
p
|
|
| ASCII has been obsolete for a long time. We need Unicode, especially if using a different language than English. Put this in your
|
|
code <head>
|
|
| to use the UTF-8 encoding:
|
|
pre
|
|
code.
|
|
<meta charset="utf-8">
|
|
h3 Viewport
|
|
p
|
|
| By default, pages always display in a wide format designed for desktop computers. However, browsing on phones and other smaller screens is very common nowadays. To make the page work well on them, put this in your
|
|
code <head>
|
|
| :
|
|
pre
|
|
code.
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
h2 CSS
|
|
h3 Maximum page width
|
|
p
|
|
| Just like there are small screens, there are also wide screens. And reading text is painful when it spans across your whole Full HD monitor. Consider setting a maximum width for your page like this:
|
|
pre
|
|
code.
|
|
body {
|
|
max-width: 800px;
|
|
margin: auto;
|
|
}
|
|
| If you'd also like to prevent the page from hugging the edge of the screen on narrow devices, you can use something like this:
|
|
pre
|
|
code.
|
|
body {
|
|
width: min(800px, calc(100% - 8px));
|
|
margin: auto;
|
|
}
|
|
h3 Line height
|
|
p
|
|
| Text is more readable if it's not tightly pressed on top of itself. Empirical observations suggest that 1.4 is the optimal line height:
|
|
pre
|
|
code.
|
|
body {
|
|
line-height: 1.4;
|
|
}
|
|
h3 Horizontal scrolling in code blocks
|
|
p
|
|
| If you're using
|
|
code <pre>
|
|
| elements on your page to include snippets of code, it can easily happen that they're too long to fit on the screen. The default behavior is to make the whole page wider, which is annoying when reading the text outside. Instead, you can allow the code blocks themselves to be scrolled horizontally without affecting what's around them:
|
|
pre
|
|
code.
|
|
pre {
|
|
overflow-x: auto;
|
|
}
|