modulus blog

This morning I took on the task of merging 200 articles which have been published over four years at Kevin Dwyer’s Change Factory website. The aim of the exercise is to create a compendium of change management and business process management advice from the articles; they will be sorted into appropriate chapters, Kevin will write some brief “glue” text and an introduction, but we want to do it without wasted effort.

Fortunately the articles are quite consistent in format, as they are written using a template. I wrote a Perl program to work through the articles directory, retrieve each article, remove its headers and footers, discard some unnecessary content, and add the article to the (large) merged HTML file. After testing its basic functionality and fine tuning for a couple of minor exceptions, the HTML file was created, weighing in at 1.1 MB, and then read in to Microsoft Word and saved as a Word document, ready for Kevin to add the glue text and introduction. The Perl program is, in itself, quite unremarkable; any programmer could write the same in a language of their choice in half an hour.

It is convenient to have each article start a new page, but as HTML does not have a paging paradigm, where to start? This turns out to be dead easy; the aforementioned Perl program creates a level 2 HTML header block for each article, e.g. <h2>This is an Article Title</h2> with the article’s title. When read into Microsoft Word, these were automatically transformed into Words “Heading 2″ elements. All that remained was the page break, and this was readily achieved by creating a style for the merged HTML document using the print-oriented part of the CSS 2 specification, viz:

h2 {
   page-break-before: always;
}

Word (which does have a paging paradigm) recognised the instruction and promptly inserted page breaks before each “Heading 2″ element, just what was wanted. It sometimes surprises me when things turn out to be so simple to achieve. Something a bit more sophisticated could be achieved using the CSS 2 “widows and orphans” controls, but as this Word document is a means to an end rather than a finished product, I heeded Voltaire’s advice that “The perfect is the enemy of the good.”

introduction

The way in which people read text has been extensively studied since the 19th century, yet when one looks for definitive information on choosing an appropriate line-length for a website for optimum legibility, a wide range of conclusions is found. Recent experiments have shown that on-screen reading speed increases with longer line lengths (testing in the range 35 – 95 characters per line). Other experiments have shown that line length had little effect on readability, but that readability was substantially affected by the size of the surrounding white-space margins, with large margins substantially enhancing readability. Another recent experiment showed that margins slow reading speed, but increase comprehension. These studies are not necessarily conflicting; taken together they indicate that line length itself is not as key as might have been thought, but providing adequate white-space margins (which, coincidentally, will somewhat decrease line length) is important to comprehension, which is even more important to a commercial website than reading speed.

My local newspaper (The Age) uses a principal layout comprising eight columns, each only 45 mm. wide, which results in 28 – 34 characters per line – so short that, in combination with the fact that the text is justified, about 15% of lines end in a hyphen.

Unlike a newspaper or magazine, which has a set size combined with a set font and font size, the website visitor has a high degree of control over properly-designed websites and can change the overall size, text size, font size and even font family. This degree of flexibility more or less rules out hyphenation of text, which, in contrast with newspapers and magazines means that very narrow columns work less well.

Justification (i.e. where inter-word padding is inserted to make all lines equal in measured length) is the rule rather than the exception in books, magazines and newspapers, but the exception rather than the rule on websites. Justification looks much better when combined with hyphenation, and is therefore less appropriate for websites. In addition, only a limited range of browsers support justification.

techniques

The simplest and cleanest way to ensure that you have adequate white-space margins around text is to set the margins directly in CSS e.g.
margin-left: 15%;
margin-right: 15%
etc.

Note that it is preferable to set these margins as percentages of the available width (rather than absolute values) so that they adjust appropriately when the page is resized. Most websites will, however, be more complex in their layout and we must also bear in mind that “white-space” is not necessarily unoccupied.

