Некоторые читатели могут не без оснований задаться вопросом, почему так быстро растет интерес к «Отзывчивому веб-дизайну» (RWD) и почему разработчикам становится все более и более важным достичь глубоких и подробных знаний об этой зарождающейся технике. Этот термин часто используется в качестве анекдотического модного слова, произнесенного для понимания передовых мобильных технологий.
Мы не будем говорить абстрактно или философски о адаптивном веб-дизайне; мы собираемся определить это ясно и продемонстрировать некоторые реальные технические применения этой техники. Преимущества адаптивного веб-дизайна становятся очевидными, если вы потратите немного времени на изучение и понимание реалий современных веб-технологий и мобильных технологий, а реализация адаптивного дизайна проще, чем вы думаете.
То, как мы работаем с Интернетом, меняется очень быстро, и стимулом для этого изменения является появление мощных и разнообразных мобильных устройств. В недавнем исследовании было предсказано, что интернет-серфинг через мобильные устройства превзойдет серфинг в настольных системах в течение 3-5 лет. Это быстрое преобразование из настольного компьютера в мобильное делает для разработчиков крайне важным оставаться на шаг впереди и соответствовать последним отраслевым требованиям.
Быстрый и неизбежный переход от настольного компьютера к мобильному означает, что веб-дизайнерам придется планировать свои проекты не только для устройств с клавиатурой и мышью, но также для смартфонов, игровых консолей и планшетов. Количество этих устройств увеличилось в геометрической прогрессии, что, в свою очередь, увеличило разнообразие спецификаций браузеров и разрешений экрана. Очевидно, что создание новой версии сайта специально для каждого размера экрана и устройства было бы невозможным или, по крайней мере, крайне непрактичным.
Именно так Responsive Web Design приходит нам на помощь, предоставляя разработчикам мобильных приложений возможность прагматично и эффективно приспосабливаться к огромному и постоянно растущему разнообразию экранов и устройств. Это новый подход, который учитывает несколько важных факторов, таких как поведение пользователя, размер экрана и операционная платформа. Адаптивный дизайн автоматически и оптимально реагирует на предпочтения пользователя, независимо от его экрана или выбранного программного обеспечения.
Думая в этих терминах, вы можете подумать, что эта практика уже широко используется за счет использования динамических макетов, медиазапросов (которые дают возможность проверить характеристики устройства, на котором будет показана работа) и различных сценариев, способных настроить макет веб-страниц. Распространенное упрощение адаптивного веб-дизайна состоит в том, чтобы определить его как не более чем дизайн, который учитывает размер экрана и автоматически вносит изменения в контент. Но адаптивный дизайн — это гораздо больше; это подход, который учитывает многие другие аспекты дизайна. В этом смысле RWD — это новый способ мышления. Это также проще, чем вы можете себе представить.
Что такое адаптивный веб-дизайн?
В Интернете имеется широкий спектр информации об адаптивном веб-дизайне, и большая часть этой информации является абстрактной, философской и анекдотичной. Если вы ищете четкое, конкретное понимание основ адаптивного веб-дизайна, оно сводится к трем методам, которые работают вместе:
- Жидкие изображения ;
- Жидкостные сетки ;
- Медиа-запросы .
Давайте подробнее рассмотрим каждый из этих трех ключевых компонентов адаптивного веб-дизайна.
Жидкие изображения и сетки
Каков наилучший способ создания веб-сайта, который будет просматриваться на сотнях экранов разных размеров, некоторые из которых могут даже еще не существовать? Лучший подход не состоит в том, чтобы удовлетворить определенные устройства; это то, что делает ваш макет более гибким, гибким и адаптируемым к экранам любых размеров, даже тех, которые еще не стали популярными.
Несколько лет назад, когда гибкие макеты не были так популярны, единственными гибкими элементами макета были структурные элементы, то есть столбцы макета и текст. Изображения редко создавались с учетом гибкости, и во многих случаях изображения могли легко ломаться и отображаться неправильно. К счастью, изображения теперь включены в элементы макета, которые можно автоматически корректировать, и их включение в адаптивный дизайн способствует сохранению более широкого концептуального дизайна и предложению оригинальной идеи проекта. Изображения всегда были очень привлекательными, и, к счастью, ваш адаптивный макет может и должен сохранить этот мощный аспект вашего адаптивного интерфейса. Мобильные веб-сайты без изображений являются пережитком более примитивного подхода мобильного дизайна.
С технической точки зрения, создание гибкости для ваших изображений является одной из наиболее важных проблем, которые необходимо решить при создании адаптивного дизайна. Есть несколько методов пропорционального изменения размеров изображений; некоторые из них очень просты в применении. Самым популярным, цитируемым в статье Итана Маркотта о плавных изображениях, является установка двух простых правил CSS: max-width, и height:auto, например:
IMG { максимальная ширина: 100%; высота: авто; }
Первое правило гарантирует, что изображения остаются в своей коробке контейнера, не выпадая; пропуская как высоту, так и ширину элемента; вы позволяете браузеру изменять размер изображений относительно устройства. Максимальная ширина изображения устанавливается равной 100% ширины экрана или браузера, поэтому при уменьшении общей ширины просмотра изображения пропорционально уменьшаются (правило, это следует помнить, не поддерживается IE). Если размеры изображения слишком ограничены и его просмотр не является оптимальным с использованием старых браузеров, проблему можно решить благодаря JavaScript, как объяснено в статье, приведенной выше.
Как правило, это правило прекрасно работает само по себе. Однако, если вы работаете на очень старом сайте, где высота и ширина изображений запрограммированы непосредственно в HTML-код как атрибуты, адаптивные изображения могут быть скомпрометированы. Чтобы избежать этого, вам не нужно обязательно менять HTML-код, а просто добавьте height: auto правила CSS height: auto и ваши изображения будут правильно отображаться и масштабироваться.
Другой метод, который следует рассмотреть, — это метод, представленный группой Filament, который направлен не только на пропорциональное изменение размеров изображений, но и на уменьшение разрешения изображений на небольших устройствах, чтобы не тратить пространство, время загрузки и дорогую пропускную способность мобильной связи на более скромных мобильных экранах. ,
Для этого требуются некоторые файлы, доступные на Github : файл JavaScript (rwd-images.js), файл Htaccess и изображение (rwd.gif). Затем в коде HTML мы ссылаемся на оба изображения: маленькое с префиксом «R» для пояснения того, что оно должно быть адаптируемым («отзывчивым»), а для большого — data-fullsrc (атрибут, data-fullsrc HTML5, для деталей вы можете посетить эту страницу ).
Реализация этой техники будет выглядеть примерно так:
img <img src = "smallRes.jpg" data-fullsrc = "largeRes.jpg">
Для любого экрана, ширина которого превышает 480 пикселей, будет загружено изображение с более высоким разрешением (largeRes.jpg). Файл JavaScript вставляет элемент, который позволяет странице отделить адаптированные изображения от других. Когда страница загружена, все файлы записываются в исходном виде, и только большие или маленькие изображения загружаются в соответствии с предыдущими настройками. Если бы этот метод не использовался, все изображения (даже те, которые слишком велики для использования) были бы загружены… расточительно. Этот метод предотвращает неоправданно медленную загрузку страниц, не отвечающие макеты и потерянную пропускную способность. Кроме того, он должным образом поддерживается современными браузерами (включая IE8) и мобильными устройствами.
Медиа-запросы
Медиа-запросы, вероятно, самый важный инструмент, который веб-дизайнер должен сделать своими сайтами отзывчивыми. Этот набор правил позволяет разработчикам создавать плавные проекты, которые адаптируются без искажения или потери качества к устройству зрителя. Полезно отметить, что этот набор руководств (или правил) должен храниться в отдельной таблице стилей CSS от той, в которой есть таблицы для общего стиля (который обычно называется style.css). Эта практика рекомендуется, но не обязательна, поэтому вы можете сделать это или нет. Лично я предпочитаю разделение стилей для моей собственной организации, поэтому я создаю новый лист CSS, который будет сообщать исключительно информацию такого типа (не забудьте связать эту новую таблицу стилей в коде HTML).
<link href = "media-query.css" rel = "stylesheet" type = "text / css" />
Вы можете написать столько медиа-запросов, сколько захотите. Их основная цель — применять различные правила CSS для получения разных макетов в зависимости от ширины окна отображения, которое предоставляется вашему контенту. Значения в медиа-запросах имеют особенность выражаться в процентах, а не в пикселях, и именно этот конкретный выбор делает различные элементы страницы плавными и гибкими. Проценты расширяются и сжимаются с различными размерами экрана; CSS-объявления с фиксированными пикселями по своей сути не реагируют и приводят к жестким элементам макета, которые вообще не масштабируются.
Пример кода CSS, который вы могли бы написать, может быть таким:
экран @media и (максимальная ширина: 980 пикселей) { #pagewrap { ширина: 95%; } #content { ширина: 60%; набивка: 3% 4%; } #sidebar { ширина: 30%; } }
При установке последовательности правил CSS выше, для устройств, чьи экраны имеют максимальную ширину 980 пикселей, содержимое блока будет занимать 60% ширины (с 3% -ым верхним и нижним отступом и 4% -ым боковым), в то время как боковая панель будет занимать 30% от общей ширины экрана.
Медиа-запросы помогают учитывать множество возможностей отображения, и, следовательно, правила организованного стиля могут быть изменены быстро и легко. Используя ту же процедуру, мы можем установить разные правила для ширины экрана меньше 650 пикселей, меньше 480 пикселей и так далее.
Вывод
Мы преодолели модные слова, философию и концепцию «адаптивного веб-дизайна» и получили четкое концептуальное понимание и действительно технические приложения. Мы определили его основные функции и как начать реализацию адаптивного подхода на реальных примерах. В следующих статьях мы расскажем о макетах флюидов и сеток, а также о том, как управлять шрифтами и изображениями на нашем веб-сайте.
Хотите узнать больше о адаптивном веб-дизайне? Ознакомьтесь с новой книгой SitePoint « Адаптивный веб-дизайн Jump Start» !