AlanHogan.com

Import the iPhone User Agent into the Firefox plugin User Agent Switcher (download)

Wed, 20 May 2009 15:11:58 -0400

iPhone Mobile Safari User Agent Faking

You can import this XML file into your User Agent Switcher plugin for Firefox so you can view and test the mobile or iPhone version of a site. The user agent string is the one described in this tip. (After installing User Agent Switcher, restart Firefox and go to Tools • User Agent Switcher • Options and click “Import.”)

Also of note is that the iPhone Simulator (part of the iPhone SDK from Apple) does include Mobile Safari and can actually navigate to your local development site (e.g. localhost:3000 or any other server running on your computer), not to mention the Web at large.

If this becomes painfully out of date, let me know by my contact form or twitter.

Student film festival tips

Wed, 29 Apr 2009 10:23:15 -0400

Alan’s Tips for Student Films

I’m not a film student. But I’m the guy who mutters about how annoying your mistakes are while attending the student film festival — and I’m the guy who can’t stop talking about how great your film was when you get it all right.

These are some tips to keep me happy.

I swear a bit in here, but you film students are used to that. Mom, skip to my next blog entry.

Spend more time writing your script than creating a logo for yourself.
- Read your script out loud.
- Don’t be afraid to rewrite your whole script. No cut-copy-paste superficial editing: rewrite the whole damn thing. After your first draft, you will have a better idea of what you are trying to say, and your next draft will let you really focus on saying that.
- You had better have a great point or make me laugh. Nothing is worse than a film with no point. I don’t give a shit if you used a camera angle you never used before.
- I’m serious about revising. Otherwise, you might end up like the poor sap who was laughed at by the whole theater for simultaneously attempting to reveal crucial plot information at the beginning of the film and pretending that no one knew that information and “suspensefully” building up to its disclosure at the climax.¹ It’s idiotic, but even an idiot would avoid this mistake once he/she decided he/she wanted to go for suspense and rewrote the script to eliminate the giveaways.
Seriously, about your logo. Don’t over-do it.

You can create a cutesy “X Productions” name and logo² for yourself if you really want, but if your film focuses on it for more than 2 seconds, I start choking on your delusions of grandeur. At 5 seconds, I throw up and can’t finish my oversalted bag of popcorn (no butter, if you’re buying to thank me for my brilliant and frank advice).
Ask friends for feedback on for script. Have them focus on plausibility and dialog (or humor, if that’s what you’re going for).
Lighting matters.

Don’t half-ass it. Keep your color balance consistent. And if your dialogue indicates it’s 3 A.M., don’t let me see light shining through the goddamn window.

Oh, and back-lighting is nearly always bad. When done well, it can really make your film shine; typically, though, it just makes it hard for us to see your actors. Which leads us to our next tip:
Do not use effects because they’re cool.

In web design, we have a maxim that no design element should be used without a purpose. I imagine the same rule works for effects of all kinds in films. What does it do? Nothing? Take it out!
Spend a lot of time editing.

Boring parts suck. Wow, you zoomed out from the detailed close-up to a wider action scene? Great, but if you take 30 seconds to freaking zoom out, I’ll pass out from a lethal case of boredom. Stop wanking while thinking about how classy your zoom-out is and cut to the chase already. If the audience is all aware of your camera work, you’re doing it wrong; they are missing your message.

Long speeches suck. You should have edited your drafts enough to prevent that, but for a documentary that isn’t exactly how things work — so play the money quote and skip the rambling.
Get feedback on your edited film, then edit it some more.

Your friends have eyes that haven’t already seen this on-set, in rough cuts, or the script. Use those eyes. Ask them what parts didn’t make sense. DO NOT dismiss their concerns, as your ego will ask you to. Figure out why your friends were confused. Was dialog ambiguous? Did it contradict something visually? Fix it.
Soundtracks are hard.

I am impressed by how well-done many of your soundtracks are.

