Адаптивный дизайн что это
Адаптивная вёрстка
В чём разница между резиновой, адаптивной и отзывчивой вёрсткой? Как правильно их применять?
Давайте разберёмся в отличиях подходов и попробуем сформулировать один общий вместо трёх.
Когда мобильного веба не было даже в самых смелых фантазиях, весь интернет был на десктопных компьютерах с небольшими экранами. Оптимизирован для разрешения 1024 на 768 и браузера Internet Explorer 5! — гордо писали тогда на сайтах. Но прошло время, экраны подросли и пришлось к этому как-то подстраиваться. Сначала это были просто резиновые таблицы: колонки по 25%, содержимое 50%, а в отдельной строке colspan=3 и распорка для минимальной ширины. Надеюсь, вы не поняли о чём я сечас говорил.
Резиновая вёрстка — это когда вы задаёте всему макету и отдельным его частям не фиксированную ширину, а эластичную — в процентах. За исключением минимальной и максимальной ширины. Высоту в вебе в принципе не принято задавать — обычно она подстраивается под содержимое. Фикс или резина? — спрашивали верстальщики 2000-х про макет и втайне надеялись на второе, поинтереснее. Сейчас сложно представить, но когда-то это было прорывной идеей, которая усложнила вёрстку, но сделала первый шаг в правильном пути.
Таблицы для раскладки ушли, а резиновая вёрстка осталась. Если у вас эластичные флоаты, флексы… да хоть гриды! — это всё равно резиновая вёрстка. Но если ширина внешнего контейнера зафиксирована — это уже фикс, сколько бы ни было резины внутри. Чуть более универсальный фикс, но всё равно. В общем, главное чтобы сайт двигался так или иначе вместе с окном, а не торчал кирпичом где-то в центре или с краю.
Когда расширился круг устройств с интернетом и появились первые мобильные браузеры — встала задача как-то подстраиваться под них. Простая резина здесь уже не справлялась — нужно было переписывать стили. Одной из первых, в 2006 году появилась техника адаптивной раскладки Марка ван ден Доббельстина. В статье на A List Apart Марк предложил добавлять классы при загрузке или ресайзе окна и на каждый диапазон вешать стили. До первой реализации медиавыражений в Safari оставалось два года.
Когда в начале десятых годов появилось для чего адаптировать и чем адаптировать — мобильные браузеры и медиавыражения — вышли книги, давшие названия подходам: «Адаптивный веб-дизайн» Аарона Густавсона и «Отзывчивый веб-дизайн» Итана Маркота. Подходы Аарона и Итана продолжали идеи Марка, но с более современными технологиями и несколько отличались направлением мысли.
«Адаптивный веб-дизайн» Аарона предлагал гибко адаптировать сайты к возможностям устройств и браузеров. Важной частью этой философии был ненавязчивый JavaScript с прогрессивным улучшением — и всё это поверх семантической разметки. Хотя Аарон писал не совсем об этом, сегодня принято считать, что главное в адаптивной вёрстке — привязка к конкретным разрешениям и устройствам. Стили переключаются от одного брейкпоинта к другому, то есть у вас есть фиксированные макеты для iPad и iPhone, а то, что между ними вас не волнует.
«Отзывчивый веб-дизайн» Итана ставил во главу три вещи: резиновый макет, гибкие картинки и медиавыражения. Все размеры и отступы Итан предлагал указывать в процентах с сумасшедшими дробями для точности. Отличительной чертой подхода стало плавное изменение сайта, с ориентацией не на конкретные устройства, а на содержимое. То есть ваш резиновый макет хорошо выглядит не только на iPhone и iPad, но и в любой точке между ними.
Чуть позже Итан сформулировал ещё один важный принцип в книге «Сначала мобильные». Если до тех пор отправной точкой для адаптации вёрстки служила десктопная версия, то он предложил перевернуть схему и начинать с мобильной версии, а потом её улучшать. Почему так? Потому, что усложнять простое проще, чем упрощать сложное. Вдуматесь! А ещё потому, что нет соблазна просто спрятать сложно адаптируемое и обделить мобильных пользователей.
Ну как, стало понятно? Вот адаптивная, вот отзывчивая… М-м, нет, не очень. Из-за путаницы между техникой адаптивной раскладки и философией адаптивного веб-дизайна, из-за того, что все эти подходы прекрасно сочетаются и уже не проследить чёткую границу между ними — из-за всего этого, я плюнул на терминологическую чистоту и стал называть всё это адаптивным дизайном или адаптивной вёрсткой. Это понятие всегда было достаточно широким, чтобы вместить все остальные способы.
Да и принцип дискретной адаптации от размеров устройств и без резины имел смысл лет 10 назад. При сегодняшнем разнообразии устройств полагаться на конкретные размеры и жёстко переключаться между ними — значит однажды очень больно промахнуться. Притом, никто вам не мешает при полностью резиновой вёрстке дописывать адаптацию под нужные разрешения.
Ну и как теперь верстать? Просто! Сначала делаете мобильный резиновый макет, который хорошо вписывается в небольшие устройства. А когда размеры экрана или окна начинают расти — начинаете использовать появившееся пространство для улучшения интерфейса. Появляется боковая колонка, вторая, растут размеры картинок и подгружаются новые разрешения и так далее. То есть медиавыражения меняют стили не когда вы дошли до экрана самого модного телефона, а когда это нужно для содержимого сайта и удобства пользователя. Мы именно так и учим делать на интенсиве по продвинутой вёрстке.
Чтобы сделать хороший адаптивный сайт, нужно понимать много нюансов: вьюпорт, медиавыражения, адаптивные картинки и другое. Сегодня мы сделали первый шаг и разобрались с подходами: он оказывается всего один. Про остальное ещё поговорим.
Адаптивный дизайн сайта: что это такое, как сделать верстку, принципы и примеры адаптивности веб-страниц
Пришло время решений, одинаково удобных и для мобильных устройств, и для стационарных компьютеров. Подробно рассмотрим адаптивный дизайн сайта: что он из себя представляет, по каким принципам строится, чем отличается от других, а также ответим на самые распространенные вопросы.
И сразу же об актуальности: сегодня он считается одним из весьма явных и даже ключевых показателей качества и современности корпоративного или частного web-ресурса во Всемирной Сети. Причем его разработка – это все еще сравнительно новое направление, и для него весьма характерны частые изменения различных мелочей. Но зато он ориентирован на перспективу – не только на те гаджеты, которыми мы пользуемся прямо сейчас, но и на те, что будем юзать лет через 5.
Что такое адаптивный веб-дизайн
Оформление сайта, при отображении которого страницы автоматически подстраиваются под разрешение и даже под текущий формат экрана устройства, а потому одинаково наглядно и удобно просматриваются на компьютерах или ноутбуках, на планшетах, смартфонах и даже телевизорах. Человеку, посещающему ресурс с телефона, не придется вручную расширять какую-то область, чтобы не промахнуться по нужной ссылке, все иконки и надписи будут четкими, а не размытыми, даже на ТВ с широкой диагональю, и так далее.
По-английски он называется Adaptive Web Design, и данный термин метко отражает, каким он должен быть – гибким и функциональным.
Зачем нужна адаптивная версия сайта
Ее стоит внедрить, как минимум, по трем причинам, каждая из которых достаточно важна сама по себе:
Преимущества и недостатки адаптивного дизайна
Универсально подстраивающаяся под гаджеты версия сайта обладает такими достоинствами:
Минусы тоже есть, и это:
На практике достоинства гораздо существеннее недостатков.
Принципы адаптивной верстки
Разработчики стараются не только передать корпоративный дух, назначение и основные идеи проекта или обеспечивать его необходимым функционалом, но и снабдить его определенными свойствами, удобными для последующей универсальной подстройки.
Прочность
Мобильная версия должна быть схожей с десктопной по оформлению, но при этом важно, чтобы она оказывалась гораздо более компактной: чтобы при ее открытии со смартфона информационные блоки, смещаясь, автоматически выстраивались по вертикали – по порядку, так называемым потоком.
Относительность единиц измерения
Обязательно учитывайте, что 320 px разрешения на практике по-разному выглядят на айфоновском дисплее и на широкоформатном мониторе компьютера, поэтому следует задавать масштаб с координатами относительно тех объектов, что есть на каждом устройстве. Стандартом сегодня является верхняя граница экрана – равняются именно по ней.
Использование контрольных точек
Осуществляется привязка к тем элементам, местоположение которых остается статическим до тех пор, пока не будет выполнен вход с другого гаджета. Это своеобразные фиксаторы, и они не дают изображениям «уползать» за границы.
Максимальные и минимальные значения
Можно задать лимиты ширины и высоты пикселей, чтобы текстовая информация (и другой контент) либо корректно отображалась на весь дисплей, либо на его часть, но не растягивалась и оставалась читабельной.
Вложенность объектов
Если один блок зависит от размещения другого, их допустимо отправлять в общий контейнер, чтобы они были взаимосвязаны, и тогда их не придется подстраивать. Такой прием работает с кнопками, лого, да много чем еще.
Правильные шрифты
Их можно перевести в web-формат, чтобы они автоматически увеличивались/уменьшались, исходя из диагонали экрана. Но помните, что тогда они будут подгружаться, тогда как адаптивный сайт – это ресурс, контент которого отображается не только корректно, но и быстро (современный пользователь точно не станет долго ждать, чтобы посмотреть страницу, а уйдет искать другую).
Грамотное использование графики
Если изображение детализированное, стоит сделать его растровым, если же нет – векторным. И каждую картинку лучше оптимизировать, то есть сжать, но так, чтобы ее поддерживали даже старые браузеры.
Выдерживание размеров макетов
Важно соблюсти подходящее разрешение – среди стандартных вариантов:
Хотя жесткого соблюдения норм не предусмотрено – допустимы и промежуточные варианты. Но тогда в качестве точек «перелома» принимают фактические значения ШхВ нестандартного гаджета.
Правильные медиазапросы
С их помощью при создании ресурса задаются:
На каждый будут подгружаться соответствующие стили CSS-языка.
Размеры макетов
Еще одно, заслуживающее отдельного внимания, правило адаптивного дизайна – это mobile first: в первую очередь разрабатывают решения под мобильные, и уже потом, на их основе, делают связанную с ней десктопную версию. Шаблоны разделяются (по ширине экрана) на 6 вариантов, растущих следующим образом, в пикселях:
Внимание, если нет «переломов» на большем промежутке, допустим, с 320 по 1024 px, то не будет и практического смысла предлагать отдельные решения под меньший, например, с 320 по 768.
Viewport и Media query
Это важные параметры, которые необходимо правильно задавать. Первый – это мета-тег, говорящий браузеру о том, нужно ли увеличивать/уменьшать страницу, и как отображать присутствующие на ней объекты. Его следует записать в таким образом:
Первая часть после него определяет, что ширины растягивания контента и экрана совпадают, вторая устанавливает масштаб 1 к 1.
Также верстка адаптивного сайта подразумевает использование css3 медиазапросов. Выше мы определили, что они должна включать в себя, теперь посмотрим способ их записи:
@media screen and (max-width: 768px) <
При создании web-ресурса используются функции, указывающие цвет, ШхВ, сетку, ориентацию объектов, разрешение. Текущие цифры, сразу по достижению которых изменяется оформление, называют точками “перелома” (контроля), от английского breakpoints. Также находится место для логических операторов and, not и only (И, НЕ, только соответственно).
Адаптивный или отзывчивый: 7 лучших практик мобильного веб-дизайна
В 2019 году 80% пользователей использовали мобильные устройства для поиска в Интернете. То, как ваш сайт отображается для мобильных пользователей, может укрепить или разрушить ваш бренд.
При таком количестве пользователей, полагающихся на мобильные устройства, нетрудно понять, что разработчики спешат найти святой Грааль решений для мобильного веб-дизайна.
В этой статье мы рассмотрим 7 лучших практик мобильного веб-дизайна, а также то, как вы можете использовать их в своем бизнесе.
Адаптивный и отзывчивый веб-дизайн
Одно из важнейших решений при разработке для мобильных устройств — выбрать адаптивный или отзывчивый дизайн. Давайте рассмотрим ключевые различия между ними.
Отзывчивый дизайн
Отзывчивый дизайн динамически адаптируется под размер экрана любого устройства. Макет использует медиа-запросы CSS для изменения размера таких аспектов веб-страницы, как ее ширина и высота.
Spark Box представляет собой хороший пример адаптивного дизайна.
Пользователи могут просматривать веб-сайт с отзывчивым дизайном с любого устройства. Разница заключается в том, что содержимое страницы будет динамически упорядочиваться в соответствии с размером экрана.
Преимущества отзывчивого дизайна
Недостатки отзывчивого дизайна
Адаптивный дизайн
Адаптивный дизайн по-прежнему удобен для мобильных устройств, но требует другого подхода. Он отображает статические макеты для экранов различных размеров.
Дизайнеру потребуется разработать макеты адаптивного сайта для шести экранов шириной: 320, 480, 760, 960, 1200 и 1600 пикселей.
Amazon использует адаптивный дизайн. Ниже показано как их главная страница выглядит на настольном компьютере.
А вот как сайт выглядит на мобильном устройстве:
Пользователи по-прежнему могут просматривать и делать покупки с любого устройства. Но элементы на веб-странице отображаются иначе.
Преимущества адаптивного дизайна
Недостатки адаптивного дизайна
Итак, какой дизайн выбрать?
Отзывчивый дизайн очень гибок и прост в обслуживании. Хотя адаптивный дизайн сложнее создать, он обеспечивает больший контроль над тем, как пользователи воспринимают ваш сайт на различных устройствах.
Какой тип дизайна вы выберете, в конечном итоге зависит только от вас. Но перед принятием решения важно взвесить все «за» и «против».
Важность удобства использования веб-сайта
Удобство использования веб-сайта — это показатель того, насколько хорошо пользователи могут перемещаться по сайту. Если пользователи не могут легко выполнить то, что они намеревались сделать, они без колебаний покинут сайт.
Само собой разумеется, что удобство использования играет жизненно важную роль для мобильных пользователей. Выполните этот трехэтапный процесс, чтобы улучшить удобство использования вашего веб-сайта и узнать, на чем именно вам нужно сосредоточиться:
Теперь давайте рассмотрим рекомендации по мобильному веб-дизайну.
Рекомендации по мобильному веб-дизайну
1.Поймите пути перемещения пользователей
У мобильных устройств нет такой же площади экрана, как у настольных компьютеров и планшетов. Это означает, что вам нужно расставить приоритеты для элементов, которые будут отображаться для мобильных пользователей.
Начните с составления схемы пути к покупке. Кто ваша целевая аудитория и чего она пытается достичь? Каковы ее болевые точки, и какова ее конечная цель?
Ответы на эти вопросы позволяют оптимизировать работу с мобильными устройствами и доставлять контент, релевантный вашей целевой аудитории.
2. Откажитесь от навигации
Панели навигации позволяют пользователям переходить к нужному разделу на сайте. Обычно они расположены в верхней или боковой части сайта, где пользователи могут их четко видеть.
Одна из проблем — внедрение панелей навигации для мобильных устройств. Меньшие размеры экрана означают, что полноценная панель навигации займет слишком много места.
Подумайте об использовании меню «гамбургера». Они открывают навигационные ссылки, когда пользователи нажимают на них, и формируют гораздо более чистый интерфейс.
Ниже приведен пример гамбургер-меню, расположенного в правом верхнем углу сайта.
Меню-гамбургер можно реализовать как в отзывчивом, так и в адаптивном дизайне. Рекомендуется реорганизовать меню так, чтобы включить в него как можно меньше ссылок.
Итак, что важно сохранить?
3. Ограничьте количество вариантов
Наш мозг может хранить не так много информации. Слишком большое количество вариантов может сбивать с толку и затруднять навигацию по сайту.
При разработке сводите количество вариантов на странице к минимуму. Если ваша основная цель — заставить посетителей скачать бесплатную пробную версию, сделайте это в первую очередь.
Ниже продемонстрирован хороший пример того, как Shopify ограничивает варианты на своей домашней странице.
На самом деле посетители могут совершить только одно действие. Подумайте о своих основных целях и предоставьте пользователям достаточно возможностей, чтобы не перегружать их.
4. Упростите все
Не усложняйте посетителям задачу. Если что-то не служит цели или не является необходимым, выбросьте это.
Это также относится к любым формам на страницах сайта. Сократите формы и запрашивайте только ту информацию, которая абсолютно необходима. В примере от Shopify была только одна форма, и вы можете быть уверены, что это было сделано намеренно.
5. Изображения и видео
Добавление изображений на веб-страницу — отличный способ привлечь внимание и повысить вовлеченность. Изображения должны соответствовать вашему предложению и иметь правильный размер, подходящий для адаптивного дизайна.
Ниже приведен пример контекстно-релевантного изображения.
Еще один важный момент — это размеры изображений. Неоптимизированные изображения могут замедлить работу сайта и повлиять на общее впечатление пользователя.
Используйте программное обеспечение, например, Photoshop, для сжатия изображений перед их загрузкой на сайт. Если это возможно, разместите видео в другом месте и добавьте ссылку.
6. Размещение
Люди обычно перемещаются по мобильным сайтам, двигая по сенсорным экранам мобильных устройств большими пальцами. Это означает, что к некоторым областям экрана легче получить доступ, как показано в примере, приведенном ниже.
Важно, чтобы навигационные и интерактивные области были расположены ближе к центру. Обязательно протестируйте места размещения, независимо от того выбираете ли вы отзывчивый или адаптивный дизайн.
7. Ссылка на контактную информацию
Мобильные пользователи хотят работать быстро. У них не хватает терпения пролистывать страницы контента, чтобы найти именно то, что они ищут.
Номера телефонов должны быть со ссылками, чтобы можно было сразу позвонить в вашу компанию. Таким образом, посетителям не придется переключаться с сайта на мобильное приложение и обратно. Ниже приведен пример от BestBuy.
При нажатии на номер с гиперссылкой на сайте BestBuy автоматически открывается клавиатура мобильного устройства.
Точно так же при клике по вашему адресу должна открываться карта, чтобы пользователи могли легко найти местоположение вашего бизнеса. Последние два момента особенно важны, если вы работаете на локальном рынке.
Заключение
Выбор между отзывчивым и адаптивным дизайном требует особого внимания.
Отзывчивый дизайн обычно лучше подходит для небольших веб-страниц с низкой сложностью, а адаптивный дизайн лучше подходит для сложных интернет-ресурсов.
Независимо от того, какой тип мобильного дизайна вы выберете, важно знать, как именно аудитория использует ваш сайт, и всегда проверять удобство его использования. И не забывайте, что все должно быть предельно просто.
Пожалуйста, опубликуйте свои мнения по текущей теме материала. Мы очень благодарим вас за ваши комментарии, дизлайки, подписки, лайки, отклики!
Дайте знать, что вы думаете по данной теме материала в комментариях. Мы очень благодарим вас за ваши комментарии, лайки, дизлайки, подписки, отклики!
Адаптивный веб-дизайн vs. Отзывчивый веб-дизайн, в чем разница?
С тех пор, как вышли книги «Adaptive Web Design» Аарона Густафсона и «Responsive Web Design» Итана Маркотта (русское издание называется «Отзывчивый веб-дизайн»), в сообществе веб-дизайнеров и разработчиков ведутся споры о том, чем отличаются эти 2 подхода. Одни считают, что эти 2 понятия являются синонимами, а другие, что это совершенно разные понятия. Но, как известно, истина всегда где-то посередине, поэтому предлагаю вашему вниманию перевод статьи финского веб-дизайнера и разработчика Вильями Салминена (Viljami Salminen) «Adaptive vs. Responsive, what’s the difference?»:
Кажется, есть некоторая путаница относительно этих терминов и того, что они означают, так вот здесь мои мысли на данную тему и несколько ссылок, чтобы подкрепить их. Я, как правило, не очень пылкий, когда дело доходит до обсуждения чего-либо, но на этот раз я хотел бы внести в этот вопрос ясность, т.к. слышу его очень часто.
«Отзывчивый веб-дизайн» (Responsive Web Design) является частью более широкого понятия, которое называется «Адаптивный веб-дизайн» (Adaptive Web Design). Когда идет речь об отзывчивом веб-дизайне, то мы имеем в виду только макет веб-страницы (Итан Маркотт, «резиновый» макет, гибкие изображения и медиазапросы).
С другой стороны, «Адаптивный веб-дизайн» включает в себя гораздо больше, чем просто «резиновый» макет. На практике это почти одно и то же, что и прогрессивное улучшение (progressive enhancement), если говорить кратко, то это понятие означает, что мы стремимся предоставить лучшие возможности для максимально широкой аудитории. Также: нельзя смешивать понятия «Адаптивный веб-дизайн» и «Адаптивный макет» (Adaptive layout), т.к. это совершенно разные вещи.
И, наконец, «Адаптивный макет» означает макет, сделанный путем сочетания множества фиксированных горизонтальных размеров (ширины). Сейчас, мне кажется, если все сделано правильно и блоки фиксированной ширины сочетаются с «резиновыми» блоками, то Адаптивный макет можно считать одной из форм отзывчивого веб-дизайна, а не просто его альтернативой. Зельдман уже высказывал немного похожую идею в 2011 году в одной из записей своего блога.
Примечание переводчика. К сожалению, из текста Вильями Сальминена сложно понять, что такое «Адаптивный макет», поэтому я постараюсь объяснить, что это означает своими словами. Подход Итана Маркотта предусматривает использование «резинового» макета (ширина, отступы и поля задаются в процентах), а адаптивный макет предполагает, что для каждого размера экрана у нас используются свои стилевые правила, в которых жестко заданы фиксированные размеры элементов (в пикселях). Более развернутое описание данного подхода вы можете найти в статье «Switchy McLayout: An Adaptive Layout Technique» (перевод).
Как превратить обычные сайты в адаптивные?
На данный момент около 11-12% из 100 000 самых посещаемых сайтов — адаптивны, и нет сомнений, что в ближайшие несколько лет их количество возрастёт.
Так как всё больше организаций закатывают рукава, хватаясь за реалии веба, используемого различными девайсами, будет нелишним рассмотреть несколько стратегий, используемых для достижения нирваны:
Адаптивная модернизация
Адаптивная модернизация — это процесс, при котором берется существующий сайт, предназначенный только для настольных компьютеров, и «переделывается в адаптивный» по факту.
Что касается готовых сайтов (в частности коммерческих), у команд не всегда есть возможность всё отбросить и построить заново.
Дэн Седерхольм
Для большинства организаций, широкомасштабное создание нового дизайна с нуля даже не рассматривается. Именно поэтому адаптивная модернизация это популярный подход к созданию хорошего интерфейса для мобильных устройств.
Преимущества
Недостатки
Адаптивные мобильные сайты
Адаптивные мобильные сайты, или как я их называю «семена для адаптивного будущего», представляют собой практику создания отдельного сайта формата «m.yourdomain.ru» с использованием техник адаптивного дизайна. Эту стратегию используют такие сайты, как The BBC, The Guardian и Entertainment Weekly (над которым работал я).
Мобильная версия даёт возможность посадить семя, которое вырастет из вашего устаревшего сайта.
Со временем устаревший сайт можно удалить, а изначально мобильный, адаптивный и учитывающий будущие тенденции будет развиваться.
Преимущества
Недостатки
Адаптивный дизайн изначально для мобильных устройств
«Сначала мобильные» — это принцип, подразумевающий разработку интерфейса, который будет учитывать ограничения мобильной среды (маленький экран, низкая пропускная способность и прочее), однако использующий все преимущества бОльших экранов.
Преимущества
Недостатки
Стратегия поэтапности
Стратегия поэтапного создания адаптивного дизайна разбивает крупномасштабную кампанию на несколько ступеней. Как и при модернизации (эти стратегии не взаимоисключающие), здесь может не получиться сделать масштабный редизайн, именно поэтому некоторые организации делают это шаг за шагом. Есть несколько видов поэтапного создания адаптивного интерфейса:
Страница за страницей
Этот метод подразумевает создание подгруппы страниц. Такие компании, как Microsoft, запускают адаптивные ключевые страницы, при этом оставляя большинство внутренних только для настольных компьютеров.
Преимущества
Недостатки
Компонент за компонентом
Я работал с несколькими организациями, которые выбрали довольно интересный подход к адаптивному дизайну. Вместо того, чтобы в первую очередь переоснащать главную страницу, а потом двигаться к внутренним, часть компаний делают адаптивными некоторые компоненты (например, заголовок или подвал), а потом постепенно переходят к другим. Они переключают мета-тег просмотра только когда весь интерфейс становится адаптивным.
Преимущества
Недостатки
«Я Чеви Чейз, а ты нет»
Конечно, все организации разные, поэтому какой путь выбрать — зависит от различных факторов. Время, бюджет, рамки, организационная структура, набор навыков и многие другие факторы влияют на то, какую стратегию лучше применять. Но со временем становится всё более очевидным то, что организациям нужно работать над возрастающим разнообразием устройств, имеющих доступ в интернет.
Это перевод статьи под названием «Responsive Strategy» от Brad Frost. Перевели в компании UXDepot с одобрением автора.