Сокращённая версия настоящей статьи была опубликована на сайте Slon.ru.
©Slon.ru. Все права сохранены.
Представьте себе: у вас есть сайт. Правильно свёрстанный и интересно оформленный, богатый разнообразным контентом — текстами, изображениями, видео. Например, такой, на одной из страниц которого вы читаете эти строки. Информация, содержащаяся на сайте, ежедневно привлекает множество посетителей, и вы заинтересованы в том, чтобы их число росло. Тогда вы, вероятно, захотите, чтобы содержимое сайта было доступно не только пользователям настольных компьютеров и ноутбуков, но и владельцам всевозможных мобильных устройств. Как этого добиться?
Вы можете создать нативное приложение. Оно будет распространяться через апп-стор соответствующего девайса (Apple App Store на платформе iOS, Android Market на платформе Android и т.д.) и сможет использовать все преимущества мобильного интерфейса. Одна проблема: мобильных платформ сегодня слишком много (никак не менее семи), и вам придётся создавать отдельное приложение для каждой — либо смириться с тем, что та или иная часть пользователей будет лишена доступа к вашему контенту. Представьте себе, каково это — создать и поддерживать семь совершенно различных программных продуктов! Кроме того, вы столкнётесь с необходимостью подчиняться политике владельца платформы, а она, зачастую, бывает очень жёсткой и недружественной по отношению к разработчику. Скажем, Apple довёл медиакомпании до того, что они начали покидать App Store.
Вы можете создать так называемую «мобильную версию» сайта. Это, по сути, отдельный, оптимизированный для небольших экранов сайт, на который будут перенаправляться — автоматически или вручную — пользователи мобильных устройств. Язык разметки веб-страниц является платформенно-независимым, и ваш сайт, скорее всего, будет работать (с определёнными ограничениями) на любом устройстве. Но тут возникает другая проблема: рынок сегодня чрезвычайно фрагментирован, и на нём присутствуют девайсы с экранами как минимум восьми размеров — от маленьких смартфонов с дисплеями 320?240 px до 10-дюймовых планшетов с экранами почти как у субноутбуков. И этот диапазон, скорее всего, будет продолжать расширяться. В результате вам, опять-таки, придётся разработать и поддерживать несколько версий своего сайта, что сложно и экономически накладно.
И наконец, вы можете, по примеру подавляющего большинства владельцев сайтов, вообще ничего не делать — в конце концов, мобильные браузеры сегодня способны отображать почти все сайты Интернета. Вот только что это за отображение... Попробуйте открыть обычный сайт, скажем, на Nokia E63 или на iPhone предыдущего поколения — удовольствие, скажу вам, небольшое.
Но если вас не устраивает ни один из трёх описанных выше вариантов, есть четвёртый. Он сочетает в себе почти все их преимущества — и при этом практически практически свободен от их недостатков. Этот подход был предложен весной прошлого года дизайнером Этаном Маркоттом и носит название «responsive web design» (что приблизительно можно перевести как «отзывчивый веб-дизайн»). Метод быстро завоевал популярность, но до последнего времени применялся, главным образом, в относительно небольших проектах. Всё изменилось две недели назад, когда газета The Boston Globe открыла свой новый сайт.
Зайдите на сайт газеты. Он имеет лаконичный, современный дизайн, при котором визуальные элементы не отвлекают внимания от контента, а наоборот, повышают комфортность восприятия. Никаких особых новшеств вы не заметите — до тех пор, пока не попробуете уменьшить ширину окна браузера. Попробуйте сделать это, и вы будете удивлены: по мере сокращения размера экрана элементы страницы начнут автоматически перестраиваться. Изменится рас
положение блоков, уменьшатся шрифты и изображения, поменяется меню. Сдвигайте границы окна ближе и ближе друг к другу — и перед вами, одна за другой, пройдут версии для настольных компьютеров, ноутбуков, планшетов, смартфонов. Какие-то элементы вообще исчезнут и на их месте появятся другие. И всё это — в рамках одной и той же страницы.
Концепция «отзывчивого веб-дизайна» основан на нескольких революционных методиках, созданных ранее другими дизайнерами: масштабируемые шрифты и изображения; «гибкая» сетка вёрстки (fluid grids); технология media queries, при которой сайт автоматически «опрашивает» браузер о размерах его окна и в зависимости от «ответа» загружает ту или иную таблицу стилей...
Процесс разработки «отзывчивого сайта» несколько более сложен и трудоёмок, чем традиционный веб-дизайн, зато и преимущества неоспоримы. Самое главное — responsive web design требует совершенно нового подхода к визуальному представлению информации, когда на первое место выходит user experience, удобство пользователей, просматривающих сайт на самых разных устройствах и платформах. Не случайно автор методики (и многочисленные разработчики, развивающие и совершенствующие её) рекомендуют начинать создание сайта именно с его мобильной версии, причём, с наиболее простого варианта, и уже потом постепенно наращивать размер страниц и сложность вёрстки. Подобно направлению в архитектурном дизайне, называемом «отзывчивой архитектурой» (согласно которому пространство жилища должно реагировать на присутствие находящихся в нём людей, автоматически настраиваясь на их нужды и особенности), «отзывчивый веб-дизайн» позволяет наилучшим образом удовлетворять потребности любого посетителя, каким бы инструментарием для потребления информации тот ни пользовался. Возможно, это и есть тот самый «выход из тупика», который безуспешно ищут разработчики с самого момента, как появление iPad произвело настоящую революцию в способах потребления контента. Дилемма «мобильный веб против нативных приложений», наконец-то, получает своё решение.
...В ближайшем будущем журнал PrintWeek, издателем которого я являюсь, откроет новый сайт, который целиком будет построен на методиках responsible web design. Возможно, мы станем мы первыми на отечественном издательском рынке, кто реализует эту революционную технологию. Но дело не в этом. Принципы «отзывчивого дизайна» для нас — отражение общей тенденции в развитии медиа-компаний, согласно которой они должны обрести полную независимость от платформ и носителей. Функцией издания становится, прежде всего, создание высокоценного контента, который поступает читателю через все каналы, которыми он пожелает воспользоваться. «Отзывчивые» сайты уже очень скоро станут частью «отзывчивых медиа», автоматически настраивающихся под пользователя и условия, в которых ему захотелось воспользоваться информацией, — а современные мобильные технологии позволяют ему делать это в любом месте и в любое время.
