Адаптивный дизайн. «Адаптируйся или умри»

Григорий Коченов: Здравствуйте, меня зовут Григорий Коченов, я креативный директор компании AGIMA, и мой мастер-класс называется «Адаптируйся или умри». Начнем мы с того, что сейчас цивилизация переживает очень интересный момент: развитие мобильных устройств бурлит и превосходит все ожидания, которые имели место десять или двадцать лет назад. Вот хороший кадр: по статистике на 2010 год, 77% людей на Земле обладали мобильными телефонами, причем в Азии сейчас идет невероятный рост; даже в маленьких африканских деревушках, где электричество вырабатывается только на ветряке, уже есть простые feature phones — телефоны, через которые они выходят в Сеть, это их единственный, в общем-то, канал связи с большой планетой и с цивилизацией. Еще интересный график: здесь кружочком, вы видите, отмечено место, когда количество мобильных юзеров интернета превысит количество пользователей обычного десктоп-интернета. Это будет в 2013 году, нам осталось ждать буквально полгода, если не произойдет, конечно, конца света. Мы называем это «мобильным переломом» — тот момент, когда изменится все. Вы можете посмотреть на статистику числа мобильных пользователей интернета в России. Это 2012 год, и вы видите очень сильный рост. С января по июнь, за полгода, количество мобильных пользователей увеличилось на целый миллион человек. О них теперь нужно думать и никогда не забывать. Еще интереснее график по Японии: там все идет немножко впереди, как обычно, и то же самое у них произошло с мобильным интернетом. В 2006 году было совсем мало, а в 2010-м подавляющее большинство японцев пользовалось мобильником как основным средством коммуникации и доступа в Сеть. Особенно это касается социальных сетей, социальные сети и мобильный — это неразрывные вещи. Что же происходит у нас? Вот это мой телефон, моя красивая Nokia, на которой я открыл Lenta.ru. Вы видите, что этим пользоваться вообще невозможно: какие-то маленькие картиночки, какой-то текст, для прикола еще можно посмотреть сайты политиков. Вот большой палец — и как он может ткнуть на биографию Владимира Путина? По-моему, это очень сложно. Или «Зюганов»: чтобы что-то рассмотреть на этом сайте, надо делать эти движения, классический swype на телефоне, всегда увеличивать и увеличивать, используя мобильный интернет в телефоне все равно что с лупой. Я рассматриваю какой-то мелкий контент, и это дико неудобно, и это бесит. «Мобильные сайты, возможно, решение» — так думали, допустим, лет десять назад. Да, о’кей, давайте сделаем что-то совершенно специфическое для мобильных. Мы тоже в компании AGIMA это делали. Вот, например, сайт «РОСНО», который мы сделали несколько лет назад. С ним связана интересная история. Мы его сделали, запустили, и тут нам из РОСНО звонят: «Извините, но что-то у вас сайт ни фига не работает, картинки замылены». Тогда вышел iPhone 4, и, оказалось, у кого-то из отдела маркетинга РОСНО был iPhone 4. Он видит, что логотип плохо отображается. Появилась Retina, появился новый дисплей, и надо было апдейтить тот самый мобильный сайт. Сайт «Афиши» тоже хороший пример: если вы найдете на нем кинотеатр «Солярис», который рядом с моим домом, то я вам дам парабеллум, потому что это невозможно. Мучение, «Афиша» — это просто дикое мучение! Единственное, что мы хотим на этом сайте, — проскроллить его вниз и найти кнопочку, чтобы перейти на нормальный сайто. Еще круче сайт Pepsi, где вообще обрезали все: у нас есть бутылочка лимонада и есть клик на Facebook, и больше тебе ничего не надо, весь сайт. Что сделала Pepsi, что сделала «Афиша»? Они берут нормального человека, нормальный сайт и обрубают ему голову, голова в ведре еще матерится несколько секунд, она еще живая, но потом умирает. Это и есть мобильные сайты. Они дико обрезаны, и это ужасно. Почему они были обрезаны изначально? Потому что люди думали, что пользователь использует мобильный сайт на бегу: я куда-то иду, мне нужно быстро найти какую-то информацию, какой-то адрес или еще что-то, и я роюсь в своем мобильном, захожу на сайт и тут же обнаруживаю то, что мне нужно. На самом деле это не так. Если вы зайдете в метро, посмотрите на какую-нибудь очередь к врачу, то увидите, что люди сейчас сидят в мобильных намного больше — часы каждый день. Они в очередях очень много это используют, постоянно. Люди уже не используют телефон на бегу. Вот, кстати, хорошая картиночка: как раз здесь можно посмотреть, что есть на главной странице какого-то университета и что люди обычно там ищут. И единственное, что здесь совпадает, — это полное название школы. Удивительный диссонанс между тем, что представляют владельцы компаний или какие-то организации, и тем, как люди это используют. Если я использую мобильный телефон, это не значит, что мне нужно только какую-то маленькую долю информации дать. Мне нужен полный контент, мне нужно все. Applications, может быть, выход? Так сейчас очень многие считают и очень многие делают, но хороший довод в пользу мобильного Веба тот же самый Facebook: у Facebook сейчас основной трафик все равно идет через Веб. Вот здесь показано, что iOS и Android, вместе взятые, в applications не дают того трафика, который дает обычный мобильный интернет. То же самое можно экстраполировать в будущее: постоянно меняются платформы, меняются версии, и обновлять и делать приложения для всех них очень сложно. Можно сделать один сайт и забыть про это все, забыть про Badoo и какие-то другие экстравагантные площадки. И на самом деле выход есть.
Как люди привыкли делать сайты за 15 лет эволюции веб-дизайна? Это называется desktop mentality, когда я мыслю экраном, но Веб не этот вот странный компьютер, Веб — это совершенно другое. Веб сейчас — это и ноутбуки, и планшеты, и телефоны, и какие-то странные гаджеты, которые вон там внизу практически обрезаны, это, может быть, гибкая бумага, черно-белый дисплей, как у Kindle, это, может быть, мои часы (я на них тоже хочу почту проверить, why not?). Или моя беговая дорожка: пока бегу, я смотрю Tupac: Resurrection на YouTube и все такое. И выход называется responsive design — это новая эра развития веб-дизайна. И мы начали заниматься этим где-то полтора года назад, само понятие появилось около двух лет назад и сейчас очень активно развивается. Что это такое? Сейчас я вам покажу видео, чтобы вы сразу могли понять. Это очень просто. Вот сайт студии Angry Creative. Это обычная десктоп-версия, я ее сужаю. Вот как у меня уменьшается экран, то же самое происходит на мобильных устройствах, и у меня все меняется. У меня вместо обычного горизонтального меню появляется вертикальное с большими кнопками, которые удобно нажать пальцем, потому что люди привыкли на мобильных устройствах тыкать, а значит, должны быть большие объекты. Например, согласно требованиям к разработчикам для Microsoft, каждая кнопочка должна занимать примерно квадратный сантиметр. Сейчас я установлю презентаху. Опа! Гипножаба прошла… Когда я разрабатываю сайт, мне нужно разрабатывать его одинаково как для мобильных, так и для десктопных версий. Мне нужно, чтобы пользователь получил равнозначный эффект от использования сайта как на телефоне, так и на большом компьютере и на всех промежуточных устройствах, например на планшетах. Вот это первый сайт, сайт компании ЦРТ, который мы сделали в компании AGIMA. Я с гордостью заявляю, что это самый первый российский адаптивный сайт, и, естественно, когда мы его стали делать, это была абсолютно новая тема, мы очень много раз наступали на грабли. Во многом этот сайт — «блин комом», потому что здесь не все работало так, как нам нужно, и для нас это был очень большой прорыв в будущее и очень ценный experience. Мы начали его разрабатывать совершенно неправильно, так, как нельзя разрабатывать адаптивные сайты. Мы начали разрабатывать с десктоп-версии, с большого экрана, потом переходили на мобильный. И тут у нас начался такой процесс, который мы назвали у себя в компании «фаршем» и «фаршированием», потому что что-то менялось на мобильном, потом это менялось на десктоп-версии, и мы скакали туда-сюда, туда-сюда. Это было ужасно! Следующий сайт, который запустился весной 2012 года, — это для бренда компании «Царицыно», которая производит колбасу, «Доктор» — это название колбасы. Здесь мы учли наши прошлые ошибки и пошли по-другому. Мы сначала разработали мобильный сайт, а потом постепенно переходили на десктоп-версию. Некая минимальная функциональность у нас обрастала дополнительными фишечками, функциями, какими-то новыми контентными областями. Этот принцип называется mobile first: начинаем с телефона и постепенно-постепенно переходим к дизайну на большом компьютере. Принцип mobile last проиллюстрирован на слайде: этот абстрактный стаканчик на телефон не помещается. Что-то надо делать, а что делать, совершенно непонятно. Принцип mobile first решает очень многие вопросы. Mobile first — что это такое? Это в первую очередь контент. Когда я начинаю дизайнить сайт на мобильном, мне нужно подумать о том, что нужно дать человеку в первую очередь, как не загрузить человека излишней информацией, картинками, надо подумать о том, чтобы контент был легким, доступным, в правильной форме. И отсюда вытекает следующая концепция, которая мне очень нравится и которая влияет на многое из того, что будет у нас впереди, влияет целиком на дизайн и все интерактивные вещи, — это future-friendly content.

