Simple web pages for Desktop and Mobile (dkolf.de)

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.

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.

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.