Multimedia advice

Conforming multimedia packages to user standards

We have all heard the saying, “Design sites for your user’s computer, not your own.” If you are fortunate enough to have the freedom to build projects free of prior size and display constraints, you then have to decide how to conform your design appropriately. I was lucky to get this opportunity at The Roanoke Times, where all of my interactives lived separate from Roanoke.com. So, let’s look at how I handled it, what I could have done better, and what the experts say.

My first large package, Hellgate, was sized to 757×650 and centered on the page.

My Virginia Tech anniversary package was sized to 900×700 and centered.

My art museum interactive was sized to 1000×670 and centered.

As you can see, I only remained consistent in terms of centering my packages. This wasn’t by accident though – after learning more about my audience and looking at the analytics, I realized that it was relatively safe to design beyond the 800×600 safety frame.

However, I fear that some viewers got the horizontal scroll bar on my art museum package, which is never a good sign. I don’t remember Roanoke.com’s audience stats anymore, but let’s take a look at II’s audience:

Within the last month, here is the break-down:

Screen Resolutions:
1440×900 — 20.56%
1280×800 — 16.48%
1680×1050 — 15.23%
1024×768 — 13.40%
1280×1024 — 11.24%
1920×1200 — 10.77%

Browsers:
Firefox — 59.03%
Safari —- 18.40%
IE ——- 17.36%
Chrome — 3.38%

Operating Systems:
Windows — 51.93%
Macintosh — 45.68%
iPhone —– .95%

So, from this data I can tell that if I were to replace my WordPress site with a Flash package sized at 1024×768, I would know that 85% of my audience would see it perfectly without having to scroll. Also, looking at the different versions of browsers that you all are using, I know that my WordPress theme is compatible with everyone’s preferences. For an HTML site, browser type is especially important as certain blocks of code do not work in previous versions.

Monitor size, resolution, alignment and layout should all be considered when designing your site. Sometimes it is impossible to design for the ancient giants like Netscape 4 or IE 4, but it is important to design sites to fulfill the majority of needs. You can get this information by tracking your visitors with google analytics or another usage tracker.

For instance, at TheCounter.com, stats from March show that 75% of worldwide traffic is utilizing IE 6 or 7. However, it is scary to see that more than 170,000 people are still using IE 5, a browser that just turned 10 years old.

In addition, the stats also show that 75% of worldwide traffic either uses a resolution size of 1024×768 or 1280×1024. So maybe it is time to stop using 800×600 as the standard size since only 7% are stuck on that itty-bitty screen …

While reading Web Design in a Nutshell, I also learned more about the debate between fixed versus liquid web pages (ie. fixed at a particular size vs able to resize and adapt to various windows). I prefer the latter, also called fluid, simply because I enjoy having the choice of how I want to view it. A great example of a fluid site is New York Times’ producer Tom Jackson’s masterpiece, White City Stories.

There is also a debate about pop-up browsers and automatically sizing content. I think the author said it best:

“Another, more drastic, approach is to run a Javascript that resizes the user’s current browser window to accommodate your design. In my opinion, this is just bad manners — like visiting a stranger’s house and rearranging their furniture without asking.”

The Edge, South Florida Sun-Sentinel’s multimedia gallery, is guilty as charged in resizing browsers to display multimedia content and it drives me crazy.

So I’m curious … what standards do you go by in designing sites and multimedia interactives? Do you have a personal preference in the ongoing debate between fixed vs. fluid, centered vs flush left, pop-ups vs. resizing code?

Other posts that might interest you:

• Minimizing complexity in user interfaces
• Multimedia Tip: Editing and converting audio files
• When it comes to multimedia, design is everything

© 28 April 2009 Innovative Interactivity (II).