How to Write Web Pages for Mobile Device
/184362869-56a9f6773df78cf772abc5f0.jpg)
Chances are you’ve seen how the iPhone can flip and expand web pages. It can show you the entire web page at a glance or zoom in to make the text you’re interested in readable. In one sense, since the iPhone uses Safari, web designers shouldn’t have to do anything special to create a web page that will work on the iPhone.
But do you really want your page to just work? Most designers want their pages to shine!
When you build a web page, you need to think about who’s going to view it and how they are going to view it. Some of the best sites take into account what type of device the page is being viewed on, including the resolution, color options, and available functions. They don’t just rely on the device to figure it out.
General Guidelines for Building a Site for Mobile Devices
- Test on as many devices as you can. The first thing you should do is view your site on an iPhone and as many different mobile devices or emulators as you can. While you can use emulators for all your testing, they really don’t give you the same feel as trying to navigate through a website on the tiny little screen, so test on actual devices as much as possible.
- Make your pages degrade gracefully. You can write your pages for Flash-enabled, wide screen browsers, but make sure that the critical information is visible even in a tiny monitor that can’t handle any special features (like cookies, Ajax, Flash, JavaScript, etc.). Anything beyond XHTML Basic will be beyond some cell phones. While most smartphones can handle all those things (except Flash on the iPhone, of course), other mobile devices can’t.
- Build a wireless specific page—and make it easy to find. If you’re going to build a specific page for your cell phone and wireless customers—make it available. A great way is to put the link to the wireless page at the very top of your document, and then hide that link from non-handheld devices using the handheld media type. After all, most people come to your home page, even on cell phones—and if the link to your wireless page isn’t there, they’ll leave if the page is too hard to use.
Web Page Layout for Smartphones
The first thing you should remember when writing pages for the smartphone market is that you don’t have to make any changes if you don’t want to. The great thing about most smartphones available is that they use Webkit browsers (Safari on iOS and Chrome on Android) to display web pages, so if your page looks okay in Safari or Chrome, it will look fine on most smartphones (just a lot smaller). But there are things you can do to make the browsing experience more pleasant:
- Remember that the screen is tiny. Smartphones will condense all those columns down into the tiny window, and this can make them very hard to read without zooming. Most users are used to zooming, but it can get tiresome. One long column of text is easier to read.
- Divide pages into smaller chunks. It can be difficult to read long segments of text on a cell phone, so putting them on multiple pages makes them easier to read.
Links and Navigation on iPhones
- The shorter the URLs are, the better. If you’ve ever tried to type in a URL on a cell phone, you’ll know that it’s a pain (except perhaps for teens who are used to sending a lot of text messages). Even on the iPhone, it’s tedious to type in long URLs. Keep them short.
- But long link text is easier to tap. When on a page where several separate words are linked to different articles, all right next to each other, it can be very difficult to tap the correct one without zooming. Many people will just give up and go somewhere else. Links with 3-5 words in them are easier to click on the phone than 1-word links.
- Don’t put your navigation at the very top of the screen. There is nothing more annoying than having to page through screens and screens of links to find the information you want. If you’ve looked at web pages that were designed for cell phones, you’ll see that the first things that show up are the content and headline. Then, below that is navigation.
- Don’t be afraid to hide your navigation. Hiding navigation links with CSS or JavaScript and making them appear only when the user asks for it is a way to make the page easier for smartphone users.
Tips for Images on Smartphones
- The images must be small. Yes, Android and iPhones can zoom and unzoom in on images, but the smaller they are, in both dimensions and download time, the happier your wireless customers will be. Optimizing images is always a good idea, but for cell phone pages, it’s critical.
- Images must download quickly. Images take up a lot of space on web pages when you’re viewing them from a mobile device. And while they are often very nice and make the pages look better when viewed on a full-screen web browser, they often get in the way on a mobile device. Plus when a smartphone user is on the cellular network, the last thing they want to pay for is downloading a bunch of huge images or navigation icons.
- Don’t put large images at the top of the page. Just as with navigation, it can be very tedious to wait for an image that takes up 3-4 screenfuls to load at the very top of the page. And this is extremely common on web pages. The only exception to this is if the reader knows that they’re going to get an image when they click, say in a photo gallery.
What to Avoid When Designing for Mobile
There are several things you should avoid when building a mobile-friendly page. As mentioned above, if you really want to have these on your page, you can, but make sure that the site works without them.
- Flash - most mobile phones do not support Flash, so it’s not a good idea to include it on your wireless pages.
- Cookies - many cell phones have no cookie support. iPhones do have cookie support.
- Frames - even if the browser supports them, think about the dimensions of the screen. Frames just don’t work on mobile devices - they’re very difficult or impossible to read.
- Tables - don’t use tables for layout on a mobile page. And try to avoid tables in general. They aren’t supported on every cellphone (although iPhones and other smartphones support them) and you can end up with strange results.
- Nested tables - if you must use a table, make sure not to nest it in another table. These are difficult for desktop browsers to support, and, at best, make the page load more slowly.
- Absolute measures - in other words, don’t define the dimensions of objects in absolute sizes (like pixels, millimeters, or inches). If you define something as 100px wide, on one mobile device that might be half the screen and on another it might be two times the width. Relative sizes (like ems and percentages) work best.
- Fonts - don’t assume that any of the fonts you’re used to having access to will be available on the cell phones.
Post a Comment