Заявка
Данные не будут опубликованы или переданы третьим лицам.
Если хотите указать дополнительные контактные данные, оставьте их в сообщении
Ещё...
формирование имиджа, репутации компании, быстрый рост продаж
Улучшение продающих возможностей сайта, оценка слабых мест
заказать предложение
предыдущаяследующая

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

12 ноября 2013г.

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

Размер экрана

Это отличие очевидно, экран телефона отображает меньше, чем монитор компьютера. Причём, основных фактора два:

  • Меньше физический размер. Диагональ экрана смартфона - 3-4 дюйма, планшета - 7-10, то время как для среднего ноутбука она составляет 15 дюймов, а для настольного монитора - 19.
  • Ниже разрешение. Разрешение экрана даже самых продвинутых смартфонов обычно составляет не больше 960 на 640 пикселей, а это значит, что они сильно отстают от современных Full HD мониторов.

Чем меньше размер экрана и разрешение, тем меньше информации пользователь получает зараз. Благодаря мобильным браузерам этот недостаток частично можно исправить, однако в целом факт остаётся фактом: текст быстро становится нечитаемым при уменьшении масштаба, и это создаёт массу неудобств.

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

Скорость процессоров

Сегодня мобильные процессоры по производительности уже догоняют настольные, однако большинству моделей ещё очень далеко до параметров обычных процессоров. Поэтому максимально оптимизируйте код. Дважды подумайте перед тем, как использовать JavaScript, ведь повышенная нагрузка на процессор быстро посадит батарею телефона.

Пропускная способность

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

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

Сенсорные экраны

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

  • Отсутствие события :hover (наведение). Стили, которые используют это событие, как и JavaScript с MouseOut, можно и нужно удалять. Они не будут хорошо работать в мобильной версии, даже несмотря на то, что некоторые мобильные браузеры эмулируют наведение.
  • Ниже точность позиционирования. Нажать на мобильном экране на текстовую ссылку размером 12 пикселей, особенно для человека с большими пальцами, - слишком сложная задача. Не забывайте, что основная причина для разработки мобильной версии вашего ресурса - сделать его удобным для пользователей смартфонов.
  • Почти все браузеры для мобильных поддерживают управление жестами. Используйте эту особенность при создании мобильной версии. Jquery Mobile позволяет привязать к жестам такие действия как листание страниц, перемещение между слайдами в галерее и многие другие.

Клавиатура

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

  • сокращенные URL;
  • автозаполнение поиска и других полей;
  • максимальное снижение использования поисковых инструментов: всё самое свежее и популярное должно быть на виду;
  • простые формы опять же с использованием функции автозаполнения;

Многозадачность

Многозадачность лишь недавно стала частью мобильного мира, а потому переключение между окнами браузера до сих пор представляет большую проблему. К примеру, вы написали пост в своём блоге и кто-то из ваших друзей захотел поделиться им в Твиттере. Однако неудобства, которые доставляет необходимость копировать ссылку, переходить в мобильную версию Твиттера, а потом возвращаться обратно, могут на корню погубить желание распространять пост. Не забывайте разработать решения, учитывающие такие ситуации, для мобильной версии сайта.

Браузеры

Панели инструментов в мобильных браузерах чаще всего скрыты ради экономии места, и каждый раз вытаскивать их для навигации - не самый удобный вариант. Поэтому “хлебные крошки” и удобные меню в мобильных версиях сайтов особенно актуальны.

Ориентация экрана

Настольные мониторы обычно поддерживают альбомную (горизонтальную) ориентацию экрана. Мобильные же устройства чаще всего имеют портретную ориентацию, а при переключении на альбомную смартфон становится неудобно держать в одной руке. Об этом нужно помнить при формировании страницы:

  • Верстайте в одну колонку. Используйте место на экране рационально.
  • Не используйте слишком широкие элементы, такие как таблицы, Flash под ширину экрана.
  • Располагайте навигацию сверху, просто потому, что это удобнее.

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

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

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

Использование Flash

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

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

Отзывы
ООО "ВкусоАроматика"

Хочу выразить благодарность команде CTR-web за созданный сайт. После посещения немалого количества агентств выбрали это, поскольку только здесь удалось найти общий язык и, по моему мнению, люди разбираются в конверсии.

Сейчас качественно сделанный сайт это далеко не прихоть руководителей, а площадка по конвертированию интернет трафика в реальных клиентов. Спасибо менеджеру Юлии за качественное ведение проекта, работа была выполнена в оговоренные сроки.

- Гончаров Константин Валерьевич, Зам.директора ООО "ВкусоАроматика"
Компания “Финский дом”
Транспортно-экспедиционная компания “Альянс карго”

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

Так же хотим отметить быстроту и качество выполнения поставленных задач сотрудниками Вашего агентства. Хотим пожелать и в дальнейшем действовать также оперативно и слаженно в работе со своими клиентами.

- Директор компании ООО "Альянс Карго" В.С.Яковлев
Интернет-магазин “Сибирский Самогон”

Сотрудничаем с компанией "АИМ Ситиар-Веб" уже около трёх лет.

За это время сложилось полное взаимопонимание. В "Ситиар-Веб" понимают, что мы хотим видеть у себя на сайте, а мы начали больше понимать как всё это работает.

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

Часто знакомые и незнакомые люди, посетив наш сайт, спрашивают как связаться с разработчиком и мы постоянно рекомендуем "Ситиар-Веб" всем кто заинтересован в качественной интернет поддержке.

- С уважением директор компании "Сибирский Самогон" Сбоев Михаил
TAO Healing

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

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

Очень жаль, что мы сразу не обратились в агентство Ситиар. Наш сайт получился очень красочным и гармоничным. Порадовали практические советы Юлии по размещению контента. Сделали дизайн с эффектом паралакса. Я рекомендую эту компанию всем.

- Наталья и Херке Вирсма
Наши партнеры:
наша компания:
bitrix
bitrix ModX Яндекс директ google begun mail.ru rucenter
наверх