Адаптивная верстка сайта: быть или не быть?

Стратегия поэтапности

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

Преимущества

Заметно.
Запуск адаптивных версий самых просматриваемых страниц (например, главной), направляет усилия туда, где большинство пользователей заметят обновлённый дизайн.

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

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

Более высокие шансы запуска. Фокусировка на одной странице или одной функции — это отличный способ увидеть результат

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

Недостатки

  • Отсутствие целостности.
    Пользователь переходит от блестящего нового дизайна к старому уродливому всего за один клик. Это плохо с точки зрения однородности, так как пользователи воспринимают компанию как одну торговую марку, а не мешанину из разных отделов и приоритетов.
  • Недальновидность.
    Большинство редизайнов, основанных на страницах, сфокусированы на «запуске к третьему кварталу», но довольно часто, на более крупных сайтах, план развёртывания проекта отсутствует.
  • Вероятность зачахнуть на корню.
    В первую очередь необходимо определиться со стратегией и рисками, иначе ваш сайт рискует стать Франкенштейном.

Преимущества

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

Недостатки

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

Настраиваем размеры картинок

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

Мы для каждой картинки добавили описание размеров блока для каждого размера экрана и разберём его на примере первой картинки. Теперь, если экран очень маленький () или просто маленький (), то первый блок с котиком займёт  все 12 ячеек, то есть всю ширину. Если экран среднего размера () — то 4 ячейки, а если большой () или очень большой () — то пусть кот занимает по 2 ячейки.

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

Обратите внимание: чтобы на средних экранах получить одинаковый размер картинок, мы в описание каждой из них добавили одну и ту же команду col-md-4, которая каждому коту даёт 4 колонки, чтобы все были одного размера.    

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

Медиазапросы, используемые в Bootstrap 4

В этом разделе мы с Вами рассмотрим основные медиазапросы, которые используются в Bootstrap 4. Bootstrap это HTML, CSS и Javascript фреймворк для создания адаптивных страниц.

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

Давайте рассмотрим какие точки останова основанные на минимальной ширине (мультимедийная функция min-width) используются в Bootstrap 4:

// Small devices (landscape phones, минимальная ширина области просмотра 576px и выше)
@media (min-width: 576px) { ...код CSS }

// Medium devices (tablets, минимальная ширина области просмотра 768px и выше)
@media (min-width: 768px) { ...код CSS }

// Large devices (desktops, минимальная ширина области просмотра 992px и выше)
@media (min-width: 992px) { ...код CSS }

// Extra large devices (large desktops, минимальная ширина области просмотра 1200px и выше)
@media (min-width: 1200px) { ...код CSS }

Bootstrap в основном использует вышеуказанные диапазоны запросов для макета, системы сеток и компонентов, но иногда используют и медиазапросы, которые идут в другом направлении (заданный размер области просмотра или меньше).

Давайте рассмотрим какие точки останова основанные на минимальной ширине (мультимедийная функция max-width) используются в Bootstrap 4:

// Extra small devices (portrait phones, максимальная ширина области просмотра 576px и ниже)
@media (max-width: 575.98px) { ...код CSS }

// Small devices (landscape phones, максимальная ширина области просмотра 768px и ниже)
@media (max-width: 767.98px) { ...код CSS }

// Medium devices (tablets, максимальная ширина области просмотра 992px и ниже)
@media (max-width: 991.98px) { ...код CSS }

// Large devices (desktops, максимальная ширина области просмотра 1200px и ниже)
@media (max-width: 1199.98px) { ...код CSS }

В Bootstrap 4 существуют также точки останова направленные на определенный сегмент размеров экрана с использованием минимальной и максимальной ширины области просмотра (мультимедийные функции min-width и max-width):

// Small devices (landscape phones, минимальная ширина области просмотра 576px и максимальная ширина области просмотра 768px)
@media (min-width: 576px) and (max-width: 767.98px) { ...код CSS }

// Medium devices (tablets, минимальная ширина области просмотра 768px и максимальная ширина области просмотра 992px)
@media (min-width: 768px) and (max-width: 991.98px) { ...код CSS }

