As an official UX Expert, how important is it that sites are created to reach a range of audiences?

Of course, I had to be disagreeable:
–
I can’t say that it’s always necessary to make your work accessible to everyone. One of the first steps in our design process is identifying who the users of the product will be. Sometimes your focus is so narrow, that you can eliminate large segments of society. If you’re designing a heads-up display for a fifth generation fighter jet, you can ignore users who are under 5’4″ and don’t have perfect vision. Or you may be the manufacturer of geriatric telephones, the ones with buttons so large you can mash them with a broom stick. If that’s what you’re selling, you’ve already selected your audience. There’s no benefit to printing the numbers both large and small on the keypad. That phone may be universally usable, but not universally desirable.

While “Universal Design” is a lofty goal, projects often have constraints that make it unattainable. Sometimes we can use the device or platform as a throttle for our imagination. If we’re developing a product that requires some kind of geolocation input, or a camera, or two-way radio voice communication, it’s an easy decision to build it as a smartphone application. But with that choice, we’ve eliminated users without digital connections (i.e. people who don’t have fingers). Small screens exclude some users with vision difficulties.

Of course, there are always solutions for these problems. We could implement voice recognition, or eyeball tracking, or speech synthesis. But say this is a small project, with a small budget. You make it accessible to 90% of likely adopters, and you try to reach 90% of whoever’s left in version 2, etc.

The 90% (that figure is not meant to be a factual statement) guideline is useful, unless you’re legally obligated to make your product accessible, like if you are a public university, in which case, it’s easy, because there are laws that you follow. Or your product is so widely used that that remaining 10% could be millions of users, and they’ll tell you what they want, like Netflix titling their entire instant streaming library in the next few years.

Universal Design is really a matter of eating your vegetables. Follow the rules. For a website, put “skip to” links at the top, use the right header tags, add in ARIA elements. Test it with a screen reader. Simulate how it looks to people with different types of color blindness. If it’s video, add in closed captions. For most designers, its a challenge to understand how normal users use your work, much less people with difficulties that they haven’t experienced, or can’t experience. Closing your eyes isn’t the same as being blind from birth. Empathy is important here. Unless you’ve got an amazing, earth-moving solution to the challenges that these users face, follow the rules, and give them what they expect.

Using Chrome (15.0.874.121) today, I discovered that doing a rotation transform in an element that is scrolling will monkey around with the dimensions of the scrollpane.  In my example, I have a small 10×10 icon that rotate, inside an element that overflows:

.container {
    overflow-y: scroll;
}
.container .icon {
    width: 10px;
    height: 10px;
}
.container .icon.active {
    -webkit-transform: rotate(90deg);
}

When the icon rotates, the container will scroll for nearly twice the apparent height of the content. Web Inspector doesn’t give any clues here. Setting the icon’s ‘overflow’ property to ‘hidden’ eliminates the container’s strange scrolling behavior.

So say you think there is too much space between the paragraphs in your blog post.  Right click on one of them, and select “Inspect Element” from the popup menu.  You should see a window pop up with all the code for the page in a collapsed view.

Web Inspector code view

Hovering over one of the tags in the inspector with your cursor will highlight that element in the browser, and show the dimensions of the box.  Light blue is padding, and dark blue is margin.

A visual representation of the element's dimensions, including padding and margin.

Clicking on the tag in Web Inspector also displays all of the CSS properties for that element, and what selectors were used for each one. This should give you a good idea where to start fiddling with your code to adjust the spacing.

The CSS selectors and properties for the highlighted element.

In this example, I can see that there are twenty pixels of padding at the top and ten pixels of padding at the bottom of each paragraph element. The paragraphs also have a bottom margin of 20px.

