CSS: Don’t put Helvetica ahead of Arial

Posted in Technical Musings by Gabe at 11:51 am on April 16, 2008.

Helvetica is sexy, but PC browsers just don’t render it well. Yet I’m seeing it more and more, especially on design-focused sites. Part of the cause of this problem is that most people who have Helvetica installed on their system are designers, and most designers use macs.

This is what Helvetica looks like on Firefox in WindowsXP with ClearType turned off (default setting):

Helvetica as body text on a Firefox/Windows XP
Helvetica as body text on a Firefox/Windows XP

It’s pretty hard to read.

Browsers read the font-family style declaration from left to right, if a font is not installed, it tries the next one in the list until it finds one that is available. This is why you should always put a generic font type (serif, sans-serif) at the end of this declaration. Since Macs render Arial great, and PCs don’t render Helvetica well, it makes sense to put Arial first in your declaration. The difference between the two fonts, especially at body text size, is negligible.

Always test your design across as many browsers and operating systems as possible.

The Medium and the Message

Posted in Design Philosophy by Gabe at 11:33 pm on January 24, 2008.

One of the great debates in interactive design is “HTML vs. Flash.” Purists hate Flash because of it’s lack of usability and universality. Flashers think HTML is too rigid and creatively limiting. This article discusses both sides of the debate and the dangers of thinking in absolutes.

The truth here, like in most polarized issues, is that both have their strengths and weaknesses. It is part of job as designers to know our tools, and to find the best tool for the job.

HTML

Hypertext Markup Language is the general language of the internet as read by all web browsers. No plug-ins are needed, so it is truly the universal language of the worldwide web. While generated by any number of server-side technologies, nearly every page you visit online (even Flash sites) will be one form or another of HTML.

HTML consists generally of text and images. As such it is great for displaying content that is heavy on text and images: Google, Wikipedia, blogs, etc. HTML also degrades nicely. If you are browsing on a text-only browser or using a screen reader, the text will still be there, even if the images aren’t.

Flash

Flash is a proprietary language. It can be thought of as an add-on to HTML. What makes it special is that it is one of the few add-ons capable of presenting the most of the same kinds of content as HTML. As such, it is the one and only proprietary language (for now*) that can be used as a substitute for hypertext.

Flash is highly malleable, and with some ingenuity, can be configured into just about anything at all. A tool this flexible is very powerful, and as such, it is often misused. Excessive visual and aural stimulation - or Flashturbation, as it is sometimes called - will always be tempting as connection speeds increase to push the limits of technology. These are the growing pains of a quickly advancing technology, and while good for Design in the long term, makes for some bad designs. Three minute video intros with blaring music are quickly becoming a thing of the past, and as designers and developers continue to innovate with the technology, it is becoming a powerful tool for the conveyance of information.

The major downsides of flash include lack of readability by search engines and lack of browser integration (back button, bookmarking). These are important points, and while there are workarounds**, it’s important to consider these limitations when choosing a platform for design and development.

Some upsides that are often overlooked are consistency and user engagement. Consistency means a flash site will look the same on any browser that supports flash content. User engagement means drawing a user in with the structure and behavior of the site in addition to the content. Animation can serve a usability function, subconsciously mapping relationships between content in users’ minds, but it can also simply make users happy and interested in clicking around.

Which is Better?

When deciding what kind of structure to build a site around, we should consider a few questions:

What is the weight of the engaging power flash as compared to the usability downfalls? Who is the audience, and what do they expect?

Design, at it’s core, is about the organization of information. It’s an art form, but also a science. The final question we must ask ourselves is always this: What it the best way to get the message across?

*Microsoft’s Silverlight is in its final stages, and hopes to crack the market that Flash now dominates for this kind of presentation.

** SWF Address is great for building some better browser functionality. SWF Object is the standard for alternate content and replacement.

Hot Links: 12/19/07

Posted in Hot Links by Gabe at 1:44 pm on December 19, 2007.

Mr. Doob
This guy does amazing things with actionscript. Nice taste in typefaces too!

PSD Tuts
Some very useful Photoshop tutorials for web designers.

Review: Adobe.com/Flashon

Posted in Reviews by Gabe at 3:29 pm on December 14, 2007.
Adobe Flashon

Adobe and Big Spaceship have launched a new mini-site for the release of Flash Player 9 and Adobe Media Player. The GUI is gimmicky but fun and while usability is not perfect, the site engages users and sells Adobe products well as the technology backbone for the future of online entertainment.

The design of the site itself is nothing special. Tiling, sorting and shuffling thumbnails to organize and view videos has been done before. What is most impressive about this site is the quality of the HD content that the site is promoting. Most of the videos can be viewed in incredible HD resolution, quickly and smoothly, over the web. This is exciting stuff, and it’s easy to see the future of online video as you browse this site.

Hot Links: 12/11/07

Posted in Hot Links by Gabe at 4:48 pm on December 11, 2007.

Design Charts
Weekly top 40 of web design. Focused on Flash design and development.

Tag Society
Cool tag-based web design gallery. There is some good work here.

Massively Collaborative Creativity

Posted in Design Philosophy by Gabe at 8:57 pm on December 8, 2007.

Now more than ever, Inspiration is all around us. The brains of the world are ours for the picking.

The advent of instant worldwide reach for creative expression as ushered in by sites like YouTube and Blogger has created a kind of creative farm on the internet. Any idea appearing online can instantly become a seed for creative expression for millions of people. While any idea in the universe has the potential to grow into anything over time, the soil of the internet is so fertile that whole forests of human creation spring up overnight.

The virtual collective consciousness is providing such a bounty of creative output that inspiration for design is nearly limitless. With so many people creating content that can be seen by millions, designers (Especially interactive designers) are surrounded by inspiration in our daily work.

Nearly all of the art that is borne of online collaboration is purely experimentation and exercise, and as a result it is usually very raw. This is an effect of the general disarray that is inherent in a system as rapidly evolving as the world wide web. Part of our jobs as designers is to hone and focus raw creativity into something useful and meaningful.

This collective creativity raises new issues of ownership and copyright. When a TV ad featuring LOLcats runs nationally will someone try to sue? Where is the line between “inspired by” and “stolen-from”? Is the line more blurry in the virtual world than in the physical world?