Что такое адаптивный дизайн для WordPress и как его сделать правильно

Адаптивный дизайн становится все более важным в последние годы. Сегодня быть полностью отзывчивым — это функция, которая стала почти обязательной для плагинов и тем WordPress. Тем не менее, если вы не являетесь веб-дизайнером, именно то, что делает адаптивный дизайн тем, чем он является, все равно может стать чем-то вроде коробки для Pandora. Вы, конечно, знаете, что это важно, но это все. Как это работает или как это реализовать, все еще немного за вами.

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

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

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

Звучит неплохо? Тогда начнем.

Что такое адаптивный дизайн и для чего он?

Мобильные устройства

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

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

Только в США время, затрачиваемое на использование цифровых мультимедиа на смартфонах, увеличилось на 394 процента в период с 2010 по 2014 год. Рост для планшетов за это же время составил даже колоссальные 1721 процент!

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

Год спустя, в начале 2015 года, Google объявил, что теперь регистрирует больше запросов на мобильных устройствах, чем на настольных компьютерах. Вскоре после этого поисковый гигант выпустил обновление для мобильных устройств , эффективно наказывая веб-сайты без присутствия, оптимизированного для мобильных устройств (этот шаг также называется Mobilegeddon ).

Мобильный веб-дизайн стал почти обязательным.

Адаптивная совместимость и дизайн

Со временем люди придумали несколько способов сделать свой сайт совместимым с мобильными устройствами. Двумя популярными способами были создание версии мобильного сайта на отдельном поддомене (обычно m.yoursite.com) или использование специализированных плагинов WordPress для создания версий сайта, удобных для мобильных устройств.

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

Но что именно является адаптивным дизайном?

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

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

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

Преимущества этого подхода

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

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

Но как именно это работает?

Основы адаптивного дизайна

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

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

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

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

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

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

Размеры изображения являются гибкими

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

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

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

Другие тонкости адаптивного решения

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

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

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

Технология даптивного дизайна

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

Не знакомы с термином? Не волнуйтесь, вы узнаете все об этом сейчас.

Что такое медиа-запросы?

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

Если вы когда-либо просматривали файл style.css современной темы WordPress, вы, возможно, уже видели медиа-запрос:

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

Это называется точкой останова. Что именно является точкой останова? Я рад, что ты спросил.

Точки переключения дизайна

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

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

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

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

Всегда ли нужен адаптивный дизайн?

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

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

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

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

Что вы думаете о адаптивном дизайне? Вы предпочитаете другой вид решения? Дайте нам знать в комментариях ниже.