Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>21 мар 2023</li>

3 <li>0</li>

4 </ul><h2>Что значит "адаптивный"? Объясняем простыми словами</h2>

5 Заходят как-то в бар дизайнер и айтишник, а джун их спрашивает: "И как это понимать?"

6 Иллюстрация: Оля Ежак для Skillbox Media

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

8 Адаптивность - это термин, который встречается и в дизайне, и в айти. Он означает одно и то же? Или в каждой области подразумевается своё значение?

9 Простыми словами объясняют, что такое "адаптивный", арт-директор<a>Ален Загардинов</a>и фронтенд-разработчик<a>Олег Рязанцев</a>.

10 Арт-директор и сеньор-дизайнер в студии Friends<a>Design Department</a>, креативный и саунд-дизайнер, диджей, амбиверт.

11 Победитель ADCE 2021 и Red Apple 2022.

12 "Я его адаптирую, адаптирую, а он взорвался… Буду! Буду адаптировать, пока не адаптируется!"

13 Отсылка к "Санаторию сатаны" :)

14 Именно цитатой звучит так: ""Монтирую, монтирую, б****, а он взорвался на х**. "Больше не будете ремонтировать?“ "Буду! И буду! Пока он, с***, не будет показывать!“"

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

16 Изображение: Dmytro Prudnikov /<a>Dribbble</a>Изображение:<a>Tanya Nikolaeva</a>/ BehanceОчень важное: адаптивность - это не просто красивый скейлинг. Независимо от формата и размеров носителя она позволяет сохранять:

17 <ul><li>баланс,</li>

18 <li>иерархию объектов и элементов,</li>

19 <li>читаемость.</li>

20 </ul>Изображение: Jovie Brett Bardoles /<a>Dribbble</a>Адаптивность - это понятие из веб-дизайна. Но я хочу показать, как она может быть связана с диджитал-дизайном вообще и даже как адаптивность работает внутри креатива или графического дизайна.

21 Адаптивный дизайн, если рассматривать пристально,вариативный. В блоге<a>Shillington</a>есть подборка гифок об этом.

22 Здесь, например, мы видим, что адаптив адаптивом, но есть различия по ограничениям и возможностям - с заданным контейнером по ширине или без него:

23 Изображение:<a>Shillington</a>То же самое можно сказать про приоритетность носителя: десктоп или мобильная версия first? С чего начнём? А что мы потом будем адаптировать под остальные форматы?

24 Изображение:<a>Shillington</a>И теперь плавно переходим к понятию "отзывчивый дизайн". Отзывчивый дизайн вытекает из адаптива:

25 Изображение:<a>Shillington</a>Адаптив и отзывчивость связаны. Смотрите, я вам схему сделал:

26 Иллюстрация: Ariel Salminen / Ален ЗагардиновБолее подробно эта связь описана в <a>Arie</a>. Собственно, там есть мэп самого адаптивного дизайна, которую я перерисовал и перевёл. Так что в какой-то степени этот имидж тоже можно назвать адаптированным под русскоговорящую аудиторию :)

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

28 То есть либо мы создаём условные гайды и правила под каждый формат, либо делаем эту систему перспективно и прогрессивно изменяющейся. Это и есть зачатки отзывчивого дизайна.

29 Он более гибкий, чем адаптив: для адаптива мы всё же задаём рамки или верстаем сайт/страницу в нескольких форматах. А отзывчивый работает по другой структуре: при возможности прогрессивной сетки, выставленных размерах, пропорциях и расстояниях наша система будет сохранять структуру и видоизменяться, становиться "резиновой".

30 Мы будем куролесить как вздумается, а макет будет послушным мальчиком и адекватно подстроится под заданные ограничения.

31 Подробнее можно прочитать на "<a>Хабре</a>".

32 Условно говоря, адаптивный дизайн - это жанр, а отзывчивый дизайн - его поджанр.

33 И если адаптивом был всеми известный рок в виде Guns‘n’Roses или Black Sabbath, то отзывчивый - это уже новое прочтение и нечто более гибкое для нашего времени и вкусов публики: Yves Tumor и Arctic Monkeys, прости господи.

34 Но сместим фокус от веб-дизайна к диджиталу и графическому дизайну.