Setting CSS to justify text (text-align: justify;) or to right-justify text (text-align: right;) works with Mozilla Firefox 2.0.0.13 and its cousin Netscape Navigator 8.0.4. With Internet Explorer 6.0.28
or Opera 9.27, these justifications can be made to work, but the inheritance mechanism in their CSS implementations is not correct and so each element that is to be justified (other than the default ‘left’) has to have the justification specifically set i.e.
body {text-align: justify;}
may not be sufficient, you may need, for example,
body {text-align: justify;}
td {text-align: justify;}
to reliably achieve the justification.

This article is an extract from the “Saffron Book” (Good Practice for Commercial Website Design) available for on-line purchase at e-books.

introduction

Businesses which have or are contemplating a web presence should develop a complementary mobile web strategy. Strategic options which are available for the mobile web include the following:

• defer development until growth in demand dictates it,
• develop a mobile web presence at minimal cost and effort,
• develop a comprehensive mobile web presence, equal in weight and currency to the conventional web presence and
• develop an exclusively mobile-based web presence.

Each of these strategies is perfectly valid, it is simply a matter of which is appropriate for your business needs.

deferment

The first strategic option (“deferment”) means to make no move to a mobile web presence now, but rather to keep a watch on demand and developing technologies with a view to choosing a better entry time.
This strategy has the obvious advantage that the business can await a better settled set of development standards, an overwhelming demand-based economic case, or both. The drawback is that by the time these incentives are strongly felt, competitors may have established a strong position in the mobile web market. Being an early adopter of new technologies can confer competitive advantage, but is rarely as painless as we might imagine.

mobile web light / mobile web balanced

The second and third (“mobile-web-light” and “mobile-web-balanced”) are simply points on a continuum.

“Mobile-web-light” means creating a mobile web presence with minimal cost and effort, both in terms of the initial development and ongoing maintenance. This will mean that the mobile web presence will probably be static in nature, i.e. it will not seek to adapt to the device requesting content, but rather render content which is suitable for all mobile devices. Consequently, the web presence will not make use of advanced features on newer devices. Depending on the type of mobile web user, this may be of critical importance or of very little importance. Users of the (Google) type “Repetitive now” or “Urgent now” will normally not be discomforted by a sparse design with limited bells and whistles, provided that their access to the information and data they desire is not impeded by that sparseness. Users of the (Google) type “Bored now” are unlikely to be entertained or satisfied by such a website. Thus, whether this strategy is appropriate to your business needs depends on the type of content of your website and, by extension, the type of user you are seeking to attract.

“Mobile-web-balanced” means creating a mobile web presence which is equal in quality and utility to your existing desktop web presence and which is kept as current as any other part of your marketing presence. This strategy is likely to require you to develop content specifically for the mobile web component – not to differentiate the mobile from the desktop, but, paradoxically, to ensure that the mobile web presence delivers as full an experience as the desktop web presence.

mobile web exclusive

The last strategy option (“mobile-web-exclusive”) implies building a mobile web presence which is not linked to a desktop web presence or which provides markedly different information and functionality to a desktop web presence, such that it is a different entity. This strategic option has advantages, particularly for certain market segments such as travel, entertainment and event management, which may benefit from a concentration on leading edge marketing.

When choosing this strategic option, two key aspects of differentiation must be borne in mind. Firstly, the mobile web presence is likely to be most successful where there the “mobile” part of the equation is important. Thus the sort of mobile web content which is especially useful when commuting, travelling, waiting or away from the office is likely to suit this strategy. Secondly, the importance of the user’s location must be recognised. If the website can take advantage of location information to provide further added value, it is likely to suit this strategy.

An example of what we mean by these two aspects of differentiation and their suitability for this strategic option can be illustrated by a website which:

• runs on a mobile ‘phone
• interrogates the mobile ‘phone’s GPS to determine where the user is currently located
• presents to the user the addresses and ‘phone numbers of nearby restaurants, allowing one-click telephoning for making a reservation
• updates the list as the user moves every minute.

As can be seen from the example, much of the functionality of the example mobile website only works in the context of mobility and location recognition and consequently this example would be well suited to this strategy option.

This article is an extract from the “Lime Book” (Creating Effective Mobile Websites) available for on-line purchase at e-books.