Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Агентство продающего дизайна
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
28
Битрикс24

Битрикс24

www.bitrix24.ru

20
Отследить-посылку

Отследить-посылку

B2B-сервис трекинга посылок

16
myPreza

myPreza

mypreza.ru

13
WebResidentTeam

WebResidentTeam

webresident.agency

12
Perezvoni.com

Perezvoni.com

perezvoni.com

11
Expresso

Expresso

www.expresso.today

9
Reader

Reader

Интернет-журнал о современных технологиях.

7
ADN Digital Studio

ADN Digital Studio

adn.agency

7
Frutra

Frutra

design.frutra.ru

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк в Facebook

Респонсив и адаптивный дизайн: как не сесть в лужу

3 576 10 В избранное Сохранено
Авторизуйтесь
Вход с паролем
Респонсив и адаптивный дизайн. Какой из них больше подходит для ваших бюджета и целей? Какие преимущества и недостатки у методик? В этой статье команда Шуба Lab постарается ответить на эти вопросы.

В наше время сложно переоценить популярность мобильных устройств. В условиях жёсткой конкуренции каждый разработчик и дизайнер прекрасно понимает, что сайт должен выглядеть идеально на любом девайсе - будь то экран телефона или 27-ми дюймовый моноблок. В связи с этим девиз «дизайн для любого устройства» в последние годы активно использовался и сформировался в целое самостоятельное направление, которое нельзя игнорировать. Проблема создания гибкого дизайна подтолкнула многих дизайнеров и разработчиков к решению острого профессионального вопроса: использовать респонсив или адаптивный дизайн? Эти две методики построения дизайна легко перепутать или сделать неверный выбор. Так что же такое респонсив и адаптивный дизайн?

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

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

В этой статье команда Шуба Lab постарается ответить на эти вопросы.

1.В чём ключевое отличие респонсив от адаптивного дизайна?

b_553f49988a2a8.jpg

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

b_553f48ffdb2d6.jpg

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

2. Насколько гибкий каждый из дизайнов?

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

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

3. Какая из технологий обеспечит более высокую скорость?

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

Если у вас ещё остался вопрос: “Так какой же дизайн мне использовать?”

b_553f4a256937a.jpg

Более безопасным подходом можно назвать респонсив дизайн, ведь он не зависит размера экрана и других особенностей. На наш взгляд, выбирать надо тот шаблон, который лучше подходит для конкретного проекта (в т.ч. комбинировать). Даже для больших разрешений бывают случаи, когда растянуть элементы - недостаточно, а лучше сделать отдельный дизайн, если позволяет бюджет. Отталкивайтесь от ситуации и статистики: иногда на сайте не обойтись без трех видов шаблонов, а иногда достаточно и одного. Если вы еще не пользуетесь этими подходами, то теряете возможность привлечь больше пользователей, предоставив им удобный сервис, и, соответственно, теряете потенциальных клиентов.

Если у вас все еще остались вопросы, то оставляйте на сайте Шуба Lab заявку с пометкой «Спарк» и наша команда поможет выбрать подходящую технологию для Вашего проекта совершенно бесплатно!

Для того, чтобы первыми получать информацию о всех статьях и скидках от Шуба Lab − подписывайтесь на нашу рассылку http://eepurl.com/bmB4X1

+1
Первые Новые Популярные
Артём Пчеляков
Но ведь то, что вы описали это: Responsive Layout, Adaptive Layout. Т.е. это лишь разновидности верстки, но никак не дизайна!
Ответить
MonoChat
Агрегатор сообщений из мессенджеров. Для службы поддержки и отдела продаж.
Алекс Шуб
При проектировании современного дизайна все эти особенности необходимо понимать. И в то же время существуют такие устоявшиеся понятия, как «адаптивный дизайн» и «респонсив дизайн», которыми мы и оперировали в статье.
Ответить
Виктор Рассоха
По-моему, Вы не правильно интерпретируете респонсив. Отличия этих двух вариантов описаны в статье http://www.techrepublic.com/blog/web-designer/what-is-the-difference-between-responsive-vs-adaptive-web-design/ . По сути это использовать пиксели или проценты в адаптивной верстке, и что использовать больше — @media или JS. Т.е. простым языком — однох... одинаково.

В случае с разными шаблонами (в статье – респонсив), это принято называть мобильной версией сайта. И это всем понятно. ;)

Успехов!
Ответить
Виктор Рассоха
"в статье – респонсив" — читать как "в статье – адаптивный" :)
Ответить
MonoChat
Агрегатор сообщений из мессенджеров. Для службы поддержки и отдела продаж.
Алекс Шуб
Ммм, на наш взгляд, в статье все изложено верно. По крайней мере в своей работе мы используем именно эти трактовки :)
Ответить
Виктор Рассоха
Насколько я могу судить, эту ситуацию с адаптив-респонсив не исправить, да и в общем-то надо быть очень в теме, чтобы понять разницу, это точно не для клиентов. :)

Единственное, за что стоит бороться, так это если шаблон подбирается на сервере (именно на это я обратил в статье: "Когда пользователь заходит на сайт, _сервер_ выбирает какой из готовых шаблонов отобразить: для мобильного телефона, для планшетов и для компьютерных мониторов"), а не на клиенте, то это уже не адаптив и не респонсив (эти термины оставим для 100% frontend), а отдельные версии (ну если только не представить себе такую экзотику, как, например, на сервере в зависимости от userAgent менять <body class="XXX"> :))) а затем рендерить все в браузере).
Ответить
MonoChat
Агрегатор сообщений из мессенджеров. Для службы поддержки и отдела продаж.
Алекс Шуб
Спасибо за комментарий :)
Вникнем в вопрос еще глубже)
Ответить
Виктор Рассоха
Спасибо за статью, а я просто зашел разговор поддержать. :)
Ответить
Михаил Шитиков
Крайне скользкая статья. Имхо, подобное деление понятий устарело + есть ещё местные особенности локализации. Старый добрый бутстрап заявлен как респонсив, хотя его дефолтная сетка завязана на типовых разрешениях, да и всякие отступы формируются фиксированными значениями под варианты сетки. Здесь скорее вопрос в усложнении респонсивности: сетку можно расширять на не типовые разрешения, можно подключать JS для подмены классов и графики в зависимости от разрешения (например: подсунуть картинки высокого разрешения для ретин, объединить плитку элементов в аккордеон, дабы не было километровой прокрутки и т.п.).
Классический адаптив (как древний LESS http://www.jonikorpi.com/less-framework/) с сеткой на абсолютных значениях мёртв, и не надо тыкать в него палочкой.

А вот с локализацией всё гораздо проще: в далёкой северной стране не прижилось непонятное понятие "респонсивный", зато прижилось "адаптивный". Его то собственно и использует большинство, в т.ч. оно на слуху у клиентов, которые далеки от веб-разработки. И устраивать мешанину в головах несчастных клиентов из этих понятий - себе дороже. Главное в договоре дать чёткое описание данной услуги на случай столкновения с юридическим терроризмом.

"сервер выбирает какой из готовых шаблонов отобразить" - а месье знает толк в извращениях :) Нечто подобное используется для мобильных версий: сервер решает оставить пользователя тут или послать на поддомен.
Ответить
Александр
"Для того, чтобы загрузить сайт с адаптивным дизайном, придётся загрузить все его предподготовленные шаблоны" руки бы поотрубать
Ответить
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать