Please fix the search UI in Safari on the iPhone.

I’ve been using the iPhone for some time now and overall, the interface is really slick. The buttons are consistently placed and this gives a really strong user experience. Everything appears to be in the obvious place.

The trouble is, I like to search the web and it looks like you’ve forgotten your own iPhone user interface rules for this area.

Let me explain

In all your other applications, the primary action button is located top-right with a secondary action button top-left.

Here’s some examples:

You get the picture, right?

Over time the user learns this convention and without realising it assumes that the top-right button means “OK”, “Submit”, “Search” or whatever the primary action is.

Now, let’s have a look at the Safari search screen

What’s in the top-right button position?

It’s the “Cancel” button i.e. the secondary action.

Oh dear. How did that get there?

At first, I thought that I was at fault because I hadn’t properly learned the interface. Then I remembered one of the first observations you make when usability testing. Users blame themselves for the mistakes in the design of the interface.

That the reason I was making the mistake so often was precisely because I had learned the conventions of the user interface.

So what can we do?

The interface needs a subtle redesign. Nothing major, just an increment to correct the problem.

There are 2 options that immediately spring to mind

Option 1: Move the Cancel button to the top-left “secondary action” position

This should be really easy. The basic premise of the current design is left intact and the secondary action is returned to the correct place in the interface – the top-left position.

Option 2: Add a “Search” button in the top-right position and move the Cancel button to the top-left “secondary action” position.

We’ve got an additional button now, but it’s consistent with the overall design of the other apps you produce.

I know you’re really busy right now, especially with all the activity around the iPad, but please fit this into the next version of the OS. It is such a minor UI change, but would markedly improve the way the browser search interface works.

Best of luck with iPhone OS 4.0. I hope you bundle some of these ideas, but don’t worry too much about Flash.

David

P.S. If you can’t manage this for me, then I’d be happy to settle for Opera Mini being approved in the App Store instead – I quite like the idea of being able to browse 6 times faster than Safari.

Image credit: UK stamp

I recently started building Confluence plugins. The first one being my Google Analytics plugin for Confluence. This post outlines my “journey” into Confluence plugin development. It documents a beginner’s pitfalls when developing with the Atlassian Plugin SDK. Hopefully others can learn from, or at least laugh at my mistakes.

Where I was starting from:

• No experience of maven
• No understanding of how Confluence plugins work or how they are written
• Some experience of Java – Mainly uPortal/Luminis portal development for the University of Nottingham and some consultancy work e.g. for Astra Zeneca, Documentum and 3Com
• No experience of unit testing or integration testing in Java – oh dear
• I prefer UI work to real programming

Initial failure

I tried to setup a development environment for plugin development using Atlassian’s documentation a little before the beta release of version 3 of the Atlassian Plugin SDK. It was a pain. This was no fault of the documentation — it was really just to do with my schedules and available time to experiment.

The problem was two-fold:

1. I’d not done this before, so was clueless to what was involved
2. The setup was a complete ball-ache considering the time restraints

I was well aware of point 1 and the pain it was likely to cause. Point 2 seemed to be the old chestnut – install and configure the exact correct versions of the software you need in the correct sequence, then start.

Wait. I don’t know what that means, see point 1. Yes, I’ve got maven installed on my MacBook! Woo! Let’s go. Hang on, it’s not the correct version. Where do I get that from?

In many ways, it reminded me of my initial experience of building and installing Apache 1.x on Solaris SPARC boxes back in the day:

cd /path/to/apache/source; make; make install;
Oh. Wrong version of make. Where do I get that from? Hmmm.
Install correct version of make. Damn, make needs the correct version of gcc. Where do I get that from?
And so on. Moving further and further away from the problem you’re trying to solve.

So, I stopped there. No shiny Confluence plugins for me. I’ve got plenty of other things to do anyway thank you very much.

Reboot

Then Atlassian released the Plugin SDK beta and all this nastiness was removed. Everything you need to build an Atlassian plugin was bundled in one place. Refreshing. All commands have been wrapped and so are prefixed with atlas- to prevent conflict with whatever else you’ve got installed.

For the impatient, this really drives down the barriers to entry for plugin development.

Following the documentation for installing the Plugin SDK was a piece of cake. It just worked.

• Download
• Unzip
• Add some environment settings. Edit ~/.profile and add:

  PATH=$PATH:.
  PATH=$PATH:$HOME/
  PATH=$PATH:$HOME/bin
  PATH=$PATH:$HOME/atlassian-plugin-sdk/atlassian-plugin-sdk-3.0-beta3
  PATH=$PATH:$HOME/atlassian-plugin-sdk/atlassian-plugin-sdk-3.0-beta3/bin
  export PATH
  

• Start building a plugin

Starting out to build your Atlassian plugin is documented here. It’s a fairly straightforward set of instructions.

You start by doing something like this:

mkdir ~/projects/davidsimpson.me/
mkdir ~/projects/davidsimpson.me/confluence
cd  ~/projects/davidsimpson.me/confluence

atlas-create-confluence-plugin
...
...
...
When prompted
Define value for groupId: : me.davdsimpson.confluence.plugins
Define value for artifactId: : googleanalytics
Define value for version:  1.0-SNAPSHOT: :
Define value for package:  me.davdsimpson.confluence.plugins: :
Confirm properties configuration:
groupId: me.davdsimpson.confluence.plugins
artifactId: googleanalytics
version: 1.0-SNAPSHOT
package: me.davdsimpson.confluence.plugins

Then type atlas-run and sit back. If maven doesn’t fall over for lack of memory at this point, you’re laughing. Go away, have a beer or two. This may take some time.

On your return, maven will hopefully have finished dragging all manner of nonsense from Australia and installed a working copy of Confluence, together with an empty plugin onto your computer. Nice. Next, write some code.

I like to run before I can walk. It seems like much more fun to attempt something that’s harder. You do fall over a lot more often though. So rather than some kind of silly little hello world or equivalent plugin, my first plugin was an integration of Google Analytics with Confluence using the Google Analytics API to fetch data from Google. It requires some additional JARs from Google.

Google doesn’t have a public maven repository to my knowledge and I’d no idea how to get these JARs added into maven. Luckily, people had already written about parts of this, so I put 2 and 2 together.

Add Google Analytics JARs to maven:

atlas-mvn install:install-file -DgroupId=com.google.gdata \
    -DartifactId=gdata-core \
    -Dversion=1.0 \
    -Dpackaging=jar \
    -Dfile=/path/to/gdata-core-1.0.jar \
    -DgeneratePom=true

atlas-mvn install:install-file -DgroupId=com.google.gdata \
    -DartifactId=gdata-analytics \
    -Dversion=2.0 \
    -Dpackaging=jar \
    -Dfile=/path/to/gdata-analytics-2.0.jar \
    -DgeneratePom=true

atlas-mvn install:install-file -DgroupId=com.google.collect \
    -DartifactId=google-collect \
    -Dversion=1.0 \
    -Dpackaging=jar \
    -Dfile=/path/to/google-collect-1.0-rc3.jar

Edit the Project Object Model (POM) to add the dependencies

Edit the pom:

vi ~/projects/davidsimpson.me/confluence/googleanalytics/pom.xml

Add this bit to the end of the dependencies node:

<!-- Add Google Analytics dependencies: -->
   <dependency>
       <groupId>com.google.gdata</groupId>
       <artifactId>gdata-core</artifactId>
       <version>1.0</version>
   </dependency>
   <dependency>
       <groupId>com.google.gdata</groupId>
       <artifactId>gdata-analytics</artifactId>
       <version>2.0</version>
   </dependency>
<dependency>
	<groupId>com.google.collect</groupId>
	<artifactId>google-collect</artifactId>
	<version>1.0</version>
</dependency>

Next, fire up your IDE

