Как адаптировать сайт под разные разрешения

Содержание

Введение

Выделим две основные категории реализации дизайна: мобильные сайты и адаптивные. Мобильная версия сайта – это отдельная версия, разработанная специально для смартфонов или планшетов. Контент такого сайта может полностью отличаться от представленного на своем «старшем» десктопном брате. Адаптивная же версия полностью перестраивает содержимое страницы в зависимости от устройства, меняя расположение контентных блоков, их содержание и способы взаимодействия (например, управление с помощью прикосновения к экрану). 

Мобильная версия сайта pda.yandex.ru

Мобильные версии сайтов разрабатывают уже давно — возможно, кто-то ещё помнит версию сайта http://pda.yandex.ru, где на манер первых поисковиков хранился каталог мобильных сайтов. В то время редкие «продвинутые» сайты имели 2 версии: десктопная (со всей функциональностью) и мобильная (урезанная, для гиков с коммуникаторами на Windows Mobile, Symbian или других мобильных ОС). Такое решение на тот момент закрывало потребности пользователей. 

Но уже с ростом популярности смартфонов и увлечением скорости мобильного интернета, в 2012 и 2013 годах начала активно продвигаться парадигма разработки адаптивных сайтов. Если быть откровенным, сначала я не увидел всего потенциала и встретил новые веяния с легким скепсисом. Это было связано с тем, что еще в 2000-е при разработке сайтов мы часто использовали «резиновую верстку», которая фактически является прародителем адаптивных сайтов. На тот момент приходилось учитывать большой парк мониторов, от совсем «олдскульных» ЭЛТ с шириной экрана 640 пикселей до первых ЖК-мониторов с разрешением 1280 пикселей (а в некоторых случаях и 1600 пикселей). Принцип резиновой верстки состоит в изменении ширины блоков и иногда масштабировании текста и фото. 

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

Сейчас часто можно встретить евангелистов подхода Mobile First, при котором при проектировании интерфейса сайта предлагается ставить в приоритет мобильную версию, а десктопную версию делать ее логичным продолжением. В Uprock выбор приоритетов не так категоричен — мы исходим из целей и задач проекта. В зависимости от выбора устройства отличаются и пользовательские сценарии. Например, часто для пользователя домашний компьютер является основным рабочим инструментом, с помощью которого гарантированно будут осуществляться сложные функции (оплата, переводы, отправка данных), а мобильные устройства используются для вторичных функций (получение информации, сохранение данных). С учетом этого расставляются приоритеты и проектируются все промежуточные состояния сайта. 

Конечно, иногда бывают случаи, когда мобильная версия более приоритетная. Например, когда мы создавали сайт-фотоконкурс для «Билайн» с интеграцией Instagram, почти 90% трафика приходило с мобильных устройств. Так что выбор решения исходит из самой задачи.

Есть что скрывать

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


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

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

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

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

Программа обучения: «HTML-верстка: с нуля до первого макета»

Для чего нужна адаптация

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

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

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

Поисковые системы и ранжирование

Компании Гугл и Яндекс в 2015 и 2016 году соответственно, заявили о влиянии адаптации на выдачу. Польза сайта для посетителей – главное требование поисковиков. Изначально, изменения в ранжировании прослеживались исключительно при использовании мобильных устройств. Сейчас это правило распространяется и на версию для ПК. Рассмотрим основные причины развития ситуации.

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

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

Влияние на конверсию

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

Рекламные кампании

Распределение трафика по активностям и приложениям

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

Преимущества и недостатки создания адаптации

Подытожим все ранее сказанное, чтобы выделить основные достоинства решения:

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

Если же говорить о недостатках адаптации, то сюда могут входить следующие пункты:

упрощение интерфейса, функциональности ресурса, что означает уменьшение списка возможностей пользователя; затраты средств на привлечение специалистов или расход времени при самостоятельной адаптации; комплексная переработка содержимого площадки; необходимость разработки ресурса «с нуля» в случае, если его возраст превышает 3-5 лет

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

