Nick Francis is the founder of small Nashville-based web design agency Project83, which is behind mobile design showcase site Mobile Awesomeness. We chat to him about why it’s high time to go mobile, and how to get started
.net: What are your favourite mobile sites and why?
Nick Francis: ESPN is a must for any sports fan. You can follow games as they happen, getting live updates and play-by-play without having to refresh the page.
NPR is extremely useful website for listeners of public radio, especially if you have an iPhone. The top of the homepage has an audio clip updated every hour with the latest news.
Yahoo oneSearch is a very useful site that can help guide you to local restaurants, the latest news or even the weather forecast. It’s also the best design I’ve seen lately.
.net: Why should you concentrate on the mobile web now?
NF: A few reasons. First, it’s catching on faster than any medium in history. Currently three times more people own a mobile phone than own a personal computer. By 2010, experts are predicting there’ll be more than four billion active mobile users.
Secondly, mobile browsers are getting better. The open source Webkit engine (the browser behind the iPhone/iPod Touch) is leading the pack, and a new mobile browser from Mozilla is expected this year as well. The days of WAP 1.0 and WML are behind us, and it’s relatively simple for developers to make the transition now.
Lastly, the mobile web has staying power. It’s not going away any time soon, and I believe it still has a ton of growing to do as the hardware/software gets better. No matter what the future holds for the worldwide economy in the coming years, the mobile web will continue to achieve staggering growth, in my opinion.
.net: What design considerations do you have to take into account when converting a site to mobile?
NF: Do less, from a design AND content perspective. Usefulness is more important than the aesthetic, and this rule applies even more so on the mobile web. Try to scale down your design so that it will work well on various handsets and resolutions. If you have a larger site (20 plus pages), consider cutting down the content to show only the most important stuff on the mobile version.
.net: What are the biggest challenges? Which kinds of media work well on mobile?
NF: It’s important to realise that designing for a mobile phone is completely different from designing for a computer screen. User interaction is completely different (no mouse, limited keyboard), so you have to be very mindful of how people will use the site.
Media is still a big question mark, to my knowledge. Different things work for different platforms, and that’s frustrating. For instance, only QuickTime-acceptable formats work on the iPhone or iPod Touch. But Flash Lite only works on Windows Mobile and some smaller operating systems. We’ll have to give it some time for the big players to be nice and for mobile browsers to support various media types.
.net: What are the main tools and technologies you need to know when converting a site to mobile?
NF: Chances are you’re already familiar with the code it takes to build a mobile website. Currently the standard for modern mobile devices is the XHTML Mobile Profile (XHTML-MP), which is XHTML Basic with a few features from the full version. You can learn more about XHTML-MP with this XHTML MP tutorial. I also highly recommend the W3C’s ‘Mobile Web Application Best Practices’ document. These are both great resources.
If you don’t really care to dive in head first, you could always start converting your site by simply using a handheld style sheet. It’s pretty straightforward; just declare it like so:
<link rel=“stylesheet” type=“text/css” media=“handheld” href=“mobile.css” />
Lastly, mobile frameworks are also a good tool for creating a mobile website. Yahoo Blueprint, Wapple and iWebKit are some of the ones I know about.