(대충 해석한 것이라 엉망진창임. 이해되는 대로 써놨으니 필요하면 원문을 살피시길 바람 ㅋ)
1. 가능한 하드웨어와 소프트웨어랑 친해지기
- 셀폰과 모바일 디바이스 플랫폼들은 OS, 스크린 사이즈, 해상도, 각각의 인터페이스들로 매우 다양하다.
사이트를 최적화시키고 싶은 플랫폼을 선택하는 것이 가능하려면 서로 다른 옵션으로 친숙해지는 것이 도움이 될 것이다.
사용자(타겟 유저)의 연령이나 특성에 따라 모바일 플랫폼을 선택해야 한다(그래프를 참고할 것 ).
(사이트 방문자가 비즈니스 유저라면 주로 윈모바일이나 블랙베리 디바이스에 최적화할 필요가 있을 것이고, 좀더 젊고 트렌드를 쫓는 유저라면 주로아이폰 이나 안드로이드 디바이스에 최적화 할 것이다)
그러나 어떤 경우에도 최소한 주요 모바일 플랫폼에서 사용할 수 있어야 한다(좀 당연한 이야기인듯).
모바일 브라우저는 고려해야 할 또다른 사항이다.
아이폰의 사파리, 안드로이드 브라우저, 오페라 모바일, 웹OS 브라우저(팜), 블랙베리 브라우저, 인터넷 익스플로러 모바일을 모두 포함한다. 노키아나 다른 모바일 폰에서 사용하는 또 다른 브라우저도 있다. 이러한 브라우저들의 대부분은 각각의 코드에 기반하고 있다. 반면에 안드로이드와 사파리는 웹킷(WebKit)으로 만들어졌고, 페넥(모질라 파이어폭스의 모바일 브라우저)은 겍코(Gecko)나 다른 일반적인 플랫폼으로 만들어졌다.
9개의 주요 모바일 브라우저
-> 따라서 사이트 방문자들의 가장 주요한 화면 사이즈와 해상도를 고려해야 할 필요가 있다.
사용자들이 사용할 수 있는 모바일 디바이스의 범위를 크게 잡아야 하는 것이다.
표준 셀 폰의 보통 해상도는 101*80(많은 소니 에릭슨의 핸드폰), 128*128(삼성 핸드폰), 120*160(모토롤라 핸드폰)이다.
스마트폰은 더 많고 다양하다. 아이폰은 320*480, HTC 터치 프로는 480*640, 팜프리는 320*480, 블랙베리 스톰은 360*480(이런 해상도는 낯설군), HTC 비너스는 800*400이다.
이런 다양한 화면 크기에도 아무 문제 없이 사이트를 보여줄 수 있어야 한다.
2. 단순화!!
모바일 사이트는 대부분 기본(PC에서 제공되는) 사이트보다 심플해야 한다(한가지 예외라면 기본 사이트가 이미 미니멀할 경우).
그래픽적인 요소를 제거하는 것은 대개 모바일 디바이스에 디스플레이 할 때 최적화할 수 있는 효과적인 방법이다.
사이트의 기능과 디자인을 모두 단순화(심플)하는 방법을 찾아라. 그게 아마 메뉴를 다시 작업하거나 이미지를 지우거나 혹은 레이아웃이나 기능을 다시 정의하는 것을 의미할 수도 있다(ㅎㄷㄷ;;;).
사이트에 접속할 지 모르는 사람들의 가능한 OS와 브라우저의 다양성을 고려한다면 웹표준은 필수적이다. 기본(데스크탑에서 접속하는) 브라우저는 웹 표준을 지키지 않는 코드를 허용할 수 있지만 모바일 브라우저에서는 종종 경로를 잃게 될 것이다. 코드의 유효성을 검증해라. -> (그렇지만 이건 너무 어려운 일 인 것 같다 ㅠ_ㅠ)
데스크탑에서 기본 브라우저에서도 여러 방향의 스크롤바가 생긴다면 무척 귀찮은 일이다. 그건 모바일 디바이스에서도 마찬가지이다. 아니 더 안 좋을 수도 있다. 터치스크린 폰을 사용할 때 잘못된 방향(수직 대신 수평 방향으로)으로 스크롤할 수도 있다. 만약에 사이트를 한 방향으로만 스크롤하게 한다면, 그런 번거로운 귀찮은 일들을 제거할 수 있다.
특별한 플랫폼 상에서 팝업이나 새로운 창은 브라우징 경험을 방해할 수 있다. 그러니까 쓰지마! 정히~ 꼭 필요하다면 방문자(사용자)에게 새 창 또는 팝업이 열릴 것이라고 alert을 줘야 한다.
8. 이미지 사용의 최소화
메시지를 전달해야 할 필요가 있을 때만 이미지를 사용해라. 이를테면 로고는 괜찮다. 사이트의 내용에 필수적인 것도 괜찮다. 그러나 예쁘게 보이는 것 이외에 다른 목적이 없는 이미지라면 삭제해라. 그런 것들은 보통 모바일 디바이스에서는 별로 예뻐보이지 않는다. 오히려 안 예쁘게 보이고, 이상한 스크롤이나 레이아웃의 문제(이미지가 해상도보다 크거나 할 때)를 발생시킬 수 있다.
많은 모바일 디바이스들이 터치스크린 인터페이스를 지니고 있다. 그러니 그것을 염두에 두고 디자인을 해보라. 즉 링크의 클릭할 수 있는 영역은 좀 더 커야 하고, 그러기 위해 버튼을 좀 더 크게 만들어야 하고, 링크 사이에 선택이 겹치지 않도록 공간을 더 많이 주어야 한다는 것이다. 작고 눈에 띄지 않는 링크를 클릭하는 것은 어려운 일이고 클릭하기 위해 매번 확대해야 한다. 이러한 내비게이션 이슈를 개선시키기 위해 많은 사이트는 완전히 분리된 모바일 내비게이션 디자인, 터치스크린이나 마우스가 없는 입력 디바이스를 위해 최적화된 방법을 사용한다.
모든 핸드폰이나 모바일 디바이스가 플래시나 자바스크립트를 지원하지는 않는다. 만약 지원하더라도 가장 최근 버전일지는 확신할 수 없다. 그러니 당신의 사이트를 방문하는 사용자가 iPhone 사용자라면 플래시는 잊어라. 반드시 모든 중요한 정보와 기능은 간결한 (X)HTML과 CSS로 만들어라. 그렇지 않으면 사용자들이 중요한 내용에 접근하지 못할 수 있다.
11. 실제 기본 사이트와 가능하면 거의 동일한(많은) 내용을 포함해라
모바일 사이트에서도 오리지날 사이트(데스크탑에서 접속하는 기본 원래 사이트)의 가능한 많은 내용을 포함하고 있어야 한다. 그렇지 않다면 사용자들은 또 다른 기능을 사용하기 위해 다른 내용을 보기 위해 기본 사이트로 다시 접속할 것이다.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
This entry was posted on Tuesday, February
9th, 2010 at 6:13 am and is filed under How To's.You can
follow any responses to this entry through the RSS
2.0 feed. You can leave a response, or trackback from your own site.
