You are currently browsing the Web Development archives of Chausse.org

Snooping on a User’s Browser History with CSS

image Niall Kennedy demonstrates a very clever trick for spying on a user’s browser history.  You can’t actually retrieve the list (thankfully), but you can compare it to a known set of links.  How? By exploiting the way CSS applies different styles to visited links!  He recommends it as a way to selectively display social networking links which you have evidence the user actually uses, but the possibilities for creative evil helpfulness here are endless.

FancyZoom 1.0

Cabel Sasser of Panic just released, for public use, a JavaScript tool for really gorgeous lightbox-style image zooming called “FancyZoom“. Check it out, and check out the stellar mullet on the dude in the example pictures.

You’re Paying for What Gets Thrown Out

Trash CanA while back, when press coverage of the Hollywood writers’ strike was in full swing, a writer was asked why it takes a staff of so many writers, taking such a long time, for so much money, to come up with something as short as a late night monologue. His response was: “You’re paying for the jokes that aren’t on the show”. Writing comedy’s not easy. Trying really hard to come up with five perfect jokes is far less effective than brainstorming 100 and throwing out 95 of them.

There’s a perfect parallel here with UI design. Whereas the art of programming typically involves working in a “5 steps forward, 1 step back” process, the good UI designer will know when something’s not coming together correctly, and do the right thing by throwing out the entire design and starting over. It’s more like five steps forward, five steps back, six steps forward, six steps back - repeatedly starting from zero, but each iteration benefiting from knowledge gained in the previous one.

A good UI design is one in which the whole is greater than the sum of its parts. No amount of tweaking will repair a UI that has gone too far down the wrong path. If your UI designer isn’t throwing out (a lot) more designs than they’re showing you, they’re not trying hard enough.

The creators of the forthcoming OS X personal task manager, “Things” have written a great blog post describing this phenomenon. In the process of designing a single dialog box, they threw out dozens of possible options (they actually display 38 of them). And this was for something that’s already been done (a dialog for entering recurring events on a calendar), which they just wanted to do better. Had they been designing something that’s never been done, there would likely have been a lot more.

So, the next time someone spends two weeks designing a single mockup, thank them. Remember you’re paying them for knowing what to throw out.

CSS: Removing dotted outlines on clicked hyperlinks

No matter how much you know about CSS, you can always stumble across something new.

I was pretty much unaware of the “outline” style attribute - which isn’t really a big deal, because in most ways it works the same as the “border” attribute.

Except…

The “outline” attribute is what’s responsible for drawing the little dotted boxes around hyperlinks when they are clicked or navigated (tabbed) to via keyboard (I always thought it was strictly a OS-level effect). Anyway, if they’re a visual blight on your sight, you may be inclined to try this:

a { outline:none }

However, that would make keyboard navigation nearly impossible. Don’t do it. If you just want to avoid them on active (clicked) links, just throw this in your CSS file:

a:hover { outline:none }

And there you go. Huh. Thanks to my pal Matt D. for the tip.

Dapper.net - Build Your Own API for Any Website

This is so cool. Ever use a web site and wish there were an easy way to programmatically access the site’s data, but - alas - there’s no API? Dapper.net is a service that lets you input any web site, basically point and click at the information you want to make accessible via XML, or another type of feed, and - voila, it’s done.

A while ago, I had an idea for a web site that revolved around movies. But, I needed a way to automatically update it with a list of movies currently in theatres. I couldn’t find a way to do that via any sort of web service, but now with Dapper, I just made one… Check out my Movies In Theatres Dapper feed. Nice!

Software Development and the Wisdom of Many Hats

How do you make Good Software? Well, good software is defined by many factors.

  1. Does it meet the needs of the customer?
  2. Does it have an elegant design?
  3. Is it robustly coded?
  4. Is it secure?
  5. Is it free (or nearly free) of bugs?

If your software hits all five of these targets, I’d say it’s Good Software. So, how do you accomplish this? Well, let’s go through that list again, this time listing who would be in charge of each factor:

  1. Marketing (or Account management)
  2. Designer
  3. Developer
  4. MIS/Security Engineer
  5. Quality Assurance

Anyone who’s been around the block in the software development world has probably witnessed strife between any given pair of these principals. It’s kind of a fun thought exercise to picture the conflicts. I won’t list them all.

