Адаптивный веб-дизайн: что это такое, зачем он нужен и его принципы

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

Адап­тив­ный веб-дизайн – доста­точ­но новое направ­ле­ние в дизайне веб-ресур­сов, но уже сей­час он явля­ет­ся одним из глав­ных пока­за­те­лей каче­ства сай­та. В дан­ной ста­тье мы рас­ска­жем о том, что такое адап­тив­ный веб-дизайн и каким он быва­ет.

Что такое адаптивный веб-дизайн

Адап­тив­ный веб-дизайн (в англий­ском язы­ке «responsive web design») – это дизайн веб-стра­ниц, обес­пе­чи­ва­ю­щий отлич­ное вос­при­я­тие на раз­лич­ных устрой­ствах, под­клю­чен­ных к Интер­не­ту.

Это зна­чит, что один и тот же сайт мож­но про­смат­ри­вать на самых раз­ных устрой­ствах, неза­ви­си­мо от раз­ре­ше­ния и фор­ма­та экра­на, – смарт­фо­нах, план­ше­тах, ноут­бу­ках и т.д. При этом про­смотр будет оди­на­ко­во удо­бен для всех фор­ма­тов – поль­зо­ва­те­лям мобиль­ных устройств, напри­мер, не нуж­но будет рас­ши­рять отдель­ные обла­сти сай­та, что­бы не про­мах­нуть­ся мимо нуж­ной ссыл­ки.

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

Зачем нужен адаптивный веб-дизайн?

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

2) Попу­ляр­ность мобиль­ных устройств с выхо­дом в Интер­нет и уве­ли­че­ние мобиль­но­го Интер­нет-тра­фи­ка. С ростом попу­ляр­но­сти мобиль­ных устройств коли­че­ства поль­зо­ва­те­лей, кото­рые захо­дят с них на сай­ты, замет­но уве­ли­чи­лось, поэто­му про­сто игно­ри­ро­вать их уже нель­зя – это не один-два чело­ве­ка в пол­го­да, это зна­чи­тель­ная часть вашей ауди­то­рии, и им долж­но быть удоб­но поль­зо­вать­ся вашим сай­том (ина­че они не будут это­го делать).

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

Отличие адаптивного сайта от мобильной версии (приложения) сайта

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

1) Под каж­дый тип опе­ра­ци­он­ной систе­мы нуж­но свое при­ло­же­ние / вер­сия сай­та. Это тре­бу­ет допол­ни­тель­ных ресур­сов, как вре­мен­ных, так и денеж­ных.

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

3) Раз­де­ле­ние траф­фи­ка. С точ­ки зре­ния про­дви­же­ния сай­та мобиль­ное при­ло­же­ние не удоб­но тем, что раз­де­ля­ет весь траф­фик ресур­са на траф­фик сай­та и траф­фик при­ло­же­ния, что будет выгля­деть, как мень­шая посе­ща­е­мость сай­та.

4) Необ­хо­ди­мость инте­гра­ции мате­ри­а­лов сай­та. В слу­чае с мобиль­ным при­ло­же­ни­ем необ­хо­ди­мо либо син­хро­ни­зи­ро­вать сайт с при­ло­же­ни­ем (допол­ни­тель­ные ресур­сы), либо делать двой­ную рабо­ту по напол­не­нию сай­та и при­ло­же­ния мате­ри­а­ла­ми.

В отли­чие от мобиль­ных при­ло­же­ний, адап­тив­ный дизайн – это один адрес сай­та, один дизайн, одна систе­ма управ­ле­ния и содер­жа­ние сай­та.

Без­услов­но, адап­тив­ный дизайн так­же име­ет свои мину­сы, глав­ным из кото­рых явля­ет­ся отно­си­тель­ная новиз­на тех­но­ло­гии и, как след­ствие, недо­ста­ток хоро­ших спе­ци­а­ли­стов и зна­ний о про­ек­ти­ро­ва­нии адап­тив­ных сай­тов.

Принципы адаптивного дизайна

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

  • Про­ек­ти­ро­ва­ние для мобиль­ных устройств с самых ран­них эта­пов («mobile first»);
  • При­ме­не­ние гиб­ко­го маке­та на осно­ве сет­ки (flexible, grid-based layout);
  • Исполь­зо­ва­ние гиб­ких изоб­ра­же­ний (flexible images);
  • Рабо­та с меди­аза­про­са­ми (media queries);
  • При­ме­не­ние посте­пен­но­го улуч­ше­ния.

Типы адаптивных макетов

В ста­тье на Хаб­ра­хабр пред­став­ле­ны основ­ные виды адап­тив­ных маке­тов, суще­ству­ю­щие в насто­я­щее вре­мя.

1) Резиновый

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

2) Перенос блоков

Оче­вид­ный спо­соб для мно­го­ко­ло­ноч­но­го сай­та: при умень­ше­нии шири­ны экра­на допол­ни­тель­ные бло­ки (сайдба­ры) пере­но­сят­ся в ниж­нюю часть маке­та.

Перенос блоков. Фрагмент сайта  LukeW Ideation + Design
Пере­нос бло­ков. Фраг­мент сай­та LukeW Ideation + Design

3) Переключение макетов

Этот спо­соб наи­бо­лее удо­бен при чте­нии сай­та с раз­лич­ных устройств: под каж­дое раз­ре­ше­ние экра­на раз­ра­ба­ты­ва­ет­ся отдель­ный макет. Спо­соб тру­до­е­мок, поэто­му менее попу­ля­рен, чем преды­ду­щие два.

Переключение макетов. Фрагмент сайта  LukeW Ideation + Design
Пере­клю­че­ние макетов.Фрагмент сай­та LukeW Ideation + Design

4) Адаптивность «малой кровью»

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

Адаптивность "малой кровью". Фрагмент сайта  LukeW Ideation + Design
Адап­тив­ность «малой кро­вью». Фраг­мент сай­та LukeW Ideation + Design

5) Панели

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

Панели. Фрагмент сайта  LukeW Ideation + Design
Пане­ли. Фраг­мент сай­та LukeW Ideation + Design

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

Книги по теме:

  • 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