Dot Mac

I want to share some strategies for maximizing the productivity and effectiveness of  web design projects.  I’ve used them when the project has a large scope but minimal budget for a professional design team, such as non-profit organizations.

1: Visualize your users with analytics, personas, and user stories

The most important consideration in web design is to meet the needs of your users. There are two aspects to this:

First, collect statistical data on the demographics and usage patterns of existing users. Use web analytics, (GA), in-page analytics (GA events, crazyegg) to understand exactly how users use the site, what content is popular, and how that relates to revenue goals.  There is no need to rely on hunches and guesses when the relevant information is easily available.

Second: visualize the kind of customers you have and want to have with personas and user stories. Understand their goals and visualize the best way to meet them.

2: Steal ideas from the best

Web design consists mostly of weaving together design patterns from other projects. Coming up with entirely new design paradigms is very rare, difficult and risky. With that in mind, how can we choose the best design patters for a projects? By systematically borrowing from other successful designs.

One of the nice things about web development is that it is much easier to copy successful designs than in other fields. So why not pick the very best websites on the web? There are many websites which have spent millions on market research and high-end design firms. I systematically research successful designs and borrow the best elements from each. Many people make the mistake of only looking at their competition for inspiration.  But looking just like the competition won’t inspire users and limits you to a very narrow sample.

Here are three ways to find sources for inspiration:

• Look for winners of web design awards
• Frequent web design blogs & magazines
• The easiest way: go straight for the websites with the biggest design budgets.

For #3, I sometimes use Wikipedia as a resource to find proxies for design budgets and just go down the list. For example, I use the list of the wealthiest charitable foundations or the largest market caps.  I go straight down the list and note the designs I like.
For example, #5 – the Ford Foundation has a very effective design.  The useful information we can gather goes far beyond visual elements.  By researching their site, press releases and job ads, I was quickly able to identify their technology platform, content management system, the person in charge of their information technology (technical people at non-profits are often willing to share expertise) and some of the contractors they hired to work on it.  The cross-section of people visiting the Ford Foundation and your site is likely to be very small, so you can borrow more liberally than you could from a competitor.

3: Develop a design language

A “design language” is a set of visual concepts which we can use as building blocks for a web design. A design language helps us share ideas visually and then create consistent look and feel for the site, even if multiple people or multiple iterations are involved. A coherent design pattern is very important for a site. I suggest something like a Google Docs document with screenshots of elements from other sites and mockups. Eventually we can weed it down to unique elements representing key building blocks: header, menu, tabular data, form, product list, etc.

A design language is also important for controlling costs, as it is cheaper to pay a designer to create a reusable set of elements than to pay them to create each page from scratch.

4: Aim for the web technologies of the future

The lifetime of the average web design is about three years, though many last much longer. Three years is a long time in web design – paradigms come and go very quickly, as does the need to respond to competitors. That’s why it’s important to find the right balance between targeting emerging technologies while controlling risk. For example, most people don’t have smartphones with full web browsers, but they are likely to in a year or two. It thus makes more sense to invest in full-featured mobile sites and not the last-generation WAP version. At the same time, we don’t know if the Apple, Android, or Windows Phone platform will be most popular in the future, so it’s best to build mobile web versions than native apps in today’s hottest platform.

Over the last few weeks, I’ve experimented with image optimization tools. Using these tools, I have rapidly eliminated hundreds of megabytes of image data from thousands of images without any quality loss. Over time, this should translate to many terabytes of bandwidth savings.

Because these tools can be run in batch mode on thousands of images at a time, they are useful for optimizing large, existing image libraries.   They are lossless and designed for bulk mode, which means you can safely run them without any loss in image quality. But be careful: test on small samples first and learn their specialties and quirks.

While these tools are designed for Windows, they are actually front-ends for command line programs which have OS X binaries available. An alternative to running them locally is to use Yahoo! Smush.it, which is an online service that  ”uses optimization techniques specific to image format to [losslessly] remove unnecessary bytes from image files” using the same tools. The best way to run Smush.it is via the Yahoo! YSlow for Firebug, an add-on for the Firebug add-on for Firefox. (By the way, Smush.it renames GIF images to .gif.png when it shrinks them. I wrote a console app to rename them back to .gif.   Browsers only look at the image header to identify images, so it’s safe to serve up PNG images with a .gif extension.)

RIOT (Radical Image Optimization Tool):

Though it has a batch mode, this is the best tool for optimizing single images, whether they are JPG, PNG, or GIF. I use RIOT to save every image I work on as well as to reduce the size of existing images that are too large. You can re-compress PNG and GIF images losslessly, but for JPG you want to save from the original file.

RIOT is available as a standalone version as well as a plugin for several image editors such as the excellent IrfanView.

RIOT - Radical Image Optimization Tool screenshot

The JPEG Reducer:

