A new design opportunity or are we opening a Pandora’s box?

If you were lucky enough to be at Webstock 2011 in Wellington, New Zealand you may have had the chance to sit on Jason Santa Maria’s talk on typography and that just by using CSS 3 techniques our web pages can be beautiful works of art where the typography itself speaks to your users.

What Jason didn’t really explain is that is actually harder than it looks. He did however remind us that just because a font face is available doesn’t mean we should it. Some fonts are made to big, brash and bold, but they don’t look so good when the text is small. Equally there are fonts that make your content harder to read no matter how big the font is. And there are fonts that are just plain ugly.

Attention to detail is everything.

Jason’s talk got me thinking…

“Why can’t I start using this technique with sites I’m currently working on?”

Enter the complications of working on New Zealand Government websites. New Zealand has two official written languages, English and Māori. //[Edit: As Robyn pointed out in the comments below, New Zealand has a third official language, New Zealand sign language.]

To write the word Māori correctly, and many other words in “te reo” or “the language”, a macron over one or more letters in a word is often needed. In order to do this, you need a font that includes an extended character set not just the usual Latin characters A-Z.

Choose a font that works both visually and technically

Not all web fonts available include the extended character set. So depending on your design you might get some unexpected results. The macronised characters might just disappear, they might be replaced by a box or in some cases a decorative glyph (like a smiley face, or a flower) may result.

Many New Zealand Government websites include some degree of Te Reo content. Each site seems to approach the issue of multi-lingual content in a different way. I’m not saying this is a bad thing, provided it is done with the interests of site users in mind—but that’s a completely different blog post for a later time.

How to find a suitable font face that works on a NZ government site

Like so many things on the Internet, there is usually more than one place where you can find things, and this is the case with web fonts. A quick search in a common search engine revealed a number of potential sources:

• Google’s font API – google.com/webfonts/preview
• TypeKit – typekit.com
• MyFonts – new.myfonts.com
• FontEX – fontex.org
  

Google’s font API

The number of fonts available is limited, but growing. I did a sample test of each font family listed and only 25% of them seem to support macrons. Of that 25% only a handful of the fonts, in my opinion, would actually be of use on a government website.

Here’s the list of fonts that worked:

• Cantarell
• Coda
• Coda Caption
• Corben
• Covered by Your Grace
• Crimson Text
• Crushed
• Cuprum

• Droid Sans Mono
• GFS Didot
• GFS Neohellenic
• Gruppo
• Just Another Hand
• Just Me Again Down Here
• Lekton
• Luckiest Guy

• Meddon
• Molengo
• OFC Sports Mill Goudy TT
• PT Sans
• PT Sans Caption
• PT Sans Narrow
• Radley
• Reenie Beanie
• Syncopate

Typekit.com

Even though the site has the facility for you to enter in your own text which is then used for the preview of each font, the input field not only ignored macron characters, testing was impossible as it removed the macron characters from the input field.

Some classy javascript there TypeKit.