So, how do you avoid these conflicts? Well, my advice is - you don’t want to! And you certainly don’t want to try avoiding them by having people play multiple roles. There’s a common saying that software QA’ed by engineers is not QA’ed at all. The same can be said about any pair of activities in this list. That’s not to say that an engineer can’t have design skills, or that a marketing person can’t know a thing or two about security. The point is that one should embrace the creative tension between all of these groups because, as James Surowiecki describes in The Wisdom of Crowds, a large enough group of people each with a differing perspective on a complex problem will invariably come up with a better solution than a single expert ever could.

By having team members wear too many hats, each will inevitably make tradeoffs in his or her head before giving the larger group an opportunity to explore the possibilities. A developer doing his own QA will decide certain features are too risky to build. A marketer also doing design will be reluctant to simplify the software’s design for fear of neglecting customers’ feature requests.

The correct strategy is to hire enough people to fill each of these roles individually, have each person push their particular approach to the product as hard as they possibly can, and let the wisdom of the larger group decide where the tradeoffs (security vs. usability, marketing schedules vs. QA) need to be made. Of course, communication is key, but that’s a whole other topic entirely.

Thoughts from An Event Apart

An Event Apart Boston was a great experience. Regrettably, I had to miss two of the talks — the danger of going to a conference two blocks from your office. But what I did see was fantastic. I have an incurable case of speaker-envy. Whenever I’m at a conference, I get an insatiable urge to drop whatever I’m doing with my life and become an expert at whatever the speaker’s talking about. So, Steve Krug made me want to become a usability guru, Jason Santa Maria - a designer, Jeffrey Zeldman, a… well, a Jeffrey Zeldman.

Anyway, a few notes.

1. Eric Meyer, CSS guru, presented a mindblowing way to render a standard HTML table as a bar chart. This guy’s good. Eric’s #1 take-away from his talk was to remember that CSS does not care how HTML elements are “supposed to” behave. (Ever tried adding style="display:block" to a style tag)?

2. Cameron Moll, in talking about the creative process, presented my favorite quote of the event:

“Instinct… is largely memory in disguise. It works quite well when it is trained, and poorly otherwise” — Robert Bringhurst

In other words, all these people who seem to instinctively know the right way to design something, are actually subconsciously calling upon an enormous backlog of experience. This is why “basement-dwellers” often make lousy designers. You need to get out there and have visual experiences (art, books, movies) in order to create new ones.

3. Also via Cameron Moll, I learned how important typography is, and that I know nothing about it. I intend to fix this. I bought the excellent “A Type Primer” for this purpose. Expect a redesign soon.

4. Thanks to Eric Meyer, I learned about the “IE7 Script“, which basically makes IE6 act like a standards-compliant browser with one line of code. Sounds unbelievable, but it’s got Meyer’s seal of approval, so it must be good. Based on a show of hands, most of the other attendees didn’t know about it either.

5. Wisdom from Zeldman: When presenting multiple designs to a client, each design should convey (and be presented as) a different idea or approach, not simply an aesthetic tweak. This helps prevent clients from obsessing over individual details which, if changed, may water-down the overall idea.

At An Event Apart

I’m learning me some web stuff at An Event Apart.

Rethinking User-Centric Homepage Design

A recent project at work got me thinking hard about how a corporate homepage should be designed. Any designer worth their salt knows that a homepage design needs to be user centric - focused on what users will actually want to do (or what you want them to do) when they arrive.

The simplest approach is to make a list of possible activities, prioritize them, and allocate screen real estate accordingly. More likely activities — or activities geared toward more strategically important audiences — get bigger and more prominent chunks of the page - a sort of “importance equals pixels” policy.

