intangiblestyle

Interface Watch: Google.com

2009-12-19T11:02:37Z

For a long time, Google’s search page has been a leading example of how to maximise usability by keeping things simple and focused on the task at hand. The interface consists simply of Google’s logo and a search box—everything else is kept small and out of the way. The distractions are minimal so users can focus easily.

There’ve been a few tweaks made over the years, but never anything really noticeable to casual users.

Not any more. When you load Google’s new homepage, you see the logo and search box. That’s all. Everything else is hidden. You can type your search, press enter, and that’s all you’ll ever see.

For the vast majority of searchers, apparently, that’s enough. But move your mouse—indicating, Google says, that you might want to do something more—and the rest of the page fades smoothly in, allowing access to the rest of Google’s services.

Nice!

What makes a website successful?

2009-12-06T00:05:59Z

24ways, the advent calendar for web geeks, is back again. Entry #4 is from Paul Boag, and he’s suggesting that a website’s success really isn’t, after all, determined by valid code, accessibility, usability, or attractive design – but by whether it supports the owners’ business objectives, is targeted at the right audience, and provides appropriate calls to action.

Paul cites eBay and Amazon as examples: they achieved huge success by uniting the right content with the right audience, regardless of design, poor code quality and major (and minor) usability issues.

True, as far as it goes. But I think there’s more to it than that – and that web developers’ other skills shouldn’t be rejected as useless.

Why? Because there are actually 3 facets to a successful website:

content that serves the right audience ad business goals
‘findability’ to ensure that the audience gets to the site
usability to ensure they can achieve the goals when they get there

eBay and Amazon are exceptions, but they’re exceptions that prove the rule. What they got absolutely right was matching great content to the needs of their audience.

They were able to ’short-circuit’ findability by making sure everyone knew about them. Search engine performance really didn’t mean much when everyone searched for ‘ebay’ and ‘amazon’ not ‘online auctions’ and ‘online bookshop’. (Most people, of course, won’t have this advantage, so skills like writing valid code, accessibility and SEO come back into play.)

Likewise, being the ‘first and only’ (at least that everyone knew about) helped deal with minor, or even major, usability issues. They were ‘usable enough’ in the beginning, when competitors were unknown and the general trend on the web was of task failure. (Jakob Nielsen estimates nearly 60% of the time.) As they’ve lost that advantage over time, usability (and its relations like UX, IA and so on) have renewed importance. For everyone else, they’ve always been there.

Coding like it's 2009

2009-06-21T11:57:35Z

Back in 1999, when IE ruled the world and most people still used tables for layout, pixel-sized text was one of the web’s great evils. IE, you see, couldn’t resize text sized in pixels – which meant huge numbers of sites were inaccessible to almost anyone with less-than-perfect vision. Web developers who cared about accessibility (or usability) learned instead to size text in ems—a unit relative to the browser’s default text size.

A decade on, we have lots of new browsers, all of them capable of using page zoom, resizing not only pixel-sized text, but images too. So, Cameron Moll suggests in Coding like it’s 1999, we can safely go back to sizing text in pixels – because now anyone who wants can resize it.

What does all this mean? It means px can again be considered a viable value for font-size.
- Cameron Moll

Sorry Cameron, but for people who care about accessibility, that’s just plain wrong.

Approximately ~17% worldwide still use IE6 (NetApplications, May 2009). Much as we might want IE6 to die, that’s hardly an insignificant market share. Even allowing for the drop in IE6 usage at weekends, quite a lot of people would be potentially disadvantaged. (As an aside, IE7 and 8 still don’t scale pixel-sized text. We don’t know how many IE7 or 8 users prefer text scaling to page zoom, but we do know that if they’re on a pixel-sized site their preferred type of scaling won’t work.)

Looking deeper, em-sized text isn’t just scaleable – it does a better job of respecting users preferences.

It’s based on the browsers default text settings, which are set to ensure basic readability.
If your em values are reasonable, most readers won’t be obliged to adjust text scale.
It makes a better solution available to users who need larger text—they can increase the browser’s default text size.
For users who aren’t tech-savvy enough to do that, it ensures text is always resizeable.

The bottom line, though, is that as professionals, we shouldn’t force users to adopt a technical solution to a problem that we can easily solve for them. Yes, working with ems is a little more difficult, but as Nate Koechley put it recently, “It’s OK for us to suffer a little bit to give the user a better experience; that’s what we’re here for.” The fact that a technical solution exists doesn’t relieve us of responsibility to get things right in the first place and stop the problem ever happening.

Interface Watch: Twitter pagination