// Large devices (desktops, минимальная ширина области просмотра 992px и максимальная ширина области просмотра 1200px)
@media (min-width: 992px) and (max-width: 1199.98px) { ...код CSS }

Обратите внимание, что точки останова, направленные на опеределенный сегмент используют логический оператор and («И»), который используется для объединения нескольких медиазапросов в один, в нашем случае это значение для минимальной и максимальной ширины области просмотра. Аналогичным образом медиазапросы могут охватывать несколько сегментов точек останова:

Аналогичным образом медиазапросы могут охватывать несколько сегментов точек останова:

// Medium and Large devices (tablets and desktops, минимальная ширина области просмотра 768px и максимальная ширина области просмотра 1200px)
@media (min-width: 768px) and (max-width: 1199.98px) { ...код CSS } 

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

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

Верстка по Flexbox. Часть 2.

Использование CMS — какие лучше

Стоит рассмотреть функции, преимущества и недостатки наиболее популярных бесплатных сервисов.

WordPress

Более 30% сайтов работают на Вордпрессе.

На этой платформе работает более 30% сайтов. С ее помощью создают блоги, новостные ресурсы, визитки. WordPress прост в применении. Удобный интерфейс позволяет новичкам создавать небольшие площадки. Для ВордПресс разработано более 4000 тем и 50000 плагинов. Они устанавливаются на сайт в 1 клик. Темы помогают подбирать подходящий дизайн. Плагины используются для внедрения:

  • средств рассылки;
  • форм;
  • комментариев;
  • галерей.

На специализированном форуме можно общаться с более опытными пользователями CMS.

Webasyst

Платформа для разработки и ведения крупных порталов.

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

Drupal

Профессионалы выбирают Drupal.

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

Joomla

Для работы с Joomla нужны технические навыки.

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

Что даст адаптация сайта для мобильных устройств

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

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

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

Тег img

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

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

  1. URL изображения.

  2. Дескриптора ширины.

Рассмотрим на примере:

Ширина всех доступных изображений указывается в пикселях. По историческим причинам для обозначения пикселей используется символ . В данном примере атрибут содержит три изображения, ширина которых 480, 960 и 1920 пикселей соответственно. Браузер выберет изображение в зависимости от ширины экрана устройтва и его плотности пикселей. Если ширина экрана не превышает 480 css-пикселей, то будет выбрано следующее изображение:

  1. , если коэфициент плотности пикселей равен 1.

  2. , если коэфициент плотности пикселей равен 2 (retina display).

  3. , если коэфициент плотности пикселей больше 2.

Аналогично, если ширина экрана больше 480 css-пикселей, но не превышает 960 css-пикселей, то:

  1. , если коэфициент плотности пикселей равен 1.

  2. , если коэфициент плотности пикселей больше или равен 2.

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

  1. Ширины изображения.

Рассмотрим на примере:

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

  1. Если ширина экрана устройства составляет не более 600 css-пикселей, то изображение на таком экране занимает максимум 480 css-пикселей в ширину.

  2. Если ширина экрана устройства составляет от 600 до 1200 css-пикселей, то изображение на таком экране занимает максимум 960 css-пикселей в ширину.

  3. В противном случае браузер будет подразумевать, что изображение может занимает всю ширину экрана.

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

  1. , если коэфициент плотности пикселей равен 1. Так как ширина экрана устройства не превышает 600 css-пикселей, то изображение на таком экране занимает максимум 480 css-пикселей в ширину.

  2. , если коэфициент плотности пикселей равен 2.

  3. , если коэфициент плотности пикселей больше 2.

Атрибут нужно указывать, если размеры изображения ограничены css стилями. Если атрибут не указан, то по умолчанию он будет иметь значение ), то есть браузер будет подразумевать, что изображение может занимает всю ширину экрана.

7 сервисов для проверки адаптивности сайта онлайн

Приветствую вас! Вот и настало время поговорить про адаптивность сайта. Это как вы наверняка знаете очень важный параметр. С каждым новым днем количество пользователей планшетов и смартфонов увеличивается. У меня на блоге приходит 30% трафика с мобильных устройств. Когда процент мобильного трафика увеличился я стал задумываться об адаптивной верстке, что советую сделать и вам. Что вам это даст? Это позволит повысить лояльность к блогу как поисковых роботов, так и посетителей.

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

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