My chosen IDE is IntelliJ IDEA.

• Open the pom.xml in IntelliJ IDEA (File | Open project)
• Override/set the maven home directory:

  /Users/davidsimpson/atlassian-plugin-sdk-3.0-beta3/apache-maven

• Set the JDK for build as 1.5 or 1.6
• Start editing the plugin

Hiccups

It’s not all straightforward. Here’s some of the annoyances that I came across.

Maven needs more memory

I needed more memory for maven. Not really a problem – append to ~/.profile:

MAVEN_OPTS=-Xmx512m
export MAVEN_OPTS

Annoying warnings on atlas-run

I noticed this on running atlas-run – it probably shouldn’t be there:

[WARNING] Using platform encoding (MacRoman actually) to copy filtered resources, i.e. build is platform dependent!

Of course, someone has already blogged about it — Red Leopard — and it’s easily fixed by editing the POM to add the correct encoding.

<properties>
    <confluence.version>3.0.2</confluence.version>
    <confluence.data.version>3.0</confluence.data.version>

    <!-- Fix for MacRoman warnings on build -->
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
</properties>

Now, we have no nasty warnings.

The macro browser icon

I love the Macro Browser in Confluence. It’s a nice step forward in the evolution of the UI. So as a result, I wanted my macro to have a shiny icon in the macro browser. That damn Macro Browser icon ate up several hours of my life. Looking at the comments on the documentation page, several other people have had a whole load of fun getting their pretty icon to show up too.

The macro browser icon: What we're aiming for

Could I get the Macro Browser to show my plugin’s icon. No. I followed the documentation. It did not work. I looked again. This time I really paid attention. Was it my fat fingers? Was I just being stupid? (Probably.) I ignored this for a while — maybe it would be better after a night’s sleep.

Everything seemed to work a whole lot better when I dropped the beta and moved to version 3.0.2 of the Plugin SDK.
Note: I had to update my ~/.profile to point to the new version of the SDK and update the references to maven in Intelli-J at this point.

I also followed a different tack on getting the macro browser icon to work

• Find a macro that has a custom icon in the macro browser
• Go to the Atlassian public subversion repository and browse to the source for that macro plugin.
• Copy the exact syntax from the atlassian-plugin.xml and paste into your macro’s own atlassian-plugin.xml
• Name the icon exactly the same as in the atlassian-plugin.xml and put it in the correct place in the directory structure

I’m not entirely sure whether it was the copy and paste approach that helped or moving away from the beta. It works now, so I’m not going to loose sleep on why.

Adding a configuring UI to the plugin

My plugin needed to store Google account credentials and display a list of Google Analytics sites, so you can choose the correct profile. How do you do that? Hmmm. Go back to the documentation. It wasn’t nearly detailed enough for my liking, so time to vent a little.

Again, it seemed the best way to learn was to find a plugin that has a similar kind of configuration to that you’re hoping for and start appropriating the code.

Unit testing and integration testing

This is a good idea. Period. Did I have a clue how to do it for Confluence? Of course not.

Again, the community helped out. Atlassian partners at Adaptavist, Comala Technology and Customware have written about this:

• Integration Testing of Confluence Plugins by Bo Wang
• Unit testing a Confluence Action by Edward Robertshaw
• Unit testing a Confluence Macro by Edward Robertshaw
• Confluence plugin integration testing by Roberto Dominguez

Browsing around the Atlassian public subversion repository was also a help. I’ve got to say that I’m an easy convert to testing. It just makes sense.

Wrapping up

After a good deal of stumbling around, it turns out that I can write a Confluence plugin after all. Everything started working a lot better after I updated from the beta version, but that could just be coincidence. The documentation could be a little better to help the uninitiated but it was equally my fault for not learning to walk first. There is a lot of good information, but it is spread over a few different spaces.

My next step was to get the plugin added to Atlassian Plugin Exchange. It took a little while to get this done — maybe that’s best saved for a follow up post. The plugin is now available on Atlassian Plugin Exchange. I hope other people get some use out of it.

