Мобильная версия сайта. 10 особенностей разработки

11.10.2011

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

Маленький экран

разрешение экрана

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

  • Меньший физический размер. У смартфонов это 3-4 дюйма, у планшетов 7-10, тогда как средний ноутбук — 15 дюймов, настольный монитор — 19. Достаточно большая разница, как по мне
  • Меньшее разрешение экрана. Большинство мобильных дисплеев в настоящее время имеют меньше пикселей, чем настольные. Iphone4, который имеет самое большое разрешение из смартфонов (960*640) — сильно отстает от настольных, с разрешением FullHD. Конечно, я беру современные варианты разрешений, не учитывая старые мониторы — но и там картина такая же, только не настолько сильное отличие.

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

Отсюда напрашивается вывод  — мобильная версия сайта должна быть максимально простой, читаемой и не напрягать глаза кучей информации. Все самое важное  — вверх страницы, чтобы было доступно сразу же, без скролла.

Медленные процессоры

Хотя они и догоняют настольные  — но, все же, пока далеко до производительности систем на обычных, не мобильных, процессорах. В связи с этим вторая особенность — максимальное упрощение и оптимизация необходимого кода. Применяя на странице тот же JavaScript — дважды подумайте, стоит ли это делать?

Мало того, что браузер просто не сможет отобразить физически все красОты — повышенная нагрузка на процессор быстрее сажает батарею

Меньшая пропускная способность

Скорость загрузки

Несмотря на то, что пропускная способность мобильных сетей постоянно растет — типичное современное 3G устройство сможет получить скорость в 1 мегабит, только если очень повезет. Отсюда медленная скорость загрузки, к тому же, операторы активно режут скорость безлимитных пакетов или ограничивают объём трафика. Конечно, при подключении к Wi-Fi картина другая, но публичный доступ, опять же, ограничен по скорости. Если пользователь увидит, что ваш сайт весьма прожорлив в этом плане — не ждите его возвращения.

Нужно эффективно использовать как скорость загрузки, так и объём отдаваемой страницы мобильной версии. Никаких встроенных видео, которые стартуют по умолчанию, быть не должно Хочется вставить — сделайте это ссылкой, чтобы посетитель сам выбрал, смотреть ему или лучше сэкономить. Еще один отличный способ использования малой пропускной способности — постепенная загрузка содержимого в процессе чтения, так называемый lazy load. Это когда при скролле вниз загружается часть страницы, раньше не видимая на экране. Вы наверняка видели подобный эффект, он применяется все чаще даже на обычных, не мобильных сайтах. Яркий пример — Twitter.

Сенсорный ввод

Самое важное, на мой взгляд, отличие мобильных устройств от настольных. В них нет мыши или тачпада — только сенсорный экран, управление стилусом или пальцами. Это привносит сразу несколько особенностей, которые нужно учесть.

  • Нет события :hover (наведение). То есть все стили, использующие это событие, а также JavaScript со своим MouseOut — можно смело удалять. Хорошо работать они не будут. Мобильные браузеры частично эмулируют это событие, но опять же  — это «костыль».
  • Низкая точность позиционирования. Нажать мышкой на текстовую ссылку, размером в 12px — не проблема. А попробуйте сделать тоже самое на мобильном, особенно, если у вас большие пальцы. Получится? Если сильно постараться  — да. Вот только пользователь сильно стараться не будет, он человек занятой. Основная причина разработки мобильной версии сайта — дать удобство навигации таким пользователям.
  • Жесты. Многие, если не все, мобильные браузеры поддерживают управление жестами. Это можно и нужно использовать при создании мобильной версии сайта. Перемещение между слайдами в галерее, листание страниц — все это можно привязать к жестам с помощью Jquery Mobile.

Неудобные клавиатуры

Ни одна, даже полноразмерная аппаратная клавиатура, не дотягивает по удобству до настольной. Поэтому не заставляйте пользователя печатать большие объёмы текста, вас выручат:

  • сокращенные URL, сервисов предостаточно
  • автозаполнение таких полей, как поиск
  • простой способ просмотра наиболее популярных или последних продуктов, записей. Нужно максимально снизить использование поиска.
  • если используются формы — либо сделать их простыми, либо автозаполнение наш друг

Ограниченная многозадачность

Она только входит в мобильный мир, поэтому переключение между окнами браузера — большая проблема. Например, вы написали отличный пост в свой блог, которым человек, его прочитавший, захотел поделиться в Twitter. Но неудобство, связанное с копированием URL, переходом в мобильный вариант Твиттера и возвращением обратно — убивает напрочь все желание распространить пост. Учитывайте такие ситуации при разработке мобильной версии вашего сайта.

Мобильные браузеры