7 сервисов для проверки адаптивности сайта онлайн

1. Онлайн сервис ami.responsivedesign.is

Вы попали на главную страницу сервиса.

Прокручиваем в самый низ и в поле ввода пишем адрес вашего блога. Жмем на кнопку «Go».

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

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

2. Онлайн сервис deviceponsive.com

Здесь все аналогично, как и в предыдущем сервисе. Вставляем адрес сайта в поле ввода и жмем «Go».

Теперь нам нужно спуститься немного ниже, где мы увидим первое устройство «MacBook», которое имеет разрешение 1280 х 800 пикселей.

Вы можете прокручивать страничку вниз и нажимать на необходимые элементы и проверять адаптивность. Если прокрутить ниже, то вы увидите, как выглядит ваш проект на других устройствах, начиная от разрешения 1280×800, и заканчивая 320×240 пикселей. Этот сервис покажет вам полную картину, в отличие от предыдущего.

3. Онлайн сервис responsinator.com

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

Здесь подписана ширина каждого экрана из устройств, а их здесь предостаточно.

4. Онлайн сервис quirktools.com

Еще один сервис с помощью которого вы проверите адаптивность сайта онлайн. В поле вставляем название веб-сайта и нажимаем «Go».

Что здесь мне нравиться, то что сервис может показать адаптивность даже телевизора)).

5. Онлайн сервис symby.ru

Проделываем знакомые вам шаги и радуемся результату.

6. Онлайн сервис responsive.is

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

7. Онлайн сервис mattkersley.com

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

Проверить сайт на адаптивность к мобильным устройствам с помощью браузера Mozilla

Знаменитый браузер Mozilla Firefox имеет богатый функционал. С помощью этого из инструментов Мозилы мы и проверим сайт на адаптивность. Выполняем следующие шаги: идем в «меню» — «разработка» — «адаптивный дизайн». Эти действия можно проделать с помощью клавиатуры, нажав одновременно несколько клавишей ++.

После проделанных шагов вы увидите следующее.

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

Проверка адаптивности сайта Google

С помощью мега гиганта Google Chrome, также можно проверить адаптивность вашего проекта. Делаем следующее: идем в «меню», далее в пункт «Дополнительные инструменты», и «инструменты разработчика ()».

Далее жмем на иконку, которая изображена на рисунке, либо воспользуйтесь клавишами ++.

Далее, в самой середине страницы вы увидите, как отображается ваш ресурс на мобильных устройствах.

Проверка сайта на адаптивность яндекс

Если вы хотите проверить сайт на адаптивность Яндекс, вам нужно пройти регистрацию в Яндекс. Вебмастер. Заходим в вебмастер, далее находим пункт «Проверка мобильных страниц», нажимаем на этот пункт и смотрим результат.

Заключение

С уважением Вячеслав Коптяков!

История появления адаптивного обучения

На самом деле, вопрос адаптивности преподавания с учётом особенностей обучающихся далеко не новый. Первые научные работы на эту тему встречаются уже в китайских, еврейских и греческих трактатах, написанных в первом веке нашей эры. Однако, автором адаптивной системы обучения считается Б. Ф. Скиннер.

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

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

Добавляем котиков

Мы добавим в статью изображения котиков и посмотрим, как движок сам будет ими управлять в зависимости от размера экрана.

Сначала код, который мы поместим тоже в новый контейнер:

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

Чтобы котики уважали ширину ячеек, в которые их засовывают, пропишем в CSS-стилях специальную команду для тега <img>. Команда должна сказать, чтобы ширина картинки была не больше, чем максимальный размер блока, который под неё выделили:

Этот код нужно вставить в начало страницы между тегами и .

Теперь всё нормально: картинка занимает максимальную ширину, которую ей даёт занять сетка Бутстрапа. Давайте посмотрим, что произойдёт при изменении размеров браузера:

Как проверить адаптивность сайта

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

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

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

  • Откройте сайт в новой вкладке Google Chrome;
  • Держите указатель мыши на целевой странице сайта и щелкните правой кнопкой мыши, Вы увидите меню;
  • В контекстном меню щелкните «Проверить элемент». Откроется окно Chrome Dev Tools;
  • В окне Dev Tools найдите опцию вызова переключить панель инструментов устройства, щелкните ее;
  • При нажатии на панель инструментов «Переключить устройство» откроется эмулятор экрана режима устройства;
  • С помощью этого экранного эмулятора Вы можете протестировать адаптивные области просмотра сайта.

Подготовка к адаптивной верстке

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

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

Впервые в мобильной версии браузера Safari появился метатег области видимости (viewport meta tag), который позволяет разработчикам сайтов контролировать как размер окна просмотра, так и масштаб самой страницы. Впоследствии остальные современные мобильные браузеры осуществили поддержку этого метатега, не смотря на то, что в тот момент он не являлся частью какого-либо веб-стандарта.

Ранее в статье «Метаданные в HTML» учебника HTML мы уже сталкивались с метатегами (HTML элемент <meta>), они предоставляют дополнительную информацию браузеру пользователя о содержимом страницы и могут передавать браузерам дополнительные инструкции о способах отображения страницы на экране, позволяют указать описание страницы, ключевые слова, автора документа и другие метаданные, к которым относится и возможность отмены масштабирования в браузерах мобильных устройств.

Для того, чтобы мобильные браузеры автоматически не изменяли размер страниц сайта, необходимо в теге <head> разместить метатег, который сообщает браузеру, как обрабатывать размеры страницы и изменять ее масштаб:

<meta name = "viewport" content = "width=device-width, initial-scale = 1">
  • Атрибут name задает имя документа метаданным, значение «viewport» дает подсказку браузеру о размере начального размера области просмотра. Функция атрибута content задать значения для этого атрибута.
  • Значение width=device-width атрибута content сообщает, что ширина страницы устанавливается в соответствии с размером экрана устройства в аппаратно-независимых пикселях (device-independent pixel, dip), что позволяет странице пересчитывать положение элементов для корректного отображения на различных экранах. По аналогии допускается указать значения для высоты height=device-height.
  • Значение initial-scale=1 атрибута content сообщает браузеру, что необходимо установить соответствие 1:1 для пикселей CSS и аппаратно-независимых пикселей вне зависимости от ориентации устройства (альбомной или портретной).

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

Доступные значения:

Значение атрибута Определение
width Определяет ширину в пикселях области просмотра (значение — положительное целое число или device-width).
height Определяет высоту в пикселях области просмотра (значение — положительное целое число или device-height).
initial-scale Определяет соотношение между шириной устройства (device-width в портретном режиме или device-height в ландшафтном режиме) и размером области просмотра. Чем больше число, тем выше масштаб. Значение — положительное целое число от 0.0 до 10.0.
minimum-scale Определяет минимальное значение zoom (оно должно быть меньше или равно maximum-scale). Значение — положительное целое число от 0.0 до 10.0.
maximum-scale Определяет максимальное значение zoom (оно должно быть больше или равно minimum-scale). Значение — положительное целое число от 0.0 до 10.0.
user-scalable Логическое значение, которое определяет, может ли пользователь увеличить масштаб веб-страницы. Значение по умолчанию yes (пользователь может увеличивать масштаб).

Рекомендации по мобильному веб-дизайну

1.Поймите пути перемещения пользователей

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

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

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

2. Откажитесь от навигации

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

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

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

Ниже приведен пример гамбургер-меню, расположенного в правом верхнем углу сайта.

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

Итак, что важно сохранить?

3. Ограничьте количество вариантов

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

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

Ниже продемонстрирован хороший пример того, как Shopify ограничивает варианты на своей домашней странице.

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

4. Упростите все

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

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

5. Изображения и видео

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

Ниже приведен пример контекстно-релевантного изображения.

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

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

6. Размещение

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

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

7. Ссылка на контактную информацию

Мобильные пользователи хотят работать быстро. У них не хватает терпения пролистывать страницы контента, чтобы найти именно то, что они ищут.

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

При нажатии на номер с гиперссылкой на сайте BestBuy автоматически открывается клавиатура мобильного устройства.

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

Заключение

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

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

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