8

What is the best approach for designing a web site to run across most all modern mobile web browsers?

Is targeting WebKit based browsers enough?

Improve this question
1

4 Answers 4

Reset to default
12

No, targeting WebKit is not enough. The first thing to do is to consider there are two segments of the mobile market: touch-based and not touch-based. This affects how you design your mobile user experience. Thankfully, the touch-based ones are going to trend significantly toward WebKit (Android, iPhone and WebOS). The others are primarily going to be IE Mobile (IE Mobile 6 on Windows Mobile 6.5 and a new one based on IE7/IE8 on Windows Phone 7) and Opera (Mobile and Mini). Refer to this list of mobile browsers on Wikipedia for more information about rendering engines and capabilities.

For touch-based platforms, a library like Sencha Touch can help you create comparable experiences across all devices, but it's going to be hard to create equal experiences across all devices. In fact, I recommend you don't try. The difference between touch and non-touch mobile platforms is becoming so big it's almost like the UX difference of trying to fit a desktop based UI onto a mobile sized screen - which works okay on touch-based platforms since they use iPhone's "zoom" paradigm - but you'll be hard-pressed to get anything useful out of that approach for older or non-touch platforms.

However, consider LukeW's article and subsequent talks on designing for mobile first, which isn't necessarily an answer to your question but can be considered as a good principle: start designing by identifying the things consumers want to do on your site, and make those things available quickly and easily. That much is consistently good design across all platforms, so in that sense you can use that as a pattern guiding your mobile design.

Improve this answer
4

I made some experiments yesterday with an iPhone 3. Here is my experiences:

  • Don't assume width is 320 pixels, thus use a fluid width layout.

  • Use the right doctype. I use the XHTML Mobile 1.2. But I'm not sure if this is the right one.

  • Make the buttons huge.

  • No hover, so use icons to indicate what the different ui elements does.

Improve this answer
3

The term mobile is growing outside the realm of phones and beginning to include devices like tablets, which entail five to nine inch touch screens. Additionally, a mobile design should account for both horizontal and vertical orientations. On top of what neoneye said, a few more recommendations/suggestions.

  • Use some margin or padding to make sure no text sits right at the edge of the screen.
  • On top of using a fluid width layout (widths can go from 320px to 1024px), make sure design elements you use wrap well. For example, buttons look better wrapped than a horizontal list.
  • Text needs to be a bit bigger, but still legible. In my view, good typographic style is at least just as important here. The Elements of Typographic Style Applied to the Web is a good reference.
Improve this answer
2

If your audience can be qualified a bit more then you might be able to make some educated assumptions that most customers are using a primary device or rendering browser. Address the core needs of your primary audience first. Attempting to distribute your application across all platforms equally in the "beginning" might be too daunting a task.

Here are some helpful articles I have come across:

Mobile Reference http://www.quirksmode.org/mobile/

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.