Well, we actually launched last month, but if you haven't already seen it then go check it out.

Why did we do this? Easy — mobile market share is on the rise and it was getting to a significant enough level for habaneros.com that a custom mobile experience with specialized content delivery seemed warranted (especially with the large number of Habanero employees with mobile devices and data plans).

Mobile homepage screenshot

The challenge was delivering a trimmed down, focused experience for content that we had determined was most important for users accessing our site via a mobile device. We focused our efforts on highlighting the following areas:

  • Team Directory — for easy access to employee e-mail and phone numbers (includes automatic extension dialing)
  • Our Offices — for general office information, phone numbers, etc.
  • Blog
  • News & Events
  • And of course the Homepage with navigation and our live Twitter feed

Mobile team directory screenshot

We decided to only support the latest phones (iPhone, Blackberry, etc.) with decent HTML, CSS, JavaScript support, as they made up an overwhelming majority of our mobile traffic up until now and it allowed us to be a little more flexible and fun with our design. There is a "Full Site" link in the footer, which allows users to navigate to our regular site at any point and stay there as long as they wish.

We have also implemented a custom 404 handler to help users navigate to the full site easily if they are trying to view a page that doesn't have a mobile version. There are some minor issues with Opera Mini on the iPhone because of their single font support (results in some overlapping text), but otherwise we think we've been able to keep the interface clean, sleek, and easy to navigate.

Check it out and let us know what you think.

Share