Touching up a mobile webmail service

MTV3 Mail service ‘Luukku’ has been wanting an overhaul for a long time.

Due to limited screen spaces, it leaves less room for designer to work in. Mobile design is all about function and all aesthetics must be subject to functionality. This means we will be doing quite a bit of more testing than in our other projects. It also means that mobile presence of a brand needs to be boiled down to minimum.

When a service has been untouched for a long time it becomes less attractive for advertisers. Empty ad spaces leave holes in the design—something I did not foresee when designing this layout several years ago.

How did it get left so far behind? Maybe since the original HTML has been rather well constructed—this old work horse has been made less of a priority—But would it have gotten a make-over much sooner, had it been poorly designed?

Color scheme in Luukku webmail was bright – we might either go with that or introduce brand colors with a strong scheme. Microsoft Metro is all about ”Authentically Digital” – Maybe this approach could give the service a bit of a look of a web application?

Luukku styles
…or maybe not. Playing with brand colors proves that red is far out. In background it’s wild and using red in buttons suggests they all have alert functions. What was I thinking…?
I decided to keep a slightly more traditional approach and gave up the alert colors. With some quick tests that I ran with my colleagues, my options boiled down to these three.
Luukku Color schemes
Fonts for Android is more complex issue
Roboto
Scott Grannemans article about mobile fonts.

Semantically styling breadcrumbs—What’s wrong with » > › → / • ?

We need to optimize our sites for search engines, but shouldn’t we do it in a semantically correct manner?

Apparently I’m a year late with this topic – It was about a year ago, when Google started adding breadcrumbs to SERPS, but hopefully it will make it easier to find the answers I’m looking for.

I am designing (location) breadcrumbs on our website. However I feel something’s not right. I don’t think Google quite hit the accessibility spot yet, and I’m curious to know how they recognize Breadcrumb data? Google are instructing us to use » a DOUBLE RIGHT-POINTING ANGLE QUOTATION MARK as a breadcrumb separator, but I’m reluctant to do this, since it is plain wrong.

When Google displays the URL as a breadcrumb, they are using a SINGLE RIGHT-POINTING ANGLE QUOTATION MARK as a separator. This too is wrong, since this glyphs in use do not semantically imply site hierarchy. This would hardly matter if we were only building breadcrumbs for Google SERPS, but building breadcrumbs for our users makes it a big issue.

Search result in Google
A Google search result with site hierarchy

Google also recognizes greater than (>) symbol as a breadcrumb separator. This is the worst of all practices. All breadcrumbs are annoying for screen readers, but if they encounter “Home-greater-than-Subsection” gibberish, the browsing experience will become somewhat absurd. If you are using a screen reader, please take this test.

Why does the right way not work?

Why should particular glyphs work and some do not …and why should we care—aren’t the screen reader folks just a bunch of blind folks, anyway? Well, the Internet is for everyone, and before making the choice between the popular thing and the right thing, we need to understand the difference. It looks like Google chose these glyphs for their popularity. So what is wrong with adapting a popular convention? Same thing as using your teeth to open bottle caps. There is a right way too.

Apple Store has a breadcrumb element <ol id=”breadcrumb”> which Google does not recognize. Had Apple Store used semantically incorrect greater than -symbol (>), they would do a lot better with their SERPs, but that would be evil.

Separator glyphs recognized by Google

1. Double right-pointing angle quotation mark, recommended by Google as a best practice:

Home » Section » Subsection » Current page

2. Greater than glyph:

Home > Section > Subsection > Current page

3. Single right-pointing angle quotation mark that Google uses in their SERPs:

Home › Section › Subsection › Current page

4. Forward slash:

Home / Section / Subsection / Current page

Separator glyphs not recognized by Google

5. Bullett style in whitehouse.org:

Home • Section • Subsection • Current page

6. Semantically correct separator image added with a style sheet. Live Example.

Google SERP for Apple Store.

Home (image) Section (image) Subsection (image) Current page

7. Unicode arrow style in Clearleft.com

Home → Section → Subsection → Current page

Examples 1-5 have a semantically incorrect meanings. And the sad thing is only these are recognized by Google as breadcrumbs. Read Jacob Gube’s article breadcrumbs best practices and Hongkiat’s article examining breadcrumbs to see even more styles.

Update

Thank you for comments, and thank you all who pointed out the Unicode arrow → (&rarr;) which I failed to notice in my initial text. See Allan Wood’s explanation of various arrow styles available in Unicode. Could this be the separator glyph best describing the proper use of the breadcrumbs element? Sadly, it looks like Google fails to understand it, which makesit harder to reap the benefits of a good SERP result.

as long as we have to keep making a choices between getting good SERP results and using semantic markup, I can not recommend any of the methods described here. Until then, my business-driven choice will be Single right-pointing angle quotation mark, and Unicode arrow in my personal work, both marked up with Microdata.

Marking up Breadcrumbs with RDF and Microdata

According the latest information from Google, there might be a solution to  indicate breadcrumb element using RDF or Microdata. Apparently this is an experimental technique that can not be tested. However Microdata alone does not do the job just yet: A google search for a game  “Polar Bear Bounce“, does not give rich SERP results, even though the breadcrumbs are formatted with microdata.

Further reading

Angela Colter has studied the subject and wrote an illuminating article on how people are reading breadcrumbs. Rocky Fu has written about building breadcrumbs, and Jacob Gube wrote about styling them. Also, see Ann Smarty’s excellent article on Search Engine Journal about Breadcrumbs Best Practices.