I’m pleased to announce the release of my first Confluence plugin — Google Analytics plugin for Confluence.

It lists Google Analytics reports for a particular Confluence space – from within that space. The current version has 10 reports and shows the first 20 results for each report.

• Top Content
• Depth of Visit
• Internal Search
• Browser and OS
• Browser Version
• Screen Resolution
• Network
• City
• All Traffic Sources
• Search Engine Keywords

Just before Christmas, Atlassian quietly approved the plugin on their Plugin Exchange website. Since then, Matt Hodges posted a great write up about it on the Atlassian website — Report Confluence Activity Using Google Analytics in the Wiki.

Screencasts and live demonstrations

I’ve done a couple of screencast demos on usage and configuration:

But better than that, it’s now out in the wild and you can try it for yourself on other people’s sites:

• Atlassian have installed it on their Confluence Sandbox
• Arne Schirmacher has posted a live demo on his Confluence site
• Another live demo on my personal Confluence space (using 1.2-SNAPSHOT)

What next?

• Download Google Analytics plugin for Confluence
• Setup Google Analytics on your Confluence site

If you’re using this plugin or have tried it out, I’d really like to know what you think of it.

• What improvements would you like made?
• What reports are missing?
• Where could the UI could be improved?

Please post a comment if you’ve got it installed.

Thanks

I’d like to thank the Confluence community for their help mainly via Atlassian Forums and some Atlassians for helping me out when I got stuck – particularly Shaun Hare, Keith Brophy, Jonathan Nolen and David Peterson.

Image credit: Google Analytics icon

Outlined are some thoughts behind reusable UI elements in the Luminis portal at the University of Nottingham.

The suggested steps are:

• Get a file from the confluence-3.x.jar file
• Place it here: /confluence/WEB-INF/classes/com/atlassian/confluence/core/
• Edit the text you wish to change
• Restart Confluence

Some reasons I don’t think this method should not be used

• I tried this, but couldn’t get it to work. OK, not really a proper reason.
• This file will probably get wiped on upgrade. I’m guessing.
• You need to duplicate the whole file (7000+ lines), not just the changes. Not pretty.

So what next?

Create a partial language pack plugin

Confluence uses en_GB by default. I want to use British English, but only have the overrides in my language pack. I don’t want to do anything destructive to my Confluence installation.

It’s possible to create a (partial) language pack plugin for Confluence. I’m going to create a new locale for my plugin, so that it doesn’t clash with the installed en_GB language. My partial language pack will use the default terms from the confluence-3.x.jar file unless they are overridden. My new language will be “Nottingham English” with a *two letter, uppercase* locale code “UN”.

Steps

Creating a language pack is really easy as there are only 3 files required.

Create the following directory structure:

Language Pack Directory Structure

File descriptions

atlassian-plugin.xml
describes the language pack:

<atlassian-plugin name='Nottingham English language pack' key='confluence.languages.en_UN'>
	<plugin-info>
		<description><![CDATA[For changes to boilerplate text that should persist after a Confluence upgrade.]]></description>
        <version>1.0</version>
        <vendor name="David Simpson" url="http://davidsimpson.me/"/>
	</plugin-info>

	<language name="Nottingham English" key="en_UN" language="en" country="UN">
		<!-- Define a flag that will be shown for this language -->
		<resource name="en_UN.png" type="download" location="templates/languages/en_UN/en_UN.png">
			<property key="content-type" value="image/png"/>
		</resource>
	</language>
</atlassian-plugin>

ConfluenceActionSupport_en_UN.properties
is the override text for the language

## Replace the Dashboard name/title
dashboard.name = Workspace Home
title.dashboard = Workspace Home
 
## Replace login instructions
login.instructions = Put yorn login details inta this eer form. 
 
## Add some Nottingham dialect (meaning hello)
default.welcome.message = Ayup Mi Duck
 