Рациональность этого решения подтверждает статистика: по данным Яндекс.Метрики в России трафик с мобильных устройств (более 49%) уже в начале 2019 года превзошел объем посещений сайтов с ПК (почти 47%)

Это означает, что владельцу проекта необходимо затратить время и/или деньги для получения положительного результата, с учетом разнообразия разрешений экранов. Рациональность этого решения подтверждает статистика: по данным Яндекс.Метрики в России трафик с мобильных устройств (более 49%) уже в начале 2019 года превзошел объем посещений сайтов с ПК (почти 47%).

Демонстрация распределения трафика в Яндекс.Метрике

Как сделать мобильную версию сайта?

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

Кстати на вордпресс большинство новых премиальных тем поддерживают мобильную версию, а также amp страницы. У нас есть полное руководство «Как создать сайт на wordpress«, читайте и создавайте адаптивные вордпресс сайты.

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

Что выбрать — адаптивный дизайн или мобильную версию

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


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

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

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

Мобильная версия

Мобильная версия –  фактически новый сайт, который чаще всего располагается на поддомене основного: m.site.ru, mobile.site.ru и т.п. С точки зрения SEO это не слишком хорошо из-за большого количества условных редиректов с основной версии на мобильную. Все-таки site.ru/page и m.site.ru/page – разные страницы с точки зрения поисковых систем.

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

Разумеется, этот вариант стоит дороже, чем адаптивный дизайн.

Однако совсем не обязательно платить огромные деньги за создание мобильной версии. К примеру, сайт dudamobile.com сделает это для вас за $9 в месяц. Можно оплатить пару месяцев, чтобы почувствовать разницу.

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

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

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

Если нет доступа к странице

Если у инструмента не будет доступа к странице (например, из-за неисправности сайта или проблем с интернет-подключением), вы увидите сообщение об ошибке.

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

Если на странице содержатся незагружаемые ресурсы

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

  • Если вы подождали достаточно времени, но ресурс не загрузился, попробуйте снова запустить тест. Если проблема не исчезнет, рекомендуем разместить сайт у другого хостинг-провайдера или попробовать найти и устранить неполадки хостинга.
  • Если ресурс не найден по указанному адресу (ошибка 404), исправьте URL.
  • Если ресурс недоступен без регистрации, проверьте, могут ли его открывать анонимные пользователи (при тестировании имитируется их поведение).
  • Если ресурс блокирует роботу Google доступ с помощью файла robots.txt, есть два варианта решения проблемы. Ресурс важен и принадлежит вам? Разблокируйте доступ для робота Google самостоятельно. Ресурс располагается на другом сайте? Обратитесь к владельцу ресурса с просьбой предоставить роботам Google доступ.

Как разблокировать важные ресурсы

Блокировка некоторых ресурсов существенно влияет на распознавание страницы. Например, если заблокировано крупное изображение, то страница, не оптимизированная для просмотра на мобильных устройствах, может быть ошибочно помечена как оптимизированная, а блокировка файла CSS может привести к ошибкам в применении шрифтов. В этом случае блокировка ресурсов может сказаться как на оценке оптимизации для просмотра на мобильных устройствах, как и на возможности просканировать страницу. Убедитесь, что файл robots.txt не блокирует роботу Googlebot доступ к важным ресурсам.

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

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

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

Первый способ: адаптивный дизайн (картинка с адаптивным дизайном) 

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

К плюсам можно отнести:

Но есть и минусы:

  1. Время загрузки сайта — часто адаптивный дизайн увеличивает время загрузки сайта ввиду технических нюансов при его разработке. Но можно минимизировать этот недостаток, выбрав только самые часто встречающиеся разрешения экранов мобильных устройств. Ниже представлен список таковых, Вы можете выделить для себя приоритеты и сверстать сайт под одно из них или несколько:
  • 320 px — для мобильных устройств в портретной ориентации;
  • 480 px — для мобильных устройств в альбомной ориентации;
  • 600 px — планшеты с небольшим размером дисплея и современные смартфоны;
  • 768 px — для планшетов в портретной ориентации и современных смартфонов;
  • 1024 px —для современных планшетов в альбомной ориентации и нетбуков (тот же Apple Ipad mini в пример);

