HTML5, CSS3, and the Great CSS-Off

A while back I entered the Great CSS-Off over at CSS-Tricks. You can find my file here. I used the contest as an excuse to play with html5, css3, and using only semantically meaningful markup. It was an interesting experience, and I’d like to share some of the things I discovered.

HTML5

I found myself wanting a <content> element to match <header> and <footer>. I’ve found this on several other projects I’ve messed about with html5 on, too. I’ve since been told that “everything that isn’t in <header> or <footer> tags is content, so you don’t need it,” but

It’s a useful styling wrapper to prevent a lot of redundant css (and ok, maybe css isn’t a very good reason to include markup if you’re going semantic)
It feels really semantically inappropriate to put all my <p>, <img>, etc. tags at the same tree-level as <header> and <footer>. They are not the same level of content. I guess I could use <section>, but it still feels like section should be something that goes inside <header>, <footer>, and <content>.

I also discovered that I don’t really understand <hgroup>. Can/should I put it around my headers if there’s only one? What if there’s a possibility that I might add/remove headers later? What’s up with this “document outline” thing, how do I preview it to see if it’s doing what I meant? Can I use it for markup?

It also seems like html5 and microformats don’t naturally coexist very nicely, but I guess they’re working on that.

CSS(3)

There are a lot of cool new things in css3, and it really can be used to substantially reduce markup (no more decorative rounded corner <span class=”bottom right”></span> caps, woo!), especially when combined with things like :before and :after. Border images are awesome, and I really love the button styles I was able to get with a combination of border-radius, background gradients, and box-shadow:

"Keep reading" button with base style (top), hover style (middle) and active style (bottom) using CSS3

