study/design2010.02.09 23:37

Mobile Web Design: Tips and Best Practices

출처 : http://www.noupe.com/how-tos/mobile-web-design-tips-and-best-practices.html


By Cameron Chapman

Last year, more than 63 million people in the United States accessed the Internet from a mobile device. It’s forecast that by 2013 there will be more than 1.7 billion mobile Internet users worldwide. With those kinds of numbers, it’s imperative that web designers and developers learn optimal development and design practices for mobile devices.

For the most part you won’t need to learn any new technologies for mobile site design. But you will need to look at site design in a new way, one that is decidedly more restrictive than design for standard browsers. To work around the issues that mobile site design presents, and to get a result that is as user-friendly and useful as your standard site, some creative problem-solving skills are required.

You may want to check out the following related article as well:


Familiarize Yourself with the Hardware and Software Available

Cell phone and mobile device platforms vary greatly when it comes to operating system, screen size, resolution, and user interface. To be able to decide which platform(s) you want to optimize your site for, it would be helpful to familiarize yourself with the different available options.

The most common operating systems in use are Windows Mobile, the iPhone platform, Palm OS, Mobile Linux, Symbian OS, the BlackBerry platform, and Android (which is poised to get a lot bigger thanks to a recent deal between Verizon and Google). There are other proprietary systems specific to particular phones, such as those found on some Verizon handsets and specific brands of phones. You can estimate, based on the type of audience your site targets, which OSs your users are most likely to be using. If your visitors are mostly business users, you’ll need to optimize your site for Windows Mobile and BlackBerry devices. If your users are younger, trendier, or more tech-savvy, you’ll want your site optimized for iPhones and Android devices. In any case, ensure your site is at least usable on the majority of mobile platforms.

StatCounter Global Stats – Top 8 Mobile OSs

Oct1 in Mobile Web Design: Tips and Best Practices

Mobile browsers are another factor to consider. Some of the more common browsers include Safari for the iPhone, Android browser, Opera Mobile, WebOS browser (on Palm devices), BlackBerry browser, and Internet Explorer Mobile (on Windows Mobile devices). There are additional browsers in use on Nokia and on other phone brands. Some of these browsers are based on proprietary code, while others are built on WebKit (Android, Safari), Gecko (Fennec, a Mozilla browser) or other common platforms.

StatCounter Global Stats – Top 9 Mobile Browsers


Oct2 in Mobile Web Design: Tips and Best Practices


Finally, you need to consider your site visitors’ most common screen size and resolution. Your site should work on the widest range of mobile devices that your visitors might be using. Common resolutions for standard cell phones include 101×80 pixels (many Sony Ericsson phones), 128×128 pixels (some Samsung phones), and 120×160 pixels (many Motorola phones). For smartphones, there’s a lot more to work with. The iPhone has a 320×480 pixel screen; the HTC Touch Pro has a 480×640 pixel screen; the Palm Pre has a 320×480 pixel screen; the BlackBerry Storm has a 360×480 pixel screen; and the HTC Venus has a whopping 800×480 pixel screen. Many of these screens can comfortably display a standard website.



Simplify!

Your mobile site, in most cases, should be simpler than your standard site. The only exception to this is if your standard site is already very minimalist. Eliminating graphic elements from your site is usually an effective way to optimize its display on a mobile device. Look for ways to simplify both the design and functionality of your site. This might mean redoing your menus, eliminating images, breaking up text over multiple pages, or otherwise re-working your site’s layout and functionality.

Examples


A List Apart Mobile

Alistapart in Mobile Web Design: Tips and Best Practices


The Onion

Theonion in Mobile Web Design: Tips and Best Practices


Amazon.com

Amazonkindlestore in Mobile Web Design: Tips and Best Practices


Use Valid Markup

Considering the variety of potential operating systems and browsers from which people might be accessing your site, web standards become even more vital. Standard browsers are, for the most part, very forgiving of bad code, but with a mobile browser you often won’t get that kind of leeway. Make sure your code validates is as clean and minimalist as possible.


Give Users the Option of Visiting the Standard Site

Depending on what kind of device your visitors are using, they may want to just use your standard website. This is particularly true with a lot of the better smartphones and the iPhone, the latter of which does an excellent job of rendering standard websites without issue. Give your mobile visitors the option of visiting the standard site, even if it’s just through a link in the footer (where most of us are already predisposed to looking). You could additionally give them the option to come back to the mobile site without having to use their back button.

Examples


Geek Squad

Geeksquad in Mobile Web Design: Tips and Best Practices


Julian Andrade

Julianandrade in Mobile Web Design: Tips and Best Practices


Weather Underground

Weatherunderground in Mobile Web Design: Tips and Best Practices


Use a Separate Mobile Theme

While optimizing your main site for mobile use sometimes makes sense, it’s often easier to use a separate mobile theme, which can be done on most CMSs by changing the CSS for mobile devices. A dedicated mobile theme means you can really take into account how your visitors will see your site, and optimize it specifically for them. Some sites have one design optimized for regular mobile devices and another for iPhone users.

Examples


Gamespot

