Designers! Cut&Paste Helsinki is coming
Note that Entry deadline has been extended to January 28.
You still have time to get your act together and enter!
Tour shirts for YL Male Voice Choir
YL Male Voice choir is one of the best choirs in the world. I’ve had the honor of singing with them for more than ten years. Here are some recent tour clothes that I designed for them.
Babij Jar Mexico 2011
Babi Yar is the Shostakovitch’s symphony with Yevgeni Yevtushenkos lyrics, describing a massacre of jews in Ukraine by nazi Germany during World War 2.
Unlike the legend of Kullervo, this was a real incident with real victims. With no true connection to the tragedy, I felt insufficient and out of place just to even try to describe these events. I ended up setting the name in Russian (performing language of the piece) in heavy block type, with a bleeding effect from underneath. I do feel I managed to describe the massacre with respect for the victims and without turning a tragedy into gore and splatter.
Despite my inhibitions, the choir seemed less worried to find more practical uses for this garment: White and black shirts are for tenors and basses. Since singers like to play football and floorball, colors signify the teams.
China tour 2011
In May, YL had 9 concerts in major chinese cities including Beijing, Shanghai, Suzhou and Nanking.
The garment for Chinese tour is a retro style olympic tracksuit top with the choir’s name arching across the back.
The badge has the choir’s name in english and chinese. The character is a singing panda dressed in a tailcoat.
This is very different – a kid gloves even – approach emphasizing everlasting friendship between China and Finland in culture.
As the concert program is a international smorgasboard of pan-european and chinese songs rather than something built on a one particular piece. When there is little common ground, no touchy subjects are brought up.
Kullervo Belgium & USA 2010
In Finnish national epic Kalevala, Kullervo is a tragic hero who ends up throwing himself upon his own sword. Hence the blood. The back of the shirt is a list of concert venues in a classic band-shirt style. Note the Carnegie Hall as the final concert. It was spectacular!
Hyphenation in web documents
Long words are typographically troublesome when you lay out pictures and words in tight columns. You might need to promote a lot of stories simultaneously, or convey an impression that your pages are packed with content. Then those long words can really mess up your layout. This is typically the case with front pages, in articles the layout is more narrative and you can use space freely.
Hyphenation is important in languages where long words occur on a regular basis. Finnish language has words such as kymmensormijärjestelmä (ten finger system) and ylioppilastutkintolautakunta (Student exam committee). German, Swedish and Hungarian equally have their share of long words.
Soft hyphen example
Normal text (top) and with soft hyphen applied (below)
There are subtle improvements hyphenation can achieve. This example illustrates the significance hyphenation has on how a block of text is laid out in a browser. On top is a screen capture with normal text, no hyphenation applied. Below the soft hyphens are manually applied like this:
…ilta­puvuista ja juhla­kampauk­sista… itse­näisyys­päivän vastaan­otolla…
Browser will apply word breaks when necessary.
Unless you have a content management system capable of inserting soft hyphens, hyphenation must be applied manually. Currently I have no knowledge of any such systems. Please feel free to suggest a way to accomplish this.
Design vs. Aesthetics
Design is a word ofeten misunderstood for aesthetics. Read Yaron Schoen’s wise article.
Web design links
Bookmark and come back later:
by Sixrevisions.com
Test for screen reader users
I am trying to define the best practice to mark up “breadcrumbs” -element. If you are a blind person using a screen reader, your experience is especially important to me. Please test the following examples and write me a comment. In your answer, please explain:
1. Breadcrumbs example using Double right-pointing angle quotation mark as a separator glyph:
Home » Section » Subsection » Current page
2. Breadcrumbs example using Greater than glyph as a separator glyph:
Home > Section > Subsection > Current page
3. Breadcrumbs example using Single right-pointing angle quotation mark as a separator glyph:
Home › Section › Subsection › Current page
4. Breadcrumbs example using Forward slash as a separator glyph:
Home / Section / Subsection / Current page
5. Breadcrumbs example using Bullet as a separator glyph:
Home • Section • Subsection • Current page
7. Breadcrumbs example using Forward arrow as a separator glyph:
Home → Section → Subsection → Current page
End of test.
To find out more, see my previous article Semantically styling breadcrumbs.
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.
- 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.
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 → (→) 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.
10 Violated Usability Conventions
Content that requires registration: Most common examples: Digital newspapers (NYTimes). Most common excuses: “Our content is so good, it’s worth requiring registration”.
http://noscope.com/journal/2009/01/violated
I think I’ve covered most of the list myself… Sorry!
Saying No to bad ideas
My client says, “I want to build a spaceship!” I say, “No, we need to make a kite.”
Article @alistapart: Saying no to bad ideas
Web Directions @media – podcasts and slides
Web Directions staff is encouraging us to share these resources – please spread the word about these fantastic materials by passing them on to anyone else you know who might be interested.
- Jeremy Keith — Hot Topics
- Doug Schepers – SVG Today and Tomorrow
- Rachel Andrew Core css3
- Tom Hughes-Croucher — An introduction to server-side JavaScript
- Mark Boulton — Designing grid systems
- John Resig — Testing mobile JavaScript
- Simon Willison — Building crowdsourcing applications
- Christian Crumlish — Designing for play
- Patrick Lauke — Brave New World of HTML5
- Sandi Wassmer — Inclusive design is for everyone
- Remy Sharp — Browsers with wings: HTML5 APIs
- Hannah Donovan — Telling stories through design
- Steve Souders — Even faster web sites
- Relly Annett-Baker — All the small things
Dan Hill’s closing keynote from Web Directions South 2009. This was a massive highlight from our Sydney event last year, and we were thinking you might like to check out the podcast and slides:
Matt Webb’s opening keynote is also well worth a listen when you need to get inspired again about being part of something bigger by working on the web.