Migrating a small web application for smartphones by creating narrow HTML pages?

Question

I have a small web site offering a couple of functionalities, but it was not designed to operate with smartphones then. I don't have experience with smartphone application development (and this might be over-engineering too), but I was wondering if I could use another method.

From here, I notice that all smartphone screen support 320px width when held vertically. Could I develop HTML pages where content is squeezed properly within 320px and extended over 480px (and more)? Would this be displayed properly on smart phones? Should I save some space for scrolling bars?

Or should I invest time learning to use a proper CSS framework for smartphones? If yes, does anyone have recommendation to make? Ideally, I would like to just take a copy of my pages and reorganize them for smartphones to keep things simple. Thanks.

Answer 1

The technique you're looking for is called responsive design, utilizing CSS3, this approach allows the content layout and text sizing to change according to the user's browser window size or the screen resolution of their chosen device.

Here are a few resources/links/ideas:-

• CSS Tricks is a great example of responsive design in action
• SpeckyBoy magazine has a great roundup of CSS frameworks to look through, LESS is particularly good IMHO.
• SmashingMagazine has a great introduction to responsive design.