Archived entries for Tutorials

Paper vs. Pixels – Part 3

It’s fun being a Web Developer because we’re right in the thick of it all. I once defined a Web Developer as the team member with the most software. Webdev’s are in the middle of a triangle between (1) Project Management/Business, (2) Design and (3) Engineering. Therefore, we use all their software, and often act as liaison between the groups. I often use:

  • Photoshop and Illustrator, tools of the Designers trade
  • InDesign and Viseo, tools of the Interaction Designers trade
  • MS Project, Excel, PowerPoint – tools of the Project Manager
  • Apache, PHP, MySQL, vi, SecureCRT – tools of the Engineer
  • Homesite, about 30 browsers, validators, and various small tools like sruler, Iconico…

Anyways, one of the more common questions a Webdev gets asked relates to the different between designing and building for The Web versus the controlled and familiar world of Print.

I’ve been reading Web Page Design for Designers for years now, and in this months issue Joe talks about just that in part 3 of Paper vs. Pixels. It’s worth a read, as he covers key points including:

Apart from providing an index or glossary, navigation is not usually an issue in print. …

Unless you produce comics that require special 3D glasses, print never requires on the reader having a ‘plug-in’.

Once the artwork has left your studio, duly checked for correctness and signed-off, what you get depends on the printer. There are lots of variables but you will have certain expectations and decent printers will do their best to meet them. If they don’t, you will have good cause to complain and if they don’t satisfy you, stand a good chance of losing future business.

The equivalent of a printer on the Web is the browser, the piece of software that interprets your instructions and displays it as a page on a computer screen. Just in the same way that you wouldn’t expect different printers to produce identical results from the same artwork, browsers won’t either. Sadly, there will probably be a much greater divergence in browser results than you would expect from printers.

This installment, the third, covers Navigation, Plug-ins, Browsers, and Multimedia. For the full story, be sure to read the earlier Part 1 (The ever-changing screen, Statistics, and Judging a design on
your own screen) and Part 2 (Font sizes, Colours change, and Resolution).

Smart Keywords – Key to Efficiency

You want “Smart Keywords”. I just learned about this last week, and it’s totally awesome. I have a keyword set up for Yahoo Search, so I type “ys honda” into the address bar to initiate a search for Honda on Yahoo Search. Typing “the awesome” returns a THEsaurus entry for Awesome. “dict improvement” returns the dictionary entry for Improvement. The best part of being able to search from the Address Bar is that I can get the cursor to focus on the address bar by pressing Alt-D on the keyword.

Before learning about Smart Keywords (which may be new to the latest Preview Release of Firefox 1.0) I relied on the customizable search box to the right of the address bar. While it has the ability to search just about any source, there’s no way to get there from the keyboard.

Here’s how

Say you search on a lot of different things – corporate phonebook, imdb, etc… wouldn’t it be handy to have convenient aliases to all these searches? You bet it would be.

  1. Go to the page that has the search box on it, right click on it and choose “Add a Keyword for this Search…”
  2. In the “Add Bookmark” dialog that appears enter a name and a short “keyword” and save the Bookmark…

Now you can type “kw search string” in the URL, e.g. “pb Janet Robinson” for a quick phonebook lookup. I can’t live without my keywords. Oh, and it handles POST forms too, unlike most other browsers!

In other words, you can have instant access to any search input field from your keyboard. It’s great.

Hat tip to Ben Goodger at


Introducing sIFR

Mike Davidson, in conjunction with Shaun Inman and Tomas Jogin has released “a scalable, multi line, Flash 6 compatible version of IFR to help you reduce the amount of browser text in your life and free the world from the scourge of Arial.”

This system uses JS, DOM and Flash to provide scalable, typographically-rich headlines and font treatments through dynamic replacement of H1, H2 and DIV tags.

Seems interesting.

I’m historically pretty anti Flash. I believe in HyperText and meaningful, semantic markup. I believe in access to information to all. I believe that pure text is faster, better, and more “Web”. Just being up front about it. (On the other hand, I also believe in Progressive Enhancement, which is consistent with this approach.)

So I’m not yet sure what I think about this technique.

I know I’m more fixated on edge cases than many people, and that my work necessitates a never-wavering focus on speed, performance and efficiency, and that I have strong feelings about the benefits of “built-in” usability. But…

One reason I generally don’t like text as images is because you can’t select or copy-paste the content when it’s locked in an image. Organizations that have their address locked in an image prevent me from Yahoo-mapping their address and therefore lose my business.

My first test was to select the text of this flash headline. Happily, I was successful (though it’s pretty clunky, and much more difficult than normal HTML text).

One of Flash’s historic downsides is that .swf text is more or less unknown to the browser. They seem to have fixed this for mouse-based text selection, but using the keyboard doesn’t seem to work. Modern browsers have started introducing “Find As You Type” functionality, which lets you navigate (and select) the text of a page from your keyboard. This isn’t compatible with sIFR in my testing. Further, the standard “Control-F” on-page search isn’t aware of sIFR text. I, and many people, use Control-Find often. That IFR is for headlines instead of body content is some consolation, but… I’ll lump those together as one strike.

I wonder how well .swf text is indexed by search engines? I don’t have an easy way to test this, but because I can’t select the .swf text via the keyboard, and because test uses of Control-F “find” failed, I’m skeptical.

Interesting technique. Definitely one to keep an eye on.


Exceptional Eyetracking and Analysis

Wow!: Eyetrack III

The Poynter Institute, a school for journalists, has just released the results of a comprehensive and fabulously documented eye tracking study. Very interesting information.

They analyzed their data internally, and with external analysis by Jared, Jakob, Rusty, Adrian Holovaty and Alan Jacobson.

They’ve made a lovely self-contained site with all the goodies which you can also download in it’s entirety in PDF.

There are many interesting findings, which did you find most enlightening?

Diemen Repository of Interaction Design Patterns

Home Patterns

Patterns help us solve design problems – problems that occur time and time again, and are being solved time and time again by designers. Patterns describe practical solutions to these problems and how to apply them in different situations.

San Francisco, California | Creative Commons By-2.5 License | Contact

RSS Feed. This blog is proudly powered by Wordpress and uses Modern Clix, a theme by Rodrigo Galindez.