Tips for designing web pages for mobile browser?

Question

I'm making my debut in designing a web app specifically targeted at mobile browsers. While I've written web pages before in C#/ASP.NET, I've never done anything specifically for the limited screen real estate and other idiosyncrasies of mobile browsers. So I'm looking for some pointers here:

• What design considerations should I be taking account of (aside from the obviously smaller screen)?
• What useful features are there in C# that can be put to good effect for the mobile client?
• How do you make sure to give a relatively uniform user experience for all different mobile browsers?
• Any other tips you have?

Thanks!

Answer 1

What design considerations should I be taking account of (aside from the obviously smaller screen)?

How about the user interaction, for example there are few devices that allow for "hovering", so don't depend on psuedo-classes that cannot be emulated on a mobile device, but don't completely ignore them, so mobile devices may use them.

Think about orientation of the design, if the device supports landscape and horizontal viewing.

Some devices like the iPhone cannot be operated to a mm accuracy using a stylus, so don't make inputs dangerously small.

If using effects to tart up the UI, most mobile devices don't display effect (such as those provided by jQuery) very well...

Finally test, test, test! Test on as many real mobile devices you can, and when you're done consider using emulators (such as ones for BlackBerrys or the iPhone), whilst this won't provide you with the feel of using the device, it should show any rendering problems.

Answer 2

Probably obvious but make sure you define a bespoke handheld stylesheet.

<link rel="stylesheet" href="http://domain.tld/mobile.css" type="text/css" media="handheld" />

Whilst modern smartphones (e.g. iPhone) can handle normal sites the constant zooming in and out is better avoided for a dedicated mobile app. However, it's worth designing two versions in case the user wants to access the app using a laptop / desktop too.

Answer 3

Making a good mobile device experience is mostly about the UI, and not the back end application.

• Use a mobile device style sheet (media="handheld" attribute on the link-element)
• Have as few HTTP-requests as possible:
  • Compress all scripts and stylesheets into one single file (one for .js, one for .css, that is)
  • As few images as possible
• Keep in mind the differences between touch devices and non-touch devices (size of buttons, for example)
• Be careful with the amount of content you fit into one page.

Answer 4

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.

Answer 5

Don't redirect to the mobile version of the site, losing the intended target. If I want to view an article on a site, don't take me to the mobile home page. You may take me to the mobile view of the article, but hijacking my target entirely is unacceptable.

A certain cr***ed.com does this always which is incredibly infuriating....

Answer 6

Compress, minifying, optimize for a couple of reasons. Bandwidth isn't great, a page that loads in a couple of seconds on the desktop could take 30+ seconds on a mobile device. Caching is really poor on mobiles. An example being the iPhone will not cache components of a website over 25k. So get your images, scripts, stylesheets as small as possible.

Answer 7

You should check out WURFL which basically is a huge xml file that helps you identify the device. You grab the user agent and check it against the file with their API to get all the capabilities and features for that device. I´ve used it in numerous projects with great success.