35 Говоря про диджитал, хочу наглядно показать адаптив изображения уже не под формат экранов, а под формат средства передачи информации и каналы коммуникации. Это посты в соцсети, сторис и стандартная горизонтальная пикча 16×9, которые мы повсеместно используем.

36 Мы сохраняем баланс и суть месседжа, но меняем заполненность макета контентомИзображение: предоставлено Аленом ЗагардиновымА теперь десерт. Проект креативного пространства Pirate от британской студии Only.

37 Очень смелый и крутой проект, на мой взгляд. Их главный месседж: Democratizing creative space. Оно и видно…

38 Изображение: Only. /<a>Behance</a>За основу взят самый обычный… Arial. И его вывернули наизнанку.

39 Изображение: Only. /<a>Behance</a>Что же здесь примечательного? И главное - адаптивного?

40 Ребята разрушили правила и создали их заново. Взяли за основушрифт, который они стали тянуть как им вздумается по заданнойсистеме, где используется либо процентное соотношение 50%, 100%, 300% по вертикали или горизонтали, либо более креативный подход в физических носителях, когда всё пространство заполнено текстовым фреймом.

41 Изображение: Only. /<a>Behance</a>Смело, эффектно, свежо. Система есть система, даже если визуально она нам не понятна с первого взгляда или не считывается моментально. Но она есть и работает!

42 Главный подход к этому дизайну - создать продукт, выделяющийся на фоне других площадок под креативные пространства, быть запоминающимся. Элемент дизайн-системы -адаптивная типографика, которая, будто жидкость, растекается по всему холсту, заполняя его полностью.

43 JavaScript-разработчик веб-приложения "Альфа-Банка".

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

45 Если вернуться на много лет назад, когда трава была ещё зеленее и небо голубее и… Короче, когда интернет только появился, у нас, по сути, были только ПК с примерно одинаковыми дисплеями, и сайты разрабатывались только для них. Ни о чём больше не надо было думать: ни JS ещё не было, ни React… Были же времена. Было круто! (Нет.)

46 Mail.ru в 2000-м выглядел так. Тогда это ещё была почтовая службаИзображение: mail.ru /<a>Habr</a>Но в начале 2000-х активно начал набирать обороты мобильный интернет, и люди стали выходить в Сеть с мобильных телефонов. Что думаете, как отображался сайт на экране мобильного телефона, который разрабатывался исключительно для десктопа? Правильно: криво, нечитаемо, приходилось постоянно скроллить вправо, влево.

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

48 Первый вариант мобильной версии сайта vkontakte.ruИзображение: AM-STUDiO / ShutterstockПостепенно доля пользователей, выходящих в интернет с мобильных устройств, росла. Теперь она достигает 59% против 38% пользователей, которые выходят в интернет с десктопа (это средние цифры по миру.<a>Данные</a>приведены на момент написания статьи).

49 Если посмотреть данные по отдельным странам, например Индии, там вообще примерно 76% на 24%.

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

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

52 А значит,адаптивность - первостепенный фактор в разработке веб-сайта.

53 Есть подходы к разработке, когда начинают с мобильной версии, а на её основе уже делают все остальные. Это называется mobile-first.

54 В Google работает индексация mobile-first: если у сайта нет мобильной версии, то он может не отобразиться в выдаче поисковика.

55 Бывают случаи, когда можно обойтись только одной какой-то версией.

56 Например? А когда вы разрабатываете приложение специально для какого-то устройства:

57 <ul><li>админку или любые внутренние сервисы компании для сотрудников, которые пользуются ими только с компьютера;</li>

58 <li>веб-интерфейс для терминалов оплаты;</li>

59 <li>приложения для курьеров, им будет достаточно только мобильной версии. Очень сомневаюсь, что кто-то будет таскать с собой компьютер в поездки по городу.</li>

60 </ul>Фото: Egor Myznik / UnsplashНу, вроде всё. Историю обсудили, на словах тоже вроде все обговорили, теперь перейдём к делу.

61 Есть несколько вариантов адаптации сайта (на самом деле как таковой классификации нет, разделим сами).

62 Это подход, когда все элементы сайта имеютфиксированнуюширину. С какого бы устройства мы ни зашли, сайт всегда будет выглядетьодинаково. Соответственно, если элемент не поместится в экран, то появятся полосы прокрутки.

63 Изображение:<a>Мария Черноскулова</a>Сейчас это уже пережиток прошлого, когда мониторы имели фиксированные популярные разрешения 800×600 или 1024×768.

