Introduction
On this page I keep notes on what I have learned about the necessary minimum in order to have a web page that is well readable on both a mobile device and in a browser for a desktop computer.
This text assumes a basic knowledge of HTML and CSS.
Author: David Heiko Kolf, 2025-04-05, last updated 2025-04-29.
Enable native scale on mobile devices
By default most mobile browsers will assume that a web page was designed for the typical width of a desktop computer screen. With this default the page will appear zoomed-out, nearly unreadable and the user has to zoom in and scroll a lot in order to read single lines.
This default can be disabled by placing the viewport meta property in the head-section of the HTML:
<meta name="viewport" content="width=device-width, initial-scale=1">
Mobile browsers will now chose a reasonable scale for the screen and each line will be short enough to be displayed without scrolling.
For my picture gallery I am not yet using responsive design so I explicitly set the width to the minimum width where the images still fit into the layout. (Responsive design might be even better, but this required the least effort).
<meta name="viewport" content="width=840">
Limit the length of a text line
Modern desktop screens have a large width available, but the width at which we can read comfortably is limited (usually similar to a typical paper format like DIN A4).
By limiting the maximum width through CSS you can improve the reading comfort:
max-width: 50rem;
You can set this property either directly for the body-tag or for a special div-class in case you want other parts of the page to use a larger width.
In order to have the text column centered with equal margins to the left and to the right, set the horizontal margins to "auto":
margin: 0 auto;
Enable dark mode
Some people prefer reading light text on a dark background, other people prefer reading black text on a white background. You can keep both groups happy by using a CSS media query.
If your website is primarily designed for a light background, you can add the following query to also support a dark color scheme:
@media (prefers-color-scheme: dark) {
}
Within this query you would redefine the colors for all elements you previously defined.
Update (2025-04-29): I recently read an article advocating for sufficient contrast in dark mode. I have adjusted my CSS styles using the WebAIM Contrast Checker.
Conclusion
I believe it is possible to build modern, well readable websites which do not require many resources, JavaScript frameworks or other complexity. I will probably keep this page updated whenever I notice something that is still lacking for my website.
