Адаптивный веб-дизайн

Адаптивный веб-дизайн (англ. Adaptive Web Design) — дизайн веб-страниц, обеспечивающий правильное отображение сайта на различных устройствах, подключённых к интернету и динамически подстраивающийся под заданные размеры окна браузера.

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

Понятия

Впервые понятие отзывчивого веб-дизайна (англ. responsive web-design) ввёл Итан Маркотт в одной из своих статей в мае 2010 года. Впоследствии он выпустил книгу под названием «Responsive Web Design», посвященную данной технологии.

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

С другой стороны, Аарон Густафсон выпустил книгу «Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement», которая рассматривает метод «постепенного улучшения» (англ. progressive enhancement — ненавязчивый JavaScript) как важную составляющую адаптивного дизайна.

В результате среди веб-дизайнеров стали понимать адаптивный дизайн (англ. adaptive design, не путать с англ. adaptive layout) как более широкое понятие, включающее отзывчивый дизайн (в качестве одной из реализаций адаптивности) и постепенное улучшение.

Предпосылки писю

Главными причинами возникновения и развития технологий адаптивного веб-дизайна стали:

• увеличение количества различных разрешений устройств, с которых есть возможность выхода в интернет;
• популярность мобильных устройств с выходом в интернет и увеличение мобильного интернет-трафика;
• рекомендации поисковых систем Яндекс и Google (отсутствие дублирующих страниц и концентрация ссылочной массы на одном домене).

Основные принципы

в отзывчивом дизайне

• применение гибкого макета на основе сетки (англ. flexible, grid-based layout);
• использование гибких изображений (англ. flexible images);
• работа с медиа-запросами (англ. media queries);

в дополнение к этому в адаптивном дизайне

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

Сначала мобильные («Mobile first»)

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

В качестве иллюстрации пригодности данного подхода можно процитировать бывшего разработчика мобильных приложений для Facebook:

Изначально я рассматривал мобильное веб-приложение только в качестве вспомогательного сервиса для facebook.com, но, познакомившись с платформой, я быстро убедился, что можно создать версию, которая будет гораздо лучше, чем основной сайт! (Джо Хьюитт)

Оригинальный текст (англ.)  

My goal was initially just to make a mobile companion for the facebook.com mothership, but once I got comfortable with the platform I became convinced it was possible to create a version of Facebook that was actually better than the website! (Joe Hewitt)

— [joehewitt.com/2010/01/28/ipad Joe Hewitt, iPad]

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

См. также

• Bootstrap

Литература

• Ethan Marcotte. Responsive Web Design. — A Book Apart, 2011. — 143 с. — ISBN 978-0-9844425-7-7.
• Итан Маркотт. Отзывчивый веб-дизайн = Responsive Web Design. — М.: Манн, Иванов и Фербер, 2012. — 159 с. — (Актуальные книги для тех, кто создает сайты). — ISBN 978-5-91657-385-5.
• Люк Вроблевски. Сначала мобильные! = Mobile first. — М.: Манн, Иванов и Фербер, 2012. — 176 с. — ISBN 978-5-91657-388-6.
• Ben Frain. Responsive Web Design with HTML5 and CSS3. — Packt Publishing Ltd, 2012. — 324 с. — ISBN 9781849693189.
• Aaron Gustafson. Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement. — Easy Readers, 2011. — 144 с. — ISBN 978-0-9835895-0-1.

Ссылки

• [mediaqueri.es/ Галерея сайтов на основе адаптивного веб-дизайна] (исп.). Проверено 13 января 2012.
• Ryan Boudreaux. [www.techrepublic.com/blog/web-designer/what-is-the-difference-between-responsive-vs-adaptive-web-design/ What is the difference between responsive vs. adaptive web design?] (англ.). Проверено 3 сентября 2014.

Отрывок, характеризующий Адаптивный веб-дизайн