Run this tool in bulk on all your JPEG images to save ~10% of the file size. This is a GUI front end for jpegtran, which optimizes JPEG images by doing removing metadata and other non-display data from JPEG images. Because it is lossless, it is safe to run on all your image. It will ignore any files you add which are not really JPEG images.

The JPEG reducer

PNG Gauntlet:

This tool is a front end for PNGOUT which will losslessly reduce the size of PNG images. Warning: if you add GIF or JPEG images to it, it will create PNG versions of those images. Sometimes you want to do this, but if not, don’t add images to the queue.

PNG gauntlet screenshot

Let me know if you have other tools or ideas for image optimization.

To open an app in terminal, type open -a AppName or open /Applications/AppName.app if you want to specify the path. I use it for starting VNC server via SSH.

Bonus:  echo “set completion-ignore-case On” > ~/.inputrc will make auto-completion case-insensitive.

When I migrated my Picasa photo collection from Windows to Mac, I didn’t realize that the folder created when you save your changes changed from Originals to .picasaoriginals. To rename all the folders created with the Windows version, run this in terminal:

find . -name Originals -type d -execdir mv ‘{}’ \.picasaoriginals \;

Until today, I was very confused by the fact that iTunes sorted some of my artists by last name and some by first name.  Then I figured out why – when editing the mp3/aac meta tags, you can specify custom sort fields.  To change the sort field, select one or more songs, right-click and Get Info.  Then select a sort artist or other sort fields in the Sorting tab.

MacRumors has pretty much everything you need to know.  You can also take screenshots remotely, over SSH.  (Just remember that with great power, comes great responsibility.) The only thing the built in functionality can’t do is take full screenshots of windows that scroll beyond the screen.  There’s tons of commercial apps to do that, but Papparazzi! will do the job for free.

Do you want to open a particular file with another program in OS X?  If you want to open it just once, you can right/control-click and select “Open With.”  (Since I have VMware Fusion installed, I can open files in Windows directly from the Finder!)

To open a single file with a particular program every time, right/control-click, and Get Info.  Then you can select to program to use under “Open with.”

This change only applies to current document.  To change the default program for all documents, click “Change All…” and confirm.

One of the nice touches of OS X is the use of the Helvetica typeface for rich-text editing in TextEdit and other programs. Microsoft’s version of Helvetica is Arial, which is basically a lower-quality rip-off of the original. (To understand my attraction to Helvetica, I recommend watching Helvetica, the documentary.)

However, in Vista/Office 2007, Microsoft released the ClearType Font Collection, a great new set of fonts, including several designed especially for viewing text on computer screens. The two I find particularly useful in this regard are Cambria, which is optimized for viewing small text, and Consolas, which is a monospaced font useful in programming and the like.

So how do you get these fonts in your Mac? Well, they come with Office 2008 for the Mac. After you install office, just go into your favorite editor’s preferences and select Cambria and/or Consolas as your default font.

If you don’t have Office 2008, things are a little trickier. This tutorial will guide you through installing the fonts in Windows and Linux – and OS X, if you install the required Linux utilities via something like MacPorts. Office 2004 users can get some of the fonts with the Open XML Converter. If you have a Vista computer, you can copy them from C:\WINDOWS\Fonts to /Library/Fonts. If you have a pre-Vista OS, you can get them with the free Powerpoint 2007 viewer. If you are still out of luck, you can always purchase them directly from the foundry.

The latest update for the Google Mobile iPhone app has a very cool feature:  voice search.  You just open Google Mobile, lift the phone to your head and say what you want to find.  That’s it.  When I said “What is the latest book by Neal Stephenson?” I got:

Your iPhone knows where you are, so you can ask about places and events nearby, and Google Mobile will hook you up.

P.S.: To take screenshots on the iPhone, press the sleep/wake + home button.  The screen will flash to let you know it worked.

If you want to access a Windows computer remotely, you can use the built-in Remote Desktop functionality – if you’re lucky enough to be running a professional edition of Windows XP or Vista.

OS X also comes with remote desktop support in the form of a built in VNC server, which is calls “screen sharing”. You can enable screen sharing in the Sharing preference pane. Unfortunately, the built in VNC server and viewer in OS X are very limited, especially if you’re used to the Remote Desktop functionality of Windows.

If you have a few hundred dollars to spare, you can purchase Remote Desktop for OS X. Otherwise, you can enhance the built in viewer and run your own VNC server for free. If you are connecting to OS X from Windows, there are many VNC viewers to choose from, such as Tight VNC, Ultra VNC, and Real VNC. The servers for Ultra and Real VNC are commercial, but the viewers are free.   My favorite is the Real VNC viewer from their Enterprise edition.  (You can download the viewer separately.)

My favorite option lacking from the build-in functionality is “Adapt to Network Speed”, which automatically adjusts the image quality to the speed of your network.

P.S.: If you want to access Windows from your Mac, get Microsoft’s Remote Desktop for OS X.  Another free option for both Mac and PC is LogMeIn.com