Tips: Use music that suits your film, not just your taste.
Don’t use a song if the lyrics don’t fit.
Don’t layer a song with lyrics over dialog.
The only default font you can use for your title and credits is Helvetica. If you haven’t studied typography, you probably shouldn’t pick anything besides the following ridicule-safe fonts:
- Helvetica (Arial works as a substitute. See Helvetica the movie if you have any doubts)
- Gotham (Though you should be aware this is now associated with Obama, at least when used in all caps)
- Gill Sans (for credits/scenes; great readability, but ugly for titles)
- Futura / Century Gothic / Neutra (for a modern feel; titles only, not credits)
- Large, beautiful, classical (not edgy) serifs
If all else fails, just remember to never use any of the following:
- Copperplate
- Times New Roman
- Comic Sans (seriously.)
- Courier or any other unforgivably ugly monospace or typewriter font
- Bank Gothic (tempting since the pros use it, but it’s the most over-used film font since Trajan, and it’s wide as all hell anyway).
Also avoid “pure” (fully saturated) red, yellow, green, and blue (#ff0000, #ffff00, #00ff00, and #0000ff, respectively) for text. You’ll look like an amateur. Less-saturated colors, black, or white will do fine. We’re here for the movie, not to ooh and ahh over the fact you figured out how to change the font color for no bloody reason.

An uncommon font that directly relates to your subject is usually excusable, but let me stress that while it is a boring, vanilla choice, you can never go wrong with Helvetica.

Seriously, I cannot vote for you at the film festival if you use Comic Sans, and I will laugh out loud if your title is set in Curlz.
Do not over-compress your movie or edit at a low resolution.
Your film should not look like someone is playing a YouTube clip on the big screen.
Hope (or double-check well ahead of time) that the projectionist will show your film with the proper aspect ratio. Nothing is worse than all your hard work being ruined by the fattened look of your 4:3 actors being shown in 19:6. Yes, this happens, and it makes jerks like me want to walk out.

If I forgot something, let me know.

Good luck.

Oh, and his/her dialogue was tacky, canned, and unoriginal, and the plot was altogether weak, and the apparent message was exaggerated, and it wasn’t funny. All of those things
would benefit from revision, but the attempt at suspense was the kicker. ↩
Where X is your initials, a pun, or an in-joke, no doubt. ↩

The "yearbook method" of graphic design

Wed, 29 Apr 2009 10:21:54 -0400

The “Yearbook Method” of Graphic Design

One of the most meaningless, transient, amateur patterns in “graphic design” is the trend of adding extraneous punctuation all over the place. The sad part is that this design sin ignores the meaning and history of the symbols it abuses.

I once called this the “yearbook method” on Twitter because this “technique” was the hallmark of the yearbook team at my high school. Each successive edition would shift focus from [hard brackets] to \ to Â»double chevrons (actually Â«angle quotes,Â» not like we ever learned about those in public school). There was no reason behind this except for the whim of an untrained, unstudied student designer.

My good friend Kyle King finds this observation accurate (and embarrassing):

That’s a fair critique, at least of our [yearbook]. I never want to have to say, “Well, you know, semi-colons were big that year” as an answer to a child’s question, that’s for sure.

The reason I hate the yearbook method of graphic design is that is an abuse of symbols. Each glyph we abused has a meaning, and we completely ignored its meaning to use it for decoration. Heck, we didn’t even learn the proper names of these characters.

What really makes me said is that this trend isn’t limited to yearbook design or even high-school efforts, but can be found in corporate America.

Hereâs a lovely example: The current CVS logo.

Can you imagine what went through the designer’s head?

“Alright, now sometimes we are a CVS, and sometimes we are a pharmacy. Like, CVS or pharmacy, right, slash! Slash-or! CVS-slash-pharmacy. Dig it?”

I would bet that wasn’t the thought process. One would hope that if the designer had actually stopped to think about the real meaning of a slash character, he/she would have avoided its abuse. Unfortunately, the thought process was probably just as Kyle described it:

“Well, slashes are ‘in’ this year… And they kind of remind us of the Internet, and look how big that has gotten! So how about… CVS-slash-pharmacy!”

Similarly, I have long hated LA|Fitness’ logo for the ugly and unnecessary pipe in the middle. (And for what reason did they decide to extend the pipe downwards but not upwards?)

The yearbook method of graphic design, ladies and gentlemen.

Images used with permission. Hover or click for details.

Bookmarklets: a la Instapaper & limit page width

Wed, 29 Apr 2009 10:21:54 -0400

Bookmarklets

I wrote this first bookmarklet (or favelet) to make reading online as pleasurable as reading articles in Instapaper, the iPhone app that lets you read long web pages later. The second is a weaker byproduct of that effort. Drag either to you bookmark bar.

à la Instapaper

Modeled after the divine reading experience that is Instapaper for iPhone, this sets your page for maximum readability. Narrow columns help you read faster because your eyes never need to check where the next line starts.

Disables all style sheets, sets text to black on white Georgia in the default font size, forces a narrow column for readability, and specifies a comfortable line-height of 1.4em. It does not force <pre> or <code> elements to be in Georgia.

(Updated 2009-05-04 to work better with <iframe>–using pages.)

narrow page

Just tries to force the page to be narrow. Doesn’t work nearly as well as the “à la Instapaper” bookmarklet.

A Plan to Increase Opera's Marketshare

Tue, 31 Mar 2009 05:02:05 -0400

Making Opera #1

I frequently declare Opera my favorite browser, but it is hardly the most popular.¹ Here is what I would have the company do to gain browser market share.

Why isn’t Opera any more popular than it is?

Regular users don’t know about it or have no reason to switch from MSIE (or Safari).
Power users bemoan the lack of Firefox-style extensions.²
Incompatibility with some websites, including some Gmail functionality.³

The Game Plan

Like any reasonable plan, this one addresses the root issues.

Make the nerds love it.
- Create an extension system that is compatible with the Firefox system. Yeah. Compatible. It’ll be hard but we geeks will ooh and ahh over how sweet that is.
- Release the really, really cool features that Opera has already developed but not released yet. This includes border-radius (finally), rgba, and CSS animations (which currently only WebKit supports; when used right — and it’s easy — CSS animations can really add a nice touch).⁴
- Bring Gears, which amazingly Opera has implemented already in their mobile browser, to the desktop for fun, nerdy, and useful things like Gmail Offline and geolocation.⁵
- Have features no one else has. (Done! No one else has such sublime mouse gestures or perfect speed dial knock-off, for example, or the “trash can” for restoring closed tabs and windows.)
- Either fix their feed reader so it isn’t terrible or just kill it.
- Have top-notch standards support. They were probably #1 until WebKit came out of nowhere and owned everyone.
Axe those compatibility issues.
- Maybe the problem is Google breaking the standards. Maybe it’s a fault-tolerance difference instigated by a missing semicolon somewhere. I don’t know. It doesn’t matter whose fault it is as far as Opera’s marketshare is concerned; the user sees it as an Opera problem, and they need to take steps to quickly minimize such problems.⁶
- Compatibility is a feedback loop. The more sites that don’t work in Opera (and it’s not many, but Gmail is a biggie), the fewer people who will use it. The fewer people who use it, fewer developers will test in it and fewer sites will work in it.
- Display a little notice when seriously standards-ignorant pages are loaded. Put the blame where it belongs: On shoddy developers (I’m looking at you, ASP.NET toolbags, BlackBoard, and PeopleSoft. And Microsoft). But do not make this an annoying feature (keep it subtle) and let users disable this feature (forever) with no more than 2 clicks.⁷
Make the public aware Opera is here and it’s awesome.⁸
- Fight Microsoft’s shady business practices. Oh right! They are already doing this, and it is awesome.
- I’m not a marketer, so I won’t make specific plans here, but the general public should want Opera.
- That said, if you look at the success of Firefox, a lot of it was nerds who really loved it who then shared it with all their friends and family. So by winning the nerds’ hearts, Opera will be well on its way to a respectable market share.
- Copy any Internet Explorer and Firefox features that people actually find useful (perhaps MSIE 7’s fit-to-page printing is an example).

It’s worth a shot!

In fact, betas of Chrome and IE8 were reported to have more marketshare than the latest version of Opera at the time (just under 1%). ↩
Note that this is sometimes pointless because many of the most popular and useful extensions replicate built-in Opera features. Adblock / “Block content”, Greasemonkey / user scripts, Add Bookmark Here, Speed Dial, mouse gestures: Opera had them first! ↩
Saving events to Google calendars has not worked in Opera for years now (as of March 30, 2009). Line spacing when composing e-mail is off. The new drop-downs for selecting labels is very slow in Opera and only Opera. ↩
CSS inventor, Opera CTO, and all-around impressive figure HÃ¥kon Wium Lie demoed these features in an unreleased build of Opera at SXSW 2009. Demo slides ↩
This is long promised but slow in coming. Note also that Opera already has plans to implement geolocation. ↩
Google has a very clear obligation to service the Opera users that they steadfastly ignore. Yahoo has a very clear policy of supporting Opera fully, but Google has none, claiming the effort is not worth it for the “small” number of Opera users. I have other thoughts:
- 1% marketshare is a lot when you consider the millions of users Google has.
- The effort to make pages compatible with Opera is exceedingly minimal, since their standards support is so good.
- Their logic ignores the feedback loop involved here.
- With Google’s online dominance and the fact Google now has their own browser, a case could be made that their behavior is now anticompetitive.
- Opera is the only real browser available on some systems, such as the Wii, the Nintendo DS (I think) and many mobile phones.
- You can bet they test in Chrome, but Chrome has barely more than Opera’s marketshare. (This is a weak point because Chrome is based on the common WebKit rendering engine.)
Talking to some Google employees at SXSW 2009, I learned some of them personally test their work in Opera but they echoed the company line that it is unsupported due to the supposed amount of work that it would take for the supposedly tiny set of users. ↩
Naturally the setting could also be reversed in preferences at will. ↩
Apparently Europe is well aware (comparatively), so I would hope they focus a lot of effort on the Americas — which I think they recently announced plans for, but I couldn’t scrounge up a link. ↩

Mac Apps Starter Pack

Tue, 31 Mar 2009 05:02:05 -0400

Must-have Mac Apps

New Mac Users, Start Here!

Helping Kelley get up and running with her new MacBook, I came up with the following list of apps (programs) which I think are useful for many, if not most, people.

Firefox, the famous open-source and extensible web browser.
Opera, another great browser (change the theme from the default!)
iWork, Apple’s cheap ($39 for students, $60-ish for others) but amazing alternative to Microsoft Office (mostly compatible with Office documents).
NeoOffice, a free Office alternative whose interface is just like Office 97 and Office XP (and very compatible with Office documents).¹
Vuze, a powerful BitTorrent client (or get the slimmer official client). (In fact, you can use BitTorrent to download NeoOffice from other users in a way that verifies the official download but does not put a load on the NeoOffice website.)
VLC, the media player that plays almost every kind of video.
Flip4Mac, a plugin that lets you play Windows Media files.

These applications are useful as well, but I would consider them optional:

TextWrangler, a free text and code editor, or if you are willing to pay for the best then get TextMate.
~~Twitterrific, a nice native Twitter client.~~ Tweetie is now by far the best Mac Twitter client (and the best Twitter client in general).
iScrobbler, a tiny program that tells Last.FM what you are listening to in iTunes (to catalog your taste in music, find friends with similar taste, and more.).
iStat Nano, a Dashboard widget which shows hardware and OS stats for the curious.

Some of those, like browsers and office suites, seem to have duplicate functionality, and indeed they do. I still recommend both apps in all cases because sometimes you find one tool is better for the particular job, or is more compatible with some website or document standard. (That said, sticking with NeoOffice only saves you some money.)

This is the Mac version of OpenOffice.org. ↩

Being a UX Team of One (Panel by Leah Buley on User Experince at SXSW 09)

Sun, 15 Mar 2009 11:55:59 -0400

Recap of “Being a UX Team of One”

by Leah Buley of Adaptive Path - a talk given on March 15, 2009 at SXSW 2009.

Intro

There is lots of stuff that goes into user experience (documentation, usability testing, prototyping, user research, competitive analysis, discovery) but she is just talking about design, because that is the least-fleshed out process with the fewest tools and most “magic.”

Her story

Leah Buley of Adapting Path does design and IA (Information Architechture); she loves “lo-fi methods, tools, and tricks”

She also worked at Barclays â and she did ALL the parts of UX (not just design, and also evangelism) by herself - she interacted with everyone else from biz dev to development

Forrester’s CX (UX) Model

Interested (Sounds cool, looking into it)
Invested (Resources involved but no real authority)
Committed (VP support)
Engaged (Everyone knows they are working on UX stuff as a whole)
Embedded (It’s in everything the organization does: examples - Virgin, ZipCar)

Leah says most folks are down at level 1, and many are at #2, and fewer at every point up. #2 is a common sticking point.

Her Story Again

Went to Adaptive Path to learn how to advance to higher levels of UX involvement (3, 4, 5)

Working with others, they came up with tons of ideas for each design problem.

Doing work differently on her own: Coming up with many ideas before moving on for any part of the process. Generative process: refine the best ideas.

Today’s Tips

Three big ideas

Brainstorm a lot
Assemble an ad hoc team

Even if you are the only UX person, you can still ask those you work with for info, feedback, & thoughts
Pick the best ideas

Evite is our example of a dream project; if Adaptive Path could work on anything, they might pick Evite.

Process (currently) starts with you picking a design (using categories) for your evite, customize it, and then invite people (using address book import, etc.)

How to redesign?

Brainstorm

Here, using the 6-up template.

Typically will start with 1 or 2 designs, will hit a wall. Your responsibility is to force yourself to have more ideas. That’s right, fill up all 6 boxes (at least).

Spectrums. Think about first timers AND experts, come up with different designs for them and in-between users! Don’t worry about these designs too much, you just generating ideas!

2x2s are like X-Y (Cartesian) plots, two spectrums. Consider novice vs. expert on one axis and automatic vs. manual (evite creation) on the other axis.

Grids: Example has “It’s about design; it’s about friends; it’s about tracking; it’s about fun” across the top and things we just discussed along the side

Word associations… she has a bunch of design-related words (icons, modules, accordion, search, faq…)

She picks two at random - icons and modules - and comes up with an interested drag-and-drop mockup

She also has an “inspiration library” of screenshots of websites she keeps in iPhoto. Maybe apply something you like to your current project.
Assemble an ad hoc team

Invite the project managers, developers in to come up with ideas.

You can use sketchboards (a very standard practice at adaptive path). Pretty much paste tons of those designs up, and all stand up and talk about this! (she shows a video of making one - starts with a huge brown sheet of paper, put up requirements, then paste designs)

Design workshops - lots of people come in and talk about it… have it be informal (buy pizza) for best ideas

Design a product box (esp. for those that don’t come in one) to force you to think about why someone would want it

Decorate your space with the stuff you’ve been working on. It 1. gets supporters involved early on and 2. lets people understand what the hell you actually do.

Tips for getting good feedback:
- Pass the pen (much more accurate then verbal descriptions)
- Black hat sessions - have everyone come up with everyone come up with as many objections as possible - deals with the “too

Drop the "WWW": How and why to use example.com, not www.example.com.

Fri, 13 Feb 2009 17:03:09 -0500

Drop the “WWW”

How and why to use example.com, not www.example.com.

Four trends. One solution. Two implementations. WWW is dead; long live WWW!

Trends:

Twitter, mobile, and other text forms of communication where space is at a premium mean shorter URLs facilitate sharing
The availability of one way to set the canonical URL of a page for search engines, making it possible to avoid ambiguity of which URL is the most correct for one page
At least 99.9% of sites donât require a “www.” prefix in their domain. I’ve only seen one exception, and it is my high school’s website (try it without “www.”), run by an incompetent and nostalgic web developer who still uses <font>, <frame>, and <marquee> tags.
The depreciation of the “www.” subdomain

Solution:

Accept requests for your site with a “www.” prefix but encourage the use of your domain without that prefix.

Implementation:

There are two main ways to implement this. Each has slight advantages over the other.

Redirect all requests from your http://www.example.com domain to http://www.example.com. This is the method preferred by No-WWW.org, which suggests the following .htaccess rule (for Apache servers):
```
RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
RewriteRule ^(.*)$ http://%1/$1 [R=301,L]
```
- Benefit: Using this method, no one will ever end up at or link to any page on your www.example.com domain. Ever!
- Drawback: Forcing a redirect may increase page load time ever so slightly, but only for anyone requesting a page from www.example.com. However, as noted above, there will never be any more new links to that domain (ever!), which minimizes the number of times this redirect will take place.
Ensure www.example.com and example.com both go to the same content (this is a default on most hosts), but designate example.com as preferred (or âcanonicalâ).
- To designate the canonical version of a page accessed at http://www.example.com/products, you simply need the following line of code in your <head>, as described here:
```
<link rel="canonical" href="http://example.com/products" />
```
  Generating this code is trivial in any scripting language (especially with a regular expression).
- Optionally, make sure any internal relative links on your page go to your example.com domain even when the page was accessed from www.example.com. To do this, use the <base> tag (more information on base):
```
<base href="http://example.com/" />
```
  Or simply include the domain in every link on the page, e.g. <a href="http://example.com/products">products</a>, not <a href="/products">products</a> or <a href="products">products</a>.
- Benefit: Possibly faster initial page load time for users accessing the “www.” variant of your domain
- Drawback: Users who accessed a page on www.example.com may create links to the “www.” variant of your site, perpetuating the usage of that domain.
- Drawback: If you skip the <base>, it is difficult to ensure all links start with your proper domain name; while many frameworks make this easy, some raw HTML or even an AJAX call may introduce non-canonical links.

For more information on how and why to deprecate the “www.” variant of your site, see http://no-www.org.

Personally I think solution #1 is the strongest, but the choice is yours. Pursuing neither implementation is lazy and continues the trend of URLs which are longer than necessary. In other words, if you do nothing, you canât call yourself a software artist or user-interface guru; you can call yourself a hack.

TextExpander tips: Replacing Quicksilver via Spotlight; Avoiding Little Snitch crashing

Thu, 12 Feb 2009 16:56:13 -0500

Using TextExpander and Spotlight to replace Quicksilver (and the Little Snitch and TextExpander snafu)

Replacing Quicksilver

I have used Quicksilver primarily an application launcher for a long time. Itâs great, but I have found it has gotten too slow for practical use lately; I have disabled it.

Spotlight, the Macâs built-in computer search tool, was optimized for finding applications almost immediately in OS X 10.5, so itâs a viable alternative.

The only downside is that Quicksilver had a timesaving feature in that it could learn abbreviations. For example, whenever I typed “shop” after the first few times, it knew I meant Photoshop; and whenever I typed “nnw”, Quicksilver knew to launch my favorite Mac feed reader, NetNewsWire. Spotlight would find NetNewsWire if I typed “netn”, but it would never learn to recognize “nnw”; similarly â and even worse â typing “Photo” finds things like Photo Booth and iPhoto along with Photoshop, and “shop” does nothing particularly useful.

My solution was simple. I used the useful application TextExpander, which allows things like automatically shortening a URL in your clipboard, to add just a few short rules. For applications which I wanted to launch with a custom abbreviation, such as “nnw” for NetNewsWire, I just added the abbreviation as a TextExpander rule. Examples: “nnw” expands to NetNewsWire; “twr” exands to Twitterrific; “pshop” exands to Photoshop. (Note that having “shop” expand to Photoshop would have a lot of side effects.) So now I just hit Cmd-Space and type “twr” to launch Twitterrific!

The Snitch and TextExpander Problem

Warning: Your computer will not accept any input â be it keyboard or mouse â if the Mac firewall program Little Snitch catches a request from TextExpander! You have to perform a hard reset. This can happen if you attempt to use a URL-shortening feature of Little Snitch.

One workaround is to add a rule to Little Snitch allowing any program to make calls to the domains is.gd, bit.ly or any other URLs that TextExpander might ever access. This works.

Another solution may or may not be to add a rule allowing the system process “curl” to access anything it wants.

Rails 2.0 failure on db:create:all (undefined method `collect') fix: update gem

Wed, 06 Aug 2008 14:59:00 -0400

Rails: If `rake db:create:all` yields undefined method `collect' then update `gem` itself.

Today the team was attempting to create a new Facebooker app in Rails 2.0 (actually 2.1.0) and we were running into the following problem (running on Mac OS X 10.5 Leopard, where the prompt is “dir user$”):

dir user$ rake db:create:all
undefined method `collect' for #<Gem::Version::Requirement:0x148c7a8>

It took us a while, but we eventually figured out:

Locking the Rails version wasn’t the problem (apparently),
Updating the json, haml, and facebooker gems didn’t seem to help,
Removing and reinstalling the Rails gem didn’t help, but
updating gem itself from version 0.8 to version 1.2.0 did help. The way to do that is simply:
```
dir user$ sudo gem update --system
```
To verify this worked, try the following:
```
dir user$ gem -v
1.2.0
```

At this point we were able to then run rake db:create:all successfully.