/* css to create the above buttons; text styles and -moz and -webkit prefix versions removed for space */
.more, .more:visited {
    line-height: 25px;
    color: #e97e7e;
    border: 1px solid #88706c;
    padding: 0 13px;
    border-radius: 13px;
    box-shadow: 0 0 3px rgba(0, 0, 0, .5);
    background-color: rgb(110, 38, 38);
    background-image: -moz-linear-gradient(#934d4d, #6f2828);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(#934d4d), to(#6f2828));
}
.more:hover, .more:focus { /* increase brightness by 10% */
    color: #ffa1a1;
    background-color: rgb(135, 47, 47);
    background-image: -moz-linear-gradient(#ad5c5c, #8a3232);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(#ad5c5c), to(#8a3232));
}
.more:active { /* increase saturation by 10% and add an inner shadow */
    color: #e87b7b;
    background-color: rgb(135, 34, 34);
    background-image: -moz-linear-gradient(#944040, #701d1d);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(#944040), to(#701d1d));
    box-shadow: 0 0 3px rgba(0, 0, 0, .7), inset 0 3px 3px rgba(0, 0, 0, .5);
}

However, despite all the new developments I still ran into a lot of limitations that it really seems like css should have overcome by now.

Text pseudoclasses: first n words, nth line, etc.

The mockup for the contest had the first three words of each paragraph bolded. This seemed like a purely stylistic, not semantic, boldening, but all css gives you is first-line and what I needed was first-n-words. Similarly, there were quotations at the bottom that had 3 lines each, each with a different color. Again, purely stylistic, not semantic, so I didn’t want to add markup, but how do you get 3 different colors when all you have is first-line? I ended up using javascript for both of those, and the second one ended up being a pretty seriously ugly hack.

It’s been pointed out to me that these are pseudoelements, not pseudoclasses. To this I reply that I do not want to have to care. I would like to be able to do anything I can do with one with the other (“p:first-line a”, anyone?), and I don’t want to have to remember (or constantly look up) which one has the stupid new double colon notation.

Flexible floated image placement

Magazines layouts float images to an arbitrary position up or down from where they naturally fit in the text all the time, but it requires a bit of a hack to do it for the web, and even then you can only do downward. And while we’re talking about how magazines use floats that aren’t possible on the web, how about floating between columns or floating around an arbitrary shape?

:before and :after

I tried to avoid adding any purely decorative elements to the html, and added them with :before and :after. But there comes a point when that gets difficult, since you can only add one thing for each of those. I started out using :before to get a decorative page fold image to show up at the top left of the main article, but I also needed to use that to get the element that pushes down the image for the afore-mentioned image float hack. I got around it by using multiple backgrounds for the browsers that support it and javascript for those that don’t, but I really wished it were possible to have multiple :before elements. I was also frustrated by the inability to apply certain css to things included in this way (e.g. width and height for images), and by the ugliness of things like ‘content: “\2192″‘ (that inserts a right arrow, can’t you tell?).

Sure, I could just avoid all that by using javascript in all cases, but I prefer to leave the one-off things like this out of my javascript and keep it with the rest of the style of the element it applies to wherever possible. Or maybe I’m just justifying an underlying discomfort in applying styles with javascript that’s becoming less appropriate these days.

Webkit developers don’t pay enough attention to detail

I’ll forgive them for the new stuff–it’s not standard, it’s not finished, and it’s got a big “-webkit-” red flag on it to say “use with caution.” But floats are CSS1, so by now I expect better than the following:

A floated image with text shown in Firefox (left) and Webkit (right). Text on top of the image is circled on the right.

There should not be text on top of that floated image! I think this is related to the float hack mentioned above. There is a 1px wide div shoving the figure down to the appropriate position. I think maybe Webkit is only checking alignment at the top of the line, which is aligned with the 1px div correctly, but the bottom crosses into the second, wider floated element. All other browsers that honor the 1px pusher div seem to check the whole height of the text line.

I also keep running into trouble with new properties being incompletely or incorrectly implemented. I understand that they’re new, not yet fully standardized, and not yet finished, but it does highlight a different development ideology from other browsers, which I find interesting. So the couple of things aren’t really complaints so much fun quirks I ran across and feel like documenting.

The one I’ve run into the most different problems with is box-shadow. On previous projects I’ve hit problems like the property being thrown out if the word “inset” was added to just one of the shadows or the shadow having a thin line of background between it and box it surrounded. This time everything was much nicer, but I did notice the following on the inset button described above:

The depressed state of the "keep reading" button in Chrome; square corners from the shadow appear outside the rounded button edges.

There’s an inner shadow to show that the button is depressed, but in Chrome the shadow doesn’t get clipped to the rounded button edge. Safari just ignores the “inset” part of the shadow rule but now keeps the rest.

Another interesting thing I ran across, but fortunately pretty easy to get around in this case, was borders and rgba colors. It seems that Webkit overlays the colors of both sides at the corners, which isn’t noticeable when they’re all solid and the same color, but can lead to dark squares with rgba:

An rgba border in Webkit with dark squares where transparent sides overlap circled in red

To get around it here, I ended up switching from using borders to using an rgba background color, which then allowed me to get the extra highlight details at the top and left using borders instead of box-shadow as originally planned. (Isn’t it cool how flexible css can be?)

All these cool features make me want more cool features!

Apparently I can never be satisfied. Two big things I want, in addition to the things mentioned above that it seems like css should already have, are blending modes (e.g. multiply, overlay, etc. that you can do in Photoshop and other image editors) and alpha masks. And of course it would be great if some of the new things had more flexibility, like letting me change the box shadow gradient curve from solid to transparent independently of total alpha and spread, or allowing gradients along a specified path in addition to radial and linear.

Edit: Apparently WebKit does masks, awesome!

Conclusion

All in all this was a great learning experience for me, getting to know the new elements and styles. I’ve since thought of other new things I could have added, like the flexible box model. I guess I’ll have to think of another project for those.

I griped about Webkit above, but really the support for CSS3 and HTML5 is pretty good in the browsers that support it at all, with more to come in Opera soon and potentially even IE9.

I still wouldn’t use HTML5, at least, for any real projects–check out the page in IE with javascript turned off, ick! But progressive enhancement with CSS3 rounded corners, box shadow, RGBA, etc. are definitely on the menu.

The curious difficulty of backup with Sky Drive

I’ve been exploring backing files up to various cloud services lately. I’m tired of disks, and I’m tired of having to think about it (because who really backs stuff up as frequently as they should?), so I want something that I can set up once and from then on it backs up automatically without my intervention.

So I’ve been trying out a bunch of things that have been better or worse for me, but this post isn’t about them. It’s about the curious lack of OS-level integration of Windows Sky Drive and the complete failure of the service to live up to its totally awesome potential.

Sky Drive is a Windows Live service that offers 25gb of storage for free. It’s marketed as a number of things, one of which is “online storage that you can access from any computer,” which will synchronize with their various programs like Office and whatever the photo program is called these days. Now I don’t actually use any of those programs, so I haven’t tried that particular syncing method, but I do use Windows and this seems like an obvious way for Microsoft to attempt to integrate cloud services into the operating system. And Windows Live already prompts you to download a piece of software called Windows Live Essentials, that seems like a great place to put a shell extention that would do that.

Perhaps my imagination went a little wild at this point, having been disappointed by several backup solutions already, but I thought “Surely Microsoft could do it right! This is the area they’ve been trying so hard to get into, and there is such obvious potential here that even they could see it!” I expected something awesome–after all, they wrote the operating system, they ought to be able to integrate with it well, perhaps in ways other programs can’t. I expected to be able to right click on a file or folder and get a “add to Windows Sky Drive” option. This would of course sync my files automatically whenever I changed them. I expected a “Restore my files from Windows Sky Drive” utility for when my files got lost in a horrible hard drive incident. I expected something simple enough for an elderly technophobe to use. I tell you, friends, I was disappointed.

There were no Sky Drive utilities in the largely-useless Windows Live Essentials package. As far as I can tell, Microsoft makes no such thing. What you get, unless you are using their Office integration or their Photo sharing, is a webpage with 5 file upload boxes on it. You are expected to fill up those 25gb 5 files at a time, selected individually, each no more than 50mb. Wow.

The Sky Drive upload form with its 5 upload dialogs

Convinced that this could not possibly be right, that there must be some way to back things up to Sky Drive more easily, I started searching. The very best solution I found involved not just one but two third party programs, the first of which gave me the worst End User License Agreement dialog I’ve ever seen:

A dialog with the following: "This plugin has been downloaded from Gladinet's Online Plugin Directory.l Please visit http://www.gladinet.com/p/terms.htm to review the End-User Licensing Agreements(EULAs). Click the 'Yes' button to continue means you agree with the EULAs."

A dialog inviting you to view the EULA on a webpage with a non-clickable, non-selectable url

Now I know no one reads these things anyway, but they’re not even trying here. You have to go to a web page to view it, and that’s not even a link. In fact, it’s not selectable, either, so you can’t even copy and paste.

Incidently, it is possible to get automated backups working with Gladinet alone, without the second program. This still isn’t as good as I originally envisioned, but I suppose it will do until something better comes along.

Javascript date formatting library

This isn’t directly related to usability, but I just finished a date formatting function that I’ve been working on for a while. It’s based on PHP’s date() function. I frequently work with both javascript and PHP together, and I often find myself wanting PHP’s date function in javascript, too, which doesn’t have much in the way of date formatting itself.

Most of the code in there is stuff I find myself writing over and over again every time I work with dates in javascript, just bound together into one nice function. If you think you would find it useful, too, go check out jsdate.

Edit:

I made some changes to one of the functions, and I found an error that had been preventing the minified version of the file from working. So those should be better now.

Designing for understanding and user empowerment

I recently wrote a post about desiging for people who don’t feel like they can understand computers. Specifically, I said, “The trick is adding a sense of empowerment and taking out the disempowering elements.” That can mean all sorts of things in different situations, but I saw a really interesting example of it in a Discovery Channel show while I was away for the holidays.

The show was about genetics and mutations in the human genome. That’s a really complicated subject, but the show did a very good job in presenting it in laymen’s terms. One could just as easily become confused and frustrated and give up on the show entirely, just as one could on a website, but the content and graphics were very carefully designed to break everything down and to make the viewer believe that they have the ability to understand, and to take pride in that ability.

When I was in 9th grade, my teacher said that authors, especially mystery and suspense authors, liked to write so their audience was just a little bit ahead of the characters in figuring out what was going on. That way they would get a little ego boost that they were smart enough to figure it out and feel good about continuing to read the book. I think the genetics program provided similar little ego boosts throughout the program to keep the interest of people who otherwise might not think they could understand the subject.

I’d like to talk about one animation in particular, and it’s a pity I didn’t manage to find a clip of it, but little text diagrams will do. Several times the show talked about the genetic changes that appear between the genomes of people with a genetic disease and without or between chimps and other animals and humans. Now, genes can be represented as a series of the letters A, T, C and G, and while the voice-over was talking about the changes the program showed the sequence of letters from one gene and from the other gene with the differences highlighted in red. Then it would show just the changed letters all by themselves, isolated from the rest of the gene. So you might (if you’ll pardon my completely making the sequence up) see something like this:

AATGCGAAT

AATGTGCAT

↓

TC

I’m not a geneticist, but I’m pretty sure that the TC there all by itself doesn’t really mean anything isolated from the rest of the gene. All it’s really communicating there is the amount of change that happened, but it maintains the original sort of “techy” look. This was especially interesting when they were talking about two sets of changes—the differences in a particular gene between a chicken and a chimpanzee and between a chimpanzee and a human. There were very few changes between the chicken and the chimpanzee, but a lot between the chimpanzee and the human, so the red highlighted changes that they pulled out looked something like AG and CCGATTAATG. They could have communicated the difference simply with lines of different lengths (|–| and |———-|), but by keeping in the original letters it sort of feels like you’re understanding something more complex than just “this change is more dramatic than this change.” And if you feel like you’ve understood one complex thing, you’ll have more confidence that you’ll understand other things the show might tell you as well, and feel good about yourself for understanding.

I wrote before that technical looking things should be avoided, but in this case it’s actually a benefit. However, what it’s actually communicating is quite simple, and by that point in the program the viewer already has a fair amount of confidence from other animations and explanations that the program will break all the technical things down to an understandable level, so it’s not going to scare people off immediately when they see it. So it is a very interesting method of building a user’s confidence in themselves, but I wouldn’t use it without earning the user’s trust first that you won’t throw them things they can’t handle.

So now I’m thinking about other ways to make a user feel proud and empowered for having understood something, and other classic narrative conventions that can be used to build engagement and trust. If you have other examples like this, I’d appreciate it if you’d mention it in the comments

[Fixed] Please excuse the missing character question marks

WordPress can’t figure out what character set it’s in and is spewing junk text left and right. Will fix tomorrow, giving up for the evening. I hate character sets.

Edit: Fixed! It turned out that the plugin I installed to produce pdf files for things like my resume was converting all utf-8 characters on all the generated html pages, too, not just the generated pdfs. *sigh* Well, I won’t be using that one.

Design guide for aural css?

I’ve been thinking a lot about the aural css properties today–things like azimuth, pitch, voice-family, etc. that are theoretically available to screen readers. Visual design guides are all over the place, a lot of them adapted from or comparing the web to print media. They say things like “your lines shouldn’t be longer than X characters” or “you need to have contrast between your headings and your text” or “the ratio of your line height to your font size should be X” or “don’t fill up the whole page, leaving white space makes things easier to read.”

But I’ve been looking around and I can’t find anything of the sort for aural web design, other than that you should use those properties to make your designs less terrible for people on screen readers. You might be able to adapt from radio guidelines, if such things exist, but it doesn’t look like anyone has yet.

Am I wrong? I’m sure there are some conventions shared between screen readers for default aural stylesheets the way that visual browsers do, but I admit I haven’t spent much time with screen readers. And I’m sure some improvements you could come up with off-hand, like adding a pause before and after headings, which I suspect is one of the screen readers’ defaults. But some things don’t have direct analogues to visual styles–what does a hyperlink sound like? How about when you hover over it? And according to Professor Bruce Walker in an Intro to HCI course I took a couple years ago, there are some things that the blind and the sighted just conceive of differently, like high vs low pitch to mean something large.

I’ve never attempted to design an aural stylesheet, but I’m genuinely curious now and probably will. If you know of a style guide (or several), please let me know in the comments!

Edit: closing comments on this one since it seems to attract 99% of the spam comments on this blog.

How do we design for learned helplessness?

Over thanksgiving weekend I had the experience of helping my mother reset her Facebook password. Now, she doesn’t really know anything about computers, but she’s an intelligent woman and perfectly capable of learning if she only believed she could. The whole conversation between us was littered with her saying she couldn’t possibly do it herself, she’d never remember what I was telling her, etc. Let’s take this bit about copy-paste:

Mom: “There were all these numbers and letters I had to type in the email, and I wrote them down but it didn’t work.”

Me: “You know, you can get the computer to copy that for you and tell it to stick it into the other window.”

Mom: “You can? I didn’t know that.”

Me: “Yeah, it’s really handy, I’ll show you.”

Mom: “Oh, but I’ll never remember how to do that.”

Copying and pasting isn’t hard, and it’s definitely not beyond her ability to learn or remember. She knows all sorts of stuff that’s a lot more technical than that, but she decided before I even told her how to do it that it was too hard for her. I think the problem is akin to learned helplessness–it’s not that she can’t learn to do it herself or that she can’t remember, but that she believes that any effort on her part is useless, she’ll never be smart enough to learn to use this computer thing.

The interesting thing is that she knows more than she thinks she does, she can figure some things out on her own. She had already managed to send herself a password reset email, but was helpless to find the link or even navigate her mail client (which was one I’d never used before) without my help the moment I was looking over her shoulder. In retrospect, it seems sort of defensive–getting my help on things she could probably do to prevent real criticism when she makes a real mistake, or in other words, pretending to be stupid so I don’t think her actual ability is stupid. The upshot is that even if you could get someone like her into a usability study (protesting all the while that you couldn’t possibly want her, she doesn’t know anything about computers!) you probably wouldn’t ever get real behavior.

So how do you design for someone who doesn’t believe they’re smart enough to use your system? The trick is adding a sense of empowerment and taking out the disempowering elements (without disempowering more skilled users), but what does that mean? I don’t really know the answer to that, but it’s an interesting lens through which to try to view a design. Let’s take a look at the Facebook password reset process. I’m not picking on Facebook, here, it’s just what Mom happened to need help with but it could be any website.

Step 1: Sending the password reset email

Facebook's password reset form

The page you get to when you click on the “forgot your password” link is pretty cluttered. What do you look at first here? As someone experienced with the web, I know a captcha when I see one and I know what it’s used for, but it’s the biggest, boldest thing on the page and it doesn’t make any sense. It looks techy, as my mom would put it. Sure, it prevents robots from resetting people’s passwords for them, but there are other ways to do that.

If you must use a captcha, there are better ways to present them, ways that don’t detract from the two things that actually matter on this page–the description that says enter your email address to get a reset link and the field where you enter your email address, now currently separated by the big block of nonsense. Hiding the captcha until after the critical text is entered and then displaying it with an animated transition and friendly explanatory text that this is here to stop the naughty robots would be a good move, too.

Most users will figure out what to do here from having seen this sort of process elsewhere before, but for someone who doesn’t know the pattern you should emphasize the one simple thing they need to do here. All we need is your email address and maybe a few nonsense words. There, wasn’t that easy? Let’s move on to the next step.

Steps 2 & 3: The password reset confirmation page and the email

The Facebook password reset confirmation page

The password reset email

After you submit the password reset page, you get a confirmation page telling you that an email has been sent and asking you to enter a code from the email into the box. Honestly, I think you could remove almost all the text from this page without losing anything–the wall of text is intimidating and unnecessary. The thing that matters is that you should go check your email. Users who are still having trouble can click to open up suggestions.

Mom was confused by the confirmation code thing, and really I can’t see why it exists. It’s completely redundant with the link that is also sent in the email. It’s easier for anyone to click on the link (how many email clients don’t support them these days?), and just as easy to copy and paste for those users who now how. Mom doesn’t know how to copy and paste text, and she was confused about what to use as the code, anyway, and whether she still needed it when she clicked the link, but she knows exactly what to do with a link if you just tell her to click it and nothing else. The link is simple enough to understand. The code adds “techy” stuff that has to be written down and remembered, and I really don’t see the benefit of providing multiple redundant methods of setting a password.

Step 4: Changing the password

The password reset page

Mom liked this page. She approved of the “Passwords match” checker telling her that she got it right before she submitted the form. She didn’t understand the password strength thing, and I don’t think she even noticed the question mark next to the field, which just looks like a question mark, not a link or other item that could be acted on. I told her to ignore the strength meter, no one is going to try to steal her facebook account and remembering a harder password for someone who is already concerned about remembering technical things is not worth the effort. (I also told her it’s ok to write it down and stick it on the monitor.) I have no idea how to incorporate that into a design heuristic–explaining the password strength would incorporate dire warnings about stolen accounts, but how do you know when it’s better to ignore the advice?

Conclusions, such as they are

I don’t really have any ground-breaking conclusions to draw from this, mostly it’s an interesting thought experiment. Anything I can say is just good design advice:

remove all unnecessary content (this includes alternative methods of doing something, except perhaps on pages meant for experts)
emphasize the important things (happens naturally if you remove unnecessary things)
don’t separate items that need acting on from their explanations
remove jargon and other techy sounding things when they aren’t necessary
when techy things like captchas are necessary, make them friendly and non-threatening, and hide them until necessary
“?” doesn’t make a good help icon unless you make it look like a button
feedback as you progress is a good thing
advice you give to some users will be bad for others

emphasize

obligatory first post

Hooray, I have a blog now! I’ve never customized wordpress before, so I’m still trying to work out some kinks (e.g. comment errors should be displayed by the relevant form field, not on a separate page, the blog name at the top right should be a link, etc.) and the rest of the site needs to be integrated somehow. But I thought I’d put something online now or it would never get online. So bear with me, not-yet-existing-readership!

I’ll be using this space to discuss usability, accessibility, sociability, and perhaps other things that end in “ity”. I’ve got a few ideas for things to write about, but I’ve never really blogged before, so we’ll see if I ever get around to writing them. For now, I’ll leave you with my favorite error message of all time:

This page has an unspecified potential security risk. Would you like to continue?