Создаем сайт будущего: Responsive Web-design

Создаем сайт будущего: Responsive Web-design

На сегодняшний день наиболее актуальным вопросом является применение responsive/adaptive web-design при создании сайта. Все большее количество самых различных размеров экрана появляется на рынке мобильных устройств. При этом важно учитывать особенности соответствующего пользовательского взаимодействия. Все эти задачи и решает Responsive Web design: он позволяет красиво отобразить содержание веб-ресурса на экранах любых мобильных устройств, в том числе и гаджетов будущего поколения.

Если вы еще действуете «по старинке»- создаете 2 сайта (один специально для гаджетов и еще один для для более крупных экранов- стационарного ПК, ноутбука или ТВ), то вам просто необходимо воспользоваться responsive web-design для вашего сайта, пока это не сделали все ваши конкуренты!

• Для начала немного истории

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

С применением смартфонов ситуация стала еще хуже. iPhone от компании Apple стал первым мобильным устройством, который обеспечил по-настоящему удобный просмотр веб-страниц, и многие другие компании последовали его примеру. Сегодня все больше людей предпочитают серфинг по интернету осуществлять с устройств, имеющих небольшие размеры экрана. В то же время многие люди по-прежнему пользуются большими мониторами, планшетами и даже ТВ. Таким образом, имеющаяся в настоящее время разница между просмотром веб-страниц на устройствах с самыми маленькими и самыми большими экранами велика как никогда. Пользователям мобильных устройств, любящих заниматься серфингом по всемирной сети, надоедает постоянно увеличивать и уменьшать области страниц, чтобы их было удобно просматривать на маленьком дисплее, а затем прокручивать страницы влево и вправо, чтобы прочитать весь текст, не умещающейся в область просмотра экрана, и стараться при этом случайно не задеть ненужную ссылку. Все эти пользовательские проблемы исчезают, если ваш сайт создан или улучшен с помощью responsive web-design.

• Responsive web-design: что это?

Основателем данного подхода веб-дизайна является Итан Маркотт (Ethan Marcotte). В своей конструктивной статье на сайте A List Apart он объединил три существующие методики (макет гибкой сетки, гибкие изображения и медиазапросы) в единый подход и назвал его отзывчивый веб-дизайн . Этот термин часто подразумевает то же самое, что и такие понятия, как «резиновый» дизайн, эластичный макет, «резиновый» макет, дизайн с непостоянными размерами, адаптивный макет, дизайн с поддержкой разных устройств и гибкий дизайн. Итан Маркотт оказал огромное влияние на общепринятый подход к созданию веб-сайта.

Отзывчивый дизайн (Responsive web design или RWD) — это создание дизайна, при котором веб-сайт разрабатывается с расчетом на то, чтобы обеспечить наиболее простое его использование: удобный просмотр сайта с минимумом ресайзов и лишних прокруток — на самом широком спектре устройств.

Responsive web design обладает несколькими особенностями: при его верстке используются исключительно HTML5 и CSS3 — без подключения JavaScript для определения «отзывчивости» элементов дизайна.

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

• Основные принципы Responsive web design

Отзывчивый веб-дизайн имеет три основных принципа:

1. расположение всех элементов в рамках модульной сетки;
2. все элементы верстки и медиа-файлы (в том числе изображения) являются «резиновыми» (flexible) — их размеры зависят от размера экрана;
3. работа осуществляется с Media queries — модулем CSS3, позволяющим задавать разные стили (или даже таблицы стилей) в зависимости от разрешения экрана, его размеров и прочих характеристик.

Responsive web design создается с использованием адаптивной разметки (не путать с адаптивным дизайном). Адаптивная разметка (adaptive layout) заключается в том, что на сайте создается несколько стилей, вариантов расположения элементов на модульной сетке и несколько вариантов стилей элементов дизайна. Эти варианты сменяют друг друга при изменении размеров экрана, при этом образуются некие точки перехода между разными видами разметки/стилей сайта.

При этом отзывчивый дизайн не подразумевает работы с объектной моделью элементов на странице и смену /вложенности блоков и объектов при изменении вида разметки.

