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 ]

study/design2010.01.07 18:39


구글 넥서스폰(Google nexus one)이 드디어 출시가 되었네요.

이미 많은 뉴스사이트 및 블로그 등에서 관련글들이 쏟아져나오고 있기에 제품에 대한 상세한 설명은 자제하도록 하겠습니다.

저는 제가 관심있는 분야인 넥서스폰의 외관 및 UI 디자인에 대해서만 간단히 언급을 해보려합니다.


1. 외관디자인

일단 첫 인상은 마치 삼성의 스마트폰을 보는 듯 했습니다.
디자인이라는 부분이 워낙 개인 취향차가 큰 영역이기에 객관적으로 평가할 수 있는 성격의 것이 아니지만,
제 개인적인 생각으로는 아이폰보다는 떨어지는 외관디자인이라고 생각했습니다.
비록 아이폰보다 화면이 크고, 두께가 얇아지고, 무게가 가벼워졌지만 말이죠...
구글이 수년간 축적된 애플의 아이덴터티가 반영된 사용자 중심의 절제된 디자인을 따라가기는 아직 무리라고 갠적으로 생각합니다..^^a


Google nexus one 외관 디자인


Apple iPhone 외관 디자인



2. UI(User Interface) 디자인

넥서스 원의 UI디자인은 애플만큼이나 유저들의 편의성을 고려해서 만든것 같습니다.
어플들의 아이콘이나 UI화면 등 GUI(Graphic User Interface) 디자인은 아직 애플에 못미치지만,
사용자 편의성(UI)의 관점에서는 사용자를 위한 구글의 배려가 많이 느껴지네요.
물론 직접 써보진 못했지만 넥서스 원 사이트에서 플래시 애니메이션으로 잠깐이나마
간접 체험해본 결과를 말씀드리는 것입니다. 맹신이나 오해는 하지마시길. ^^

아래 그림은 각 메뉴에 대한 UI화면을 제가 캡쳐를 받아서 나열해본 것 입니다.
페이지별 디자인 일관성 부분에서는 좋은 점수를 주기 힘들지만,
각 메뉴에서 사용자들이 활용하기 원하고 필요한 메뉴가 무엇인지에 대해선 많은 고민을 한것이 느껴집니다.

※ 이미지 캡쳐: http://www.google.com/phone/

Google nexus one UI screenshot


위와 같이 디자인 관점에서 보면 넥서스원은 아이폰보다 한수 아래라는 결론을 제 개인적으로 내렸습니다.

하지만...모순이겠지만...
전 넥서스 원이 정말 가지고 싶네요.ㅋㅋ

이유는 넥서스원의 가장 큰 강점은 디자인이 아닌 구글의 최신 서비스들을 최적으로 구현하는 스마트폰이기 때문입니다.
구글의 최신 서비스를 사용해보신 분들은 아시겠지만 정말 획기적이고 유용한 기술들이 많거든요...
물론 아이폰의 다양한 어플들 역시 획기적이고 신기한것들이 많지만, 기본 어플리케이션의 디테일한 완성도나 유용성을 따지면 어플리케이션은 구글이 우위지 않을까 싶습니다. 물론 써봐야 정확히 판단할 수 있겠죠..ㅋ

어쨌던.. 현재 아이폰을 사용하고 있는 저이지만..
추후 구글의 넥서스원이 국내 출시된다면 그때는 기변을 할지도 모르겠습니다. ㅋ

일본은 이미 전파 테스트 들어갔다고 하던데..우리나라엔 언제쯤 들어올까요??
아이폰처럼 또 세월아~ 네월아~하고 기다려야 하는 것인지..ㅠㅠ


[구글 넥서스원 공식 동영상 - http://www.google.com/phone/]
 
저작자 표시
신고
Posted by jay9

댓글을 달아 주세요

diary2009.12.29 09:19
웹서핑을 하다 발견한 아이폰을 캠코더로 변신시켜주는 기발한 제품입니다.
카메라 그립이라고 하는게 더 맞을것 같기도 하지만, 아이폰의 비디오 촬영 기능을
업그레이드 시켜주는 장비이기에 그냥 그립이라고 부르기도 애매하네요...이런건 모라고 불러야 할지..-_-;

여튼 이 제품은 $129.95로 가격 경쟁력도 꽤 있어 보입니다.
우리나라에도 출시가 되면 좋겠네요. ^^

간단히 제품을 살펴보면..


이미지출처 : http://www.thinkgeek.com

알루미늄으로 제작된 바디가 참 안정적으로 보이네요.
아이폰으로 비디오 촬영시 흔들리거나 마이크가 아래로 향해있던 단점을 보완해준답니다.

이미지출처 : http://www.thinkgeek.com


조명을 장착할 수 있는 상단 핫슈 마운트와 제품 모서리마다 트라이포드를 장착할 수 있는 마운트가 있습니다.
또한 표준형 37mm 렌즈가 탈착 가능하답니다.


이미지출처 : http://www.thinkgeek.com


해외에는 이미 아이팟, 아이폰 등 여러 애플제품들을 다양하게 활용할 수 있는 관련 어플리케이션, 악세사리 등이 많이 개발되어 있지만 아직 우리나라에는 종류가 다양하진 못한것 같습니다. 
하루빨리 이런 아이디얼한 제품들이 우리나라에도 많이 보급이 되면 좋겠네요...^^

이런쪽 사업을 해보는 것도 재밌을듯 하구요..^^;

 

제품 소개 페이지 : http://wantowle.com/shop.html
온라인 쇼핑몰 : https://naturalpartn.infusionsoft.com/cart/store.jsp?view=4&i=p20646&navicat=1&navisubcat=1&naviprod=20646




Product Features

  • Anodized aluminum case improves iPhone camera with upgraded lens and boom mic
  • Improves video or still shots
  • Works with iPhone 3G or 3GS (However 3G requires additional app to shoot video and the quality is poor)
  • iPhone fits inside included silicone case, then mounts inside the aluminum housing for full protection
  • Constructed from a solid block of milled aluminum
  • Shoe mount on top allows you to add camera accessories (flash will not work, since there is no way to sync it to the iPhone camera shutter)
  • Four screw mounts on the corners of the case enable you to mount to a tripod
  • Comes standard with 37mm lens threading, as well as a 0.45x Wide angle/macro combination lens
  • Add any other lenses with a 37mm mount
저작자 표시
신고
Posted by jay9

댓글을 달아 주세요


티스토리 툴바