Адаптивный дизайн подойдет далеко не каждому интернет-ресурсу. По статистике, 95% «мобильных» посетителей заходят на сайт с телефона или планшета узнать интересующий адрес или телефон искомого магазина или организации. Если адаптивный дизайн показался посетителю неудобным, то у него нет выбора другой версии сайта. Например, мобильную версию можно отключить и продолжить изучать исходную версию.

Несмотря на эти недостатки, адаптивная верстка имеет огромную популярность даже среди «поисковых гигантов», например, таких как Google.

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


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

Преимущества данного метода:

  1. Скорость загрузки сайта в мобильной версии достаточно быстрая даже для пользователей со слабой скоростью соединения.
  2. Если Вам не по душе интерфейс, или функционал мобильной версии недостаточен для решения вопроса, то Вы всегда сможете отказаться от неё и перейти на основной сайт.
  3. Фактор удобства в навигации, изучения контента – несомненный плюс такой версии сайта. В общем-то для этого она и разрабатывается.
  4. Владельцу или разработчику мобильной версии очень просто редактировать информацию. Ведь обычно она является урезанной версией основного сайта и, соответственно, информации в ней на порядок меньше.

Недостатки:

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

С технической точки зрения, мобильная версия имеет один большой недостаток – это другой URL-адрес. В большинстве случаев он является приставкой к основному доменному имени (m.основнойсайт.ru). Почему недостаток? Потому что велика вероятность дублирования контента с основным сайтом, а также попадание на 404-страницу — щелкая в выдаче по странице основного сайта, ввиду ограниченного функционала мобильной версии, таковой страницы в ней может не существовать

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

«Удвоенное внимание» – имейте ввиду, что редактируя информацию на основном сайте, нельзя забывать и о мобильной версии.

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

Третий способ: RESS (Responsive Design + Server Side) 

Ещё один из способов адаптации сайта к мобильным устройствам – это технология RESS (Responsive Design + Server Side). Этот метод подразумевает выполнение адаптированного дизайна за счет серверных ресурсов, что увеличит время загрузки сайта, позволит использовать таргетирование и настроить верстку под конкретное мобильное устройство. Но такой способ довольно сложен в реализации и технология определения устройств до сих пор работает несовершенно.

Данный метод подходит большинству интернет-ресурсов.

Оформление контента

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

Несколько советов:

  1. Необходима четкая структура текста для удобства беглого ознакомления.
  2. Восприятие информации обеспечивают списки, графики, таблицы.
  3. Рекомендуется использовать стандартный шрифт.
  4. Не стоит запрещать масштабирование страницы в браузере, но можно указать ограничения.
  5. Чтобы предотвратить выход изображения из зоны просмотра, необходимо задать инструкцию в таблице CSS: img { max width: 100% }.
  6. Лучше отказаться от фиксированных позиций и размеров в пикселях, а при их использовании – проявлять аккуратность.
  7. Альтернатива ссылок – кнопки. С мобильного устройства их проще нажать, а вероятность тапнуть по соседним ссылкам снижается.
  8. Рекомендуется упростить форму обратной связи, а также разметку телефонного номера.

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

Неправильное использование контейнеров и размеров шрифта

JavaScript

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

В этом разделе описываются рекомендации Google по применению кода JavaScript в адаптивном дизайне.

Распространенные конфигурации