Gamespot in Mobile Web Design: Tips and Best Practices


Marmalade on Toast

Marmaladeontoast in Mobile Web Design: Tips and Best Practices


Watchmen

Watchmen in Mobile Web Design: Tips and Best Practices


Limit Scrolling to One Direction

It’s really annoying to have to scroll in multiple directions on a web page when using a standard browser. That doesn’t change when you’re visiting from a mobile device; in fact, it’s worse. It’s very easy to accidentally scroll the wrong way (horizontally instead of vertically or vice versa) when using a touchscreen phone. If your site only scrolls one way, you eliminate the potential for such a hassle.

Examples


Disney

Disney in Mobile Web Design: Tips and Best Practices


Taltopia

Taltopia in Mobile Web Design: Tips and Best Practices


Mogreet

Mogreet in Mobile Web Design: Tips and Best Practices


Don’t Use Pop-Ups or Open New Windows

Depending on the particular platform, popups and new windows can interfere with the browsing experience, so don’t use them. If you absolutely need something to open in a new window, make sure you alert your mobile visitors that it will do so.


Minimize the Use of Images

Use only the images you need to get your message across. A logo is fine, as are most icons. Images that are integral to the content on your site are also fine. But eliminate images that serve no purpose other than to look pretty. They generally won’t look pretty on a mobile device anyway, so why bother? And sometimes they just make your site look worse, or cause strange scrolling or layout issues if the resolution is other than what you were expecting.

Examples


Radio Paradise

Radioparadise in Mobile Web Design: Tips and Best Practices


Raleigh Information

Raleighinfo in Mobile Web Design: Tips and Best Practices


Topix

Topix in Mobile Web Design: Tips and Best Practices


Optimize Your Navigation

Many mobile devices have touchscreen interfaces, so try to design with that in mind. That means making the clickable area around your links a little greater, making buttons larger, and putting more space between links. Trying to click on tiny, barely-visible links is a real pain, and having to zoom in every time you want to click on something doesn’t make it much better. To improve these navigation issues, many sites use a completely separate mobile navigation design, optimized for touchscreens or non-mouse input devices.

Examples


American Modern Insurance

Americanmoderninsurance in Mobile Web Design: Tips and Best Practices


1M Creative

1mcreative in Mobile Web Design: Tips and Best Practices


Daily Horoscope

Dailyhoroscope in Mobile Web Design: Tips and Best Practices


Don’t Rely on Flash or JavaScript

Not all phones and mobile devices support Flash or JavaScript. Even if they do, there’s no guarantee it will be the most recent version. And forget about Flash if your visitors are using an iPhone. Make sure all the important information and functionality on your mobile site is in plain (X)HTML/CSS. Otherwise, you risk a large portion of your visitors being unable to access important content.


Include as Much Content from Your Standard Site as is Practical

How many times have you gone to a favorite website from your phone and then realized you can’t get to the part you wanted to visit? It happens all the time. Include as much of the original site content as possible on your mobile site. In addition to making it available, make sure the navigation route to get to it also remains relatively unchanged.

Examples


The Dieline

Thedieline in Mobile Web Design: Tips and Best Practices


Yahoo! Mobile

Yahoomobile in Mobile Web Design: Tips and Best Practices


Volkswagon

Volkswagon in Mobile Web Design: Tips and Best Practices


Make Sure Redirects Work Properly

Don’t just send mobile users to your home page. There’s nothing more annoying than clicking a link, either in search engine results or from another website, and having it redirect to the homepage if you’re on a mobile device. If your site automatically detects whether a visitor is coming from a mobile browser, make sure it’s set up to send that visitor to the link they were trying to visit, otherwise they’re likely to leave and never come back.

Further Resources

저작자 표시
신고
Posted by jay9

댓글을 달아 주세요

  1. Well, http://www.moncleroutletespain.com/ moncler españa, finding cheap flights to Paris are not difficult, as there are many airlines companies those are offering inexpensive trip. If you are looking for cheap flights to Paris, then make sure that there is an off-season, http://www.moncleroutletespain.com/ moncler chaquetas. Lots of tourist visits Paris frenziedly 24/7/365. However, cheap flights to Paris are mostly sold during winter season. One of the best ways is to talk to your local travel agency or a travel agent. They will offer you right knowledge when to book flight to Paris in an affordable rate. You can also visit the Internet, http://www.moncleroutletespain.com/ moncler online, there are many travel forums that can help you to find cheap flights to Paris, http://www.moncleroutletespain.com/ moncler outlet. In online travel forums, you can chat to other travelers those have got experience and methods to grab cheap flights to Paris. Occasionally, http://www.moncleroutletespain.com/ http://www.moncleroutletespain.com/, you can find great deals if you are eager to fly mid of the week, http://www.moncleroutletespain.com/ moncler.Related articles:


    http://essay119.tistory.com/2062 http://essay119.tistory.com/2062

    http://exsihell.tistory.com/16 http://exsihell.tistory.com/16

    2013.01.05 19:41 신고 [ ADDR : EDIT/ DEL : REPLY ]


티스토리 툴바