This concept should work well on all operating systems, all browsers, and all screen sizes, if they do follow the international standards of HTML and CSS. It should adapt smoothly to all sizes, and print well, or print-to-pdf well.
Instructions for testing (H2)
Rescale the browser window from full-screen to very narrow, and watch how the margins and padding resize, and how text reflows. Use [Ctrl +] and [Ctrl -] at various window sizes, and watch again how content resizes and text reflows. Note: margin is the empty area outside of the border, padding is the empty area inside the border. Also try the print-preview, or print-to-pdf, to see how it would print.
Styling design rules (H3)
Text should always keep its font-size to stay readable. Font-size should be browser-default for the device, whatever that is, or be a user-selected size (e.g. for people with poor vision who increase font-size). So, when rescaling the browser-window, text should not get smaller. Even on small screens (smartphones) text should be browser-default, thus the same size as if no stylesheet at all was used.
Margins should collapse first, when the window gets smaller.
Padding should collapse next, when the window gets smaller. However, it should be minimum a few pixels, to keep the first and last words on a line readable and not melting into the edge.
When margins and paddings are collapsed and cannot get smaller anymore, text should start reflowing (=less words per line). Text should not fall off the screen, and not cause horizontal scrolling, until minimum width is reached.
Only when minimum width is reached, thus after all margins and paddings have collapsed, and after minimal amount of words per line, or minimal horizontal pixels, then horizontal scrolling should occur. This is to prevent logos from getting messed-up and text becoming completely unreadable.
Too big images should automatically rescale smaller to fit in the available body width.
Other content such as tables, rulers, fieldsets should also rescale smoothly.
When increasing window size, text should be clipped at a comfortable maximum width similar to a book page, for a nice layout and comfortable reading.
The navigation bar is in one line, to minimise vertical space occupation. Each link is separated by a vertical black line like this: [ link1 | Link 2 | Link3 | Link4 | Link5 ]. Navigation is not in a left column, as this complicates printing, and it wastes a lot of left screen space. The navigation bar is repeated at the bottom, so people do not have to scroll up again when they finish reading the page.
No columns, because they rescale poor, adapt poor to smaller screens, print poor, waste lots of screen space, and I generally dislike them. So this layout resembles a comfortable single-column book layout.
The idea is that one style should work for all devices and all screen sizes from very small to very big, by adapting to that system's standards. It should also print well, or print-to-file well, without requiring complicated separate stylesheets for every device.
This behaviour is very similar to the simple HMTL without CSS from the '90s, except that now nice margins and image-scaling are used for a more pleasant layout. HMTL was originally designed to be adaptive from itself. So if you do not use a stylesheet, an HTML document is reasonably adaptive by itself, at least in a good browser that adheres to the standards.
See the stylesheet test1.css of this testpage, or visit our real website that uses this simple adaptive concept: index.htm.
Test of make-up and rescaling (H3)
This is in bold text, this is in italics text, this is in emphasis, this in strong emphasis, and this is in code as in computer-code. This is a link and another link, and this is strike through. Formulas and notes can have super- and subscripts, as in x2 + y2 and H2O + CO2.
Test of a table
01234
56789
abcde
fghij
klmno
pqrst
uvwxy
z&@#$
Too big pictures should automatically scale down to fit within the body-width. But the functions "Save As" or "View Image" should save or show it in its original size.