Ниже перечислены три самых распространенных способа реализации JavaScript на сайтах для мобильных устройств.

  • Адаптация с помощью JavaScript. В этом случае для всех устройств используется один и тот же код HTML, JavaScript и CSS. Код JavaScript может менять форматирование и механизмы работы страницы в зависимости от устройства. Если на веб-сайте используется JavaScript, мы рекомендуем выбирать именно эту конфигурацию.
  • Комбинированное определение среды. В этой конфигурации используется как JavaScript, так и функция определения типа устройства сервером. В результате на разных платформах отображается разный контент.
  • Динамическое использование JavaScript. В этом случае всем устройствам отправляется один HTML-код, но код JavaScript отправляется с URL, который динамически предоставляет разные варианты этого кода для разных устройств.

Ниже все эти конфигурации рассматриваются подробнее.

Адаптация с помощью JavaScript

При этой конфигурации всем устройствам предоставляется один и тот же контент (код HTML, CSS и JavaScript, а также изображения). Код JavaScript может менять форматирование и механизмы работы страницы в зависимости от платформы. Это тот же алгоритм, который применяется в адаптивном дизайне с CSS-запросами медиа.

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

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

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

Комбинированное определение среды

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

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

Поскольку сервер отправляет в ответ на запрос разные варианты кода HTML с учетом агента пользователя, комбинированное определение среды можно отнести к типу конфигурации с динамическим показом. При запросе URL, предоставляющего разные варианты кода HTML, на сайте должен быть HTTP-заголовок Vary: User-agent. Подробную информацию об этом можно найти здесь.

Динамический показ JavaScript

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

В этом случае рекомендуем реализовать отправку файла JavaScript с помощью HTTP-заголовка Vary: User-agent. Тогда робот Googlebot и системы веб-кеширования будут знать, что код JavaScript может различаться в зависимости от агента пользователя, и Googlebot обработает файл корректно.

Изображения подстраивающее под размер контейнера.

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

Чтобы так не случалось применим к элементам img следующее css свойства: max-width: 100% это гарантирует что изображение не сможет иметь размер больше чем контейнер по горизонтали.


Как видно из этих трех картинок, третья не в полностью заполнила нижнюю часть контейнера, потому что у неё отличаются пропорции от двух предыдущих картинок. Чтобы картинка заполнила весь контейнер не только по ширине, но и высоте добавим свойство min-height: 100%;

Картинки растянулись игнорируя соотношения ширины и высоты. Чтобы картинка сохраняла пропорции добавим object-fit: cover — это свойство позволяет независимо от введенных размеров картинки сохранять пропорции, при этом происходит ее увеличение таким образом, чтобы заполнить весь контейнер.

Пример кода:

Исправление «Ошибка перенаправления»

Происходит, как правило, когда ресурс, на который направляет ссылка (изображение, скрипт, файл), пытается произвести редирект, но Googlebot может неправильно это интерпретировать или просто отказаться его исполнять. Например, веб-сайт работает по защищенному протоколу безопасности https, но в ссылке указан – http.

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

Соответствует ли оформление сайта вашим бизнес-целям?

Эффективность сайта зависит не только от скорости загрузки и удобства навигации, но и от соответствия вашим бизнес-целям.

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

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

Увеличение объема онлайн-продаж

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

Увеличение количества звонков

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

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

Привлечение потенциальных клиентов

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

Привлечение посетителей в магазин

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

Хранение и предоставление информации

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

Работа с веб-мастером

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

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

Часть 2. Как оптимизировать объявления Google Рекламы для мобильных устройств  

Преимущества Отзывчивого Сайта

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

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

Ниже мы более подробно описываем преимущества отзывчивого сайта.

1. Лучше для SEO

Отзывчивый дизайн означает, что сайт использует те же URL и HTML независимо от устройства, из которого на него заходят. Благодаря этому Google намного проще исследовать, индексировать и управлять контентом такого сайта. В результате SEO вашего сайта будет намного эффективней. 

2. Не Нужно Создавать Новый Дизайн Сайта

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

Таким образом, вы сэкономите много времени и энергии. 

3. Легче в Управлении и Экономней

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

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


С этим читают