Специфика создания сайтов под мобильные устройства
Для того чтобы пользователям смартфонов и планшетов было удобно просматривать информацию на мобильной версии вашего сайта, следует учитывать специфику мобильных устройств:
1. Небольшие размеры экрана.
Очевидно, что на 3-4 дюймовом экранчике не может поместиться столько же информации, как на 15-дюймов у ноутбука, или еще того большем 19-дюймовом экране у стационарного ПК. Кроме физического размера, меньшим у гаджета является и разрешение экрана. Даже у Iphone4, который обладает самым большим разрешением среди смартфонов, оно составляет только 960х640 пикселей.
Таким образом, пользователи смартфонов получают меньше информации в одном «экране». Хотя в данном случае можно воспользоваться маштабированием, эта функция достаточно неудобна. Нужно много скролить, причем не только вертикально, но и в горизонтальном направлении.
Вывод: версия сайта для мобильных устройств должна быть максимально читабельной, простой и не перегруженной информацией. Наиболее значимые данные следует располагать вверху, дабы они были доступны без использования прокрутки. При этом необхожимо брать во внимание все многообразие устройств и их размеров.
2. Не слишком быстрые процессоры.
Несмотря на значительный прогресс в производительности современных смартфонов, который наблюдается в последнее время, они все же не дотягивают до классических ПК. Это накладывает дополнительные ограничения на использование некоторых «тяжелых» элементов кода. К примеру, не стоит увлекаться JavaScript’ами. С некоторыми элементами не сможет справиться браузер гаджета, да и попросту, повышенная нагрузка на процессор будет быстрее садить батарею.
3. Невысокая пропускная способность мобильных сетей.
Крайне редко в 3G-сети пользователь может получить скорость больше 1 мегабита. Поэтому, скорость загрузки страниц ниже, нежели при обычно соединении. Если при этом трафик безлимитный, то оператор может умышленно снижать скорость до непристойно малых значений. Если есть возможность пользоваться Wi-Fi доступом, ситуация, безусловно, улучшается. Но, снова-таки, для публичного доступа соединения в них тоже ограничивают по скорости. В связи с этим, если пользователь заметит, что сайт использует много трафика и грузится медленно, он вряд ли на него вернется.
Поэтому следует позаботиться об оптимизации скорости загрузки и объема отдаваемого трафика мобильной версией сайта. Не следует использовать встроенное видео, автоматически загружаемое при открытии сайта. Такие вещи должны открываться только по ссылке, чтобы решение открывать ее или нет принимал сам пользователь. Еще одним хорошим способом улучшить скорость загрузки является применение технологии lazy load – постепенной загрузки содержимого сайта по мере чтения. То есть информация будет подгружаться во время скроллинга. Подобный эффект используется, например, при чтении комментариев во всем известном Twitter.
4. Особенности сенсорного управления.
Отсутствие мыши или тачпада является одним из основных отличий для навигации между гаджетами и компьютерами. Поэтому, следует учитывать некоторые особенности устройств с сенсорным управлением:
- Отсутствие события наведения (hover). Стили, учитывающие это событие и JavaScript с аналогичным приемом MouseOut, являются ненужными.
- Неточное позиционирование. Нажимать на ссылку 12px-шрифтом совершенно не тяжело. Но на небольшом сенсорном экране сделать это гораздо труднее, особенно если у человека толстые пальцы. Таким образом, основной целью создания мобильной версии сайта является предоставления пользователям таких устройств удобного инструмента навигации.
- Управление жестами. Практически все современные браузеры для мобильных устройств поддерживают жесты. Если в вашем сайте будет реализована поддержка такого управления – это даст значительное преимущество перед конкурентами.
5. Неудобства при использовании qwerty-клавиатуры.
С удобством настольной клавиатуры не может сравниться ни одна аппаратная клавиатура в смартфоне, что уж говорить о программных аналогах гаджетов. Следовательно, не стоит заставлять пользователей набирать объемные сообщения. Для упрощения пользования сайтом рекомендуется реализовать такие полезные функции:
- Автозаполнение поисковых запросов и других форм, сделать их по-возможности максимально простыми.
- Добавить легкий способ ознакомления с последними и наиболее популярными записями или продуктами, желательно без использования поиска.
- Сокращение URL.
6. Слабая поддержка многозадачности.
Реализация многозадачности в мобильных устройствах еще далеко несовершенна. Переключаться между окнами браузеров в смартфоне не очень удобно. Приходится копировать URL и совершать некоторые действия, чтобы открыть новое окно и вернуться обратно к старому, если, например, захочется поделиться прочитанной новостью в Твиттере.
7. Экономия места на размещении панели задач в мобильных браузерах.
Учитывая небольшие размеры экрана гаджетов, панели инструментов в браузерах зачастую спрятаны. Вытаскивать же их на экран не всегда удобно. Следовательно, чтобы посетителям было комфортно перемещаться по сайту, необходимо позаботиться о создании качественной навигации с соблюдением всех правил ее построения.
8. Портретная ориентация дисплея.
Практически все мониторы для настольных ПК и ноутбуков обладают альбомной ориентацией экрана. У смартофонов все наоборот. Несмотря на то, что у подавляющего большинства гаджетов есть функция поворота экрана иногда попросту неудобно держать перевернутое устройство одной рукой. В связи с этим пользователи таких устройств чаще всего просматривают контент именно в портретной ориентации. Это накладывает определенные условия на правила версии страниц для мобильной версии сайта:
- Наиболее рационально верстать сайт в одну колонку.
- Не стоит злоупотреблять слишком широкими элементами. Идеальный вариант, когда картинки, таблицы и прочий мультимедийный контент будет подстраиваться под размеры окна браузера либо в статическом исполнении не будет превышать наиболее распространенную ширину дисплея мобильного устройства.
- Навигация является одним из самых главных элементов сайта, поэтому она должна быть расположена исключительно сверху!
9. Мобильный интернет-серфинг.
Как правило, у людей, которые просматривают интернет-сайты на своих смартфонах, не так много времени на серфинг. Пользователи гаджетов делают это в кафе, библиотеке, во время ожидания встречи и т.п. Таким образом, крайне важно сделать сайт, просматривая который в течение небольшого времени можно было бы получить максимум полезной информации, релевантной поисковому запросу. Способ подачи, полнота и достоверность размещаемой на страницах мобильной версии сайта информации очень сильно влияет на посещаемость ресурса и сохранение постоянных читателей (клиентов).
10. Слабая поддержка Flash-технологий.
Практически в каждой настольной системе установлен Flash. Совсем иная ситуация в мобильных устройствах. Операционки от Apple не поддерживают Flash в принципе. На Android старше версии 2.2 поддержка эти технологии есть, но зачастую пользователи смартфонов отключают ее для экономии ресурсов и увеличения производительности гаджетов. Поэтому использовать Flash в сайтах для мобильных устройств не рекомендуется.
Важность создания мобильной версии сайта переоценить нельзя. Если пользователи сети Интернет являются основными потребителями ваших товаров или услуг, тогда такой сайт просто необходим. Качество его реализации будет существенно влиять на лояльность посетителей и, как следствие, на ваши доходы. Учитывая все вышесказанное, заказывать создание мобильной версии сайта стоит только у профессионалов.
Facebook Вконтакте |