Что такое адаптивный дизайн

Опубликовано: 05.09.2018

Приветствую читателей блога SEOBID.NET! Адаптивный дизайн сайтов – вот тема, которую я хочу сегодня рассмотреть. Дело в том, что мобильные устройства все чаще используются пользователями для общения и работы в интернете. То есть, если у вас есть свой сайт (сайты), то по разным данным статистики к вам на сайт заходит от 10 до 20 % пользователей с мобильных телефонов, смартфонов или планшетов.

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

Но вы, должно быть, в курсе, что «мобильность» бывает очень разной – BlackBerry, iPhone, iPad, netbook, а вам необходимо, чтобы сайт отображался корректно в каждом устройстве. Что же делать? Не будешь же для каждого мобильного устройства создавать свой сайт. Выход есть, точнее, их несколько, и поэтому предлагаю рассмотреть каждый из них.

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

Возможности адаптивного и мобильного дизайна

Такой дизайн адаптируется к поведению пользователей и его ОС, отталкиваясь от размера экрана пользователя, от платформы, ориентации дисплея, и т.д. Здесь все настолько сложно, что лучше в дебри терминов не лезть, а принять это как должное – работает, ну и хорошо. Возьмем такой пример — пользователь заходит на ваш сайт с iPhone, и сайт автоматически подстраивается под разрешение экрана, уменьшает размеры картинок, убирает flash элементы и баннеры. Вот как на примере ниже:

Этот пример я взял с одного из своих сайтов, на котором установлен плагин WordPress Mobile Pack. Плагин – одно из возможных решений по переводу сайта на мобильное отображение. Сайт можно переключать как вручную, так и автоматически. Что это значит?

Многие мобильные устройства последних версий самостоятельно определяют наличие такого или аналогичного плагина, и корректно отображают сайт, выбирая подходящий шаблон. Так, плагин WordPress Mobile Pack имеет несколько мобильных шаблонов, и если вы принудительно выберете какой-то из них, то в дальнейшем этот шаблон будет отображаться во всех мобильных устройствах – планшетах, смартфонах, и т.д. В то время как на ПК сайт будет отображаться в своей первоначальной теме.

Еще один вариант адаптивного отображения сайтов – использование адаптивного дизайна, который может не только подстраиваться под разрешение экрана вашего устройства. Это — новый подход в разработке веб-дизайна. Что же это такое?

Разрешение экрана

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

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

Динамические изображения на сайте

Но если будет меняться разрешение экрана, то изображения тоже должны меняться, иначе они просто не поместятся на экране, или буду отображаться искаженно. Самое простое решение — установка свойства CSS max-width со значением 100%, а не в пикселах.

Но здесь тоже происходит нестыковка — свойство max-width не поддерживается IE, кроме последней версии, да и загрузка страницы длится долго из-за прежнего размера картинки, который нужно сжать. Вывод один — картинки высокого качества хорошо смотреть на ПК, а не на мобильном телефоне. Но если правильно использовать CSS media queries, то можно менять не только размеры изображений на лету, но и расположение любых элементов на страницах сайта.

Адаптивный макет сайта

Если нужно менять разрешение экрана, то правильным будет изменить весь макет сайта, чтобы умещались все или почти все необходимые элементы. Это можно сделать, как я уже говорил, при помощи CSS media queries. Основной CSS стиль остается главным для сайта, а CSS media queries просто уточняет некоторые свойства CSS для разных разрешений. Такая строка

Означает, что стиль загрузится и будет работать, если он:

выводится полностью на экран (не для печати и т.д.); если максимальная ширина экрана — 480 px.

Ширину экрана вы можете устанавливать любую.

JavaScript на сайте

Большое значение в правильном отображении страниц в разных разрешениях имеет правильное применение JavaScript. Библиотека css3-mediaqueries.js, например, добавляет поддержку CSS3 media queries в работу старых браузеров (IE 5+, Firefox 1+, Safari). А если использовать jQuery, то можно воспользоваться этим кодом:

$(window).bind("resize", resizeWindow); function resizeWindow(e){ var newWindowWidth = $(window).width(); if(newWindowWidth < 600){ $("link[rel=stylesheet]").attr({href : "mobile.css"}); } else if(newWindowWidth > 600){ $("link[rel=stylesheet]").attr({href : "style.css"}); } }

Упрощаем отображение контента на сайте

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

Поэтому выход здесь один — убирать неглавные блоки и элементы. Так, если на сайте для ПК вы можете смело поставить баннер размером 980×60 px, то для планшетной или мобильной версии его необходимо убрать. А при размере экрана 320 px он вообще исказит весь экран, поэтому такой большой баннер можно заменить текстовой ссылкой, ну и так далее.

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

