alan charlesworth . eu
link to home page vertical black line link to tips hints and advice vertical black line link to interesting articles vertical black line link to good and bad practice vertical black line link to alan's musings vertical black line link to contact page

Arrived on this page from a search engine and wondering what it's all about?
The first two paragraphs of tips, hints and advice on web site development will explain all - not least why it might seem a tad out-of-date!


UPDATE July 2012: it might be worth you taking a look at Serif vs. Sans-Serif Fonts for HD Screens which considers how fonts appear on mobile and new-technology screens.

Let me make this clear from the start: I am not trying to teach web site developers their job - though a quick surf around the web would suggest some might need some 'advice'.

This is just a page on how text is presented online. I think it is important because most - if not all - users visit a web site in search of information - and that information comes in the form of text [even a video on a social networking site has to have words to describe it, or no one would download it!].

I believe that the textual element of a web site is part of marketing communications, and so falls under the remit of the marketing department.

With this is mind, I obviously see the presentation of that text as being important. If folks can't read it - or have difficulty doing so - they won't. Which means that the site's objectives are not being met.

As stated elsewhere on my site, I am not a techie. My knowledge of html is limited - as this site will contend. But I do get the impression that many web designers do not know the basic reasoning behind good practice - and so do not appreciate its importance. The presentation of text comes under this heading.

Although I will comment on a couple of other things, the main thrust of this piece is about page width and was prompted by this article. It says that the most popular screen resolutions on the web in the world are:

  • 1024 x 768 = 55.34%
  • 1280 x 1024 = 17.23%
  • 1280 x 800 = 8.23%
  • 800 x 600 = 8.18%
  • 1152 x 864 = 3.67%

I'm not in a position to question these results - but there are a couple of things that bother me. For one; laptops - they have smaller screens. And secondly: my PC at work has a 17" screen - the same as every other computer in the university, and I suspect most universities. On a 17" screen, 1024 resolution web sites don't fit. And that's with no vertical toolbars installed in my browser window [any toolbars reduce your viewing area]. Whatever: it doesn't really matter who is right - it is more specifically about 'text' width that I am concerned.
And then there is the issue of mobile devices such as smart phones and tablets [for more on what mobile devices are see mobile marketing] section on my book's website.

The article goes on to say that as 1024 is the most popular width then all web sites should be built in that size. Wellllll ... let's ignore the issue that as a marketer you never, ever, do anything that might put off a potential customer [see rule of one] - and apparently those 8.18% of punters who use 800 x 600 are to be discarded - and I'm not going to comment of pages that only have limited textual content. I'm talking about pages that have text going across the page.

Now here is the thing. It was proved a couple of centuries ago [in the print medium] that to make text readable it should be 1.5 to 2.5 alphabets wide. In the Latin alphabet, this equates to 39 to 65 characters. If you think I have made this up - consider that the first 'visual display units [VDUs] were built to be 640 pixels wide. Why? Number picked out of a hat? Divisible by lots of other numbers? Age of the inventor divided by 10? Nope ... 65 characters = 640 pixels.

And why do you think newspapers are divided into columns? Could it be to restrict the line width and so make them easier to read? Remember my comment above about objectives? If your eyes start watering or you fall asleep whilst trying to read a newspaper you're not going to buy it again as it has not met its objectives - providing you with news. Ditto all the major web sites - why do you think the 'header | three columns | footer' design is so popular? Anything to do with restricting the text lines below that magic 65 characters?

Ok, so the rule has relaxed a little in these days of advanced optical aids [glasses] - but try picking up any book, of any size - it is rare that lines are longer than 100 characters, with most being closer to 65.

Hey ho .. I didn't say I could solve the problem [don't say put all text in narrow images - the reasons for not doing so are manifold, not least that the search engines can't read them], but I did want to make you aware of the issue. There's lots out there on the web on the subject - some agree with me, others don't - and there are also common-sense marketing issues to consider [like large text for a web site that targets the elderley].

But - and it is a massive but - here comes the crunch. No matter how much thought I put into presenting my words in the html of my pages, I cannot dictate what resolution settings your browser will have. Even at the most simplistic - if you surf with your text size set at 'minimum' you will get more words on a line, 'maximum' fewer words. I can only go for the best fit - and 'medium' is the default for all settings.

Just as an illustration, I've set up some pages that show how the same content appears with different html settings - but before you go to them, a few final points:

  • Whilst sites like mine are quite rare [ie all text], there are many examples of where a web page needs to be mainly text - product descriptions, for example.
  • Another consideration for 'information pages' [like this one] is that there is a strong possiblity that they will be printed. Most printers have a default setting of 600 pixels. Yes, I know printer defaults can be changed, but how many folk know how to do so? Try printing the sample pages I've put together.
  • Fonts: Serif fonts like Times New Roman [they have little 'tails'] are easier to read in print but on a screen the 'tails' tend to blend into each other. Therefore, sans serif fonts [like you are reading now] which have more specific profiles are clearer when presented in pixels.
  • Furthermore, serif fonts are smaller than sans serif - there is also a bigger gap between lines in sans serif than serif [take a look at the same word document in Verdana and Times New Roman].
  • Without fixing the size images can wander around the page - take a look at where the 'quote' appears in the samples. This might be important if you want an image to appear next to certain text.
  • I'm not a web designer - tell your designer how you want your text presented and have them sort out the technical bits to your satisfaction.

Take a look at my sample pages:

original | sample 2 | sample 3 | sample 4 | sample 5 | sample 6 | sample 7 | sample 8

link to home page vertical black line link to tips hints and advice vertical black line link to interesting articles vertical black line link to good and bad practice vertical black line link to alan's musings vertical black line link to contact page
copyright Alan Charlesworth : you are welcome to use any of the content of this site - but if you do so, please reference it properly