modulus blog

Google vice-president of search product and user experience, Marissa Mayer made an interesting observation recently, when speaking of on-line newspapers:

I can go to various newspapers and when you scroll down to the bottom, what do you do next? There were related stories and related videos but those were up on the top. So now the most committed user – the one that reads through the entire piece – is now looking at the bottom of the page with nothing to do.

It is well worth while looking at each of your web pages with the specific aim of ensuring that there is something engaging to reward your most committed site visitors, at the end of each article, at the bottom of each page. This is especially true for longer articles or pages.

In Internet terms, a “captcha” is a “Completely Automated Public Turing test to tell Computers and Humans Apart”, i.e. one of those images which requires you to replicate the text in order to pass to some next step, such as submitting a comment. The idea of captchas is not without its problems; for the disabled it can be a complete barrier to site access. Even for people without disabilities, entering some random alpha-numeric characters which have been deliberately distorted can be difficult.

Here are five examples of captchas which I consider to be quite difficult to get right:

Over-simplification of captchas can mean that they can potentially be solved by computers. However, in the vast majority of cases the “treasure” protected by a captcha is not of sufficient worth to bother trying to break the security by OCR or artificial intelligence techniques. Indeed, for the vast majority of sites using a captcha, the enemy is a simple-minded spambot.

One approach I’m trialling at the moment is to use text that is not composed of random alpha-numeric characters, but is a valid English word, randomly selected from a largish subset of English words. We want a set of words of moderate length (say 6-9 characters) and which are reasonably familiar to most readers. We can, for example, use the names of vegetables; these names are reasonably familiar to most site visitors, tend to be about the right length and, consequently, a human site visitor has a much higher chance of typing in the right text in repsonse to a word like “spinach”, whilst very little advantage is conferred to the simple-minded spambot by the fact that the word is a familiar English word. The use of real words decreases confusion between the letters “l”, “i” and “1″, as we
know that “spinach” is spelled with an “i”, not a “1″ or “l”.

Here is what I’m trialling at the moment:

This approach does reduce security and could be broken by a sophisticated program which combined image processing capability with dictionary lookup, but that doesn’t really concern me, as I am not using captchas to protect anything more valuable than the right to leave a comment in a guestbook or send an email.

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.

introduction

We do not intend to cover the whole of marketing strategy development here, but rather to touch on some subjects of particular relevance to mobile websites.

In general, the same techniques which work for the general world wide web apply for the mobile web, i.e. television and some print media are effective, radio less so, internet advertising highly variable etc. However, some specific characteristics of the mobile devices (a limited user interface, difficult typing, novelty of the channel) dictate that certain techniques are more important than for the desktop channel.

2-D bar codes and RFID

There are many 2-D bar code schemas available which enable suitable scanning hardware to obtain data (such as website addresses from printed graphics). Some mobile devices may have this scanning capability, such as mobile ‘phones. Of particular interest is the QR Code group of 2-D bar codes.

Additionally, some mobile devices are able to read RFID signals from items which have been suitably equipped with RFID tags which are small electronic radio transmitters.

mobile website catalogues

Reminiscent of the early days of the Internet, there are quite a few published catalogues and lists of mobile web sites on the web. For the moment, it is worth getting your mobile web site listed on as many of these as possible. They are unlikely to last long, as the number of mobile websites is likely to grow quickly to the point where no reasonable list will be any more useful than, say, attempting to list general websites.

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