Руководство по разработке адаптивного дизайна для новичка

0
1048
Руководство по разработке адаптивного дизайна для новичка

Что же такое адаптивный/реагирующий дизайн?

Давайте начнем с самого начала. Верите или нет, но блог Think Vitamin, с которого был взят оригинал статьи, уже оборудован адаптивным дизайном. Для того чтобы увидеть его в действии, откройте страницу с данной статьей в окне браузера, и дальше медленно уменьшайте или увеличивайте окошко по горизонтали. Вы заметите, как шаблон автоматически подстраивается под размер окошка и предоставляет вам сайт в наиболее комфортном образе. Вы даже можете попробовать открыть эту страницу на мобильном устройстве. Давайте ознакомимся со скриншотами того, как выглядит сайт на различных разрешениях экрана:

 

Нельзя говорить о адаптивном дизайне, и не упомянуть при этом его создателя, Итана Маркотта (Ethan Marcotte). Если вы не читали его конструктивную статью о адаптивном веб-дизайне, то мы настоятельно рекомендуем вам ознакомиться с ней (серьезно, она обязательна к прочтению). В этой статье Итан обсуждает все ключевые идеи, формирующие адаптивный веб-дизайн; и что на самом деле представляет собой это свойство дизайна с технической точки зрения. Это не просто кусочек технологии, это больше набор техник и идей, которые формируют единое целое. Это и есть главная причина путаницы. Но прямо сейчас мы постараемся развеять все недопонимания и познакомить вас с каждой частью по-отдельности.

Так что же такое адаптивный дизайн на самом деле? На самом деле, лучше будет спросить «Какие проблемы адаптивный дизайн помогает решить?». Итак, как вы, вероятно, уже могли заметить, компьютеры более не являются единственным устройством, через которое люди сидят в интернете. Возможно, мы опорочим свой статус подобным заявлением, но нам кажется, что iPhone является первым мобильным устройством, в котором действительно по-настоящему был реализован веб-браузер. Это устройство дало толчок всему миру мобильных девайсов. Многие другие производители последовали примеру, и в целом изменился весь облик мобильного мира.

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

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

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

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

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

Гибкие сетки

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

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

Для того чтобы высчитать пропорции для каждого элемента на странице, вы должны разделить указанный элемент по контексту. На данный момент наилучшим способом является создание высококачественного (высокоточного) наброска в редакторе изображений, позволяющем работать с пиксельной точностью (например, Photoshop). Имея свой набросок высокой точности, вы можете измерить элемент на странице, и разделить его на полную ширину страницы. Например, если ширина вашего шаблона равна 960 пикселей, то это и будет значение вашего элемента «container». Затем давайте предположим, что наш указанный элемент имеет ширину в 300 пикселей. Если мы разделим результат на 100, то получим процентное соотношение равное 31.25%. Его мы и можем применить к нашему элементу. Вот наш расчет:

 

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

Гибкие сетки очень важны в процессе разработки адаптивного дизайна, но они могут помочь нам не во всех случаях. Когда ширина браузерного окна становится совсем небольшой, дизайн начнет преломляться. Например, полноценный 3-колонный шаблон вряд ли будет нормально отображаться на маленьком экране мобильного устройства. К счастью, адаптивный дизайн и об этом позаботился… за счет media queries.

Media Queries

Вторая часть адаптивного дизайна заключается в CSS3 media queries, которые на данный момент поддерживаются почти во всех современных браузерах. Если вы не знакомы с CSS3 media queries, то эта технология в основном позволяет вам собирать данные о посетителе сайта, и использовать их для применения соответствующих стилей CSS. В нашем случае мы ориентированы на свойство min-width, которое позволяет нам применять определенные CSS-стили, если размер окна браузера подпадает под определенную ширину, которую мы можем задать. Если мы хотели применить стилизацию к мобильным телефонам, то наш media query выглядел бы примерно так:

@media screen and (min-width: 480px) {

.content {float: left;}

.social_icons {display: none}

// and so on…

}

Используя серию media queries типа таких, мы можем и дальше делать нашу работу, даже при больших разрешениях. Мы рекомендуем вам использовать следующие наборы разрешений в пикселях:

* 320px, 480px, 600px, 768px, 900px, 1200px

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

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