In WordPress, you can edit your stylesheet directly from the admin area.  Click on “Appearance” from the left-hand menu, and then select “Editor.” The first page that comes up should be the contents of style.css for your theme.  Search for the selector that you want to change (i.e. “#content .entry-content p”), edit the CSS, and click “Save File.”

A note about when to use margins and when to use padding: margins define the space between elements, and padding defines the space between an element and its border. For spacing between paragraphs, I prefer to use the margin property separate each section, as I want to put space between the paragraphs, not inside each one. Top and bottom margins also have some special rules; if one block element has a bottom margin, and the next block element has a top margin, the margins collapse and amount of space is the greater of the two. This is especially useful when separating blocks of different font sizes and line heights (like a header and a paragraph), where it might be desirable to have a little more space after the first element, but not too much. This behavior can lead to confusion when dealing with floating elements, or margins at the very top of the page.

Have web design questions? Tweet me @bartramnason, and I’ll do my best to answer.

Peek a boo, I can't see you.

If you move your mouse to that area, the status bar shifts down and outside of the window. If the window is full screen, the status bar will jump to the right side of the page.  When hovering over links, the URL in the status bar will often be truncated, implying that Chrome doesn’t really care if you read it, it’s only displaying a status bar because it’s expected to display a status bar. Similarly, Chrome provides a page search box in the top right corner, blocking whatever content the site may have there.

Chrome's search box overlaps a table's sticky header.

With web applications, I often try to design for whole screen.  The motivation is the same inside the browser window as outside: reduce clutter, and maximize the amount of information that can be displayed. This is especially important when dealing with smaller displays (of which there are two distinct, and rapidly diverging groups- smartphone/tablet users, and legacy corporate users, like point of sale terminals, running Windows 98 on 14″ or 15″ CRT displays. One estimate shows 13% of users have a maximum resolution of 1024×768, as of January 2011). The corners of the display are high value real estate, where one typically finds links for account info, logout, or help sections.  The tops and the bottoms of the browser window are also often used for sticky content like table headers and session status information (“You have 12 items in your shopping cart”).

Chrome, chrome, go away.

In these admittedly edge (ha!) use cases, Chrome’s UI behavior is either/or- you can either view the webpage, or interactwith the browser itself, but not both at the same time. A full width status bar, like Firefox, Safari and Internet Explorer use, always allows the user to scroll to the bottom of the page.  Firefox also puts its search box at the bottom of the window, while Safari puts its at the top.  However, neither one intersects with actual web page content.

So Google, the intent is admirable, but stop trying to be so clever.  The render area in any web browser should be inviolate.  Don’t cover up my content.

(If you want to sing along, the verse continues: “Every pixel is sacred, every pixel is great. If any pixel is wasted, Tufte gets quite irate.” Via this guy.)

On a need to know basis.

I wrote a Chrome plugin that blocks everything Palin. It’s been a huge time saver.

.button {
  background: url(../images/button.png) 0px 0px no-repeat;
  line-height: 20px;
  height: 20px;
  padding: 0 0.5em;
  border: solid 1px #BFDDEA;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
}

The background and the border work nicely together, and I can add hover states and active states to make the UI feel responsive. However, I ran into a problem using the .button class on <a> elements vs <button> elements- the heights don’t match:

Different button sizes with the same CSS but different HTML elements.

After some research, I discovered that <button> doesn’t use the content box model that we all know and endure. In Chrome, Safari, Firefox and Internet Explorer, the dimensions of the <button> element are calculated using the border box model- the total height of the button is the height specified in the CSS–padding and borders go inside the element. QuirksMode has a good overview of the different box models.

To make the <button> behave in modern browsers, switch the box model with the “box-sizing” CSS property. Of course, every browser has it’s own implementation, so the actual code is:

.button {
  …
}
button.button {
  box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  -ms-box-sizing: content-box;
}

-ms-box-sizing is only supported by Internet Explorer 8, so buttons won’t be sized correctly in IE6 or IE7. Tough luck.

One more thing–to fix Firefox’s invisible border on input elements, add:

button.button::-moz-focus-inner {
  border: none;
}

G’s stated objective with this pilot program is to see how people use the device, and I’d hate to seem ungrateful by keeping my opinions to myself. First thought:

You have to be OCD to store everything in the cloud.

Passwords are my weakness. By switching to another computer, I lose access to all those yummy web services that I have created super secure, impossible to remember passwords for.

It sucks if you lose your internet connection.

The power flickered out at Octane, which reset their WiFi network, which caused me to lose the email I was composing in Gmail.

These two are mostly growing pains. I’ll get the passwords saved on the new goodness, and Google has been so generous as to include two years of (limited) Verizon 3G internet access- I just hadn’t set it up yet when the lights went off. But there is still flow chart my mind will have to execute when I leave my domicile- novelty won’t be enough to choose the Cr-48 over the other two laptops at my disposal time after time.

This permalink for this post was originally /2010/12/23/hitler/, for reasons which I choose to keep to myself.

Maybe this idea needs more thought.

Say you’re flush with cash, and want to buy something nice for your living space.  The latest, greatest Encyclopedia Britannica (revised in summer 2009) will cost you $1349. But then you do some research, and learn that an iPad and two years of data comes in at about $100 less. Or you can get a Kindle for a couple hundred bucks, spend all your time reading Wikipedia, and use the rest of the money to buy drugs. Or whatever. It’s your money.

Of course, Encyclopedia Britannica’s entry for skateboarding was written Tony Hawk.

Today, Nikon officially announced the D7000.  Ignore, for a minute, the bewildering naming scheme.  The specs seem decent.  The video quality isn’t bad.  The price point is impressive (I paid about the same amount for a film camera in college).  It’s a compromise.  This camera was designed to fill a spot in a corporation’s product line-up, not be too good or too bad so as to hurt sales of other products, and to be easily replaceable in a year or two.  It is the hallmark of planned obsolescence.

Digital camera makers must be acutely aware of the durability of their products.  Increasing the megapixel count is no longer enough to entice upgraders.  They add new features, like video, but try not to get too far ahead of the curve, with limited support for sound recording.  The companies are entitled to make their own decisions about what to offer customers; if I don’t like their selection, I can take my business elsewhere.  However, it’s disappointing to me to see Nikon pull their punches.

I’m eager to shoot more video, so this shiny new toy might wind up in my camera bag, despite it’s shortcomings.  The best camera is the one you have.