David Herrold

A List Apart industry survey

Posted by Dave | Filed under Design, Development, Software, Technology, Usability, Web design, Writing

A List Apart is posting their second annual survey for “people who make websites.”  The results from last year were very interesting.  If you are somehow involved in designing, developing, writing, producing, or managing websites, I encourage you to participate in this anonymous survey to help better understand the industry.

A List Apart article explaining the survey.
Link to the 2008 survey.
Results of the 2007 survey.

Thanks!

Tags: a list apart, survey, web survey

Mobile search

Posted by Dave | Filed under Apple, Hardware, Mobile, Software, Usability

We’ve gotten very good at finding what we’re looking for online. Ever since the early days of AltaVista, Lycos and DogPile we’ve become experts at finding Thai restaurants in Hoboken, NJ and singing telegrams in Anchorage, AK. Just type a few keywords into the search box and click the go button. Your best result will be on the first page, right? Pretty easy.

Fast forward to 2008 - and the proliferation of mobile phones, PDAs and palmtop computers that can access the web. Things become much more interesting.

There is an increased sense of immediacy based upon our physical location and actions. In the old world, we designed sites for users who were typically sitting at a desk with a keyboard and mouse. Today we design sites for people who are surfing the internet while walking the dog, boarding a plane, driving to work and cheering for the home team during the playoffs.  Mobile devices are with us all the time.

Good-bye keyboard.  Good-bye mouse.  We’ll miss you.

We are using our thumbs to type now. We are scrolling down our tiny screens with trackballs, slide-wheels and pencil-thin styli. We are clicking with phone keys, tiny buttons, pens and our fingers. We need results need to be simple, easy to read, accurate and light weight. And we need it now.

Mobile platforms need to distill web content down to the bare essentials, trimming away unnecessary page clutter while pushing relevant content to the top of the page.

John Markoff’s New York Times article sums this up more eloquently than I.

“The small screen forces you to be even more ruthless and focus on usability almost like a haiku,” said Barney Pell, Powerset’s founder and chief executive. “That’s what happens with design for the small screen. You have to think about what the most important thing the user is doing is.”

There are currently only a few methods of searching the web on a mobile device (although, there SHOULD be more, in my opinion*.)

The first method is the one we’re most familiar with.  We type search terms into a little box and hit submit for results. As long as the web server produces valid XHTML and mobile friendly CSS, most phones will display results without too much trouble. Many mobile sites that offer search, offer this method.

Another method uses SMS and allows users to search via text message instead of using web forms. This can be a faster way of getting results in some cases if you have little or no access to a strong mobile signal for WAP searches. Depending upon your carrier’s packages, SMS can also be used without a data plan (which is usually much cheaper than a full data plan).

A good example of this is Google’s SMS service. If you happen to have a text message plan for your mobile device, try this. Send a text message to 466453 (GOOGLE) with the message of “pizza and [your zipcode]“. You should get a text message back from Google with 3-4 of the highest ranking listings along with click-to-call links to contact the restaurant.

You can also send links to your users within the text message. A good example of this is our own classified ad platform on the Houston Chronicle’s mobile site. For another interesting test, try sending a text message to 24766 (CHRON) with a message of “ford mustang”. You will get a text message back informing you how many results this search produced and a link to the mobile search results (if you have a WAP access).

This is pretty useful, but still not perfect.

Within the last year location-based services have grown quickly in popularity. Mobile platforms like Brightkite, Google Maps and Fire Eagle are gaining ground with many mobile users. Using a mobile device’s internal GPS (or triangulation from cell towers if your device doesn’t have a GPS), the device determines your location and allows you to simply search for the word “pizza” to produce local results for you (since it already knows your location).

We will begin to see more of these services over the next few years. However, I think we can do even better than that.

As I’ve said in the past, our mobile phones are audio devices first and foremost. Let’s put that audio technology to good use.

* Allow me to speak “Find Starbucks” into my phone to trigger a Google Maps search or speak “Browse CNN” to auto-dial a browser bookmark. Surfing the internet hands-free might be extremely useful if I were driving a car, walking the dog or even peddling a bicycle.

With devices like Apple’s iPhone and Google’s upcoming Android platform the possibilities are nearly endless.

Let’s push the limits.

————————

Some resources that can help you get started with mobile web development:

