Mobile Specific Site Development. Where to start?

Question

I'm beginning the process of learning the ins and outs of developing sites for mobile web browsers. Are there any good resources/communities online that discuss mobile specific site development issues?

My initial understanding is that to cover different phones you need to build one site that is enabled for browsers with the webkit engine (iphone, android, etc.) and another more basic site for other older browsers, is this assumption correct?

Also what does developing for webkit mean exactly? How is it different than just using javascript/css/html? Is it the same except that you limit yourself to webkit specific functions and css? I looked on the webkit site, but it didn't explain it in those terms.

Are there any other snafus I need to watch out for when developing for mobile browsers?

Answer 1

Your assumption is correct, you will need to develop multiple versions of your site targeted at different browser types.

Webkit is the engine used by Safari (mobile Safari), Chrome, and Andriod Browser (mobile Chrome?) you can use standard Javascript, XHTML, and CSS, the main thing, is making your site "fat-finger-friendly" since these devices are all driven by touch screens.

What I mean by "fat-finger-friendly" is that you have large links/buttons that are easy to hit with your finger, most mobile browsers are good at approximating which link you intended to touch, but if you have alot of stuff jammed together, it frequently gusses wrong.

Another consiteration is screen size, and thus the width/height of your site.

The best illustration I have of this is from Ars Technica -- checkout their site in your desktop browser, then check out their site in your mobile browser. Its a very slick version of the site. (http://www.arstechnica.com/)

Answer 2

Webkit is rendering engine designed to allow web browsers to render web pages. It provides the set of classes to display the web content in windows and implement different features which are provided by browser (such as links, fwd/backward etc).

You don't need to build the different sites for different rendering engines such as webkit. Designing of mobile web site should consider the screen size and how different components look/behave in different rendering engines.

Look at this question for more details of how to build the mobile friendly site.

Answer 3

If you want to support older browsers, then you should have multiple sites. But take a look at mobile browser stats first to decide if it's worth it. If you just want to make your existing website work for iPhone/Android or other phones with A-grade browsers, then you can customize with a mobile friendly CSS (for small screens). But to get good performance on mobile devices on slow/unreliable connections, you probably need to have a separate stripped down html.

Apple has a very good guide to help you optimize your site for iPhone. Most of it will also work on modern mobile browsers: http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Peter Paul Koch has done an excellent research on different mobile browsers. He has several articles, but this one is a good start: http://www.quirksmode.org/mobile/browsers.html

Like Nate Bross mentioned, you should optimize for touch devices. Unfortunately it's very difficult to know if a device has touch or not, since there is no media query for it. You can do user agent sniffing for some devices, but I don't recommend it. More discussion here: Optimize website for touch devices

For the moment, I detect touch events (with an exception for Chrome). If this returns true, I inject a touch CSS. A bit nasty, but the other options are worse:

function() {
    if( /Chrome/i.test(navigator.userAgent) ) {
        return false;
    }
    try {
        document.createEvent("TouchEvent");
        return true;
    } catch (e) {
        return false;
    }
}

You specifically asked for sites for mobile web browsers, but you might also check out the possibilities of creating a mobile web app. It looks like an iPhone app (or Android for that matter), but it's built with the help of HTML5. You can do pretty slick animations with the CSS3 in the webkit image, and iPhone also has meta tags to hide the Safari navigation toolbars. Users can then bookmark your page to their home screen, and it will work just like a normal iPhone app. Of course you're limited to the browser and it's performance. But you can create multiplatform apps :) HTML5 + JS is the only multi-mobile-platform language Steve Jobs approves, and with the help of PhoneGap you can even get it into the AppStore! If web-app sounds interesting you should check out jQTouch, jQuery CSS Transition plugin and of course Building iPhone apps with HTML, CSS and JavaScript by Jonathan Stark.