[Probably means I personally won't use this site to find font faces.]

MyFonts.com

The search engine on this site turned out to be pretty useful. Not only can you specify a wide range of criteria, including pricing, format, you can specify whether certain characters are available in the font face.

I searched for “webfont” compatible fonts that included the “ā” character.

2381 fonts matched the search criteria

You can  visually preview each font, add other filters, change sort order etc, so finding something that works for you should be pretty straight-forward. Some fonts are free, others you need to buy a license for.

FontEx.org

This site seems to have a focus on freely available font faces. Unlike TypeKit, its text entry field doesn’t strip macrons from characters so it is possible to test out a font face before you download it.

I didn’t test every font they have available, but looking through a mixture of monospaced, sans-serif, serif and slab-serif fonts I managed to find 25 fonts, and most of them would work on a government website. Things may be looking up after all.

Here’s the list of fonts that worked from FontEx:

• Monospaced
  • Anonymous Pro
  • Droid Sans Mono
  • Liberation Mono
  • Luxi Mono
  • Sax Mono

• Sans serif
  • Capsula
  • Caviar Dreams
  • Comfortaa
  • Jesaya Free
  • Liberation Sans
  • Luxi Sans
  • Molengo
  • Negotiate
  • Ubuntu

• Serif
  • Berylium
  • Credit Valley
  • Droid Serif
  • Dustimo Roman
  • Gentium
  • Immortal
  • Liberation Serif
  • Linux Libertine
  • Luxi Serif
  • New Athena

• Slab Serif
  • Charis Sil

Found a typeface you want to use?

“I can just download this font, put it on my web server and start using it. Right?”

Unfortunately no.

The web is not that simple. Even if you are not adhering to the New Zealand Government web publishing standards, you need to make sure your design is cross-browser compatible. And guess what? The manufacturers of the main browsers, IE, FireFox, Safari and Opera can’t agree (or choose not to use) a common standard. Then you need to think about mobile device support.

I’m starting to think Arial and Verdana are both looking kinda pretty again. That said, I’m still determined to at least try some new type faces out.

Conversions, trickery and hacks

Some preliminary research tells me that once you’ve selected your font you need to convert it into at least two additional formats, and put all of these fonts on your web server.

Then there’s also some CSS tricky needed to make the variety of browsers behave.

Then because each browser and operating system renders fonts slightly differently, some tweaks and fine tuning might be required, and dare I say some CSS hacks too. Even the suggestion of that leaves a bitter taste in my mouth.

Head. Desk. Thump.

Just what we web publishers, designers and coders need. More complexity.

I’ll bring you more details about implementation when I’ve had a chance to try a few things out.

Example form showing layout of form fields, command buttons and overall visual hierarchy

The form consists of labels and input prompts that are left aligned to the input field, with mandatory questions clearly marked with an asterisk (*) symbol.

The primary call to action, the button to move the user to the next screen of the form is placed immediately underneath and left aligned to the last data entry field on the form.

The visual prominence of the button is very strong compared to other elements on the form, in keeping with both Hick’s and Fitt’s laws of human-computer interaction—keep navigation items close and make them large so they’re easier to click.

An attempt to map out the logic of how I order global navigation items

We shouldn’t segregate people based on their (dis)ability. Why is it then that professionals in the UX space haven’t embraced inclusive design? Why do we use shallow personas? We have users will diverse needs in every pocket of society.

Personas have a role

“Challenges in the persona” can identify characteristics of real users and bring it to the forefront when doing design.

Why oh why?

Why is disability intimidating? Is it because we don’t how to approach and engage them?

It doesn’t take a vast number of people. Lisa reminds us that even one person can make a difference.

You have just been challenged

She challenges us. “What are *you* going to do about it?”

WCAG 2.0 is a good thing – but do it sensibly. You don’t necessarily have to comply with every single item on the check list – just make what you do that little more accessible. I have to say I agree.

Rethink your role in a project

A response to a survey Lisa is running about UX testing and web projects. From a back-end person, “Users don’t see my shit.” Are you sure?

Is Lisa being too ambitious?

She’s suggesting we go and and find the users who have disabilities to help us get our designs right. I agree.

BUT – How do I convince a project manager though, who won’t even test their products with users who *DON’T* have disabilities, go that one-step further? There’s no perception of cost-benefit, it “takes too long” and therefore interferes with the critical path.

Head. Desk. Thump.

Is the problem the way the accessibility guidelines are categorised?

Lisa suggests one way of dealing with the requirements is to look at who in a team is more suited for checking that part of the checklist.

Great for large teams like where I work. What about smaller organisations and smaller projects who don’t have the resource, or the knowledge and skills required. Im not saying that Lisa is missing the point, but this is not the solution to all our problems either.

Lisa’s suggestion – if you’re not on a team, just pick a few things from the WCAG list. You’re thinking about people more, you’re doing a better job as a result.

Work ethically. Don’t be lazy. Be sneaky if you need to

I reckon I can do this.

Scott Thomas is talking at Webstock about Barack Obama’s Presidential campaign. Branding and politics in the same sentence? It was fundamental to Barack’s campaign.

Looking to the past for inspiration for today

As well as modern imagery the campaign looked to the past for inspiration reinterpreting well known images there were already deeply entrenched in the minds’ of American voters. It wasn’t always perfect, and there were a few aspects to the campaign that might have stepped over the line, at least in terms of design.

Start by looking at what you already have

Scott’s now taking us through some of the design problems with Barack’s original website. Thirty shades of blue, a little bit of yellow, some scroll bars, and countless number of fonts. A redesign was desperately needed.

Scott’s approach to creating a new site

- understand the problems with the current website – what was most important for the homepage in terms of outcomes — persuasion, fund raising, a stong call to action
- IA fundamental to the process, mapping to a grid — before the detailed design even happens
- colour control — consistency, consistency, consistency – blue and red
- typography — needed to be truly American
- the “fold” is dead – “its gone” – the was just too much information (BUT this is OK)
- constant evolution – updating the design progressively as the campaign evolved
- associate strong calls to action right beside the rich content – activates people and generates participation
- analytics essential to validating the design approach – don’t leave it to the design director – test it “over and over and over again”
- no matter how complex your problems are, if you have passionate people, you can change not only your website, but maybe the world as well

Putting it all into perspective

Scott’s view of the effect of the design planning and integrated approach to the brand for the Obama campaign? “Without this, Obama would not likely to have become President.”