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

Эбиа

www.ebia.ru

15
Amarket

Amarket

amarket.io

13
likearea

likearea

smm.li

12
RockinRobin

RockinRobin

www.rockinrobin.co

10
Битрикс24

Битрикс24

www.bitrix24.ru

10
KEPLER LEADS

KEPLER LEADS

keplerleads.com

10
Cookiezz

Cookiezz

cookiezz.com.ua

10
Megagroup

Megagroup

Создаем сайты и помогаем им зарабатывать

9
Tados

Tados

tados.ru

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

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

3 639 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/) с сеткой на абсолютных значениях мёртв, и не надо тыкать в него палочкой.

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

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