О компанииВакансииНовостиБлогУслуги и ценыПортфолиоИндивидуальная разработкаФирменный стильКонтактыСхема проезда
Получить консультацию

Новосибирское агентство интернет-решений "Айкон" 20 лет занимается разработкой, поддержкой и продвижением сайтов.

icon phoneЗаказать звонок
  • Новосибирск
ГлавнаяБлогАдаптивный сайт - как не потерять мобильных клиентов?
Блог
1212.16

Адаптивный сайт - как не потерять мобильных клиентов?

Согласно нашим аналитическим данным, более 35%, а в некоторых нишах и более 50% пользователей сайтов посещают их с мобильных устройств - смартфонов и планшетов. Когда пользователи мобильных устройств открывают обычную (desktop) версию сайта, многие элементы для них могут быть неудобными.

 

Особенности просмотра неадаптивных сайтов на мобильных устройствах

  • Необходимость масштабирования (pinch-to-zoom) и прокрутки сайта

  • Неудобства в работе с управляющими элементами (поля и кнопки)

  • Сложности в целостном восприятии сайта, необходимо постоянно менять область просмотра и прокручивать сайт “во все стороны”

 

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

 

 

Отношение поисковых систем к адаптивным сайтам

Значительным плюсом создания адаптивной версии сайта является положительное отношение к адаптивным сайтам поисковыми системами. Это значит, что в мобильном поиске Яндекс и Google адаптивный сайт будет ранжироваться выше, чем неадаптивный, а значит вы получите больше трафика и продаж.

 

Как проверить, есть ли у сайта адаптивная версия?

Многие сайты, которые были разработаны в 2016 году, а особенно те, которые сделаны на базе готовых решений Wordpress или 1С-Битрикс, уже имеют адаптивную версию сайта и отлично подходят для просмотра на мобильных устройствах.

 

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

 

Проверка сайта paeserussia.com при помощи сервиса Google:

 

 

Адаптивная или мобильная версия?

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

 

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

 
Пример адаптивной версии сайта:
 

  

 

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

 

Процесс разработки адаптивной версии сайта

  1. Разработка макетов дизайна

Для того, чтобы разработать адаптивную версию сайта, в первую очередь необходимо разработать макеты адаптивного дизайна для каждого из выбранных разрешений. Как правило, для адаптивной версии сайта используются два дополнительных разрешения - это 768 пикселей по ширине (для планшетов) и 320 пикселей по ширине (для смартфонов). При необходимости, до этапа дизайна прорисовываются адаптивные прототипы, которые позволяют понять интерфейс адаптивной версии сайта до этапа дизайна.

 

 

  1. Адаптивная верстка сайта

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

 

Что важно для разработки адаптивной версии сайта?

  1. Отсутствие горизонтальной прокрутки

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

 

 
  1. Подготовка изображений

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

 

Приведем пример: на сайте есть блок преимуществ (4 штуки) с изображениями формата 200х300 пикселей. Для адаптивной версии сайта, четыре преимущества, скорее всего, будут расположены в одну колонку по одному преимуществу в ряд.

 

 

Для обычного 5-дюймового смартфона с разрешением 1280х720, данное изображение будет отображаться на площади уже около 600х900 пикселей в зависимости от макета дизайна мобильной версии. Это значит, что данное изображение должно быть загружено в разрешении 600х900 пикселей, либо в большем разрешении, учитывая другие прочие типы дисплеев.

 
  1. Мобильное меню

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

 

 

  1. Длина сайта

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

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

 

 

  1. Размер шрифта

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

 

 

  1. Элементы интерфейса в мобильной версии сайта

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

 

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

 

 
  1. Скажите “нет” технологии Flash

Технология Flash постепенно исчезает из веб-индустрии, и множество мобильных устройств перестают ее поддерживать. Если говорить про обычную версию сайта, то на ней поддержка Adobe Flash тоже постепенно прекращается, например, браузером Google Chrome планируется завершение поддержки данной технологии в 2017 году.

 

 

  1. Технические параметры, необходимые для адаптивного сайта

Существуют важные технические параметры, которые нужно учитывать при создании адаптивной версии сайта. С некоторыми из них можно ознакомиться на специальных страницах, подготовленными компаниями Яндекс и Google.

Подведем итоги

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

 
 

 

Читайте далее: Актуальность SEO-продвижения