Which type of positioning is best?
I am often asked the above question and a tongue in cheek answer I often give is no positioning is best:)
If we take a basic page with no styling:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>The Cosmos Awaits</h1>
<p>Tesseract radio telescope, laws of physics light years great turbulent clouds stirred by starlight, Orion's sword emerged into consciousness. Made in the interiors of collapsing stars gathered by gravity, colonies muse about encyclopaedia galactica Apollonius of Perga, quasar how far away globular star cluster vastness is bearable only through love vanquish the impossible gathered by gravity, vastness is bearable only through love a still more glorious dawn awaits Hypatia paroxysm of global death, citizens of distant epochs venture, preserve and cherish that pale blue dot circumnavigated</p>
<h2>Cosmic fugue</h2>
<p>Rings of Uranus, vanquish the impossible network of wormholes paroxysm of global death Jean-François Champollion galaxies. Prime number gathered by gravity of brilliant syntheses, tingling of the spine two ghostly white figures in coveralls and helmets are soflty dancing. Muse about. Cambrian explosion white dwarf a billion trillion descended from astronomers, circumnavigated science, vastness is bearable only through love galaxies extraordinary claims require extraordinary evidence star stuff harvesting star light across the centuries prime number Hypatia, rich in mystery Euclid!</p>
</body>
</html>
The above page while it may not look very nice will work and be accessible across all devices without any effort at all on our part. It caters for all user settings straight out of the box.
It’s only when we apply our (or our clients) ideas of how a page should look that we start to break what was once fluid, adaptable and accessible. Perhaps the first thing a web designer should say to himself is “first do no harm”.
Of course I am being simplistic and styling can make the page more readable and more presentable but we should always keep an eye on how our rigid ideas of what a page should look like can impact on was once a fluid and accessible page.
It follows therefore that sometimes “less is more” and if we can organise our content so that the page can still flow freely like a river then we have a better chance of doing no harm.
With the above in mind next time you develop a site think about a few simple things that can greatly improve a users experience that are easy to implement.
For example:
-
do leave the html, body font-size to 100% and use that size for all your main context text. In that way your users will get the text size that they think is best for them.
-
do use max-width and margin:auto for your main container rather than a fixed width.
-
don’t set heights on fluid content
-
don’t fill every pixel on the screen with something.
-
don’t expect that x amount of words will always fit in the space you have available.