Адаптивная верстка сайта: гайд для начинающих

Адаптивная верстка сайта: гайд для начинающих

Адаптивная верстка сайта: гайд для начинающих
Время чтения: 19 минут
Отправим материал вам на:

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

Из этой статьи вы узнаете:

  1. Что такое адаптивная верстка сайта
  2. Зачем нужен адаптивный дизайн сайта
  3. Чем адаптивная верстка лучше мобильного приложения
  4. Основы адаптивной верстки сайта
  5. Как её грамотно сделать
  6. Адаптивная верстка шапки сайта и главной страницы
  7. Как проверить результат работы
  8. Типичные ошибки адаптивной верстки сайта

Адаптивная верстка сайта – что это такое

Адаптивная верстка сайта_иллюстрация

Адаптивная верстка сайта, или mobile-friendly, заключается в выполнении определенных функций, направленных на создание веб-страницы, способной подстроиться под любое разрешение экрана.

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

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

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

Зачем вам адаптивный дизайн сайта

В Интернет можно выходить при помощи устройств с разным разрешением экрана

Адаптивная верстка сайта_разрешения

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

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

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

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

Экстренная информация

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

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

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

  1. Мобильное приложение/версия сайта должны соответствовать типу операционной системы. Чтобы это стало возможным, необходимо потратить лишние деньги и время.
  2. Мобильное приложение надо загрузить. Чтобы иметь возможность использовать приложение, его надо установить. Естественно, пользователь это сделает, но только в том случае, если будет уверен, что оно ему необходимо для регулярного использования, а если нет, то это чревато для вас потерей аудитории.
  3. Распределение трафика. Использование мобильного приложения не считается показателем посещаемости сайта. Иначе говоря, трафик приложения и трафик сайта не суммируются, а это снижает показатели посещаемости.
  4. Интеграция материалов сайта. Если у вас есть мобильное приложение, то необходимо затрачивать дополнительные ресурсы, чтобы синхронизировать все материалы, или наполняя сайт, дублировать контент в приложении (опять же, лишняя работа, а значит, и расходы).

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

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

Основы адаптивной верстки сайта

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

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

  • mobile first – проектирование для мобильных устройств;
  • flexible, grid-based layout – использование гибкого макета, основанного на сетке;
  • flexible images – применение гибких изображений;
  • media queries – обработка меди-запросов;
  • постепенная реализация улучшений.

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

  • Резиновый.

Адаптивная верстка сайта_резиновый

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

  • Перемещение блоков.

Адаптивная верстка сайта_перенос блоков

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

  • Переключение макетов.

Адаптивная верстка сайта_перенос макетов

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

  • Элементарная адаптивная верстка сайта.

Адаптивная верстка сайта_малая кровь

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

  • Панели.

Адаптивная верстка сайта_панели

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

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

Как сделать адаптивную верстку сайта

Перед тем как ответить на вопрос: «Как делается адаптивная верстка сайта?», необходимо иметь представление о том, какие технологии для этого используются. Сегодня это HTML5 и CSS3.

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

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

После появления CSS3 у верстальщиков появилась возможность создания разных классов, которые будут соответствовать определенному разрешению экрана (правило «media queries»).

article_banner.png

Людям, планирующим использовать третье поколение каскадных таблиц (CSS3), стоит принять во внимание, что размеры объектов указываются в процентном соотношении (в отличие от CSS2, где размер указывается в пикселях).

HTML5 используется для указания местоположения конкретных элементов, то есть для разметки страницы. Классы, созданные путем применения CSS3-технологии, указываются в параметрах тегов HTML, чтобы выводимые объекты могли подстроиться под разрешение.

Адаптивная верстка сайта начинается с создания простого изображения, которое растянется по размеру экрана.

  • HTML

1

2

3

<div>

    <img src="../images/1.jpg">

</div>

Ничего сложного: просто создали контейнер для «упаковки» картинки.

  • CSS

1

2

3

4

5

6

7

8

div {

    width: 100%;

    text-align: center;

}

div img {

    width: 100%;

    height: auto;

}

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

Таким образом, у нас готово изображение, которое будет занимать всю поверхность экрана с любым разрешением: хоть 320*240 пикселей, хоть 1920*1080 .