Что такое future-friendly content? Это когда у меня все содержимое собрано в некий кластер, у которого есть иерархия, правильная организация информации, внутренние связи, и этот информационный кластер может использоваться на сайтах, их может быть много, не обязательно один.

Это же может использоваться в приложениях. Вот буквально недавно была презентация Windows 8. Вы знаете, что приложения там делаются на HTML5 и, используя тот же самый контент, мы можем очень легко модифицировать и разрабатывать приложения. Также мы с этим контентом взаимодействуем с социальными сетями. Главное — сформировать вот этот главный кластер с информацией, и дальше его использование практически не ограничено. Вот, например, контент, который у меня полностью собран. Он абсолютно излишен и не подходит ни под корпоративный сайт, ни под какие-то другие нужды, но, в принципе, здесь важные «ящички» стоят. Чем же будет мой сайт, когда я применяю future-friendly content и принципы, о которых я раньше сказал? Это будет что-то такое — легкая лодочка, которая парит на волнах, причем это может быть одна лодочка либо другая лодочка, их может быть много, потому что, когда у меня есть responsive design, я могу учитывать контекст. Как это происходит? Допустим, я открыл мобильный сайт, и я иду где-то рядом с вашим магазином, и сайт понимает по геолокации: ого, рядом магазин! И он мне может показать большой баннер с указанием: «Иди налево, там ты купишь то, что тебе нужно». Либо можно использовать такую вещь, как адаптация под время. Например, это делает сейчас eBay на своем адаптивном сайте. Так, eBay провел исследование, и они поняли, что днем люди в основном заходят с больших компьютеров и покупают что-то дорогостоящее: машины, мебель, а вечером преимущественно пользуются своими телефонами, и тогда уже на главную страницу выводятся совершенно другие категории — категории товаров до 200$. Они изначально подразделяют пользователей. И еще, кстати, был один случай, не очень хороший: магазин Amazon чуть-чуть увеличивал цену для пользователей «яблочных» устройств. Когда про это узнали, был большой скандал, но я уверен, что кто-то из российских людей это использует и их никто никогда не уличит в этом. Также появляется абсолютно новое понятие, которого не было в веб-дизайне, — это «переплетение контента». Что это такое? У меня есть responsive design сайт, и у него блоки перемещаются в зависимости от разрешения: я уменьшил экран, и у меня какая-то колонка слева передвинулась вниз. Но это может быть совершенно неправильно. Если у меня сбоку висела кнопка «Купить» и вдруг она ушла куда-то вниз, у меня потерялся смысл всей страницы. Поэтому важно помнить об организации контента, о том, чтобы у каждого из пунктов, которые у меня есть на странице, у каждого блока была своя значимость, чтобы контент перемещался в соответствии с иерархией, и эта иерархия может быть разной для разных типов устройства. Это чисто работа с контентом, и, если вы будете это делать вручную, будет большой геморрой, это те же самые грабли, на которые мы наступали, делая сайт ЦРТ. Надо изначально это заложить и делать это не на этапе дизайна, а на этапе работы с информацией, с контентом. Есть еще один офигительный пункт, который мне очень нравится, у него название просто как песня — graceful degradation. Что это такое? Я сделал сайт, он у меня очень крутой, у него есть классные инновационные фишечки, но я захожу на этот сайт с какого-то странного, очень старого компьютера. Я зашел, первым отрубился Java Script, потом полетел HTML5, CSS, CSS3, ничего не работает, у меня даже изображения не загрузились, но у меня остался первозданный, чистый, девственный HTML. И как раз HTML мне даст возможность посмотреть всю необходимую информацию, кликнуть на менюшечки, воспользоваться какими-то формами и в форме обратной связи написать письмо. Планируя адаптивный сайт, вы должны заложить возможность его «деградации», чтобы на странных устройствах будущего, когда все будет по-другому, он у меня не открылся как черное окно. Хороший случай, когда сайт соответствует этому принципу, — это любой Flash-сайт: он у меня откроется, где нет плагина, просто как черное окно или вообще не откроется. Ну, это ни в какие ворота не лезет и никуда не годится. Брэд Фрост, известный дизайнер, который занимается адаптивными сайтами, переделал пирамиду Маслоу в такую структуру: нижний уровень — это доступность, то, что происходит с сайтом под воздействием graceful degradation. Сейчас я хочу поговорить про верхний, самый последний уровень развития. Что произошло вообще с эволюцией устройств за последние десять лет? Раньше у нас был graphical user interface — то, к чему мы все привыкли: это классические иконочки, файлики и все, что есть у меня на классических компьютерах. В 2007 году появился iPhone и на арену вышел другой способ взаимодействия — natural user interface. И это тоже надо учитывать, и это во многих случаях очень сильно влияет на дизайн. Допустим, в natural user interface мне нужно делать большие кнопки, как я и говорил, мне нужно совершенно по-другому строить, например, галереи: мне не нужны кнопочки, я могу галерею пролистывать пальцем, и это будет совершенно естественно и правильно. Я могу трясти телефон. Компьютер я не буду трясти. Во многом телефон — гораздо более мощная вещь, чем компьютер, и возможности его использования намного шире. У него есть акселерометр, у него есть связь со спутниками и возможность определить его местоположение. Плюс Siri, может быть, когда-то дойдет до нас, тогда можно будет взаимодействовать с сайтом с помощью речи, я ему буду говорить: «Здравствуй, сайт, загрузи-ка мне то-то». Появляются все новые и новые возможности, и об этом говорит нам принцип progressive enhancement, «прогрессивного улучшения». Когда я сделал сайт и у него все хорошо работает на десктопе, я сделал его адаптивную версию, которая хорошо работает на телефоне, я понимаю, что пришло время творчества, и я открываю эту пирамиду, смотрю самый высокий элемент и начинаю снабжать свой сайт фишками, чтобы он реагировал на движения, чтобы он понимал, где он находится, где мы находимся. Много-много-много разных вещей. Плюс этот принцип нацелен в будущее: я не знаю, что будет завтра, какими удивительными способностями будут обладать телефоны через пять лет, но, сделав хороший адаптивный сайт, я могу постепенно внедрять в него новые фишки, и он будет у меня развиваться. Это очень правильный процесс, и это очень интересно.
Какие выводы? Если мы будем делать адаптивный сайт, у нас будет очень высокий охват аудитории, потому что мобильные телефоны сейчас есть практически у всех и, как я уже говорил, в 2013 году они будут иметь абсолютно подавляющее значение, их будет больше, чем обычных компьютеров, ими люди будут больше пользоваться и будут выходить в интернет с них чаще, чем с обычных компьютеров.
Контент.