2009-05-28T11:46:29Z

Twitter’s pagination controls have always been simple, but recently they got a whole lot simpler. The classic ‘next’ and ‘prev’ links have been replaced by a single ‘more’ button that loads more tweets on the same page.

Simplified pagination controls like this can greatly improve usability, and they’ve been around for a while as bookmarklets, browser add-ons and in the occasional web-app. (Dopplr uses a similar control for lists of contacts.) But it seems to be the first time an interface like this has appeared quite so prominently in a high-profile application.

Unfortunately, Twitter’s version doesn’t degrade gracefully, so usability actually gets worse when JavaScript is unavailable. Clicking ‘more’ reloads the page with the next group of tweets…but doesn’t provide a link to return to the page you were on before. Forcing users to resort to their browser’s back button isn’t ideal—it would have been better to use progressive enhancement and to show the AJAX-dependent ‘more’ button only if AJAX is actually available.

Where to find CSS Web Fonts

2009-10-19T11:19:11Z

Thanks to the upcoming releases of Firefox and Opera with webfonts support, existing support in Safari, and Jon Tan’s efforts to make them co-exist with IE’s proprietary EOT format, CSS web fonts are becoming a reality. But the major font foundries are still resisting the idea of licensing fonts for distribution via CSS. So where can we find quality fonts that can legally be redistributed?

There are, of course, many font repositories out there. Some, like Font Squirrel, even focus on high-quality fonts that are free for commercial use. But the vast majority even of these fonts can’t be redistributed—and finding the few that can takes more time than most designers have to spend.

Fortunately, there are a few places out that showcase entirely redistributable fonts. ~~It’s a short list, for now, but one that’s hopefully going to grow.~~ Six months on, it’s a sizeable list—with great-quality fonts for just about any purpose.

10 Great Free Fonts for @font-face embedding—Ralf Herrmann’s original list
Commercial foundries which allow @font-face embedding and free fonts available for @font-face embeddingat the WebFonts.info wiki
DaFont.com now lets you search for GPL-licensed fonts (which are, of course, all redistributable)
Exljbris Font Foundry
Font Squirrel’s @font-face list is long and comprehensive—and they include EOT versions and sample stylesheets too!
League of Moveable Type
The Crud Factory
Open Font Library

If you know of anywhere else that hosts exclusively (or mostly) high-quality redistributable fonts, let everyone else know in the comments!

4/7/09 – I’ve updated the list to add the Crud Factory and Open Font Library.

19/10/09 – Added FontSquirrel and DaFont.com – via Jarel Remick. Thanks Jarel!

Safari 4 beta released

2009-02-27T09:26:10Z

Apple has released a beta version of its Safari 4 browser, which brings with it plenty of UI innovations and a few usability issues. There’s a great deal of cool stuff included: ‘tabs on top’ (borrowed from Chrome), ‘Top Sites’ (borrowed from Opera), and new location bar searching based on Firefox 3’s ‘Awesomebar’. There’s also a substantial JavaScript speedup—even if Apple’s claimed “7x faster than Firefox” is based on a slightly dodgy testsuite, it’s still a respectable 1.6x faster according to the well-respected Sunspider test.

Developers aren’t neglected, either. HTML5 support now includes offline storage and the and tags. Combined with improved CSS3 support, CSS Transformations and Animations, better SVG and SMIL, basic WAI-ARIA support, and a revamped Web Inspector, it looks like Safari 4 is gong to be an excellent release and a solid advance for web standards.

Setting up screen reader testing

2009-01-05T09:05:20Z

Ever wondered how to set up your machine for testing with screen readers? It’s one of those things that can take a long time and a fair bit of trial and error to work out—until now. Todd Kloots at YUIBlog has posted an article on setting up Jaws, Window-Eyes and NVDA for testing in a virtual machine. He talks through finding demo versions to test with, getting set up and tweaking settings for easier testing as a sighted person.

While it would have been nice to see some reference to testing with other ARIA-capable readers, such as Orca or FireVox, it’s an excellent guide to getting set up for testing on Windows. Using VMs means the approach is even useful cross-platform.

Merry Christmas (and a few links)

2008-12-25T08:26:21Z

It’s been a busy time of year. Apart from preparing for Christmas and wrapping up the odd project, I’ve been away for a while, attending my Grandfather’s funeral. In the meantime I missed a few things worth writing about, so here’s a Christmas present in the form of a few links:

