designing web interfaces for mobile devices

Question

How do you make your website look good in both a standard browser and on the various mobile devices available?

Currently I am undecided between trying to make my layout resizable so that it will work for small devices, or providing a separate CSS for mobile devices. My use case is a chess game where I want the entire board to be available without scrolling down.

What would you recommend?

Answer 1

Try Google's new Mobile friendly test tool to evaluate your site 1

Answer 2

basically there is no easy way to do this, you can use CSS on most modern phones to control the output but you need to resize the images before they are displayed on the phone as all phones have different screen sizes.

The best site I have come across dealing within mobile design is : http://patterns.littlespringsdesign.com/index.php/Main_Page

Answer 3

I would recommend the CSS approach. Otherwise, I fear you'll have an interface that will only look adequate in both and only mediocre at that.

You don't want your site to look like it's compromised for one audience or the other.

Answer 4

In this particular case, it sounds like for optimal viewing it might be worth targeting mobile devices specifically.

Answer 5

I don't know if you realise how big a question you're asking -- "the various mobile devices"? That's a lot of devices, a lot of resolutions and a lot of bugs and limitations, all the way from iPhones, which can handle anything a normal browser can handle, to tiny little black-and-white screens.

In theory, you can write separate CSS to target hand-held devices

<LINK REL="stylesheet" TYPE="text/css" MEDIA="handheld" HREF="handheld.css">

but personally, if you're trying to support a large number of devices I think detecting the device and trying to feed it code it can handle is the only real solution.

You can start looking at how big the problem is by getting WURLF which is a 13MB XML file of details about the different devices and their capabilities.