Упростить навигацию. Заняться правильным расположением контента. Убрать баннеры и остальную рекламу. Не разбивать контент на колонки. Прятать большие блоки и элементы. Заменить такие элементы ссылками.

Тачскрин

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

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

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

В общем, таких мелочей очень много, но не относитесь теперь к своей веб-мастерской жизни печально — адаптивный дизайн все равно не решит всех проблем, он просто сделает пользователя, зашедшего на ваш сайт, ВАШИМ пользователем.

Примеры разных разрешений с адаптивным дизайном

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

Экран 1366х768 px:

Экран 1024х768 px:

Экран до 640 px:

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

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

Определение устройства плагином WP Mobile Detect

Плагин для создания адаптивного контента подстраивается под то устройство, с которого делается запрос на ваш сайт.

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

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

Какие шорткоды можно использовать с этим плагином

[phone]

Поместите здесь контент, который должен отображаться только на мобильном телефоне, но не на планшетах или настольных компьютерах [/phone] [tablet]В этом тэге – контент только для планшетов[/tablet] [device]Этот тэг будет отображать содержимое только на планшетах и мобильных телефонах (смартфонах)[/device] [notphone]контент не отображается на всех устройствах, кроме мобильных телефонов[/notphone] [nottab]то же самое, кроме планшетов[/nottab] [notdevice]то же самое, кроме настольных компьютеров[/notdevice] [ios]в этот тег нужно оборачивать контент для iOS устройств[/ios] [iPhone]контент будет отображаться только на iPhones[/iPhone] [iPad] контент будет отображаться только на iPads[/iPad] [android] контент будет отображаться только на Android устройствах[/android] [windowsmobile]контент будет отображаться только на мобильных устройствах, работающих на Windows[/windowsmobile]

Какие функции работают с этим плагином

wpmd_is_notphone() — Возвращает значение true, если определяет настольный компьютер или планшет wpmd_is_nottab() — Возвращает значение true, если определяет настольный компьютер или мобильный телефон wpmd_is_notdevice() — Возвращает значение true только для настольного компьютера wpmd_is_phone() — Возвращает значение true только для мобильного телефона wpmd_is_tablet() — Возвращает значение true только для планшета wpmd_is_device() — Возвращает значение true для всех устройств, кроме настольного ПК wpmd_is_ios() — Возвращает значение true для устройств, работающих на iOS wpmd_is_iphone() — Возвращает значение true для устройств, работающих на iPhones wpmd_is_ipad() — Возвращает значение true для устройств, работающих на iPads wpmd_is_android() — Возвращает значение true для устройств, работающих на Android wpmd_is_windows_mobile() — Возвращает значение true для устройств, работающих на Windows

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

Добавление кастомных полей

С настраиваемыми полями можно работать использованием плагина Advanced Custom Fields. Он имеет интуитивно понятный интерфейс, полностью переведен на русский язык имеет множество полезных функций. В качестве примера можно взять настраиваемые поля Short Title и Short Excerpt в режиме работы редактора.

Применением этих произвольных полей можно получить максимальную пользу от плагина WP-Mobile Detect и его шорткодов. Как видно из скриншота, настроек у плагина довольно много. Добавляем в новую группу поле «Short Title»:

Нажимаете «Добавить новую группу полей» и вписываете заголовок «Adaptive Content». Теперь можно добавить группу правил, чтобы новые поля появились на странице в режиме редактирования.

Добавляем два поля:

Short Title (short_title) Text — поле для заголовков, форматирование устанавливаете в режиме No formatting ниже в выпадающих настройках. Short Excerpt (short_excerpt) Textarea — поле для описаний, форматирование устанавливаете в Convert new lines into tags там же.

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

Отображение контента

Для понимания примера можно заменить заголовок и описание записи данными из полей Short Title и Short Excerpt при просмотре страницы с мобильного устройства. Чтобы это осуществить, нужно в файл functions.php текущей темы добавить такой код:

function adaptive_content( $content ) { // only change content if called in the loop if ( !in_the_loop() ) return $content; // check for phone if ( wpmd_is_phone() ){ // get the name of the custom field - based on filter $custom_field = str_replace( 'the_' , 'short_' , current_filter() ); $short_content = get_field($custom_field); // if the field is populated then use it if ( $short_content ) return $short_content; } // only get here if not phone return $content; } add_filter( 'the_excerpt', 'adaptive_content' ); add_filter( 'the_title', 'adaptive_content' );

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

Шорткоды вместе с плагином WP Mobile Detect сделают контент вашего сайта одинаково удобочитаемым и удобным в навигации на всех типах современных средств интернет-серфинга, с которых пользователи могут просматривать ваш сайт.

Еще одна привлекательная функция – плагин может добавлять различные аддоны:

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

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