# Fix any accidental misinformation where Atlassian have changed features
no.favourite.pages=There are currently no pages on your favourites list.<br/><br/> \
        To add pages to this list \
		<ul> \
			<li>Click on <b>Tools</b> (on the top right of the page you''re viewing)</li> \
			<li>Select <b><img src="{0}"> Watch</b> from the menu</li> \
		</ul>

en_UN.png
is the thumbnail. Change this from the Union Jack flag so it can be distinguished from the flag for the default British English en_GB

Build the plugin and install

I’m developing this in ~/projects/confluence/language-en_UN_partial/ on my Mac, so to build the plugin:

cd ~/projects/confluence/language-en_UN_partial/
jar cvf ../language-en_UN_partial.jar *

Install the plugin in the usual way in Confluence at
Confluence Admin | Plugins

Select the new language from Confluence Admin | Language

Results

Overall, I think it works well. This is a pretty easy way to bundle up changes to the default Confluence text.

Confluence Login Page

Confluence Dashboard

The Site Welcome Message can also easily be changed elsewhere too.
Matt Hodges talks about this in his post “Hidden Feature: Bring ‘Must Read’ Content to the Dashboard“.

Upgrade path

Atlassian will likely change the boilerplate text as new versions of the product are released, so it’s good to review your changes on upgrade.

Steps:

• Revert language to British English
• Check each item you’ve changed
• Make any appropriate edits (if required)
• Upload your new version of the language pack (if required)
• Change language back to your own e.g. “Nottingham English”

Something that bugs me in Confluence is the way that attachments are shown. The default view is a big table with just about all the information related to each attachment.

This is great if you want all this detail, but I’m a simple soul with simple needs.

Krug suggested “Omit needless words”. In this case, it’s more of “Omit needless metadata”.

Less is more

Enter {list-attachments} – a user macro that dispenses with the excess. It displays an unordered list with the filename, file size and last modified date. If there’s a comment for the attachment, this is displayed in the link text rather than the filename.

This is a really straightforward view of the attachments on the page.

How do I install {list-attachments} ?

It’s pretty easy. As a Confluence administrator, go to Confluence Admin | User Macros and click on Create a User Macro.

Macro name: list-attachments

Template:

## MACRO: list-attachments
## View page attachments in a simple list
## USAGE: {list-attachments}

#set ($attachmentsList = $content.getLatestVersionsOfAttachments())

#applyDecorator("page")
    <div class="listAttachmentsDiv">
        #if ($attachmentsList.size() > 0)
			<ul>
		        #foreach( $attachment in $attachmentsList )
					<li>

						## Display the file type icon:
			            <a name="$generalUtil.htmlEncode($generalUtil.urlEncode($page.title))-attachment-$generalUtil.htmlEncode($generalUtil.urlEncode($attachment.fileName))">#parse ("/pages/includes/attachment_icon.vm")</a> 

						## The link:
						#if ($attachment.comment && $attachment.comment.trim().length() > 0)
							## Display the comment as the link text instead of the filename
							<a href="$generalUtil.htmlEncode("${req.contextPath}${attachment.downloadPathWithoutVersion}")">$generalUtil.htmlEncode($attachment.comment)</a>
						#else
							## Display the filename as the link text
							<a href="$generalUtil.htmlEncode("${req.contextPath}${attachment.downloadPathWithoutVersion}")">$generalUtil.htmlEncode($attachment.fileName)</a>
						#end

    					## Display the file size:
						<span class="fileSize">$attachment.niceFileSize</span>

						## Display the last modification date
						<span class="lastModDate">$attachment.lastModificationDate</span>
					</li>
				#end
			</ul>
		#else
			## Display nothing
		#end
    </div>
#end

Accept the defaults for the other fields, then click on Save

To call the macro in the page type: {list-attachments}

The result:

For extra points

If you want to change the way the items are displayed, add some CSS to the global stylesheet, e.g