WCAG 2.0 becomes a W3C Recommendation. At last web accessibility takes a big step forward from version 1.0.
Roger Johansson has a round up of how to create more accessible Google Maps.
TechCrunch came out with a new search engine based on Yahoo!’s BOSS ‘Vertical Lens’ custom search technology. Sadly only available to Yahoo! partners at the moment…
Robert Nyman released a new version of his Inline Code Finder Firefox extension—which now handles inline CSS as well as JavaScript.
Peter Nederlof’s Whatever:hover reached version 3. It now works with AJAX, and supports :focus and :active as well as :hover.
Cameron Moll has a discussion about resources for a starting a new project.
Andy Clarke has two posts on beautiful web typography at For a Beautiful Web: Typesetting the Waste Land and Typography is Poetry.
Benjamin Smedberg takes a look at a crop of cross-browser issues with using SVG on the web.
Aza Raskin writes about real-world usability – with paper receipts, no less.
No Christmas links roundup would be complete without mention of 24ways. From the design to development transition to tips on surviving the recession, the advent calendar for web geeks is as brilliant as ever.

And a bonus link: Merlin Mann’s ‘Is this really what you want to be doing right now?’ The answer, of course, is no, I have Christmas to celebrate. ;)

Merry Christmas!

IE6: not so dead after all

2008-11-24T07:15:41Z

Recently, I wrote about how some leading web applications are starting to end support for IE6. While those of us who aren’t running high-profile web applications might have difficulty doing this just yet, it did seem IE6 was declining to the point where it’s a candidate for graceful degradation.

However, it turns out Microsoft hasn’t had enough of IE6 just yet. They’re bringing a new rendering engine to IE for Windows Mobile, and the basis of it is Internet Explorer 6.

At first sight, seems a rather odd strategy. Microsoft has the new, faster, more standards-compliant IE8 engine available. Much of mobile development these days is focused on the iPhone and Blackberry (both of which use Webkit), and Opera Mini. As Robert Nyman points out, Microsoft and IE have only a minority share in smartphone market. That means IE6 for WinMo is unlikely to be seen as important by mobile developers, even if it’s adopted by the enterprise. Just to make matters worse, they’re mixing in the JScript engine from IE8. How this will play with IE6’s many rendering issues remains to be seen.

However, as CNet suggests, IE6 looks like a defensive strategy for Microsoft, aimed at preventing rise of Opera (and Fennec) on WinMo, and also of the iPhone. IE6 is better than current WinMo browser, although there are still plenty of issues (Ars Technica has some examples). By presenting corporate IT departments with a browser they’re already supporting on the desktop, support costs may be reduced, and it may help prevent alternatives gaining more mindshare and marketshare among WinMo enterprise users.

Using IE6 also speaks of Microsoft’s difficulties persuading businesses to upgrade to IE7. Enterprise users still wedded to IE6 on the desktop will be able to upgrade without breaking their applications. Of course, moving to an IE8 (or even IE7) based rendering engine would also reduce the degree to which these enterprise users are locked-in…

Fortunately for web developers, it looks like IE6 won’t be gaining any marketshare over what IE for WinMo already has. The mobile space is one area where you can assume a high level of standards-compliance. Webkit and Opera dominate, and Mozilla’s is looking to get in on the act with Fennec. Most people who want to support Blackberry and the iPhone won’t be in a hurry to spend the extra time and money needed to get IE6 working.

That means IE6 isn’t going to work as a long-term strategy—as mobile capabilities increase, the pressure to dump IE6 in favour of something more powerful and easier to support is only going to become greater. Even corporate IT shops that appreciate being able to support the same browser on the desktop and mobile will, sooner or later, upgrade on the desktop. At that point, they may well find it easier to upgrade to Opera than continue supporting IE6. Microsoft may just have traded short-term lock-in for longer-term decline.

Cross-browser CSS web fonts with @font-face

2008-11-23T13:27:55Z

The promise of web fonts and the @font-face rule is to be able to display any font you choose to any user, regardless of whether that person has the font installed on their machine. Jon Tan has written a detailed article on how to make @font-face work across both current and upcoming browsers.

The web fonts specification and @font-face rule have been around for a while—since CSS2 in 1998, in fact. However, usable support for the rule has been rather slow in coming. Safari 3 is currently the only official browser version to implement the standard correctly; Firefox and Opera won’t implement it until their next major versions. IE, meanwhile, only supports fonts in the proprietary .eot format.

Tan delves into the history before getting down to the nitty-gritty of how to make things work (including working with Microsoft’s awkward WEFT font-embedding tool). The results are quite impressive, so if you have IE, Safari or Firefox 3.1 Beta handy, get over to the demo page and take a look.