Mobile Phone web sites

Mobile Phone web sites
25 August 2011 | | Creative Design, Internet, Marketing, Technology

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


Previous Post:
Next Post:

Back to all news

Reviews2024
Five Star
Reviewed Marketing
5 gold stars
google review logofacebook review with 5 stars
"Excellent service from James at Dental Design, thank you very much for your prompt attention whenever I get in touch! Would definitely recommend to a friend" Alison Tarmey View Full Testimonial
Google reviews logo "Would definitely recommend to a friend"
5 gold stars
"As a dental practice manager I cannot recommend Dental Design highly enough. They are just brilliant at what they do. Lucy and her colleagues are just an email or a phone call away...." Emma Smith View Full Testimonial
Google reviews logo "I cannot recommend Dental Design highly enough"
5 gold stars
"Really great company to deal with. They always respond quickly and are truly reliable. I would 100% recommend, the staff are so friendly and helpful." Michelle Molloy View Full Testimonial
Google reviews logo "Really great company to deal with"
5 gold stars
"I got increased traffic and new patients applying to my surgery, once Dental Design upgraded my website. They are very professional, efficient & adaptive to new situations..." Joanna Gallop View Full Testimonial
Google reviews logo "Very professional, efficient & adaptive to new situations"
5 gold stars
"Lucy has been a star, responding to and acting upon our requests in a prompt, efficient and professional manner, as well as the rest of the Dental Design team..." Abhay Shah View Full Testimonial
Google reviews logo "I cannot recommend them highly enough"
5 gold stars
"...Since the website has been up and running Lucy Mander has been our point of contact. She has been invaluable and gone out of her way to help us, especially during COVID-19 lockdown... " Lucy Jones View Full Testimonial
Google reviews logo "Has been invaluable and gone out of her way to help us"
5 gold stars
"Thank you for all your help and support, and the provision of valuable learning aids for our patients and staff alike in these difficult times. We love the look of our practice website. Very professional!" Sandra Luck View Full Testimonial
Google reviews logo "We love the look of our practice website. Very professional!"
5 gold stars
"Dental Design stood out both in their knowledge of the industry and their professionalism and can-do attitude. All of their staff are exceptionally competent and knowledgeable..." Harvey Rook View Full Testimonial
Google reviews logo "Dental Design stood out both in their knowledge of the industry and their professionalism"
5 gold stars
"Having done extensive research into all the dental website companies, the team and package offered at dental design was unrivalled..." Neil Shah View Full Testimonial
Google reviews logo "The team and package offered at dental design was unrivalled"
5 gold stars
"The team at dental design (especially Rosie) are absolutely fantastic and are always on hand to help. They are professional, friendly and extremely efficient. Rosie always gets back..." KiKi Wilmot View Full Testimonial
Google reviews logo "absolutely fantastic and are always on hand to help"
5 gold stars
"Dental Design are fantastic to work with, our website is amazing and the support they provide is second to none. Our account manager Rosie L is a fabulous point..." Luke Lucas View Full Testimonial
Google reviews logo "Dental Design are fantastic to work with"
5 gold stars
"Having worked with the Dental Design team for the last six months, I've found them not only helpful, but friendly and approachable too. I bombard Marcus with regular..." Sophie Harper View Full Testimonial
Google reviews logo "always met with a swift and professional response"
5 gold stars
desk with branded documents