Адаптивный дизайн — новомодный тренд. Впервые адаптивный веб-дизайн был предложен Этаном Маркоттом на страницах A List Apart в 2010 году. По сути, адаптивный веб-дизайн использует функцию медиа запросов CSS3, описанную ранее, для изменения разметки и дизайна темы вашего сайта под размер экрана того устройства, на котором сайт просматривается.
В теории это позволяет одновременно управлять и темой, и контентом и подгонять их под различные разрешения экрана. Существует отдельный набор контента для каждого размера экрана, который адаптируется или реагирует на среду просмотра через правила отбора CSS. На практике все еще более сложно.
Этот принцип работает с помощью медиа запросов. Они существовали до CSS3. Таблицы стилей для печати, являющиеся формой медиа запроса, используются разработчиками уже давно. Все, что изменилось в CSS3, — это то, что теперь медиа запросы поддерживают расчет разрешения экрана. Эти запросы позволяют использовать некоторые стили CSS, только если разрешение экрана находится в заданных вами пределах.
Особые хитрости адаптивного веб-дизайна не связаны с WordPress и выходят за пределы темы данной книги, однако давайте вкратце рассмотрим, как он может работать.
Простым способом превратить дизайн сайта на WordPress в адаптивный, является изменение боковой панели. В браузере настольного компьютера вы видите все место на экране, и обычно боковая панель располагается слева или справа. Это традиционный сайт. Однако на экране мобильного устройства пространство ограничено, а информация, находящаяся в боковой панели, может быть не так важна.
Например, при просмотре на мобильном устройстве информация, находящаяся в боковой панели, сдвигается вниз относительно первостепенно значимой информации. Используя блок медиа запросов в вашей таблице стилей, вы можете изменить поток ваших блоков контента. Это сохранит вашему первостепенно значимому контенту роль более важной информации наверху и в центре небольшого экрана, переместив менее значимый контент на менее выгодную позицию.
Опять же, реальное внедрение адаптивного дизайна сайта заслуживает написания отдельной книги. В Сети доступно множество руководств, пояснений, удачных примеров и рекомендаций. Более того, уже существует множество адаптивных тем для WordPress, включая Twenty Eleven, которые вы можете попробовать, чтобы понять принцип их работы.
Адаптивный веб-дизайн в данный момент является популярным решением среди разработчиков, нацеленных на аудиторию пользователей мобильных устройств. Это решение, на котором построены многие сайты. Но чем более адаптивными становятся темы, тем более сложным становится рабочий процесс. Помнит ли кто-нибудь время, когда вы разрабатывали отдельные темы для Netscape Navigator и Internet Explorer? Уже скоро адаптивные темы вернут вас в те дни, и вы будете чувствовать себя так же, как когда переделывали бесконечное количество версий вашего сайта под различные размеры, притворяясь, что не делаете этого.
Вы закончите свои дни, исправляя одну и ту же тему в разных разрешениях, но сто раз. А так как мобильные устройства продолжают развиваться, ваша работа может стать еще более монотонной, если вы попытаетесь охватить все модели и разрешения. Обратной стороной этой медали является полный контроль, когда адаптивный дизайн является ровно настолько сложным, насколько вы ему позволите.
Темы для мобильных устройств продолжают быть перспективной областью сетевых разработок. Так как смартфоны с относительно рабочими браузерами становятся все более распространенными, наличие соответствующего функционала у любого сайта становится все более необходимым. Вы будете и дальше видеть темы, оптимизированные для мобильных устройств, и все чаще будут появляться адаптивные темы.
Все больше тематических концепций и тем для начинающих будут включать адаптивные элементы, облегчающие весь рабочий процесс на начальном этапе.