Dev.Mobi - A website dedicated to mobile web development
Blue Flavor’s web development guide is a good start - and they’re nice folks too.
Mobile Web Development - by Nirav Mehta a more in-depth look at mobile development
Mobile Web Design - by Cameron Moll - a great introduction to the mobile web

Tags: Google, iPhone, Mobile, search, sms

Premature launches - or bumping into the mousetrap

Posted by Dave | Filed under Design, Development, Web design

Every now and then incomplete web content gets launched completely by accident.  I call this nausea-inducing act “bumping into the mouse trap” because it always takes longer to gingerly reset the trap then it does to trigger it.

Oh, and there is usually a lot of flinching involved.

It usually starts with someone noticing a new design live on the website - weeks before the scheduled launch. This person will usually turn to the person in the cube next to him and says “hey, did we launch early or did someone slip on a banana?”

Within a few seconds you’ll usually see another designer or developer who is clearly turning pale, stand up in his cube and utter a string of expletives.

“Uh, guys.  I think I just [expletive] pushed the [expletive] new redesign live by accident.  How quickly can we [expletive] roll it back?”

The solution could be as simple as replacing the wrong files on the server with recently backed-up versions.  (You *did* make back-ups of your work, right?)  If so, no harm, no foul.

However, the situation always gets more complicated the more pieces you have involved.

For instance, your position becomes much more complex if you happen to use a combination of flat files, databases, content management systems, distribution networks, automated data feeds, vendor APIs and advertising platforms (like we do).  A mistake could interact with any of those things, compounding your problems in a big way.

Fixing these issues becomes much more complicated and usually involves several different people (and skill sets) to fix.

We’ve done our share of “bumping into the mouse trap” with varying degrees of impact.  We usually recover gracefully with little disturbance, but every now and then someone notices just as they did when Twitter bumped into the mousetrap earlier this week.

I’ve always wondered if other companies suffered these same accidents.  With a touch of schadenfreude I was genuinely happy to see Twitter prematurely launch an incomplete redesign earlier this week.

It makes me feel a bit better knowing we’re not the only ones to drop our pants in front of a few million people by accident.

Have you survived any launching blunders like this?  If so, let me know in the comments.

Tags: premature site launch, redesign, twitter

Paper prototyping

Posted by Dave | Filed under Design, Usability, Web design

When I first started exploring web design and journalism nearly 10 years ago I thought paper prototyping was silly.  Paper…really?  Web design was beyond paper, I scoffed.  I used the cutting-edge design tools like Photoshop 5 that actually let me edit text on the page (a huge upgrade from Photoshop 4 that featured a quaint-but-clunky text editing panel).

Who needs paper when you can push pixels on the screen, right?

Well, it took a few years to sink in, but I have since changed my mind.  I rediscovered paper several years ago and now find it much easier to sketch concepts and ideas in a notebook.  Nothing beats paper for speed.  I can flip open a notebook and jot down an idea much faster than using a computer or PDA.

Don’t get me wrong, I love computers and gadgets as much as (if not more than) the next guy.  But paper still rules the initial stages of design for me.

Why do I bring this up?  I found some great early-stage paper prototypes on Flickr recently.  You will probably recognize a few of them.  Several of them are now extremely popular, with millions of users each month.

For me, seeing these sketches is like seeing the notes of a mad scientist after he’s built a giant robot or a glimpse into a wizard’s magical tome.  They probably didn’t realize these hand-scrawled sketches would eventually turn out to be blueprints for success.  Hope you enjoy them.

Prototypes:

Photo of Jack Dorsey’s original sketches of Twitter (Stat.us).
Dan Catt’s original sketches of Flickr Places.
Sockyung Hong’s sketch for Vimeo profile pages.
Beth Goldman’s sketches of several Quicken screens.

Notebooks:

Large plain Moleskine reporter. (my favorite).
Pocket ruled Moleskine notebook. (great for travel).

Tags: moleskine, notebooks, paper prototyping, prototype, Web design

Photos of Rocky Mountain National Park

Posted by Dave | Filed under Personal, Photography

I took some photos yesterday when Justine and I drove through Rocky Mountain National Park.

You can find the photos here.

Enjoy.

Tags: colorado, estes park, rmnp, rocky mountain national park