Адаптивная верстка сайта_иллюстрация2

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

Для решения проблемы необходимо задать конкретную ширину для максимального и для минимального разрешения.

  • CSS

1

2

3

4

5

6

7

8

9

10

div {

    margin: 0 auto;

    width: 1000px;

    max-width: 90%; /* контейнер не превышает 90% ширины экрана */

    min-width: 500px;

}

div img {

    max-width: 100%;

    height: auto;

}

Таким образом, мы сделали так, чтобы наш контейнер изменял грани «упаковки» в пределах 500-1000 пикселей (оптимальные значения). Вместе с контейнером будет меняться и изображение.

Адаптивная верстка сайта подразумевает работу со всеми материалами сайта. Осложним задачу? Создадим мини-галерею.

Руководствуемся уже знакомыми принципами.

  • HTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<div class="image_gallery">

    <div>

        <img src="../images/1.jpg" title="Деревья</em><em>, листики</em><em>..." />

    </div>

    <div>

        <img src="../images/2.jpg" title="Зима</em><em>"  />

    </div>

    <div>

        <img src="../images/3.jpg" title="Озеро</em><em>"  />

    </div>

    <div>

        <img src="../images/4.jpg" title="Райский</em><em> остров</em><em>"  />

    </div>

</div>

  • HTML пополнился несколькими изображениями, которые упаковываются в контейнер
  • CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

div.image_gallery {

    margin: 0 auto;

    width: 1000px;

    text-align: center;

    max-width: 90%; /* контейнер не превышает 90% ширины экрана */

    min-width: 500px;

}

img {

    float: left;

    max-width: 48%;

    height: auto;

    padding: 1%; /* небольшие оступы для изображений */

}

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

Адаптивная верстка сайта_галлерея

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

Однако, работа еще не завершена.

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

Адаптивная верстка шапки сайта и главной страницы

Страница сайта включает три основных блока: шапку (верхний колонтитул), контейнер-упаковку и сайдбар, футер (нижний колонтитул). Условно определим переломные точки адаптивного дизайна, например 768 и 480 пикселей.

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

Адаптивная верстка сайта_главная страница

Метатеги и раздел <head>

Дополним раздел <head> самыми нужными файлами: ссылками на применяемые шрифты, jQuery-библиотекой. Адаптивная верстка сайта подразумевает прописывание браузерных префиксов для свойств страницы, чтобы этого не делать, добавим плагин prefixfree.

Адаптивная верстка сайта_метатеги

Шапка страницы

Разместим в верхнем колонтитуле страницы <header> необходимые элементы-контейнеры:

  • <a class="logo"> - логотип;
  • <div class="nav-toggle"> - кнопка демонстрации/скрытия основного меню;
  • <ul id="menu"> - основное меню;
  • form id="searchform"> - поисковая строка сайта.

Адаптивная верстка сайта_шапка страницы

Блок с кратким содержанием статьи

Используем элемент <article id="post-1" class="post"> для обертывания анонса статей.

Адаптивная верстка сайта_блок с кратким содержанием статьи

Боковая колонка

Используем боковую колонку <aside> для размещения списка категорий, последних публикаций и формы для оформления рассылки.

Адаптивная верстка сайта_боковая колонка

Нижний колонтитул

Используем подвал страницы для информации о копирайте, там же разместим кнопки соцсетей и ссылку на e-mail.

Адаптивная верстка сайта_нижний колонтитул

Общие CSS-стили

Общие стили браузера и их сброс по умолчанию.

Адаптивная верстка сайта_общие CSS-стили

Стили для шапки и её содержимого

Установим стили шапки и содержимого верхнего колонтитула.

Адаптивная верстка сайта_стили для шапки1

Адаптивная верстка сайта_стили шапки2

Стили для блока с основным содержимым

Адаптивная верстка сайта не должна «обойти» блок с основным содержим. Установим стили для этого блока.

Адаптивная верстка сайта_стили для блока

Адаптивная верстка сайта_Стили для блока2

Стили для боковой колонки

Выбираем и устанавливаем стили боковой колонки.

Адаптивная верстка сайта_стили для боковой панели

стили для боковой панели2

Стили для нижнего колонтитула

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

Адаптивная верстка сайта_стили для нижней колонки

Медиа-запросы