64 Задаётся банально в CSS свойством width: 500px.

65 Элементы на странице остаются на своих местах, но при этомтянутся(как резина) либосжимаютсяв соответствии с шириной экрана. Им задаётсяотносительнаяширина, например в процентах width: 100%.

66 Всё бы ничего, но обычно в итоге при определённой ширине экрана мы получим вот такой результат. Выглядит некруто:

67 Изображение:<a>Мария Черноскулова</a>И вообще, сверху показан маловероятный результат. Обычно в итоге мы получаем это. Выглядит совсем некруто. Нам не подходит:

68 Текст банально не помещается в блок и вылезает за его пределыИзображение:<a>Мария Черноскулова</a>Это тоже устаревший способ, который сейчас не используется в чистом виде, но знать о нём нужно.

69 Изображение:<a>Мария Черноскулова</a>В основе - медиазапросы, указанные в CSS.

70 Метод очень похож на отзывчивую вёрстку (рассмотрим далее). Суть заключается в том, что мы расставляем"брейкпоинты" - точки, равные ширине экрана (окну браузера). Проходя через них, наш сайт будетперестраиваться.

71 Ширину элементов при этом задаёмфиксированно.

72 Если простыми словами, то наша страница трансформируется (как бы прыгает), когда мы преодолеваем эти точки, перестраивая контент на новый лад, описанный в CSS. В итоге мы получаем наборфиксированныхмакетов для каждого промежутка.

73 Главная проблема прячется за словом "фиксированный". Мы не можем предугадать, как будет выглядеть приложение на всех устройствах. Могут появляться лишние пространства (например, по бокам), как на <a>изображении выше</a>.

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

75 Изображение: предоставлено Олегом РязанцевымЗадаём адаптивность следующим образом (CSS code, если его можно назвать словом code ?):

76 Изображение: предоставлено Олегом РязанцевымДанной записью мы говорим, что свойство width: 600px для класса .myClass применится, только если ширина экрана будетменьшеили равна 768 px. Во всех остальных случаях она будет равна 900 px.

77 Также можно наоборот:

78 Изображение: предоставлено Олегом РязанцевымСвойство width: 900px для класса .myOtherClass применится, только если ширина экрана будетбольшеили равна 1024 px.

79 Важно не перепутатьбольшеилименьше, но обещаю, что придётся это проверить не раз, таков путь ?

80 Вы можете комбинировать условия, а ещё почитать документацию и изучить тему более подробно.

81 Отмечу: эти свойства применяются не только к ширине экрана устройства, но и к ширине окна браузера, что вполне логично.

82 Откройте любой сайт в браузере (почти любой, почему "почти", узнаем<a>дальше</a>), желательно - одностраничный лендинг. Захватите левой кнопкой мыши правый или левый край окна браузера и попробуйте увеличить или уменьшить размер окна. Вы в реальном времени увидите, как сайт будет перестраиваться по брейкпоинтам.

83 Поиграли? Тогда идём дальше.

84 И, наконец, победитель сегодняшней номинации.

85 Изображение: предоставлено Олегом РязанцевымЕсли совсем в двух словах, то эторезиновая + адаптивнаявёрстка.

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

87 Что-то типа такого:

88 Изображение: предоставлено Олегом РязанцевымВ итоге, попадая на границу расставленных нами брейкпоинтов, страница не прыгает, а плавно и лаконично перестраивается и адаптируется к ширине экрана или окна. Это самый удачный метод из всех описанных выше.

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

90 Фото: Ljupco Smokovski / ShutterstockВышеописанный метод неплох для небольших приложений, но представьте, что у вас большое.

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

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

93 Некоторые компании полностью разделяют приложения. Попробуйте зайти на <a>vk.com</a> или<a>youtube.com</a> с телефона, и вы увидите, что URL автоматически трансформируется в m.vk.com и m.youtube.com. Приложения поместили на отдельные поддомены - точнее, полностью разделили их!

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

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

96 У вас может появиться вопрос: "Автор упоминал много раз относительные ("резиновые“) единицы измерения, но ничего о них не рассказал!"

97 И вы правы, оставим это на самостоятельное изучение, потому что самый важный навык разработчика - искать и изучать информацию самому.

98 <a>Попробуйте бесплатно 4 топовые профессии в дизайнеПройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>