Earlier this year we created a mobile website for Banfield The Pet Hospital. Their regular site is really robust and we wanted to create something that was tailored to mobile users (a mobile website should not simply be a tiny version of your website.)

We began with a content evaluation. What parts of the site are most relevant? The primary function we identified was finding a Banfield hospital quickly. Secondary content included a short page about Banfield (and the services they offer), information about their Optimum Wellness Plans and Careers.

After flushing out the content strategy, we moved on to wireframes. I used OmniGraffle for these, but have since been using Photoshop more and more because I can set up my grids and use the same document later for the design. It doesn’t really matter what tool you use as long as you are quick with it and it is easy to make changes. For more on the subject, check out our post “Is there a Right Way to Wireframe?”

Here is an example of what the home page and search page looked like in the wireframe phase:

These wireframes were used as a road map for both designer and developer to use. We started building the functionality of the site and designing (colors, typefaces, etc) in tandem.  Here are screenshots of the final site:

Some mobile-specific things that we had to account for are clumsy fingers (make sure clickable areas are large enough!), and making sure we accounted for both horizontal and vertical layouts (make sure buttons are expandable, and design works fluidly, etc.) Read more in our post “Five tips for Mobile Success”

There you have it! As with most, the success of this project was rooted in a careful planning stage. You can see it on your mobile devices by going to www.banfield.net or you can see it on your computer browser by going to www.banfield.net/mobile (you may want to shrink the size of it to get the mobile effect).

More on mobile from Fresh:

“Mobile First”: The Next Phase of Web Design?

Should Your Website Go Mobile?

WordPress Can Help You Go Mobile!

Menagerie of Mobile Madness (lots of mobile resource links!)