imedo Development Blog

Skip links are links at the very top of the document with anchors to other parts of the same page, that help people using assistive technologies navigate the page faster. Traditionally, skip links were hidden away for “normal” users. The very first approach was using display: none for these links. But as assistive technology caught up, hidden areas are now hidden to everyone. So other clever techniques appeared for hiding the links from screen-based user agents, but not from, say, screen readers, like using a large negative text-indent. While this technique works fine most of the time, it seems that recent versions of VoiceOver in Safari skip these links in certain situations (particularly in combination with the float, display: block, or position properties), because they are not visible anyways. It is only a matter of time until other screen readers catch up with this, and ignore hidden skip links as well.

Now, an interesting observation is that skip links are not only useful for blind people. They are equally or even more useful for well-sighted people who need to control the browser without a mouse, and therefore exclusively use their keyboard for navigation, tabbing through the elements of the page. So the question is: How do we make skip links useful for blind users as well as users who navigate the page with their keyboards?

Our proposed solution is to show all skip links at the very top of the page, but to save space, stack them on top of each other in a way that only the topmost skip link can be seen at a time. Then, as the user is tabbing through the links, she sees (or hears) the link with focus on top of the other links.

Here is how it’s done. First, the markup:

<div id="skip-links">
  <ul>
    <li><a href="#content" class="first-link">Content</a></li>
    <li><a href="#header">Header</a></li>
    <li><a href="#sidebar">Side bar</a></li>
    <li><a href="#footer">Footer</a></li>
  </ul>
</div>

The CSS for the outermost div looks like this:

#skip-links {
  float: left;    /* if you want things to appear next to the links */
  width: 10em;    /* or bigger, depending on your link texts */
}

Now, the width part is important, otherwise the div gets way to wide.

The list itself has no special properties, except maybe list-style: none, which might as well come from a reset style sheet.

The CSS for the li elements looks as follows:

/* This is only needed for IE < 8 */
#skip-links li {
  float: left;    /* This takes the list item out of the document flow */
  width: 0px;     /* ... to make links appear on top of each other */
}

Note that both the float and width properties are needed for older IEs.

Finally, the CSS code for the a elements is:

#skip-links li a {
  z-index: 0;           /* all links on same z-index */
  position: absolute;   /* so that the z-index property actually works */
  width: 8em;           /* all should have equal width so that the front-most
                           element covers all other elements */

  /* The rest is decorative and can be changed */
  background-color: white;
  padding: 0.2em 0.4em;
  border: 1px dashed rgb(43, 117, 179);
  color: rgb(43, 117, 179);
  text-decoration: none;
}

Lastly, we should make sure that the currently focused element is on top:

#skip-links li a:active, /* To make it work in IE < 8 */
#skip-links li a:focus {
  z-index: 2;
  /* decorative */
  border: 1px solid rgb(43, 117, 179);
}

/* make sure the first link is on top when none have focus */
#skip-links li a.first-link {
  z-index: 1;
}

This is what it looks like, when tabbed through:

To see all of this in action, go to imedo.de, make sure the accessibility bar on top is visible (it should be if you have Javascript turned on and this is your first visit; otherwise, click on “Hilfestellung”) and start tabbing through the page.

[Note: In Safari on Mac OS X, tabbing is done with Alt-Tab. On Firefox, you have to turn on “tabbing through all elements” in System preferences first, pane Keyboard & Mouse. In IE, it should work out of the box simply by pressing the tab key.]

Popularity: 1% [?]

Certainly. But with all the features of new browsers, it would be a shame not to make use of them where appropriate.

For example, Safari and Firefox support setting the style for selected text, like this:

::selection       { color: #eee !important; background-color: #111 !important; }
::-moz-selection  { color: #eee !important; background-color: #111 !important; }

(The above gives selected text a very high contrast, which is a good thing for accessibility reasons.)

Another very fancy thing is using Safari’s CSS 3 animation module for smooth transitions. We are using this for our accessible “Focus mode”, which is designed to help people with ADD. In Focus mode, all content except that under the mouse is faded out. In Safari, there is a smooth transition, in other browsers there is not. The transition is not an essential part of the feature, but it is only one line of CSS, and looks really good:

.layout-element   { -webkit-transition: opacity 0.25s linear; }

Now, these CSS declarations cause the W3C’s CSS validator to choke. Is this a bad thing? Probably not. That is because we as web developers are well aware which CSS properties are part of the standard, and which aren’t, and also which browsers support which, and what bugs they have. That last thing is particularly interesting: even having a perfectly standards conformant CSS does not guarantee anything in terms of rendering.

Also, every known browser simply ignores properties it doesn’t support, usually without any problem whatsoever. So, while the validator is certainly a great tool to spot syntax errors, it is not really practically useful for the validation of CSS properties.

Popularity: 1% [?]

There are many people who are already using this technique, but it is so incredibly useful that I thought we need to post it here as well. If you want your website to look good in more than just one browser without resorting to invalid CSS syntax error hacks, you absolutely must take a look at the CSS Browser Selector Javascript. Then, you can write selectors like this:

div.article       { width: 10em; }
.ie6 div.article  { width: 11.26em; }

That causes the article div to have a width of 10em in standard browsers, but a width of 11.26em in IE 6. Not only is the CSS valid all of a sudden, it is also VERY clear and understandable.

Of course, CSS-based browser detection is most useful for the IE family of browsers, which incidentally suffer most from slow Javascript execution times. This is why I propose an optimization that makes browser detection faster for the IEs, and even works without Javascript (which in total should cover about 70 percent of your users). Right after your opening and right before your closing body tags, use conditional comments to select the IE browser version, like this:

<body>
  <!--[if IE 6]><div class="ie ie6 win"><![endif]-->
  <!--[if IE 7]><div class="ie ie7 win"><![endif]-->
  <!--[if IE 8]><div class="ie ie8 win"><![endif]-->

  <!--[if !IE]><!-->
    <!-- Browser detection start script for other browsers, if still needed -->
  <!--<![endif]-->

  Your body content goes here

  <!--[if !IE]><!-->
    <!-- Browser detection end script for other browsers, if still needed -->
  <!--<![endif]-->

  <!--[if IE]></div><![endif]-->
</body>

Popularity: 1% [?]

If you take a look around the web, you will find that most web sites out there have a fixed layout, most commonly with a width of 1000 or so pixels. Notable exceptions are Wikipedia or Google, as well as a lot of application-like web sites, like Google Mail, Yahoo Mail etc.

If you are not using Windows, you already expect a window on your desktop to either be of the correct size, such that all content fits, or to be resizeable. It is always good practice to empower the user to customize the environment as she sees fit, and now we adopted that idea on imedo.de.

But the real motivation for this move was with a certain group of people in mind: those with low screen resolutions. The main use case for displays with low resolutions is for people with an impaired sight. They usually do not have the option to make the browser window larger than, say, 800×600 pixels. So the idea is to show all of the page’s content to them, even when the browser window (scrollbar and window frame included) is only 800 pixels wide. Another goal was to do this without a horizontal scroll bar. The reason behind this is that it is particularly cumbersome to scroll horizontally, and that people with impaired vision may as well have trouble seeing the scroll bar.

The key to a flexible layout is to use percentages for horizontal sizes. That is almost as much there is to it, except for two things:

1. IE < 7 does not support the max-width property. If you want your layout to grow up to a certain width, you can not accomplish that in IE 6 in a valid fashion. It is possible to use non-standard CSS expressions, or to use Javascript to detect window resizing, but both techniques are slow and pretty unstable, so that we decided that IE <= 6 gets a fixed-width layout.

2. You want fancy things like fixed-sized columns and flexible ones. It is well documented how to do that, but there is one technique I want to share with you.

Say you have a vertical list with a couple of items, each of which has a picture on the left, and text on the right. Now, the picture has a fixed size, and you want the picture to have that size regardless of the window width. But the text on the right may grow or shrink in width, like this:

Full width:

Smaller width:

One simple and cross-browser (IE5+, Safari, Opera, Firefox) way to do this is to wrap the picture in a left-floating div, and to wrap the text in a div with the picture’s width plus some space as a left margin, like this:

<ul>
  <li>
    <div class="image">
      <img src="/some/image"/>
    </div>
    <div class="text">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
   sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </li>
</ul>

The CSS to make this happen is as follows:

div.image {
  float: left;
  width: 4em;
}

div.text {
  margin-left 5em;
}

Note that the div.text does NOT declare a width, which causes all browsers to use the maximum width available. Also, do not use any overflow property on the div.text element or any child of it, as this breaks stuff in weird ways in several browsers.

This is a very simple, stable and standards conformant solution for this problem. The nice thing is that you can use it for layout columns as well (although care must be taken for IE <7, as they tend to explode layout boxes when the content gets too large). Also, it is possible to have the fixed column on the right, or to have fixed columns on the left AND the right, and have the middle column fill the remaining space.

Popularity: 1% [?]

I want to say a few things about a I read lately, called Design Patterns in Ruby.

In this book, Russ Olsen discusses 14 out of the original 23 design patterns described by the GoF. In addition he also talks about 3 not unique but very common patterns in Ruby. Alongside he gives a very nice overview of Ruby for the Ruby beginner and shows some sweet little tricks.

I find the book very comprehensive with the special paragraphs of when to not use a certain pattern, which is really helpful to not get overly enthusiastic with a pattern and try to use it everywhere. Design Patterns are after all solutions that you should use when you found a fitting problem and not when you made a problem fit.

Eventually I created a presentation with a short (not so short, actually) overview of the patterns for my colleagues which I want to share with all of you here.

The presentation on video:

Online Videos by Veoh.com

The slides:

Special Thanks

to Jonathan Weiss, who’s introduction and review pointed me to this book.

Popularity: 1% [?]

What is this about?

These are excerpts of some very interesting articles I found while researching how simplicity is used in order to improve webdesign and user experience. I added the links to most articles so you can read them in full length if you like.

Another great resource about simplicty in both design and business: Getting Real

Quotes:

Leonardo Da Vinci: “simplicity is the ultimate sophistication.”

Milton Glaser: “less isn’t more; just enough is more.”

The complexity of simplicity:

http://uxmatters.com/MT/archives/000151.php

• reduction of lines, colors, shapes, plenty of whitespace => perceived as easy to use, even if it may not be the case
• but: simplicity can’t be determined by how few items are on a Web page. Simplicity, like most elements of design, needs to be evaluated in context

• simplicity engages users to try a service, perception of complexity turns users away (“this looks cluttered; therefore, it must be difficult to use”)
• contributing users under 10% on websites (youtube 0.5%, wikipedia 1.8% produce 70% of articles, top 100 digg users submit 56% of stories)

Yahoo! Groups – content production pyramid:
http://www.elatable.com/blog/?p=5

• 1% of the user population might start a group (or a thread within a group)
• 10% of the user population might participate actively, and actually author content whether starting a thread or responding to a thread-in-progress
• 100% of the user population benefits from the activities of the above groups (lurkers)
• social software sites don’t require 100% active participation to generate great value
• top users (power participants) most vocal about their needs, they need more powerful tools than lurkers
• edward tufte: measures simplicity by information density (= how much screen real estate is devoted to useful information)
• simplififying may penalize power users, if the needed tools are out of sight
• track different types of users, their states and transitions => map this to presentation of feature sets
• present more functionality if they tell you that they are ready for it
• showing all features available without context makes a product complex
• IDEA: “advanced”-links with dropdown (mouseover) which reveals expert options available in this context
• muting the expert actions will allow faster completion of the most frequent actions by both experts and novices
• power participants drive revenue, desired behavior must be encouraged by exposing the features that create value for the site
• hiding of functionalty discourages users to adopt desired behavior (content creation)
• most users don’t use customized toolbars etc, so smart defaults are important

John Maeda’s laws of simplicity:

http://lawsofsimplicity.com/category/laws?order=ASC

Reduce:

• “The simplest way to achieve simplicity is through thoughtful reduction.” When in doubt remove it
• how simple can you make it? <-> how complex does it have to be?
• balance between simplicity and complexity is important -> finding it can be truly complex

Organize:

• “Organization makes a system of many appear fewer.”

Time:

• “Savings in time feel like simplicity.”
• waiting is frustrating
• users want to find the quickest/simplest way to get a task done, everything else gets in their way and adds to their frustration
• When forced to wait, life seems unnecessarily complex.

Learn:

• “Knowledge makes everything simpler.”
• people don’t care for instructions, they will just try if it looks simple enough
• if they fail they will read instructions eventually so they should be within the users reach when needed

Differences:

• “Simplicity and complexity need each other.”
• without complexity we could not recognize simplicity when we see it
• in a complex world a simple product stands out, it becomes remarkable (worthy to make a remark about, like a purple cow)

Other laws:

• Context: “What lies in the periphery of simplicity is de?nitely not peripheral.”
• Emotion: “More emotions are better than less.”
• Trust: “In simplicity we trust.”
• Failure: “Some things can never be made simple.”
• The One: “Simplicity is about subtracting the obvious, and adding the meaningful.”

Other Articles:

http://www.guuui.com/browse.php?cid=225

• Users love link-rich home pages, The secret is clustering: “Users look at each cluster and quickly decide whether the cluster is likely to contain their content or not. By focusing on just one or two clusters, the user winnows down their choices to just a handful of links.” -> Page Hierarchy
• contrast is google’s search homepage

http://www.uie.com/articles/simplicity/

• people judge the quality of a product based on the number of features, if they have never used it before.
• After having used these products however, usability will start to matter more than features.
• many consumers, when faced with a purchase decision, choose complexity because they try to predict they potential future needs
• users want to avoid trade-offs, help them to make the right decision by understanding what they need -> user centric design
• also communicate simplicity, make it your story, tell users that they will find what they need and that all is simple to use

http://informationarchitects.jp/100E2R/

5 Statements

• Don’t tell us to adjust the font size
• Don’t tell us busy pages look better
• Don’t tell us scrolling is bad
• Don’t tell us text is not important
• Don’t tell us to get glasses

Five Simple Rules

1. Standard font size for long texts
2. Active white space
3. Reader friendly line height
4. Clear color contrast
5. No text in images

The beauty of simplicity:

http://www.fastcompany.com/magazine/100/beauty-of-simplicity.html

Google

• Marissa Mayer: “Google has the functionality of a really complicated Swiss Army knife, but the home page is our way of approaching it closed. It’s simple, it’s elegant, you can slip it in your pocket, but it’s got the great doodad when you need it. A lot of our competitors are like a Swiss Army knife open—and that can be intimidating and occasionally harmful.”

Philips

• philips transformed into the simple company
• consumer centric design, they listen to what consumers want
• advanced technology simple to use
• it’s not just a marketing term, it’s also lived on management level: 500 -> 70 businesses, 30 divisions -> 5
• meetings: max 10 slides per powerpoint allowed
• Sales growth for the first half of 2005 was up 35% in north america
• Supplier of the Year by Best Buy and Sam’s Club, 12 Innovation Awards

Quicken

• microbusinesses (9 million potential customers)
• small businesses afraid of accounting software, terminologie
• they blew the first try, then got it right after the 3rd interface iteration
• changed terminology to simple terms like “money in” and “money out”
• simplified setup and feature set to bare minimum (just enough) => 125 setup screens -> 3, 20 major tasks -> 6 essentials
• 100,000 units sold in its first year on the market

Simplicity/usability pitfalls

http://www.guuui.com/issues/04_03.php

“The human brain can’t process more than 7 +/- 2 items at a time”

• study to measured short term memory, not what people can perceive visually at a time
• Humans can only retain 7 +/- 2 items in the immediate memory, but have no problem in dealing with great amounts of information in the field of vision
• dangerous assumption when applied to navigation\!
• Reducing the number of menu items will make the site hierarchy deeper and thereby increase structural complexity
• users find information faster in broader navigations than in deeper ones

Download time

• strong correlation between perceived download time and how fast users can accomplish their tasks
• help users to find the information faster

“Users don’t like to scroll”

• study from 1996 (10% of users scroll beyond fold)
• not true anymore, strong clues that page contains desired information -> user will scroll to find it
• too much “breaking up” of content is frustrating
• hiding information on other pages increases structural complexity

Striking the balance

• difference between what people say and what they do
• rely on users behaviour, not on what they tell you

Popularity: 1% [?]