Mobile Phone web sites
Keeping up with the trends of internet browsing can be time consuming and costly but one thing is for sure: with more and more people using mobile devices to browse internet websites, you must keep up to date with your web site(s) to ensure business success!
It has been predicted that by 2014, mobile internet stands to overtake desktop usage. Therefore it is very important to manufacture/adapt your current web site(s) to keep up to date with the modern day internet user.
The following article highlights the key concepts of building web pages for the iphone and other mobile devices….
Basics Behind Building Web Pages for the iPhone
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 iPhones and Other 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 as 10 different mobile devices. While there are some emulators out there, they really don’t give you the same feel as trying to navigate through a Web site on the tiny little screen. - 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. - 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 iPhones
The first thing you should remember when writing pages for the iPhone market is that you don’t have to make any changes if you don’t want to. The great thing about the iPhone is that it uses Safari to display Web pages, so if your page looks okay in Safari on a PC, it will look fine on the iPhone (just a lot smaller). But there are things you can do to make the browsing experience more pleasant:
- Remember that the screen is tiny. The iPhone will condense all those columns down into the tiny window, and this can make them very hard to read without zooming. Most iPhone 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 SMSing 24/7). 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 iPhone 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.
Tips for Images on iPhones
- The images must be small. Yes, the iPhone 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 an iPhone. 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.
- 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 iPhones
There are several things you should avoid when building a mobile friendly page. As I 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 cell phones do not support Flash, so it’s not a good idea to include it on your wireless pages.
- Cookies – most 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.
More posts from our team
Five Star
Reviewed Marketing
"Would definitely recommend to a friend"
"I cannot recommend Dental Design highly enough"
"Really great company to deal with"
"Very professional, efficient & adaptive to new situations"
"I cannot recommend them highly enough"
"Has been invaluable and gone out of her way to help us"
"We love the look of our practice website. Very professional!"
"Dental Design stood out both in their knowledge of the industry and their professionalism"
"The team and package offered at dental design was unrivalled"
"absolutely fantastic and are always on hand to help"
"Dental Design are fantastic to work with"
"always met with a swift and professional response"
