Топ-100

Создание мобильной версии сайта: must have в 2021 году

23 February, 2021

Анна Марчук

41 мин. чтения

Согласно недавним исследованиям, количество пользователей, выходящих в интернет при помощи мобильных телефонов и планшетов превысило 60% от числа всех пользователей интернета. И этот показатель продолжает уверенно набирать обороты. Благодаря современным гаджетам люди быстро находят нужную информацию, выбирают товары и покупают их. Такое увеличение мобильных пользователей заставило маркетологов, дизайнеров и разработчиков и даже поисковые системы задуматься о качественном отображении информации на экране современных смартфонов. 

Разберемся подробнее, что такое мобильная версия сайта и на какие нюансы следует обратить внимание. 

Зачем нужна адаптация сайта под мобильные устройства

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

Оптимизация сайта под мобильные устройства позволяет веб-сайту правильно отображаться на любом устройстве и адаптироваться к разрешению больших и малых экранов мобильных устройств. Это позволяет не только охватить более широкую аудиторию за счет адаптации контента к устройствам с меньшими экранами и более слабым доступом к Интернету, но и положительно сказывается на SEO продвижение. 

Выбираем способ разработки: мобильная версия и адаптивный дизайн

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

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

Адаптивный дизайн

Адаптивный веб-дизайн — это метод разработки страницы или сайта с динамически меняющимся внешним видом или макетом в зависимости от размера экрана устройства пользователя, будь то настольный компьютер, ноутбук, планшет или смартфон. Компоновка меняется в зависимости от размера и возможностей устройства. 

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

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

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

Создание мобильной версии сайта на поддомене обычно происходит на отдельном URL-адресе с приставкой m. или mobile к основному домену, например m.yoursite.com. Посетитель основного сайта будет перенаправлен на мобильную версию, если он использует смартфон или планшет.

Создание сайта для мобильных устройств позволяет сделать работу удобной для всех, а новые версии таблиц стилей (CSS3) позволяют персонализировать верстку под любой размер экрана.

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

Выбор можно сделать при помощи простого анализа: используйте правило 80/20. 

  • Если 80% вашей целевой аудитории используют настольные компьютеры, выбирайте адаптивный дизайн; 
  • Если 80% используют смартфоны — используйте мобильную версию. 
Реальная статистика сайта Art-Sites

Реальная статистика сайта Art-Sites

Где взять эту информацию? Начните с использования аналитики Google или метрики Yandex. Там вы сможете узнать с помощью какого устройства пользователи заходят на сайт. Также можно просто провести опрос среди своих клиентов.

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

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

  • Посещаемость сайта

Согласно статистике больше 60% покупателей ищут услуги и товары в интернете с мобильных устройств. И это число с каждым днем только увеличивается. В связи с этим Google изменил алгоритмы выдачи при мобильном поиске. Согласно статье, опубликованной в журнале Search Engine Journal от 14 октября 2020 года, отсутствие мобильной версии негативно повлияет на рейтинг сайта в результатах поиска Google. Сайты, оптимизированные для мобильных устройств, получают более высокий рейтинг в результатах поиска. Если пользователь зашел в интернет со смартфона, то Google сначала покажет ему только те сайты, у которых есть мобильная версия. Такие площадки получают больше трафика – в то время как все остальные теряют потенциальных клиентов.

  • Снижение показателя отказов

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

  • Скорость загрузки

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

  • Позиция в результатах поиска Google

Google открыто признал, что если у сайта нет мобильной версии (или он недоработан), то при поиске на мобильных устройствах страница будет ниже в результатах выдачи. Более того, с марта 2021 года сканирование и продвижение веб-сайтов будет полностью переключено на индексацию, ориентированную на мобильные устройства.

  • Прямой контакт с потенциальными клиентами

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

  • Новые возможности продвижения

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

  • Интеграция с офлайн-медиа

Мобильные устройства уникальны своей способностью перенаправлять в считанные секунды с офлайн-медиа в онлайн с помощью QR-кодов. QR-коды могут отображаться в распечатанном виде, а затем при сканировании смартфоном перенаправлять сразу на URL-адрес сайта. Это означает, что ваша реклама, брошюры, плакаты — могут содержать QR-коды, которые будут отправлять пользователей на мобильные целевые страницы, содержащие гораздо больше информации, чем может быть предоставлено на печатной странице. 

Как создать хороший мобильный сайт?

Так, как сделать сайт адаптивным под мобильные устройства и на что следует обращать внимание? 

Если ваш веб-сайт или интернет-магазин основан на готовом решении, таком как WordPress, Tilda, Wix, Joomla, Webasyst или PrestaShop, вы можете адаптировать его под мобильные устройства самостоятельно. Все, что вам нужно сделать, это реализовать адаптивный шаблон, который позволит пользователям смартфонов и планшетов без проблем использовать ваш сайт. В хороших шаблонах это можно сделать одним щелчком мыши. Существуют также специально разработанные плагины, которые позволяют создавать мобильную версию веб-сайта. Но при самостоятельной настройке, учитывайте что существует риск, что все пойдет не так просто и гладко, как это может показаться на первый взгляд. Качественная разработка мобильных версий сайтов, безусловно, возможна только в том случае, если вы доверите это профессионалам!

Рекомендации по адаптации сайта под мобильные устройства

Рассмотрим подробнее на что следует обращать внимание при адаптации сайта под современные гаджеты в 2021 году.

Избегайте объемного содержания.

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

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

Как этого избежать?

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

Акцентируем на том, что шрифт всегда должен быть достаточно большим, чтобы его было удобно читать.

Используйте большие кнопки.

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

Удаление всплывающих окон.

В смартфонах достаточно неудобно закрывать всплывающие окна. Во-первых, кнопка «X» обычно маленькая, и на нее сложно попасть. Кроме того, желание закрыть окно часто заканчивается переходом на новую подстраницу.

Обеспечьте простой и интуитивно понятный поиск.

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

Простое меню.

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


Призывы к действию.

Призыв к действию — также известный как CTA — это изображение, баннер, или фрагмент текста, который буквально призывает пользователя осуществить определенную форму действий (купить, перейти, заказать, зарегистрироваться). 

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

Оптимизация скорости.

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

Компания Art-Sites специализируется на разработке качественных сайтов любой сложности. У нас вы можете заказать адаптацию сайта под мобильные устройства с учетом особенностей и целей Вашей организации. Мы готовы предложить вам детальное коммерческое предложение, где будут указаны рекомендации по отображению сайта на мобильных устройствах для увеличения конверсии и продаж. Наши менеджеры расскажут сколько стоит сделать мобильную версию сайта, в зависимости от cложности функциональной версии и дизайна. 

Настройка и ведение Google Adwords


Настройка и ведение Yandex Direct


SMM (реклама в соц. сетях)


SEO


Разработка сайтов-каталогов


Разработка интернет-магазинов


Создание Landing Page


Разработка сложных интернет-проектов


Презентация или marketing-kit


Банеры, флаера и визитки


Разработка логотипа


Письма для рассылок


Корпоративный стиль