Frontender Magazine

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В заключение

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

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

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

Если вы заметили ошибку, вы всегда можете отредактировать статью, создать issue или просто написать об этом Антону Немцеву в skype ravencry.

Elliot Jay Stocks
Vlad Andersen