Этот гостевой пост был написан Игорем Фалецким, соучредителем Mobify , популярного сервиса по оптимизации сайта для мобильного интернета. SitePoint использует Mobify для своего мобильного сайта — проверьте это на http://m.sitepoint.com .
1. Стиль для мобильного
Поздравляем — вы решили использовать мобильный, один из самых быстрорастущих сегментов в Интернете. Первое, что вы заметите, насколько разнообразна мобильная экосистема. Браузеры, размеры экрана, скорость соединения — все по-другому. Веб-сообщество получило краткий период господства на iPhone, когда показалось достаточно одного адреса браузера / разрешения экрана. Но теперь, когда устройства Android (которые имеют различные размеры экрана) быстро набирают популярность, важно еще раз подумать о более широкой картине.
При оформлении вашего мобильного сайта придерживайтесь относительных единиц — процентов, ems и так далее. Невозможно предсказать, какие мобильные устройства пользователи используют сегодня или могут использовать завтра. Относительные единицы могут иметь большое значение при создании прочного и качественного мобильного дизайна. Также важно поддерживать визуальную согласованность с настольным сайтом — это сделает ваш бренд сильнее и убедит ваших мобильных посетителей, что они в надежных руках. Вы также захотите свести к минимуму прокрутку и переходы страниц , чтобы сократить время, затрачиваемое на поиск контента.
2. Изменить размер изображения
Маленькие экраны требуют маленьких изображений. Нет просто никакой причины передавать большие графические ресурсы размером с рабочий стол пользователям мобильных устройств, которым они не нужны. Хорошая стратегия предполагает изменение размера изображений на веб-сервере — таким образом, они загружаются на 90% меньше времени. Изменение размера на основе CSS также может работать, хотя оно несет потери производительности и пропускной способности.
Если вы можете, сделайте ваши оптимизированные изображения ссылкой на полное оригинальное изображение, размещенное в другом месте. Ваши мобильные посетители оценят это, если захотят увеличить масштаб, чтобы получить больше деталей.
3. Автоматически обнаруживать мобильные устройства
Набор текста — это боль даже на самых лучших мобильных устройствах, и многие пользователи избегают этого при просмотре. В сочетании с тем фактом, что общение с вашими пользователями о том, что вы фактически предлагаете отдельную мобильную версию своего сайта, и привлечение мобильных пользователей к просмотру мобильной версии вашего сайта, на самом деле довольно сложно.
К счастью, в последнее время стали доступны различные методы автоматического обнаружения мобильных устройств. По нашему опыту, наиболее надежным подходом является обнаружение User Agent , когда сервер принимает решение о том, что обслуживать, основываясь на том, как входящий браузер описывает свои возможности. Другие реализации предоставляют запросы JavaScript в реальном времени к базам данных, таким как DeviceAtlas или WURFL, которые также предоставляют информацию о том, что может сделать устройство. Мобильная версия не завершена, пока она не будет автоматически запущена для каждого мобильного пользователя!
4. Переосмыслить навигацию
На вашем сайте может быть несколько десятков ссылок в нижнем колонтитуле, заголовке и на боковой панели — но имеют ли они значение для ваших мобильных посетителей? Мобильный веб-серфинг известен своими высокими показателями отказов (пользователи приходят посмотреть только на одну страницу), поэтому сосредоточьтесь на нескольких ключевых областях веб-сайта и отметьте короткие интервалы внимания ваших посетителей. Не думайте дважды об устранении ссылок на пункты назначения, которые не имеют высокого мобильного приоритета.
В то же время рассмотрите возможность добавления или определения приоритетов для мобильных устройств. Эта крошечная ссылка «Контакты» скрыта в нижней части вашего полного сайта? Это может быть отличным заголовком верхней строки для мобильной версии, просто потому, что многие пользователи будут искать номер телефона или адрес вашего офиса. Еще один замечательный элемент в заголовке для мобильных устройств — это Поиск.
5. Обеспечить четкий путь к полному сайту
Как веб-дизайнер, вы несете ответственность за принятие решений о содержании для мобильного посетителя. Однако иногда часть информации, которую ищет пользователь, не включается в мобильную версию. Одно очень простое решение — разместить ссылку на нижний колонтитул на «Полный сайт» на каждой странице. Убедитесь, что эта ссылка приводит пользователя к полной версии той страницы, которую он просматривает в данный момент.
После завершения перехода на полный сайт рекомендуется отключить перенаправление мобильных устройств для этого пользователя. Некоторые сайты делают это постоянно (например, Digg Mobile ), в то время как другие ( CNN ) устанавливают период ожидания 1-2 часа с помощью специального файла cookie. Ваш звонок!
6. Не ломайте ссылки
В первые годы существования мобильного Интернета было обычным делом видеть автономные мобильные веб-сайты, которые были структурированы совершенно иначе, чем их обычные настольные аналоги. Сегодня мобильный трафик в значительной степени определяется поисковыми запросами Google, ссылками в потоках Twitter и электронной почтой. Большинство из этих ссылок указывают на веб-сайты для настольных компьютеров, поэтому автоматическое обнаружение устройств так важно.
Однако после того, как мобильный пользователь был обнаружен и отправлен на m.yoursite.comточное содержание, которое он ожидает. Например, если исходной ссылкой была www.yoursite.com/category/article/m.yoursite.com/category/article/m.yoursite.com Это может показаться простым, но значительное количество веб-издателей не делают этого правильно и в конечном итоге удивляют и расстраивают свою аудиторию.
7. Измерьте мобильную аудиторию
Мобильные устройства быстро становятся неотъемлемой частью Интернета, а не изолированной рыночной нишей. Множество мобильных аналитических и рекламных сервисов появилось и ушло, но недавнее приобретение Google AdMob и API Mobile Analytics будет способствовать дальнейшей консолидации мобильных сервисов под одной крышей.
Измерение мобильной аудитории важно по нескольким причинам. Во-первых, зная, какие устройства пользуются популярностью у ваших пользователей, можно принимать обоснованные дизайнерские решения . Например, если ваша мобильная аудитория iPhone на 99%, вам не стоит слишком беспокоиться о совместимости с BlackBerry. Другой аспект — трафик и генерация лидов. Изучив мобильную статистику, вы, вероятно, увидите, что пользователи мобильных и настольных компьютеров предпочитают разный контент . Зная все это, можно создать выдающееся мобильное присутствие и успешно его монетизировать.
Спасибо за чтение этих мобильных советов, и удачи на ваших мобильных сайтах!