Если вы делаете действительно адаптивный сайт и делаете его действительно по принципам responsive web, у вас будет future-ready content, который можно будет использовать для других целей, то есть вы его сможете развивать, добавлять новые фишки, новый контент, но изначально будет правильная иерархия, которую можно использовать и для приложений, и для работы в социальных сетях и т. д.

Доступность. Это как раз graceful degradation: когда мой новый сайт работает на совершенно старых компьютерах и заточен под устройства будущего. Это офигительно, и это очень классной картинкой: вот где мы сейчас, где летит этот человек; мы прыгнули, но еще не приземлились, вокруг нас столько новых вещей, столько новых возможностей, что у меня захватывает дух, и я чувствую, как мне повезло заниматься веб-дизайном и вообще вращаться в этой интерактивной тусовке именно сейчас, потому что еще каких-то пять лет назад всего этого не было. Это очень круто, этим надо заниматься, и это надо делать, потому что это полезно как для пользователя, так и для бизнеса, и это вдохновляет программистов и дизайнеров.
На этом все, спасибо за внимание, с вами был Григорий Коченов, я креативный директор компании AGIMA. Если у вас есть еще какие-то вопросы по поводу адаптивных сайтов или будущего веб-дизайна, вы легко можете меня найти в социальных сетях, и feel free to communicate. До свидания!