Глава 10 Мобильные сайты

Глава 10

Мобильные сайты

Мобильные приложения и мобильные сайты похожи на сиамских близнецов, которых в детстве разделили и наделили каждого уникальной способностью. Если приложения – это в первую очередь скорость и доступ ко всем возможностям мобильного телефона, то мобильный сайт – это возможность «обойти таможню» и получить скорость и возможность публикации той информации, которая в другом случае не пройдет через жесткие правила App Store. Именно поэтому мобильный сайт иногда гораздо предпочтительнее – вы не тратите время на размещение в магазине, как в случае с приложением, и вам не нужно делиться с владельцем магазина доходами, если вы продаете на своем мобильном сайте услуги либо информацию.

Скорость реакции на внешние изменения в мобильных сайтах гораздо выше по сравнению с мобильными приложениями. Например, чтобы выпустить обновление мобильного приложения, необходимо запустить долгий процесс через App Store – в то время как мобильный сайт может выглядеть как приложение, работать, подгружая оперативную информацию, – и при этом не нужно «долго и нудно» утверждать обновления с владельцем App Store – что является обязательным в случае с мобильными приложениями.

Мобильные сайты – это веб-приложения, рассчитанные на разные платформы. Они не зависят от операционной системы и дают пользователям всех мобильных платформ одинаковый опыт. Заходя на мобильный сайт, пользователи видят одну и ту же информацию на разных устройствах – и могут воспользоваться одинаковым числом опций на любом смартфоне и любой платформе.

Основное отличие мобильного сайта от его традиционной версии в том, что мобильные пользователи ориентированы не просто на просмотр контента, а на определенные действия (рис. 10.1). Это означает, что мобильный сайт должен быть максимально функциональным и предлагать конкретные шаги: «Заполняйте анкету и получайте кредит», «Адреса наших магазинов» или «Скачать последний альбом здесь».

Рис. 10.1. Экран смартфона предполагает другой формат взаимодействия с информаций

При создании мобильного сайта нужно понимать, что пользователь взаимодействует с ним особенным образом – на ходу, «одним глазом» и пальцем одной руки.

Навигация по мобильному сайту и ваш собственный опыт общения с телефоном подскажут вам, как проработать навигацию на экране смартфона: попробуйте дотянуться большим пальцем правой руки до левой верхней точки вашего экрана. Если у вас это получилось – поздравляю! И подумайте теперь – как изменится ваше поведение, если именно в этом месте экрана будет расположена кнопка «Купить» в мобильной версии интернет-магазина.

Самая важная информация на вашем мобильном сайте должна быть расположена в верхнем левом углу, чтобы пользователю было удобно ее просматривать. Там следует размещать контакты компании, включая телефон с функцией click-to-call, чтобы, нажав на ссылку с номером, пользователь сразу смог его набрать.

Возможно, та информация, которая прячется внизу справа на странице мобильного сайта, не будет видна пользователям. К сожалению, этот «слепой эффект», который достался нам в наследство от эпохи маленьких дисплеев, продлится еще два-три года – пока производители полностью не обновят рынок мобильных телефонов.

Проблема маленьких экранов не нова – с ней сталкиваются разработчики сайтов с самого появления Интернета. Язык HTML позволяет делать динамическую верстку – но при этом экранное разрешение устройств, на которые нацеливаются разработчики, варьируется от 320 ? 240 пикселов и сейчас доходит до 2048 ? 536 пикселов у последнего iPad 3.

На первый взгляд, правильно расположить элементы мобильного сайта – достаточно простая задача. Однако это кажущаяся легкость, поскольку то количество устройств, которое существует на рынке, не дает вам возможности проверить, как ваш сайт будет вести себя на устройствах всех видов (рис. 10.2).

Рис. 10.2. Экраны iPhone 3, iPhone 4 и различных версий Android вмещают разное количество информации

Поэтому доверьтесь профессионалам – компаниям, которые имеют опыт разработки мобильных сайтов для самых разных устройств. Существуют экраны совершенно разных конфигураций, размеров, с различным количеством точек на дюйм, с наличием физических кнопок на самом устройстве (или их отсутствием). Также есть несколько разных положений экрана (например, вертикальное и горизонтальное – для чтения и просмотра изображений и видео) и даже несколько версий операционной системы, которые работают на одном и том же смартфоне. Конечно же, в ответ на такое разнообразие устройств появились технологии, которые позволяют упростить создание мобильной версии сайта – например, компания InfoGin предлагает адаптацию веб-контента для мобильных устройств с помощью своей разработки Smartphone Web Optimizer (рис. 10.3).

Рис. 10.3. Сайт без применения функции Web Optimizer (слева) и с использованием Web Optimizer (справа)

Smartphone Web Optimizer автоматически анализирует содержимое вашего сайта и генерирует версию, предназначенную для мобильных устройств. Хотя такое решение и упрощает взаимодействие с мобильным контентом, оно не адаптирует его: длина текста, количество картинок и ссылок при этом остаются прежними, без учета «мобильного контекста».