Laying the groundwork for mobile design?

[kwjohns]

I'm starting to develop a mobile version of a site we have at work and have been wondering what is the secret for making a mobile site that will look good on all smart phones with their different sized screens and resolutions?

I got to playing around and made a static 320 width page and got the graphics placed where I want them and then you look at that on a high-res screen like the iPhone 4 and it looks blurry. To prevent this, I'm having to use graphics that are higher resolutions than what we have on our full desktop site. So, do I make a 640 width page and resize all the graphics and text to fit the new "bigger" page and then scale it down somehow with a viewport so that it will display properly on smaller resolution devices? I'm at a bit of a head scratcher, here.

 

[angelwatt]

http://www.gethifi.com/blog/three-ways-to-target-mobile-devices (the CSS media type is becoming more common to use)
http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript

 

[kwjohns]

Thanks!

 

[kwjohns]

Is there a tool/site to see how your site would look with different devices?

 

[angelwatt]

Is there a tool/site to see how your site would look with different devices?

Depends on the device. Apple has a iPhone simulator (also, iPhoney). I've come across Nokia simulators as well and the Blackberry has a simulator. I don't know of anything that does a range of mobile devices though. This is the closest I have come across, BrowserCam.

 

[Ride9650]

adobe has a program called device central which has a pretty good selection of different phones to help with mobile design. I know its usually bundled with creative suite, not sure if you can get a stand alone copy