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

Заказать звонок
  • Новосибирск
Блог
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-продвижения

ТИПОВЫЕ РЕШЕНИЯ

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

 Интернет-магазин       Корпоративный сайт


ИНДИВИДУАЛЬНЫЕ РЕШЕНИЯ

Укажите, пожалуйста, следующую информацию, чтобы мы смогли подготовить оценку Вашего проекта:

  • Разработка нового сайта
  • Переработка существующего

ТИПОВЫЕ РЕШЕНИЯ

Стоимость и состав предложения по типовому решению вы можете узнать 
скачав наше коммерческое предложение:

 Продвижение сайта


ИНДИВИДУАЛЬНЫЕ РЕШЕНИЯ

Укажите, пожалуйста, следующую информацию, чтобы мы смогли подготовить оценку Вашего проекта:

от 12000 до рублей в месяц

Работать с нами не только легко, но и выгодно.
Мы с удовольствием даем скидки новым клиентам:


• 2% — если вы не исправляете наш типовой договор.
• 3% — если вы вносите предоплату в течение 5 дней после обращения к нам.
• 15% — на индивидуальную разработку сайта при одновременном заключении договора на продвижение сайта в течение 12 месяцев.

Все скидки суммируются! И вы можете получить до 20% честной скидки на разработку сайта!

Конечно же предусмотрены скидки
и для наших любимых, постоянных клиентов!
О них узнавайте у вашего менеджера!

Спасибо, не надо.

Заказать звонок