This approach, while definitely a good starting point, is overly simplistic for a number of reasons:

  • Content geared toward a technically savvy audience does not need to be as prominent as content geared toward a non-savvy audience. Frequent web surfers are less likely to rely on the visceral impact of bold content to steer them toward what they need - in fact, they may instinctively avoid it.
  • Content that does not rely on bold visual impact should make way for content that does. Let’s say your site contains a vast archive of videos. The archive itself is clearly the most valuable content on the site. But you also want to show a single example of one of your videos on the homepage. What gets put front and center - the single video, or the categorical list of content in your archive? Clearly the archive is the more valuable asset, but it does not rely on visual impact to get its point across, and should therefore be less prominent than the sample video.
  • If people are accustomed to finding content in a certain area - think hard about placing it elsewhere. Just making something bigger and more prominent will not necessarily make elements easier to find - if people are accustomed to finding them in a certain area. Search boxes are customarily in the upper right hand corner of a corporate homepage. Making it bigger and putting it in the center of the page will actually make it harder to find. More examples - site navigation on the left, “Contact Us” at the bottom, promotional callouts on the right. This isn’t to say you can’t change things up a little, but be sure to put some serious thought into it.
  • Content that gets updated frequently should NOT get put front and center (remember, we’re talking homepages, not blogs, here). Counterintuitive, but true. Someone interested in viewing frequently updated content is likely a return visitor. A return visitor will know where to look. The main stage should be reserved for making an impact on first time visitors. Also, a section of news, press releases, blog articles, etc. will by its very nature NOT give a complete picture of what your site has to offer, and could confuse first time visitors.That said, it’s important for a first time visitor to know that you do, in fact, have frequently updated content on your site. For that reason, the optimal placement of such content is slightly “above the fold” - somewhere that a user will notice, but that will not distract from the main message of your site.

One important reason to avoid the “importance equals pixels” approach to homepage design is that it can easily lead you into unattractive layouts. Your company may legitimately be targeting three different audiences of equal importance. The “importance equals pixels” approach will tell you to create content in three equal sized columns. But this sort of layout lacks visual appeal - variation in size is an important tool for differentiating different types of content (in any media - compare this old newspaper layout to this modern one). If you are in this situation, look to design tools other than size that can differentiate the content, yet provide similar levels of visual appeal. This could be done via bolder colors, different fonts, graphical elements, or judiciously used animation.

Remember, size isn’t everything.

Database Errors with Wordpress on OS X Tiger?

Trying to get Wordpress up and running on OS X Tiger and getting the dreaded “Database Connection Error” no matter how many times you double-check your wp-config.php settings?

Well, after hours of pulling my hair out trying to get Wordpress up and running on my iMac, I found this post which finally fixed things… Look for the comment from from “johnsel”. It turns out MySQL and PHP on Tiger don’t play well together by default - Wordpress is an innocent victim in the matter…

Getting Real - Free

37signals, advocates of simplified software and software development have released their how-to book, Getting Real, for free, in HTML format.

Two things I just learned about XHTML

  1. It wreaks havoc on tables containing tiny images
  2. You can’t (legally) use input tags immediately inside form tags - Interestingly, most XHTML tutorials don’t even acknowledge this.

Gucci.com - Flash without Flash

Luxury brands are usually the last folks to care about web standards - a great many are 100% Flash-based, but the new Gucci.com, recently relaunched by Wolzelle, proves that, these days, the “luxury brand” aesthetic and web standards are no longer mutually exclusive.

Gucci.com certainly feels like a typical luxury brand web site, with big sliding panes of fancy photography, multi-layered graphics fading in and out, and ultra-minimalist layout. But the amazing thing is that it was done with no Flash - or other browser plugins - whatsoever. The magic was done entirely with Script.aculo.us, the web-standards based JavaScript UI library/system/API/what-have-you. And it looks gorgeous.

Kudos to Gucci for seeing the value in web standards, and kudos to Wolzelle for pulling this off.

Image-Free Rounded Corners in CSS

The more i run into them, the more I get obsessed with rounded corners in web design. I’ll let Rich Ziade of Basement.org explain why for me.

In my quest to find the best technique to implement these beasties, I found a fantastic trick which enables you to create rounded corners without using any graphics whatsoever. Dubbed “Nifty Corners” by their creator, this technique is great not only because it saves bandwidth and helps with semantic clarity, it enables you to experiment with different colors without having to create a new graphic every time.

The magic lies in creating a stack of one-pixel high “divs” of varying width above and below a given div. But, to avoid a pile of non-semantic markup, these are added dynamically via JavaScript. Brilliant!

Not content with his original Nifty Corners article, creator Alessandro Fulciniti created an updated version with even more features, including anti-aliasing! (with no images! It’s crazy!)

Ruby on Rails Tutorial from Apple