– Картечь! – не отвечая, крикнул старший офицер, смотревший через вал.
Вдруг что то случилось; офицерик ахнул и, свернувшись, сел на землю, как на лету подстреленная птица. Все сделалось странно, неясно и пасмурно в глазах Пьера.
Одно за другим свистели ядра и бились в бруствер, в солдат, в пушки. Пьер, прежде не слыхавший этих звуков, теперь только слышал одни эти звуки. Сбоку батареи, справа, с криком «ура» бежали солдаты не вперед, а назад, как показалось Пьеру.
Ядро ударило в самый край вала, перед которым стоял Пьер, ссыпало землю, и в глазах его мелькнул черный мячик, и в то же мгновенье шлепнуло во что то. Ополченцы, вошедшие было на батарею, побежали назад.
– Все картечью! – кричал офицер.
Унтер офицер подбежал к старшему офицеру и испуганным шепотом (как за обедом докладывает дворецкий хозяину, что нет больше требуемого вина) сказал, что зарядов больше не было.
– Разбойники, что делают! – закричал офицер, оборачиваясь к Пьеру. Лицо старшего офицера было красно и потно, нахмуренные глаза блестели. – Беги к резервам, приводи ящики! – крикнул он, сердито обходя взглядом Пьера и обращаясь к своему солдату.
– Я пойду, – сказал Пьер. Офицер, не отвечая ему, большими шагами пошел в другую сторону.
– Не стрелять… Выжидай! – кричал он.
Солдат, которому приказано было идти за зарядами, столкнулся с Пьером.
– Эх, барин, не место тебе тут, – сказал он и побежал вниз. Пьер побежал за солдатом, обходя то место, на котором сидел молоденький офицерик.
Одно, другое, третье ядро пролетало над ним, ударялось впереди, с боков, сзади. Пьер сбежал вниз. «Куда я?» – вдруг вспомнил он, уже подбегая к зеленым ящикам. Он остановился в нерешительности, идти ему назад или вперед. Вдруг страшный толчок откинул его назад, на землю. В то же мгновенье блеск большого огня осветил его, и в то же мгновенье раздался оглушающий, зазвеневший в ушах гром, треск и свист.
Пьер, очнувшись, сидел на заду, опираясь руками о землю; ящика, около которого он был, не было; только валялись зеленые обожженные доски и тряпки на выжженной траве, и лошадь, трепля обломками оглобель, проскакала от него, а другая, так же как и сам Пьер, лежала на земле и пронзительно, протяжно визжала.


Пьер, не помня себя от страха, вскочил и побежал назад на батарею, как на единственное убежище от всех ужасов, окружавших его.
В то время как Пьер входил в окоп, он заметил, что на батарее выстрелов не слышно было, но какие то люди что то делали там. Пьер не успел понять того, какие это были люди. Он увидел старшего полковника, задом к нему лежащего на валу, как будто рассматривающего что то внизу, и видел одного, замеченного им, солдата, который, прорываясь вперед от людей, державших его за руку, кричал: «Братцы!» – и видел еще что то странное.
Но он не успел еще сообразить того, что полковник был убит, что кричавший «братцы!» был пленный, что в глазах его был заколон штыком в спину другой солдат. Едва он вбежал в окоп, как худощавый, желтый, с потным лицом человек в синем мундире, со шпагой в руке, набежал на него, крича что то. Пьер, инстинктивно обороняясь от толчка, так как они, не видав, разбежались друг против друга, выставил руки и схватил этого человека (это был французский офицер) одной рукой за плечо, другой за гордо. Офицер, выпустив шпагу, схватил Пьера за шиворот.
Несколько секунд они оба испуганными глазами смотрели на чуждые друг другу лица, и оба были в недоумении о том, что они сделали и что им делать. «Я ли взят в плен или он взят в плен мною? – думал каждый из них. Но, очевидно, французский офицер более склонялся к мысли, что в плен взят он, потому что сильная рука Пьера, движимая невольным страхом, все крепче и крепче сжимала его горло. Француз что то хотел сказать, как вдруг над самой головой их низко и страшно просвистело ядро, и Пьеру показалось, что голова французского офицера оторвана: так быстро он согнул ее.
Пьер тоже нагнул голову и отпустил руки. Не думая более о том, кто кого взял в плен, француз побежал назад на батарею, а Пьер под гору, спотыкаясь на убитых и раненых, которые, казалось ему, ловят его за ноги. Но не успел он сойти вниз, как навстречу ему показались плотные толпы бегущих русских солдат, которые, падая, спотыкаясь и крича, весело и бурно бежали на батарею. (Это была та атака, которую себе приписывал Ермолов, говоря, что только его храбрости и счастью возможно было сделать этот подвиг, и та атака, в которой он будто бы кидал на курган Георгиевские кресты, бывшие у него в кармане.)
Французы, занявшие батарею, побежали. Наши войска с криками «ура» так далеко за батарею прогнали французов, что трудно было остановить их.
С батареи свезли пленных, в том числе раненого французского генерала, которого окружили офицеры. Толпы раненых, знакомых и незнакомых Пьеру, русских и французов, с изуродованными страданием лицами, шли, ползли и на носилках неслись с батареи. Пьер вошел на курган, где он провел более часа времени, и из того семейного кружка, который принял его к себе, он не нашел никого. Много было тут мертвых, незнакомых ему. Но некоторых он узнал. Молоденький офицерик сидел, все так же свернувшись, у края вала, в луже крови. Краснорожий солдат еще дергался, но его не убирали.
Пьер побежал вниз.
«Нет, теперь они оставят это, теперь они ужаснутся того, что они сделали!» – думал Пьер, бесцельно направляясь за толпами носилок, двигавшихся с поля сражения.
Но солнце, застилаемое дымом, стояло еще высоко, и впереди, и в особенности налево у Семеновского, кипело что то в дыму, и гул выстрелов, стрельба и канонада не только не ослабевали, но усиливались до отчаянности, как человек, который, надрываясь, кричит из последних сил.