Designing and Developing Webpages for Mobile

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.

Getting Pixelated

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.

Stay Centered

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.

A New Port of View

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"]

• width can be set to "device-width" which is the equivalent of 100% to whichever device you're using or can be set to a specific px i.e. width=320
• height not shown, but can be useful in special cases
• initial-scale is the zoom-level when the page first loads
• maximum-scale is how large or zoomed-in the page can be rendered after loading

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.

Final Considerations

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!

Mobile Websites, Mobile Applications, SMS/Text Messaging and QR Codes