When designing and developing for mobile websites there are more than enough parameters to consider. What kind of phone is the target demographic using? Is it a smart-phone or just an internet capable phone (aka a pretty-smart phone)? Ultimately, how will the user see the page on their phone and how can you best design and develop for all the different options? Here are a few tips to help you get started.
Most mobile devices display at a width of 320px or less. You can try to go bigger, but it will only frustrate you in the testing phase. Note that you can still use background images and css to expand menu buttons and backgrounds to a 100% of whichever screen you're using, but the actual content area should be 320px or less.
Having a zen-attitude will help of course, but keeping your content centered within the page will help your users more. Trying to float background-images on the right side of your menu list-items, but want your text-align: center;? Try adding a margin-left: 10%; to the list-item to give that extra padding on left side of the screen.
If you want to use your desktop website (who does that anymore?) to host a page, you'll probably want to set the zoom. This is called a viewport, which is a meta tag you can place in the [head] section of your webpage.
The code is as follows (replace [ with <):
[meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"]
Bear in mind that if the initial-scale and the maximum-scale are the same, this prevents users from zooming in on your page with their touch-screen enabled mobile device - a nifty trick indeed; but remember it will also prevent the zoom from increasing when the user flips from portrait to landscape view.
Trial and error is the best way to learn. So if there's something you really want to make happen, you probably can; just be willing to try different ways and think outside the box.
Have a mobile design that uses these tricks or others? We'd love to see it! Have questions, we like those too!
Photo courtesy of alleus