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

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

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

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

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

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

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

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



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

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

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

Читайте также!

«Подготовка и этапы продаж + типичные ошибки» Подробнее

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

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

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

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

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

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

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

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

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

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

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

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

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

• mobile first – проектирование для мобильных устройств;

• flexible, grid-based layout – использование гибкого макета, основанного на сетке;

• flexible images – применение гибких изображений;

• media queries – обработка меди-запросов;

• постепенная реализация улучшений.

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

• Резиновый.

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

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

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

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

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

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

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

• Панели.

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

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

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

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

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

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

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

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

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

• HTML

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

• CSS

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

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

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

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

• CSS

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

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

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

• HTML

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

• CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Установите правильные атрибуты полей форм

Если на вашем сайте используется поля ввода для имени пользователя / адреса, откажитесь от autocorrect, включите autocapitalize:

Благодаря этому приему при адаптации сайта под мобильные устройства вы запретите системе автоматизированного ввода Т9 заменять имена, например, «Erwan» на «Erevan».

При помощи установки автоматического использования первых заглавных букв в типах words вы избавите гостей ресурса от необходимости постоянно включать капитализацию букв, иными словами в начале каждого слова будет ставиться большая буква (допустим, «Ken burns» превратится в «Ken Burns»):

Используйте поле email, если ваш сайт запрашивает у пользователя электронную почту, чтобы он не вводил символ @ с клавиатуры мобильного устройства:

Задайте подходящую для мобильных устройств ширину

Для этого откройте сайт в браузере своего компьютера, уменьшайте ширину окна программы, пока текст не перестанет быть читаемым. Так вы получите минимально допустимую ширину. Это текущее значение установите в свойство @viewport при помощи установки тега meta в заголовок страницы head:

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

На представленной ниже иллюстрации оставлено лишнее место по правому краю:

А здесь значение ширины выбрано правильно:

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

Установите ширину картинок в 100 %

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

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

Если вы установили в качестве фоновой картинки какое-либо изображение не с помощью тега img, вам просто нужно установить CSS свойство background-size в значение contain. Так размер фона будет меняться, если разрешения экрана окажется недостаточным для передачи в 100 % масштабе:

Не стоит беспокоиться, что изображение потеряет четкость – современные мобильные устройства этого не допустят. Дело в том, что, когда гость сайта использует увеличение, браузер повышает четкость картинки. Правда, при этом стоит убедиться, что у вашего портала нет свойства user-scalable=no в теге meta, поскольку он не позволяет использовать зум:

Установите ширину полей ввода в 100 %

Когда вы установили ширину изображений при помощи свойства max-width, сделайте тоже самое с полями input. Для этого просто добавьте в файл CSS – файл вашего сайта:

Теперь поля input не выйдут за пределы экрана при использовании сайта с мобильного устройства.

Будьте аккуратны, когда используете Disable для кнопок подтверждения отправки форм

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

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

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

Если вы все-таки решили деактивировать кнопку submit, сделайте это на несколько секунд при адаптации сайта под мобильные устройства.

В длинных строках используйте word-wrap

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

Справится с этим word-wrap, при помощи которого строка будет переноситься, достигнув края экрана. Так гость сайта сможет видеть сразу всю информацию, не прибегая к прокрутке:

Здесь вам потребуется пароль:

Будьте осторожны, используя пробелы

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

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

Чтобы облегчить пользователям жизнь, во время адаптации сайта под мобильные устройства замените пробелы отступами:

Как видите, между символами остаются пропуски, но с ними не нужно бороться при копировании. А это бережет время!

Преимущества медиа-запросов

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

Избегайте fixed позиционирования

Если заголовок или сайдбар позиционирован фиксировано, CSS свойство position установлено в значение fixed, советуем быть осторожными.

В этом случае при создании разметки размер вашего заголовка вырастет пропорционально странице, то есть даже может занять экран целиком:

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

Пример показывает, как это работает на практике:

Используйте стандартные шрифты

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

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

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

Но вам придется написать два варианта CSS-правил: первый для шрифта по умолчанию, еще один – для скаченного.

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

Подчеркнем: селектор класса .wf-opensans-n4-active добавляется в код сайта динамически Font Loader'ом, но лишь, когда шрифт загружен.

Предложите пользователям читабельный контент

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

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

Для описания этого правила в английском есть довольно емкое слово «snackable» (от англ. «снэк» — закуска). Так вот, контент для таких пользователей должен быть именно snackable, то есть удобным для быстрого чтения, беглого просмотра в движении.

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

1. Начинайте с краткого, емкого, привлекательного заголовка. Советуем составлять его в пределах 10 слов, причем использовать крупный шрифт.

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

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

4. Применяйте визуальные вставки, дополнительно структурируя информацию и упрощая восприятие.

Адаптируйте электронные письма к чтению с маленького экрана