Для экономии места на экране мобильные браузеры активно прячут свои панели инструментов. И вытащить их на свет, чтобы посмотреть, где же я нахожусь — не самый лучший вариант. Поэтому не забывайте о правилах навигации, которые на мобильных версиях сайтов особенно акутальны. «Хлебные крошки», меню — ничего нового, но в тоже время, очень необходимые вещи для такого сайта.

Портретная ориентация экрана

 

Портретная ориентация

Подавляющее большинство настольных мониторов имеет альбомную (ландшафтную) ориентацию экрана. В мобильных устройствах — наоборот, преобладает портретная. Есть возможность переключения, однако тогда неудобно держать устройство одной рукой. Поэтому, чаще используется портретная ориентация.  В связи с этим  — некоторые моменты формирования страницы:

  • Верстка в одну колонку. Так наиболее рационально используется место на экране
  • Не увлекайтесь чрезмерно широкими элементами. Таблицы, флеш (с ним отдельная песня), широкие картинки — все это должно или автоматически подстраиваться под ширину окна или быть статичными по наиболее частой ширине экрана.
  • Навигация сверху, а не снизу или сбоку. Помните, что самое главное должно быть сверху? Так вот навигация — это и есть самое главное

Разные типы сайтов для разных устройств

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

Ограниченное использование Flash

В настольных системах Flash установлен в 90% случаев. В мобильных — все не так радужно. iOS вообще не поддерживает эту технологию, Android выше 2.2 может работать, но часто пользователи отключают его, повышая производительность и стабильность. Поэтому делать ставку на сайт, использующий Flash я бы не стал. В принципе, в обычных сайтах для настольных систем тоже не стал бы.

Создание мобильной версии сайта — занятие нужное, которое обязательно даст свой результат. Самое главное — думать о пользователях, которые будут заходить, попробовать видеть проект как они. Тщательно тестировать и тогда обязательно будет все отлично. Если тема заинтересовала, ознакомьтесь — @media в CSS3. Больше техническая статья, для понимания механизма формирования страницы для мобильных с помощью современных технологий.

Удачного дня

, ,

Комментариев: 17

  1. Максим К.

    Здравствуйте) подскажите пожалуйста где и у кого заказать мобильную версию сайта?

    Ответить
  2. Вячеслав

    Кстати в последнее время в Google без мобильной версии делать нечего. Новый алгоритм учитывает наличие моб версии

    Ответить
  3. Александр

    тестировал моб версию на строительном блоге- траф упал, отключил моб версию. Говорят полную удобней читать)))

    Ответить
  4. Alex

    Ну так техника ведь все время совершенствуется. И сейчас нормальные гаджеты уже без проблем читают обычные версии сайтов без всяких мобильных вариаций. Другое дело, что данные требования нужно предъявлять к самим сайтам, которые день ото дня становятся все «тяжелее» и «тяжелее». Я бы, например, не заморачивал голову мобильной версией, а старался упростить и ускорить основной сайт.

    Ответить
    • Сергей

      Если обычный сайт будет быстро загружаться на телефоне, это не значит что им станет удобнее пользоваться. А учитывая что примерно 30% по Москве, заходят со смартфонов в интернет, можно сказать что это нужно пользователям мобильного интернета. Не зря же интернет-гиганты делаю мобильные версии сайтов. Это ведь увиливает продажи. И это намного удобнее и быстрее.

      Ответить
  5. Пользователь Андроидов

    Я обычный пользователь и я терпеть не могу мобильные версии! Пользуясь интернетом со смарта или планшета вынужден постоянно переключать сайты на полную версию вручную, это просто какая-то мука! Пожалуйста НЕ делайте мобильных версий, а если уж делаете, то пусть по умолчанию показывается полная!

    Ответить
  6. ssabbass

    Это все хорошо, но вот как оценить мобильную версию сайта, чтобы без смартфона и других устройств? Есть ли какие-нибудь эмуляторы?

    Ответить
  7. Евгений Володичев

    Я на WordPress использую плагин wptouch. Со временем все таки придется улучшить, но этот плагин достаточно хорош, и помогает решить проблему с мобильной версией. На все уйдет минут 10-15 и все бесплатно. Это уже дает право выбора для пользователя…..

    Ответить
  8. Олег

    Все чаще обращаются с просьбой сделать мобильную версию сайта. Эх, придется задуматься над этим вопросом.

    Ответить
    • GerinG

      Я всегда своим предлагаю или же использую адаптивные темы. Хотя темы — не лучший вариант, на самом деле.

      Ответить
  9. Конструктор

    Особенно видно по развитым странам, там практически вся коммерция в интернете и покупки совершаются с мобильных устройств.

    Ответить
  10. Курткин

    Согласен, что с каждым днем пользователей мобильного интернета становится больше. Это удобно, а качество с каждым годом все лучше.

    Ответить