Особенности разработки

Материал из AOW

Перейти к: навигация, поиск

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

Содержание

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

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

  • Меньший физический размер. У смартфонов это 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. Больше техническая статья, для понимания механизма формирования страницы для мобильных с помощью современных технологий.

http://gering111.com/mobile-version-site-10-osobennostey/

Личные инструменты

Разработка веб-сайтов, автоматизация.
По всем вопросам обращайтесь по телефонам:

+7 495 640 29 90
http://artofweb.ru