Провести адаптацию email к чтению с экранов мобильных устройств вам помогут такие инструменты для рассылки:

• MailChimp.

• AWeber.

• Constant Contact.

Замените ссылки на «тапабельные» кнопки

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

Какой размер будет оптимальным для кнопки, элемента навигации, чтобы у человека не возникало с ними проблем? Вам помогут рекомендации по адаптации сайта под мобильные устройства:

• Apple считает, что оптимальный размер для кнопок, навигационных элементов начинается с соотношения 44 на 44 пикселя.

• Nokia рекомендует минимальные габариты 48 на 48 пикселей или 0,7 на 0,7 см при создании подобных элементов.

• Microsoft советует кнопки 34 на 34 пикселя.

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

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

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

• Standout Color Boxes and Buttons. С его помощью вы создадите удобные кнопки разного размера, цвета, а контекстное меню, адаптированное под мобильных пользователей.

• Responsive Menu. Этот плагин позволит создать удобное меню «гамбургер».

Лучший и бесплатный плагин для адаптации сайта под мобильные устройства для Wordpress

JetPack

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

И скорее всего, он уже установлен среди ваших базовых плагинов. Если так оно и есть, кликните по ссылке «JetPack» в меню администратора сайта, перейдите на страницу модулей. Здесь вам необходимо лишь активировать «Mobile Theme».

MobilePress

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

WPtouch

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

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

Wapple Architect Mobile Plugin

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

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

Mobile Detector

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

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

Ключевые преимущества:

1. Автоматическое распознавание гаджета при помощи базы, включающей более 5000 гаджетов.

2. Способность выделять стандартные телефоны среди продвинутых устройств.

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

WP Mobile Edition

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

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

WordPress Mobile Pack

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

Помимо этого, в плагине вы найдете:

• переключатель между мобильной, классической настольной темой;

• набор поддерживаемых, распознаваемых устройств, включая темы для Nokia, браузеров на WebKit;

• настройку цветовой палитры по темам с поддержкой твиков в CSS;

• автоматическую адаптацию картинок, разбиение постов, страниц;

• мобильную панель администратора;

• виджет мобильной рекламы, поддерживающий такие платформы как AdMob или Google’s Mobile Adsense;

• мобильную аналитику;

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

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

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

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

Bootstrap-способ верстки адаптивной таблицы

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

Для применения на практике этого способа таблица обернута в div, которому задана максимальная ширина в 100 %, overflow: auto.

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

Верстка по-настоящему адаптивной таблицы

Теперь обсудим ситуацию, в которой ваш сайт действительно насыщен таблицами – здесь стоит прибегнуть к плагину Footable.

В первую очередь необходимо подключить плагин (скачать на GitHub / подключить с CDN), инициализировать его:

Но есть одна тонкость в адаптации сайта под мобильные устройства: скрипт считает ширину таблицы, а не ширину viewport-а. Поскольку нам необходимо эту ошибку устранить, важно чуть «модернизировать» скрипт: 

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

Далее для ячеек в шапке таблицы, посредством data-атрибутов указываем на каких размерах какие колонки будут скрываться:

Что мы имеем в виду? На планшетах будут скрываться колонки «RAM», «Диагональ», «PPI», «Аккумулятор». При использовании на еще меньшем, телефонном экране, скроется также «Цена».

В инициализации можно установить контрольные точки:

Получается, в диапазоне 0-720 правилу подчиняются mobile, 720-1024 — tablet, а выше 1024 — desktop. При необходимости вы можете создать большее количество правил.

Еще у вас есть возможность раскрыть определенную колонку по умолчанию. В таком случае указываем data-атрибут data-expanded=«true»:

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

Адаптация сайта под мобильные устройства онлайн: 6 лучших сервисов

1. mobiSiteGalore

   

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

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

2. MobStac

   

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

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

3. Mofuse

   

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

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

4. Mobile App America

   

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

5. bMobilized

   

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

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

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

6. Mobify

   

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

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

   Если же вы успели опробовать все описанные выше методы, но вас все еще не устраивает результат, пора прибегнуть к помощи профессионалов.

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

• Google Chrome

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

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

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

• Deviceponsive

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

• Aresponsivedesign.is

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

• Quirktools

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

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

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

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

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

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

• не выводить на маленькие экраны несущественные блоки;

• поместить расположенный выше второстепенный контент в аккордеон (раскрывающиеся элементы);

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

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

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

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

Скачайте полезный документ:

Чек-лист: Как добиваться своих целей в переговорах с клиентами

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Необходимо четко спланировать структуру контента и внести необходимые изменения.

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

Автор статьи

Дмитрий Свистунов

Руководитель SEO-отдела и разработки

Статья опубликована: 01.02.2018

Последние статьи этого автора:

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

Забрать гарантированный подарок

Полезные
материалы
для руководителей

Скачать 3,2 MB