Адаптивный дизайн сайта

Отзывчивый дизайн: война еще не выиграна

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

Так, или не перестали?

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

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

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

Отзывчивый дизайн — это не дизайн для мобильных устройств

Не хочу ни в коем случае не проявить должного уважения к талантливым парням в GoCardless, но мне взгрустнулось, когда я прочитал их пост о том, почему они решили отказаться от отзывчивого веб-дизайна. Их аргумент базируется на предположении, что только 2% их аудитории посещают сайт с мобильных устройств, и поэтому не стоило вкладывать время и усилия для того, чтобы сделать сайт отзывчивым (об этом чуть ниже). Хотя эта статья отлично написана и красноречиво суммирует их рассуждения, я не могу отделаться от мысли, что они просто не так поняли смысл отзывчивого дизайна: а именно, что это не просто дизайн для мобильных устройств. Это и не дизайн для планшетов, не для браузера в игровой консоли, не для экрана вашего футуристического холодильника. Отзывчивый веб-дизайн, по-моему мнению, должен быть независимым от устройства.

Позвольте мне развить свою мысль. Начиная с самого первого отзывчивого сайта, который я разработал, я принял решение применять медиа-запросы только тогда, когда мне казалось естественным перестроить расположение контента, а не тогда, когда ширина экрана достигала какого-то значения, свойственного для того или иного устройства (например: «iPhone в портретной ориентации» или «iPhone в ландшафтной ориентации»). Я всегда убеждал других людей следовать этому же процессу, по крайней мере по той причине, что этот процесс приучает нас переставать думать о конкретных устройствах и поэтому делают наши сайты более приспособленными для завтрашнего дня. Не далее как завтра производители могут выпустить на рынок совершенно новый продукт, который изменит мир, и при этом будет использовать совершенно другие размеры. Если вы меняете свой дизайн, __когда это следует из самого дизайна——, вам не придется потом подтягивать свои медиа-запросы к новым устройствам.

Отзывчивый дизайн не занимает больше времени и не стоит дороже

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

По крайней мере поначалу.

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

Те же, кого это еще не убеждает, наверняка, как я думаю, хотят сказать, что разные виды при разных разрешениях — значит разный дизайн, и это всегда будет означать большее время на дизайн и бóльшую стоимость, правильно? А как быть со сложными сайтами? Я просто слышу, как вы кричите: «все это прекрасно, когда вы делаете одностраничные блоги»!

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

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

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

Дополнения действительно занимают больше времени и стоят вашим клиентам дороже. Но интегрированные процессы — нет.

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

Отзывчивый дизайн стоит усилий

Если вы прочитали все, что я тут написал, то, кажется, я высказал две главные мысли:

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

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

Как всегда, ответ здесь такой: «когда как».

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

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

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

В конце прошлого года в журнале Time выяснили, что переход на отзывчивый дизайн имел для них совершенно потрясающий эффект. Крэйг Эттингер [Craig Ettinger], главный управляющий Time.com, отметил позитивные тенденции в интервью для magazine.org и adweek.com.

В заключение

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

Создайте новый HTML-документ, добавьте контент, не добавляйте никакого CSS и посмотрите этот документ в браузере. Что вы видите?

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

Адаптируем страницу под размер окна браузера

В настоящее врямя существует множество цифровых устройств с различными размерами экранов, от смартфонов до телевизоров с диагональю 42 дюйма и выше. Как полагается, на всех этих устройствах различные разрешения (примерно от 320х240 до 1920х1200) и под каждое из этих разрешений часто бывает необходимо адаптировать веб-страницу. Делается это при помощи media queries — части спецификации CSS3, позволяющей задать область действия селектора. Media queries представляет собой блок с указанием параметров устройства вывода, такие как тип, ширина и высота окна браузера, разрешение, ориентация в пространстве. Начинается всё с правила @media, следом за которым записываются типы устройств, логические операторы и медиа-функции. В списке ниже отметим все 3 логических оператора.

  1. and — логическое «И», применяется для объединения нескольких условий;
  2. not — логическое «НЕ», применяется для отрицания какого-либо условия;
  3. , — логическое «ИЛИ», если хотя бы одно из условий соблюдается, тогда стиль будет применён.

Теперь рассмотрим медиа-функции. С их помощью задаются технические характеристики устройств (например размер окна браузера). Их 12 штук в настоящее время.

  1. aspect-ratio (min-aspect-ratio, max-aspect-ratio) — определяет соотношение ширины к высоте отображаемой области. Обозначается 2/3 например, то есть 2 числа, разделённые знаком «/»;
  2. color (min-color, max-color) — определяет количество бит на один канал цвета. Значение min-color:2 обозначает, что каждый из трёх каналов цветовой системы RGB может отображать 22 оттенков и все вместе 4*4*4=64 различных цвета. Если значение не указано вообще, тогда проверяется цветное оно или нет;
  3. color-index (min-color-index, max-color-index) — определяет количество цветов, которое поддерживает устройство;
  4. device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio) — определяет соотношение сторон экрана устройства (2 числа через слэш, например 4/3);
  5. device-height (min-device-height, max-device-height) — определяет всю доступную высоту экрана устройства или печатной страницы;
  6. device-width (min-device-width, max-device-width) — определяет всю доступную ширину экрана устройства или печатной страницы;
  7. grid — определяет, что это устройство с фиксированным размером символов (терминал или телефон);
  8. height (min-height, max-height) — задаёт высоту отображаемой области;
  9. monochrome (min-monochrome, max-monochrome) — определяет, что устройство монохромное, в случае присвоения какого-либо значения, обозначается количество бит на на один пиксель. Например, значение 8 равнозначно 28 оттенкам цвета монохромного дисплея;
  10. orientation — определяет, что устройство находится в альбомном режиме, значение landscape или портретном значение portrait;
  11. resolution (min-resolution, max-resolution) — определяет разрешение устройства в dpi (точек на дюйм) или dpcm (точек на сантиметр);
  12. scan — определяет тип развертки телевизора — череcстрочная (interlace) или прогрессивная (progressive). При чересстрочной развёртке телевизор вначале показывает нечётные строки кадра, затем чётные, в прогрессивной развёртке кадр передаётся и показывается целиком;
  13. width (min-width, max-width) — задаёт ширину отображаемой области;

