Tag Archives: web design

Websites as Performance Art

My team is currently hard at work on re-architecting the Office Developer Center on MSDN and in preparation, we dug through reams of data to help inform decisions around pages and links we’d retain in the new site. Now that we’re down to the brass tacks of creating pages and starting to see the overall site experience start to jell, we’re at the natural part of the project where the anxiety level is starting to creep up.

The anxiety manifests as questions.

Did me make the correct decisions? Were we looking at the right telemetry data? Did we interpret it correctly? Is there any other customer feedback we can get our hands on? Did we overlook any internal stakeholder input? What have we missed? What should a download graphic look like? Am I going to lose my job if we ship this? Who is going to most pissed off that we moved their cheese?

But then I take a deep breath and remind myself that web sites are like performance art. You practice and practice your art in private, and then finally reveal yourself in public. Sometimes you have the right art, in the right place, with the right audience, at the right time, and everything is magical. Or you just bomb, and you head back to the drawing board.

In any event, you adapt and change, hoping for the magic to occur as often as possible.

I still worry about bombing though.

I’m coming to realize that when you’re operating at scale like Microsoft does, and applying the 80/20 rule of targeting the needs of the 80%, that the sheer size of the 20% is a dauntingly large audience.

So we take more deep breaths, and practice, and practice some more. We’re sure you’ll tell us what we did right and what we screwed up.

Designing for the Mobile Web

The days of fine-grained link acquisition with a mouse or trackpad pointing device are being eclipsed. If you haven’t designed a mobile version of your website or aren’t thinking about how to re-factor your site for a mobile touch experience, now’s the time to do so. And if you aren’t considering mobile Safari as your primary target, you’re not paying attention.

Don’t believe me? Than you should look at the data around PC shipment forecastssmartphone shipment forecaststablet/mobile shipment forecasts, and correlate that against desktop browser market share and mobile browser market share.

Designing for this emerging mobile web isn’t hard – there are just some new constraints you need to keep in mind.

Offer a non-desktop version of your site and a way to view it. XKCD sums this up nicely. I swap back and forth depending on what I’m doing at the moment. Choice is good.

Allow zooming. This one frustrates me to no end. Someone, somewhere thinks, “Oh, mobile experience! I better set fixed widths for everything so the proportions don’t get wacky.” And then I visit a mobile site where I can’t zoom a picture. Fail.

Touch targets need to be around 6mm or larger and you need to provide some space around clustered links, otherwise click acquisition becomes hard. This also means using larger fonts for links in some cases.

Just don’t do cascading or flyout menus or navigational items. Getting proper render across all browsers is tough and accidental touch inputs tend to be high, so menus/navs that collapse on touch outside of target areas will frustrate users. I’ve wanted to throw my phone to the ground when dealing with finicky nav flyouts.

Go easy on the Javascript. The Javascript engines in mobile browsers are much better than they used to be even a year ago, but highly complex scripts will slow things down. I access my WordPress dashboard via the mobile web sometimes, and it’s s-l-o-w to render due to all the Javascript.

Dump extraneous text. Focus on the task or action and minimize the use of text so you can use the limited UI space for other elements. For mobile, I’m in, I’m out. I’m not doing deep research. If I can’t find things quickly, I move on.

Optimize, compress, and be sparing with graphics. Graphics chew up bandwidth, which most people still pay for on their data plans and slow down page render times. Don’t even get me started about sites that render out a 2MB PDF for some pages…

Check your CSS on your target platform(s). There are wide variances in CSS rendering across mobile experiences. I keep running into sites that don’t re-flow or re-paint correctly when I zoom. It makes sites unusable.

Pay attention to keyboard input scope. Every now and then, I run into a site that notices I’m on a mobile browser and I get a different keyboard for input. It’s a nice detail that makes password or email entry that much easier. Just be consistent between fields, because I get screwed up and annoyed when the keyboard changes when I change field focus.

Don’t be clever with ad placement. Look, most of us need to work for a living, myself included, (notwithstanding a few rich, dirty hippies,) but that doesn’t mean you should make your ads look like the rest of your content or place them right next to high profile touch click targets to garner some extra clicks.

Lastly, make stuff bigger and simpler. Screen sizes are smaller than desktops – duh. Strip things down to the basics and make the remainder larger. Consider re-factoring your information architecture and remove extraneous pages. Think easy and fast.

There! Get to work. 😉