.listAttachmentsDiv a { font-family: helvetica, sans-serif; }
.fileSize, .lastModDate { font-size: 90%; color: #999;}

To see even less, comment out (add ## at the start of the line) lines 27 & 30 in the user macro to remove the file size and last modification date.

Now you’re left with a simple list of links.

It shows pageviews for an Atlassian Confluence wiki on a space by space basis.

You’ll need your own copy of Confluence hooked up to Google Analytics for the demo to work, so I’ve done a video demo too – no sound, sorry.

Confluence & Google Analytics Javascript API from David Simpson on Vimeo.

The main problem for listing data on a space by space basis with the Google Analytics API is that there isn’t an equivalent to the Content Drilldown report. My workaround was to get the 500 most popular pages, then using regular expressions, get the spacekeys, remove duplicates and sort alphabetically. Not particularly elegant, but hey.

Next Steps

It’s a nice proof of concept, but I’d like to display this information – without the authentication and authorisation step – to users without access to Google Analytics.
e.g. To the owners/administrators of Confluence spaces.

The next step will be to rewrite in Java and embed the data and some charts directly into Confluence with a custom written macro.

Adding custom segments to Google Analytics from David Simpson on Vimeo.

Having installed Google Analytics on Confluence, you need to ensure that you’re not lost in a world of pretty metrics.

Make sure that your new analytics toy produces something solid and actionable. Anything less is just a shiny curiosity that your organisation will soon fail to engage with.

This article presents 4 useful tips that really show the power of the analytics data available. Each one can help improve the success of your Confluence installation.

1. Use the Content Drilldown report to segment traffic by site

Want to know which sites are generating the most traffic? The Content Drilldown report is for you. This allows you to view page reads by Site.

The gallery below shows you how to access the correct report – In Google Analytics (GA), click on the highlighted links to get to the next page.

Content Drilldown - Shows pages within the DOC site

Missing Page Views

The Content Drilldown report does not however show everything that happens within the site, but rather only pages that are descendent of /display/DOC/

Examples of missing pages

• Pages with punctuation marks in the title.
  A page with a title of What’s this? would have a URI similar to /pages/viewpage.action?pageId=26181760
  As a workaround, only use alphanumerics and spaces in page titles.
• Page edits.
  A page edit would have a URI similar to /pages/editpage.action?pageId=26181733
• Attachment views.
  These do not call the Google Analytics JavaScript, so are not caught by the tracking code

The first 2 of these are tracked, but not on a site by site basis within the Content Drilldown, so they are a little more difficult to understand.

Each of these could be tracked within the Content Drilldown by using a little jQuery magic to rewrite the URL before it is sent to Google Analytics.

I’ve not done this yet, but it should be fairly simple to change the reported URLs to e.g.

• /display/DOC/What’s This?
• /display/DOC/Test+Page/Edit Page
• /display/DOC/Test+Page/attachment/screenshot.png

2. Enable Site Search & Search Categories in GA

Google Analytics will allow you to categorize site searches. With this option enabled, you can see searches within individual sites.

In GA, go to Analytics Settings > Profile Settings > Edit Profile Information

* Select Do Track Site Search
* Add queryString,searchQuery.queryString to Query Parameter (required):
* Select Yes from Do you use categories for site search?
* Add key,searchQuery.spaceKey,where to Category Parameter:

A screenshot of the Site Search Setting section

Example – Searching for “David Simpson” on Atlassian’s own installation of Confluence

The table below shows the various different situations and query parameters that I’ve used to Categorize the Site Search:

3. Use “Site Search Categories” to show search terms from within individual sites

With site specific search information you can see

• What people are looking for
• Whether they’ve found it

Some screenshots of how to view the Site Specific search terms:

Site Search - List of categories

Site Search Results - DOC category only

This is powerful. If they’re searching and finding stuff – great!

If they’re failing to find the content they desire, then there’s a real problem that needs fixing. The top search terms that return no result should be tackled.

With a little consideration, the user experience can be improved considerably, saving the organisation time and money.

Ask yourself a few questions:

• Why are my visitors searching for search-term-x?
• Is this search term relevent to my site?
  • If so, add the content you the site.
• Is the search term related to different terminology that I’m using?
  • If so, include the various terminologies in pages, so that people with different language styles can find the content
• Should the top result be easier to find?
  • Consider moving the top search term to be visible on the site home page or higher up in the site hierarchy

4. Use the “Site Search Start Pages” report to find out where visitors turn to search

This report exposes the page a visitor is on when they abandon the navigation system in the site and jump to the search box. This could give some insight into what’s missing in your navigation system.

Site Search Start Pages Report

To view the search start pages on a site by site basis, filter this report by using the URI of each site.

Filter by site URI

Ask some more questions…

• Are my visitors browsing or just searching?
  • When I’m on the eBay homepage, I generally just start searching and ignore all the content on the page. Are your visits doing this?
• Do visitors search from particular pages?
  • If so, what are the search terms? Should these be included on, or linked to from these pages?

To Conclude

Using just these 4 simple tips highlights the combined power of Google Analytics and the internal search engine within Confluence. Answering some of the questions posed should provide the insight you need to improve the usability for all your visitors.

These tips are really only the a small part of what analytics has to offer. I’d encourage you to learn more and let me know how you get on.

Further reading/viewing

• Google Analytics Conversion University
• Internal Site Search Analysis and Visitor Intent – video by Avinash Kaushik (@avinashkaushik)
• Search Analytics book by Louis Rosenfeld (@louisrosenfeld) and Marko Hurst
• Web Analytics ToolKit and Internal Search
• Kick Butt With Internal Site Search Analytics – Avinash Kaushik

Please note: We’ve not had GA tracking Confluence for very long, so there are some empty results for the start of the month.
I’ve used Firebug to pretend we’re looking at the analytics reports for Atlassian’s own installation of Confluence

There is no need and it is helping destroy the planet.

Verdana takes up about 19% more horizontal space than Arial. So a switch away from Verdana could reduce your paper costs by up to 19%. For further savings, switch to duplex printing at the same time.

If you need a font designed for readability, try the granddaddy of readable fonts – Helvetica – or at a pinch Arial.

Back in the olden days of the interweb, we didn’t have nice big screens with fantastical resolutions. We didn’t have nicely anti-aliased, easily readable text. To fit enough information on a small screen, the fonts used were blocky and tiny. At small font sizes, text displayed in Arial typeface would huddle together and become difficult to read. Not Verdana, with it’s “generous width and spacing”. It was open and easy to read. Soon everyone wanted a bit of the action. All the sans-serif web pages started using Verdana it spread like a virus.

Roll forward to the present and it seems that 1200 pixels is now the minimum screen width that people have. With larger screens, the font can be larger and so easier to read. We no longer need such generosity in our width and spacing. A return to classic typography is due.

Actions

To make a difference, check through the list below and help eradicate Verdana font from the planet.

1. Do not use Verdana in your web pages

   • Simply don’t use it. Replace it with Helvetica or it’s bastard offspring Arial
   • Educate your clients why its bad
   • Change corporate identity guidelines. If you really, really, really, really have to use it on a website, have a print stylesheet which uses something else more elegant

     Here’s how to add a separate print stylesheet:

     			<link rel="stylesheet" href="/print.css" type="text/css" media="print"  />
     			

     Here’s the basic content for print.css:

     			body { font-family: helvetica, arial, sans-serif; }
     			

     Helvetica before Arial please. That’s the correct order.

2. Do not use Verdana in reports, presentations etc

   Verdana was designed as a screen font for small displays. It just doesn’t look good in printed material or displayed big on projectors.

3. Remove it from your computer

   • Remove it from your computer
   • Remove it from all computers in your organisation
   • Make sure that your base install image for new PCs in your organisation does not have the Verdana font included.

Further Reading

• Web Matters – Why you should avoid Verdana
• Text Font Readability Study
• Channel Verdana