А теперь пример. Создадим веб-страницу, а стиль для неё зададим при помощи media queries.

<html>
 <head>
  <title>Пример использования media queries</title>
  <link rel=»stylesheet» type=»text/css» href=»mediastyle.css»>
 </head>
 <body>
  <div id=»main»></div>
   <div id=»header»>Это шапка сайта.</div>
   <div id=»topmenu»><a href=»#»>Главная</a> | <a href=»#»>Новости</a> | <a href=»#»>О нас</a> | <a href=»#»>Контакты</a></div>
   <div id=»content»>Это блок с контентом (основным содержимым страницы).</div>
   <div id=»sidebar»><a href=»#»>Статья 1</a> <a href=»#»>Статья 2</a> <a href=»#»>Статья 3</a> <a href=»#»>Статья 4</a> <a href=»#»>Статья 5</a></div>
   <div id=»footer»>Это подвал.</div>
  </div>
 </body>
</html>

Теперь задаём таблицу стилей:

#main {
font-size:14px;
}
@media screen and (max-width:800px){
 #header{
 background:#ff6633;
 width:100%;
 height:10%;
 }
 #topmenu{
 text-align:center;
 background-color:#ffcc66;
 width:100%;
 height:12%;
 }
 #topmenu a{
 color:blue;
 text-decoration:none;
 }
 #topmenu a:hover{
 color:blue;
 text-decoration:underline;
 }
 #content{
 background-color:#ffccff;
 float:left;
 width:80%;
 height:68%;
 }
 #sidebar{
 float:left;
 background-color:#ff9966;
 width:20%;
 height:68%;
 }
 #sidebar a{
 display:block;
 padding-bottom:3px;
 color:blue;
 text-decoration:none;
 }
 #sidebar a:hover{
 color:blue;
 text-decoration:underline;
 }
 #footer{
 clear:both;
 background-color:#ffff33;
 width:100%;
 height:10%;
 }
}
@media screen and (min-width:800px){
 #main {
 width:800px;
 margin:0 auto;
 }
 #header{
 background:#ff6633;
 width:800px;
 height:100px;
 }
 #topmenu{
 text-align:center;
 background-color:#ffcc66;
 width:800px;
 height:30px;
 }
 #topmenu a{
 color:blue;
 text-decoration:none;
 }
 #topmenu a:hover{
 color:blue;
 text-decoration:underline;
 }
 #content{
 background-color:#ffccff;
 float:left;
 width:650px;
 height:400px;
 }
 #sidebar{
 float:left;
 background-color:#ff9966;
 width:150px;
 height:400px;
 }
 #sidebar a{
 display:block;
 padding-bottom:3px;
 color:blue;
 text-decoration:none;
 }
 #sidebar a:hover{
 color:blue;
 text-decoration:underline;
 }
 #footer{
 clear:both;
 background-color:#ffff33;
 width:800px;
 height:50px;
 }
}

Рассмотрим теперь сам код.

С html-документом всё понятно, подключаем к нему стиль mediastyle.css. В таблице стилей сначала задаём размер шрифта. Далее говорим, что если ширина экрана (окна браузера) меньше, чем 800 пикселей, тогда для него будут выполняться следующие правила и задаём размеры всех блоков в процентах от ширины окна. Если же ширина экрана больше, чем 800 пикселей, задаём размеры всех блоков в пикселях и устанавливаем местоположение содержимого по центру страницы, при помощи значения свойства margin:0 auto;. Здесь используем для позиционирования плавающие блоки.

На этом закончим изучение CSS. Пример созданной нами страницы можно увидеть здесь. Более подробно изучить каскадные таблицы стилей можно при помощи различной литературы и всемирной паутины.

<<Предыдущая | В раздел


5 165

?

отзывчивый, чуткий, ответный, легко реагирующий

прилагательное ↓

Словосочетания

Примеры

They are a bright, responsive people here. (Ch. Dickens) 

Здесь живут очень самобытные и отзывчивые люди. ☰

The patient was not responsive to the treatment. 

Пациент не реагировал на лечение. ☰

This engine is more responsive and sweet than its predecessor. 

Эта модель двигателя обладает большим быстродействием и легче в управлении, чем предыдущая. ☰

Her condition is not responsive to drug therapy. 

Её заболевание не поддаётся медикаментозной терапии. ☰

We try to be responsive to the needs of the customer. 

Мы стараемся чутко реагировать на нужды клиентов. ☰

The reviewer used the pejorative word “versifier” to refer to the writer, whose poems had struck a responsive chord with the general public. 

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

Примеры, ожидающие перевода

I tried to get him talking, but he wasn’t very responsive.  ☰

The store is very responsive to the needs of its customers.  ☰

the cells maximally responsive to lines in this orientation will fire  ☰

Для того чтобы добавить вариант перевода, кликните по иконке ☰, напротив примера.

Возможные однокоренные слова

irresponsive  — не реагирующий, неотзывчивый, безответственность
unresponsive  — не отвечающий, не реагирующий, неотзывчивый, невосприимчивый
responsiveness  — чувствительность, ответная реакция

Добавить комментарий

Закрыть меню