|
Верстка под мобильные устройства
#1 Рано или поздно некоторые вебмастера сталкивается с иллюзией, что все источники роста аудитории сайта исчерпаны. Проведены всевозможные маркетинговые мероприятия (сео, директы, бегуны, даже баннеры, вплоть до рекламы в оффлайне), юсабилити выше некуда, коммьюнити на форуме вроде крупнейшеее в рунете в своей нише и т.д. и т.п. Что делать? Перефразировав совет Александра Садовского, можно ответить: брать пример с монстров, которые для привлечения и удержания аудитории используют 99% потенциальных возможностей. Одной из таких экзотических возможностей являются посетители с мобильных устройств. По статистике LiveInternet одних посетителей с Оперой Мини около 8%, а это хоть и большая часть мобильных устройств, но еще не все. Я считаю, что удержание на сайте около 8% посетителей (мобильных) — достойная задача, даже если у Вас менее 100 хостов в день.
Что можно сделать с сайтом, чтобы "мобильным" посетителям было удобно? Для начала, скорее всего, нужно самому зайти с мобильного устройства на свой сайт, чтобы оценить масштаб бедствия. Если на сайте используется какая-нибудь стандартная CMS как то Друпал, Джумла, Вордпрес или Битрикс, то тут можно только посочувствовать, т.к. авторы этих платформ не заморачиваются над мобильным представлением.
Далее есть 2 принципиально разные подхода. Вариант #1 — крутой, как у Гугла (content negotiation). Это когда и мобильные и десктопные посетители заходят на один и тот же домен, но видят разное содержимое. Чтобы посмотреть, как Гугл лихо отдает разные интерфейсы, можно под Firefox`ом установить расширение User Agent Switcher, и в нем забить несколько пробных юзер-агентов:
Опера Мини: Opera/9.80 (J2ME/MIDP; Opera Mini/4.2.14912/812; U; en) Presto/2.2.0
iPhone: Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3
Телефон Nokia E70: NokiaE70-1/3.0 (1.0610.05.06); SymbianOS/9.1 Series60/3.0 Profile/MIDP-2.0 Configuration/CLDC-1.1
Телефон Samsung D900: SAMSUNG-SGH-D900/1.0 Profile/MIDP-2.0 Configuration/CLDC-1.1 UP.Browser/6.2.3.3.c.1.101 (GUI) MMP/2.0
И совсем экзотика — Sony PSP: Mozilla/4 (PSP (PlayStation Portable); 2.00)
Вариант #2 — менее изящный, когда для мобильных посетителей делается отдельный доменчик третьего уровня и как только заходит человек с мобильным юзер-агентом, то его тут же редиректят с основного на вспомогательный домен. Так делает, к примеру, Яндекс, Микрософт. У большинства мобильных браузеров в режиме просмотра нет адресной строки, так что посетитель этого редиректа не замечает. С этим вариантом все просто: отдельный домен, свой дизайн, своя верстка.
Вернемся к первому варианту, с изменением контента. Чаще всего в этих случаях используется один и тот же базовый дизайн, который различными способами модифицируется для десктопных и мобильных посетителей. Вот об этих модификациях и хотелось бы поговорить.
Целью модификаций контента чаще всего является уменьшение ширины самого широкого элемента. Модифицировать контент можно либо на клиенте, либо на сервере. На клиенте это можно делать с помощью JavaScript или CSS. С помощью JavaScript можно, к примеру, либо динамически менять ширину баннера-логотипа в шапке сайта, либо подставлять разные картинки в зависимости от разрешения экрана. С помощью CSS можно модифицировать мобильную версию сайта точно так же, как и версию для печати. Хотя это будет несколько сложнее, чем с print-версией, потому что производители мобильных браузеров некорректно поддерживают тип media из стандарта CSS2. Обычно верстальщики используют значения screen либо print, но мало кто знает, что для мобильных устройств есть специальное значение — handheld, и если бы мобильные браузеры использовали его, а не screen, то проблем с мобильной версткой было бы намного меньше. Вот тут есть маленький css::media тест, который определяет, какое значение css:media сейчас выставлено у браузера. Ни Опера Мини, ни браузеры с мобильников не говорят, что они handheld.
Но самый эффективный способ модификации контента — это все же серверный. Состоит он из двух этапов: на первом определяем, а не мобильный ли у нас посетитель, и на втором для мобильного посетителя модифицируем верстку (что-то можем вырезать, что-то подправить). Далее очень простенькие примеры кода на PHP.
Шаг 1: определяем какой возможный размер экрана у клиента (переменная $small_screen): $user_agent_current = $_SERVER["HTTP_USER_AGENT"];
$small_screen = 0;
$ua_mobile_array = array("Opera Mini", "SymbianOS", "Windows CE;", "Nokia", "SonyEricsson", "SAMSUNG", "iPhone; U;");
foreach($ua_mobile_array as $ua_mobile)
{
if(strpos($user_agent_current, $ua_mobile) !== false)
{
$small_screen = 1;
break;
}
}
Шаг 2: далее переменную $small_screen используем по своему усмотрению, к примеру, растягиваем многоколоночную верстку в одну колонку с помощью следующих вставок:</td>
<?php
if($small_screen)
echo "</tr><tr>";
?>
<td>
Надеюсь, что факты, приведенные здесь, кому-нибудь пригодятся. |
| html 2
usability 4
мобильники 3
|
NULL, 2009-11-02 21:09 |
#2 Интересно, а как насчет того, что телефон все равно сможет не открыть сайт из-за неправильной разметки под мобильные устройства?
Вот сейчас протестил — на google.com зашел с моторолы L7 нормально (капризный браузер), а на ya.ru — пустая страница.
Не спорю, если смарты там, нокии всякие, но тогда мы потенциально теряем аудиторию |
| |
Shtirlitz, 2009-11-05 06:44 |
| #3 Тут только тестировать нужно верстку под самые распространенные платформы, а ya.ru не редиректит на мобильную версию (m.yandex.ru), это только делает yandex.ru. |
| |
NULL, 2009-11-05 12:21 |
|
|