Apple just released what looks to be a nice Ruby on Rails Tutorial. Personally, I got my start using O’Reilly’s excellent “Rolling” tutorials (part 1, and part 2) in conjunction with the absolutely essential Agile Web Development with Rails book, but this looks to be just as good, especially if you’re a Mac user.

Maybe Steve Jobs’ big announcement today will be a killer Rails IDE? Maybe not, but a guy can dream… Meanwhile, I highly recommend Eclipse + RDT for all your Rails-riding needs.

Jakob Nielsen, Anchor Links, and why Design is Important

Jakob Nielsen’s latest rant is against anchor links. Anchor links existed before image tags. In fact, they were in the HTML spec before HTML specs had version numbers (notably this 1992 W3C HTML specification).

Jakob’s argument: Users are used to going to a different page when they click something. For a click to have any other effect would hopelessly confuse the user.

This is pretty sad. Check your calendar, Jakob. The year is 2006. This argument may have held back in the days of brochureware web sites, but we’re already in the postmodern phase of the web — web sites are no longer just a collection of static pages. Web “applications” are the order of the day. Let’s list my “mental model” of what clicking a link might do, based on the context of said link. By context, I mean clever design used to bestow affordances upon the link (something Nielsen obviously knows very little about).

Clicking a link may:

  1. Bring me to another page
  2. Bring me to another part of the current page (oh no!)
  3. Initiate a download
  4. Open a dialog box (DHTML or otherwise)
  5. Expand a section of the page
  6. Modify a page’s stylesheet
  7. Re-center a map (Google Maps)
  8. Subscribe to an RSS feed
  9. Play a video

I’m sure I could think of more. The point is that if you care to help the web evolve so that every site doesn’t look and work like, well, Jakob Nielsen’s web site, you must use design to create intuitive usability. Flickr introduced many new user interface concepts to people (such as simply clicking on a title to change it) — without hopelessly confusing and alienating users. How did they do it? Design. Design and usability go hand-in-hand. Without design there is no innovation. Without innovation, there is useit.com ;)

Web Development Quickie - Dynamically JavaScript Includes

Phpied.com has a great article on using JavaScript to dynamically include other JavaScript files. It goes way beyond the basics, including tricks for ensuring that a file is not included multiple times.

Web 2.0 Design

As further evidence that Web 2.0 is not just about hip programming languages or questionable business models, here’s a great summary of the Web 2.0 design aesthetic. I’d love a variant of this article that delves deeper into why things like rounded corners are so appealing (Apparently, they enable people to instantly differentiate what’s “inside” from what’s “outside”) Of course, all these trends will be considered horribly tacky in 2 years, when Web 3.0 (or Web 2.1) rolls around.

A List Apart Finds the Holy Grail (of CSS Layout)

With a URL like:

http://www.alistapart.com/articles/holygrail

you know it should be interesting.  In this article on the most revered of “Web-Standards-Based-Design” websites, Matthew Levine reveals the secrets for a clean, semantic, CSS-only way to create the page layout framework used by 90% of decent web sites.

If you don’t want to read the article, you can skip right to the example.  Just do a “Save As…” and a huge amount of headaches can be avoided on your next project.

The only thing that bugs me about this code is that the side columns do screwy things when the browser window gets really small.  This may seem minor, but I’ve always felt that although user interfaces shouldn’t always behave like real-world objects, when you’re using something that appears to implode and collapse in on itself under certain circumstances, you naturally tend to feel like what you’re using may be fragile and unreliable.  Early versions of Groove were notorious for this kind of collapsing layout - even buttons would shrink down so that the text on them “fell off”.
Anyway, I’m pretty sure that a fix would only involve one or two non-semantic “container” tags (which Levine wen’t out of his way to avoid - I have much less of a moral issue with the occasional container tag).  I’ll let you know if I come up with something.

One-Element Graphical CSS Borders

Back in the day, if you wanted to put decorative borders around a chunk of text you did it using tables. Then, CSS came along and people devised clever ways to apply graphical borders to DIV tags without tables. However, I have never seen a technique that didn’t involve extraneous non-semantic tags (”inner”, “outer”, or what not). Well, until now that is. Here’s a neat trick, straight from W3C, for adding graphical borders (using five separate graphics) to a single CSS element. Cool!