Need help making row of buttons consistent

Question

I'm making my first website, and I'm trying to make variable-sized buttons so they'll render correctly on low resolution (read: mobile) browsers. Currently I just have the usual rollover image solution (185 pixels wide by 37 tall if anybody cares), but when I preview the site in low resolution it looks, predictably enough, like complete crap (more specifically they don't have room so they arrange vertically instead of horizontally and take up a huge amount of screen real estate).

Semi-related, is there a way to overlay text on a button without saving separate images, each with the correct text? Just using a single template for buttons and then deciding what text goes on it as it's needed?

tl;dr: I'm trying to get a horizontal lineup of buttons for navigating my website, but I'm a noob and I can't do it right without your generous assistance.

Answer 1

You're picking a tough problem for your first website. Some issues you'll encounter:

• There are a vast number of different mobile browsers out there (makes dealing with just Firefox, IE, Safair, Chrome trivial)
• All these browsers have varying level of support for HTML. Some have poor support, they'll do different things with Tables.
• A variety of screen sizes (although you can assume it will be one of 128, 176, 240, 320 or 480 px wide)
• A difficulty in testing how your app looks on different browsers.
• Varying support for java script (good on iPhone/Android/PalmPre, partial (and inconsistent) on BlackBerry/Sybian60 devices and poor on pretty much everything else)

A usual approach to these problems is to analyse the User Agent to identify the mobile browser type, and its capabilities. Then render the screen appropriately (e.g. for 128/176px wide screens, use small buttons). Look into http://wurfl.sourceforge.net/ or http://deviceatlas.com/ for tools on how to do this. You may also find some useful info at http://mobiforge.com/forum/Developing. And http://ready.mobi/launch.jsp?locale=en_EN is a fine online analysis tool of your mobile website (but don't get sucked into trying to get a 100% score on it).

If you're just developing static HTML, then things are a lot more limited. You could use User Agent based URL rewrites on apache to redirect to different versions of your HTML.

Good luck!