Для того, чтобы более наглядно понять суть работы сайтов, созданных с помощью RWD, можно посетить www.bostonglobe.com и, постепенно уменьшая размер окна браузера, следить, как содержание (картинки и текст) будет отвечать изменениям размера окна. Или посетить сайт www.liquidapsive.com в меню которого можно выбирать различные варианты отображения страницы: adaptive/liquid/responsive/static (адаптивный/резиновый/отзывчивый/статический).

• Понятия adaptive/liquid (адаптивный/резиновый) web design

Адаптивный дизайн (Adaptive web design или AWD) — это дизайн, основанный на операциях с разными макетами сайта или его разметкой для обеспечения наилучшего его использования на определенных, заданных заранее, устройствах и разрешениях экрана.

Особенностями данного подхода при создании веб-проекта являются:
- элементы сайта могут скрываться, заменяться другими;
- могут меняться поведение и функции отдельно взятых элементов веб-сайта;
- требуется повсеместное использование JavaScript для управления поведением и функциями объектов на сайте;
- необходимы работы с объектной моделью элементов на странице, подразумевает смену их иерархии/вложенности на разных устройствах.

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

Резиновый дизайн (Liquid web design) - появился довольно давно, долгое время соседствуя со статическим (Static web design), фиксированным дизайном. Основная его особенность в том, что ширина колонок задаётся в %-тах, а не в стандартных пикселях. Поэтому "резиновый" дизайн при любом разрешении монитора растягивается на всю его ширину. Сделать такой дизайн, особенно при использовании блочной вёрстки несколько сложнее, чем фиксированный, зато пользователь не будет видеть пустых полей на странице. Примечательно, что изначально резиновый дизайн довольно широко использовался в Рунете, в то время как на Западе разработчики очень долго сохраняли приверженность статическому дизайну.

• Путаница в определениях adaptive/liquid/responsive (адаптивный/резиновый/отзывчивый/) web design

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

На самом деле, adaptive web design является необходимой частью responsive web design, так как подразумевает работу только с макетом страницы: медиазапросы CSS3 , гибкие изображения (fluid images) и макет (fluid grid). В отличие от адаптивного -респонсив веб-дизайн (отзывчивый) включает в себя немного большее. В частности, существует отдельное понятие «адаптивный макет» - это макет, сделанный сочетанием множества горизонтальных размеров одинаковой ширины. Поэтому responsive web design может быть одной из форм adaptive web design сайта. То есть в итоге получаем, что Responsive web design= adaptive web design+прогрессивные улучшения. Хотя на практике эти понятия на самом деле зачастую совпадают.

• Почему следует отдавать предпочтение именно Responsive web design

Responsive web design имеет возможность регулировки потока содержащейся информации на странице - по мере изменения областей просмотра, но это не единственное преимущество. Медиазапросы CSS3 — важная составная часть responsive web design, а дополнительные CSS3-модули позволяют достичь невиданных ранее параметров гибкости макета. С возможностью замены фоновой графики и сложных сценариев JavaScript - на легковесные CSS3-градиенты, тени, верстки, анимации и всевозможные трансформации.

• Нешуточные «страсти» по вопросу отличий responsive/adaptive web-design

Хочется отметить большой всплеск дискуссий по вопросу responsive/adaptive web-design, на сегодняшний день «страсти» только накаляются и однозначного правильного ответа никто дать не может- мнений много и все разнятся. Мы, со своей стороны - исходя из накопленного опыта, советуем вам для наиболее полного раскрытия вопроса, самостоятельно прочитать книги по данной тематике, написанные на языке оригинала:

«Adaptive Web Design» Аарона Густафсона и «Responsive Web Design» Итана Маркотта (русское издание называется «Отзывчивый веб-дизайн»).

Потому что, большое количество противоречащих друг другу мнений и, как следствие, путаница по данному вопросу, происходит в большинстве своем от неправильного перевода или частичного недопонимания тематики.

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

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

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

Мы всегда рады вам помочь!