Адаптивная верстка сайта_медиа-запросы

Адаптивная верстка сайта_медиа-запросы2

Скрипт для мобильного меню

Адаптивная верстка сайта_мобильное меню

Мы уже добавили в разметку страницы </body> код jQuery, который отвечает за демонстрацию/скрытие верхнего меню (клик на кнопку перестраивает высоту меню, подгоняя его под содержимое).

Каким должен быть текст на адаптивных сайтах

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

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

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

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

На изображении видно, что красно-желтые зоны образуют вариации буквы F, что свидетельствует о том, что посетители веб-страниц просто просматривают информацию, определяя её информационную ценность – это все, что их интересует при первом знакомстве с контентом.

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

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

Адаптивная верстка сайта_Тепловая карта Гугл

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

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

Адаптивная верстка сайта должна осуществляться с учетом фактора, так называемого, «раздельного чтения». Суть которого в следующем: посетитель не читает все, что написано на странице, он, пользуясь «центральным» зрением, останавливается на конкретном слове, а при помощи «периферийного» зрения знакомится с дополнительной информацией.

Адаптивная верстка сайта_не читают все слова

Обратите внимание: посетитель «видит» далеко не все слова.

Адаптивная верстка сайта_периферийное зрение

Читая, посетитель использует «периферийное» зрение.

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

Адаптивная верстка сайта_несколько слов

Читая текст, пользователь «захватывает» несколько слов одновременно.

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

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

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

Идеальной признана строка, на которой размещено 65 символов. В Интернете «срабатывают» строки, размер которых 45-75 символов. Лаура Франц, опираясь на свой практический опыт директора инженерного дела в Кодези, говорит, что допустимо использование 85-ти символов (учитывается все: буквы, знаки препинания и пробелы).

  • Размер шрифта

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

  • Статические веб-страницы

Адаптивная верстка сайта_статические веб-страницы

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

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

  • Небольшие устройства

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

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

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

  • Большие устройства

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

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

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

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

  • Межстрочный интервал

Адаптивная верстка сайта_межстрочный интервал

На качестве чтения отражается не только шрифт и длина строки, но и то, какой интервал между строками.

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

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

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

Лаура Франц считает, что идеального межстрочного интервала не существует, главное, соблюдать пропорциональность: интервал должен соответствовать примерно 150 % размера шрифта.

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

  • Google Chrome

Адаптивная верстка сайта_гугл хром

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

Есть и более простой способ проверки. Проверить, как работает адаптивная верстка сайта можно следующим образом: нажмите и удерживайте клавишу «CTRL», нажимайте «+»/ «-». В соответствии с вашими действиями должна меняться и страница ресурса (уменьшаться/увеличиваться).

Однако элемент, на который направлена верстка будет «действовать» согласно прописанным правилам (сохранит соотношение пропорций или сделает что-то другое).

  • Deviceponsive

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

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

  • Aresponsivedesign.is

Адаптивная верстка сайта_Ami.responsivedesign.is

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

  • Quirktools

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

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

Типичные ошибки адаптивной верстки сайта

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

Адаптивная верстка сайта_ряды

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

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

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

  • не выводить на маленькие экраны несущественные блоки;
  • поместить расположенный выше второстепенный контент в аккордеон (раскрывающиеся элементы);
  • примените flex-верстку, так как такая адаптивная верстка сайта позволит установить порядок расположения блоков на экранах смартфонов и планшетов.

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

Прокручивающиеся блоки

Адаптивная верстка сайта_блок с прокруткой

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

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

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

Меню, которое нельзя свернуть

Адаптивная верстка сайта_несворачиваемое меню

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

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

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

При наведении курсора срабатывает событие

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

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

Слишком мелкие активные элементы и шрифт

Адаптивная верстка сайта_мелкий шрифт

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

Стоит учесть и тот факт, что планшет или смартфон используется, как правило «на ходу», что добавляет определенных проблем.

Яндекс рекомендует использовать для мобильных версий сайта шрифт 12рх (не меньше).

Это касается и интерактивных элементов сайта (кнопок, ссылок и пр.). Кликнуть курсором мыши на мониторе проще, чем пальцем по малюсенькой кнопочке.

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

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

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

Опубликовано Генератор Продаж