Совсем недавно, буквально 10 лет назад, веб-дизайнеры при создании сайтов ориентировались на определенную среднюю ширину экрана монитора пользователей. Сначала наиболее распространенное разрешение было 800*600, потом выросло до 1024*768. В Интернете можно было встретить такие слова: «Сайт оптимизирован под такое-то разрешение». С увеличением количества размеров экрана стала популярной резиновая верстка сайтов, о которой я писал в Благодаря этому виду верстки можно было просматривать сайты на мониторах с различным разрешением.

Однако в последние годы резиновая верстка перестала быть «панацеей». С одной стороны, появились мониторы с огромными размерами экрана, с другой стороны, произошла мобильная революция – количество подключений к Интернету мобильных устройств (ноутбуков, смартфонов, планшетов) стало больше числа стационарных компьютеров. Мобильный трафик растет, и возникает необходимость корректного отображения сайта на экранах большого числа разнообразных устройств. Интервал размеров слишком велик.

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

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

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

• Использовать две версии сайта, обычную – для настольных компьютеров, и мобильную.
• Использовать адаптивный дизайн.

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

Что же это за дизайн и чем он отличается от резинового?

Резиновый шаблон не изменяет свою структуру при изменении ширины экрана, а меняет только размеры. Например, веб-страница имеет три колонки: слева – меню шириной 25% от ширины окна, в центре – контент – 50 %, справа — сайдбар – 25 %. При ширине окна в 1000 px они будут иметь размеры соответственно 250, 500 и 250 px, что вполне нормально. Но если использовать мобильный телефон с маленьким экраном шириной 320 px, то колонки сожмутся до размеров 80, 160, 80 px и станут нечитаемыми.

В чем выход? Он – в кардинальном изменении веб-страницы. Это изменение состоит в том, что после постепенного уменьшения ширины колонок происходит перестроение структуры страницы – она вытягивается в одну колонку. Но это не единственное отличие.

• Адаптация к размеру и ориентации экрана, начиная от больших мониторов настольных ПК и заканчивая мобильными телефонами.
• Изменение размеров изображений при смене разрешения экрана. Даже на сайтах с «резиновым» дизайном размеры картинок не изменяются, и при определенной ширине экрана появляется горизонтальная полоса прокрутки для их просмотра. При использовании адаптивного дизайна изображения также «подстраиваются» под размер экрана.
• Удаление несущественных элементов шаблона. Ими могут быть как декоративные элементы, так и программные, не работающие на мобильных устройствах.
• Высокая скорость загрузки. Скорость мобильного Интернета пока еще сравнительно невелика, и это надо учитывать при разработке сайта, предназначенного для просмотра на мобильных устройствах.
• Использование относительно больших кнопок. Мобильные устройства используют сенсорный ввод и отсутствие курсора должно учитываться при разработке дизайна.
• Работа с мобильными функциями, например, геолокацией.

Такой дизайн строится на использовании CSS media queries (медиа-запросы). Благодаря этим запросам вначале определяются параметры устройства, которое использует посетитель, и, в зависимости от этого выбора, подключается соответствующий стиль, то есть при адаптивном дизайне используется один сайт с набором стилей для разных устройств. К примеру, если посетитель заходит на сайт с обычного компьютера, подключается одна таблица стилей, и он видит сайт с большой красочной шапкой, горизонтальным меню, несколькими колонками контента, а при использовании iPada применяется другой стиль, и вместо огромной шапки отображается небольшой логотип, меню превращается в вертикальный список, а контент вытягивается в одну колонку.

Можно ли переделать существующий шаблон сайта под адаптивную версию? Конечно, можно, если вы в достаточной мере владеете HTML и CSS. Но, если вы используете какую-либо систему управления контентом — WordPress, Joomla!, Drupal, то лучше найти готовый шаблон, сейчас адаптивных шаблонов разработано много. Кстати, в моей статье теперь следует добавить еще один пункт «Проверка шаблона на адаптивность».

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

Кстати, только что появился уникальный курс Андрея Кудлая . Используя фреймворк Bootstrap, сегодня можно сверстать сайт с красивым, приятным, профессиональным дизайном, при этом не нужно быть профи в верстке. Используя фреймворки, даже самый новичок в сайтостроении способен сверстать страницу, создать одностраничный сайт или лэндинг. Причем сайт будет достаточно профессиональный, а время, затраченное на его создание минимально.

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

Напишите в комментариях свое мнение по поводу адаптивного дизайна.

Сделать адаптивный шаблон сайта достаточно просто, но поддерживать элементы в сбалансированном виде во всех точках изменения шаблона - вот что является настоящим искусством. В данном уроке представлены 5 методов для использования в CSS для адаптивного шаблона. Есть очень простые свойства CSS, такие как min-width , max-width , overflow и относительные значения, но они все играют важную роль в разработке адаптивных дизайнов.

Данный трюк CSS позволяет встраиваемому видео растягиваться до установленных границ.

Video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video iframe, .video object, .video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Свойство max-width позволяет устанавливать максимальную ширину элемента. Его надо использовать, чтобы предотвратить расширение элемента за определенные рамки.

В ниже приведенном примере определяется размер контейнера 800px, но устанавливается ограничение по размеру границу 90%.

Container { width: 800px; max-width: 90%; }

Можно сделать изображение с автоматически изменяющимся размером до максимальной величины с помощью свойств max-width:100% и height:auto .

Img { max-width: 100%; height: auto; }

Выше приведенный код для адаптивного изображения работает в IE7 и IE9, но не действует в IE8. Для исправления ситуации нужно добавить свойство width:auto . Можно использовать условное правило CSS специально для IE8 или ниже приведенный трюк для IE:

@media \0screen { img { width: auto; /* для ie 8 */ } }

Свойство min-width противоположно по действию свойству max-width . Оно устанавливает минимально возможную ширину элемента. Ниже приведен пример использования свойства min-width, чтобы поле ввода не становилось слишком маленьким при уменьшении масштаба.

В адаптивном шаблоне использование относительных величин может существенно упростить код CSS и улучшить внешний вид дизайна.

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

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

Нижеприведенный рисунок демонстрирует преимущества использования относительного значения в % для отступов. Блок слева имеет несбалансированное пространство при применении абсолютных величин в px. Блок справа имеет отличный вид с пропорциональным заполнением содержанием.

Отменить обтекание элемента текстом можно с помощью свойства overflow. Очень простой и полезный способ. Можно отменить обтекание текстом предыдущего элемента и сохранить структуру содержания.

Свойство max-width помогает разместить неломающийся текст (например, длинный адрес URL) в несколько строк вместо одной.

Break-word { word-wrap: break-word; }

Все говорят об адаптивном веб-дизайне. Но значит ли это, что все понимают, для чего он нужен?

Респонсивный дизайн - это не только разработка сайтов для мобильных устройств, здесь речь идет об адаптации макетов под разные размеры экрана (viewports).

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

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

Разочарование пользователей

Некоторые люди думают, что сократить функционал и устранить контент, который они считают несущественным, это является нормальным для пользователя. Но как вы можете быть уверены, что информация, которую вы урезали или перенесли на вторичную страницу, не является контентом, который наиболее важный для меня?!

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

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

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

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

Пошаговое руководство

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

Ключевым элементом гибкости в адаптивном дизайне, является fluid ширина макета. Все, что вам нужно сделать, это создать wrapper, content и column widths, которые будут адаптироваться под различную ширину устройств. В этом нет ничего нового, но сейчас это важнее, чем когда-либо. Чтобы не усложнять задачу, мы создадим fluid страницу, состоящую из навигации, главного изображения и двух колонок, которая учитывает расположение на устройствах различных размеров. Мы, также включили respond.min.js, который позволяет медиа-запросам работать в IE6-8.

Основная HTML структура:

Респонсивный сайт Демо

• Скролл к контенту

• Главная
• Купить
• Сервис
• Контакты

История модели Mercedes SL уходит корнями в 1954 год — именно тогда на автосалоне в Нью-Йорке немцы представили двухдверку Mercedes 190 SL. Можете себе представить уровень эстетического шока посетителей тогдашнего мотор-шоу. Под кузовом пленительной красоты скрывалась укороченная платформа от седана Mercedes W120 Ponton и стальной монокок. Подвеска была полностью независимая — с двухрычажкой спереди и качающимися полуосями сзади. Длина — 4290 мм, расстояние между осями — 2400 мм.

Когда дело доходит до CSS, то установить max-width, будет хорошей идеей, это остановит сайт от масштабирования на огромных экранах, но не будет удерживать от сокращения страниц. Один из основных вопросов при переключении с фиксированной ширины на fluid, это изображения. В CSS, есть простое решения этой проблемы. Просто установите ширину изображения на 100%. Также добавим auto для высоты изображений, чтобы избежать сплющенных изображений в Опере и Сафари на малых экранах:

/* Макет */ #wrapper { width: 96%; max-width: 920px; margin: auto; padding: 2%; } #main { width: 60%; margin-right: 5%; float: left; } aside { width: 35%; float: right; } /* Logo H1 */ header h1 { height: 98px; width: 216px; float: left; display: block; background: url(images/sllogo.png) 0 0 no-repeat; text-indent: -9999px; } /* Навигация */ header nav { float: right; margin-top: 40px; } header nav li { display: inline; margin-left: 15px; } header nav ul li a { text-decoration:none; color:#333;} #skipTo { display: none; } #skipTo li { background: #ccc; } /* Главная картинка*/ #banner { float: left; margin-bottom: 15px; width: 100%; } #banner img { width: 100%; height: auto; }

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

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

Переключение главной навигации

Основная причина, почему вам надо сменить навигацию, это происходящая минимизация, которая может привести к нечитаемости и трудности нажатия кнопок. Используя этот метод, вы облегчите жизнь пользователя. Вы также можете заметить в коде, что мы внесли изменения в #main и aside разделы, для соединения их в одну колонку.

/* Медиа-запросы */ @media screen and (max-width: 480px) { #skipTo { display: block; } header nav, #main, aside { float: left; clear: left; margin: 0 0 10px; width: 100%; } header nav li { margin: 0; background: #ccc; display: block; margin-bottom: 3px; } header nav a { display: block; padding: 10px; text-align: center; }

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

Чтобы разрешить медиа-запросам войти в полный эффект, обычный мобильный, оптимизированный, респонсивный сайт должен содержать что-то вроде следующего:

Cвойство width, отвечает за размер области просмотра. Он может быть установлено на определенное число пикселей, width=960, или на device-width значение, что является шириной экрана в пикселях в масштабе 100%. initial-scale свойство управляет масштабом при первой загрузке страницы. maximum-scale, minimum-scale, и user-scalable свойства, контролируют то, как пользователи могут масштабировать страницу (больше/меньше).

Приветствую вас, случайные посетители и постоянные читатели блога сайт!

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

Краткий план статьи:

В предыдущей статье я уже писал о том, и зачем он нужен. Но как достичь этой самой адаптивности?

Для этого есть разные способы. Кто то использует javascript, кто то что то еще. Но я считаю, что самый простой и правильный способ – это адаптивная с помощью CSS.

Во-первых, если вы взялись верстать адаптивный дизайн сайта, между тегами вставьте следующий код:

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

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

Как так? Я стал перепроверять все стили, правильно ли я прописал классы, в итоге дошел до того, что через javascript проверил ширину окна браузера в px. Я был в шоке. При проверке на ноутбуке я получил результат 1024px, и примерно такой же результат я получил открыв сайт на смартфоне!

Но ведь этого не может быть!

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

Из-за своей глупости и некомпетентности я потерял очень много времени. Зато теперь запомнил навсегда))).

Чтобы сделать адаптивную с помощью CSS, необходимо использовать media запросы.

Это как? Да, очень просто. В CSS файле нужно прописать запросы типа:

@media screen and (min-width: 1440px) and (max-width: 1599px){ }

Это код означает, что стили заключенные между “{ } ” будут работать для экранов с минимальной шириной 1440px и максимальной 1599px.

То есть те стили элементов сайта, которые должны быть адаптированны в зависимости от разрешения экрана, должны быть прописаны отдельно для каждой возможной ширины экрана.

• 320 px - Мобильные устройства (портретная ориентация);
• 480 px - Мобильные устройства (альбомная ориентация);
• 600 px - Небольшие планшеты;
• 768 px - Планшеты (портретная ориентация);
• 1024 px - Планшеты (альбомная ориентация)/Нетбуки;
• 1280 px и более - PC.

Именно на эти разрешения и нужно делать упор и уделять им особое внимание при адаптивной верстке. Это самые распространенные виды разрешений экранов.

Очень удобно использовать для создания адаптивной верстки bootstrap. Удобство в том, что все стили для адаптации блоков, кнопок, таблиц и т.д. уже прописаны в bootstpap. Нужно только разобраться какой класс к какому элементу присвоить.

Для начала, качайте свежую версию bootstrap и подключите его к своему сайту. Учтите, что подключение стилей и скриптов к wordpress имеет свои особенности.

Верстка на bootstrap отличается тем, что ширина блока или экрана делится на 12 равных частей. И присваивая определенный класс блоку, можно задать ширину блока равной нужному количеству частей.

Например, такая конструкция позволит выделить один широкий блок для контента шириной в 8 частей и один узкий для сайдбара шириной в 4 части экрана:

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

Также можно регулировать отступ блок от края, опять же, на нужное количество частей. Например такая конструкция:

Будет создан блок шириной в 10 частей с отступом слева в 1 часть экрана.

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

В будущем я планирую выложить несколько уроков по работе с bootsrap. Поэтому советую , чтобы не упустить этот момент.

Но возникает вопрос: как проверять адаптивность сайта? Вот прописали вы media запросы в CSS, подключили bootstrap и используете нужные классы. А как вы проверите, что на всех разрешениях экрана сайт правильно адаптируется.

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

Ну как вам статья? Все понятно? Если нет, пишите в комментарии, будем разбираться вместе.

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

Перевод крайне ценной статьи «Responsive Web Design Techniques, Tools and Design Strategies» популярного интернет-издания для разработчиков Smashing Magazine.

Еще в январе мы опубликовали статью об адаптивном дизайне «Responsive Web Design: What It Is and How To Use It» (Адаптивный веб-дизайн: Что это такое и как им пользоваться). Адаптивный веб-дизайн продолжает привлекать к себе много внимания, но, учитывая, насколько он отличается от традиционных методов разработки сайтов, он может показаться заоблачно сложным для тех дизайнеров и разработчиков, которые его не пробовали.

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

Elliot Jay Stocks подробно рассказывает о методе сочетания CSS Media Queries и CSS transitions. Основная идея в следующем: разрабатывая адаптивный сайт с помощью Media Queries, вы постоянно изменяете ширину вашего браузера, чтобы посмотреть, как сайт ведет себя при этом. Но каждый раз, когда отрабатывает один из ваших Media Queries, виден жесткий переход между стилями (первый, например, для десктопов, второй — для планшетов). Почему бы не использовать CSS transitions для сглаживания этих жестких переходов с помощью анимации?

Резиновые изображения — одна из центральных тем в адаптивном веб-дизайне. В статье Ethan Marcotte приведен подробный обзор создания их с помощью классического фрагмента кода img { max-width: 100%; } , а также все необходимые детали, необходимые для началы работы.

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

Это быстрый и малый по объему Polyfill (фрагмент кода, добавляющий неподдерживаемый браузером функционал) создан Scott Jehl для поддержки свойств min-width и max-width из CSS3 Media Queries в IE6-IE8 и выше.

Используйте информацию из этого маленького интрумента для создания адаптивного сайта.

Инструмент для быстрого прототипирования адаптивного дизайна. Вы можете спроектировать CSS для различных популярных размеров экранов, ориентаций и браузеров, будь то телефоны (BlackBerry Torch, Google Nexus One,iPhone, Motorola Droid), планшеты (BlackBerry Playbook, iPad,Samsung Galaxy Tab, Dell Streak), мониторы или телевизоры (720p, 1080p).

Вы можете просмотреть результаты проектирования прямо в браузере и использовать привычные вам средства разработки, такие как Firebug. Также попробуйте альтернативный инструмент ScreenFly .

Инструмент 320 and Up основан на принципе mobile first (сначала мобильные устройства), при котором дизайн создается сначала для экранов мобильных устройств, а затем расширяется для планшетов, настольных ПК и больших экранов. Он хорошо работает как в качестве дополнения к HTML5 boilerplate, так и отдельно.

Это настраиваемые шаблоны для создания многофункциональных, высокопроизводительных мобильных веб-приложений. Вы получите кроссбраузерность для смартфонов класса А и хорошую поддержку для старых BlackBerry, Symbian и IE Mobile. А также большое количество различных оптимизаций для мобильных браузеров.

1140 CSS Grid оптимизирован для работы на экранах от размера мобильных устройств до мониторов 1280px в ширину. Это простая и гибкая сетка, использующая Media Queries .

Этот CSS-фреймворк — хорошая основа для разработки на крошечных экранах (например, телефоны) и небольших экранах (например, планшеты) прямо из коробки с минимальными усилиями. Помимо этого имеется генератор для создания резинового CSS-фреймворка под себя.

Flurid — это резиновая сетка на 6, 7, 8, 9, 10, 12 и 16 колонок.

FluidGrids — генератор модульной сетки, который создает макеты из 6, 7, 8, 9, 10, 12 или 16 колонок.

CSS-фреймворк для создания адаптивных макетов. Он содержит 4 базовых макета и три набора типографики.

Резиновый фреймворк с упором на типографику.

Tiny Fluid Grid поможет вам создать свою собственную резиновую сетку из 12, 16 or 24 колонок, задать их максимальную и минимальную ширину и отступ в процентах.

Luke Wroblewski законспектировал презентацию Ethan Marcotte о применении принципов адаптивного веб-дизайна в модернизации сайта одной из ведущих газет. Среди прочего, Ethan объясняет, как он подходит к методологии проектирования адаптивного веб-дизайна и что из себя представляет процесс прототипирования в контексте адаптивного веб-дизайна.

Luke Wroblewski делал заметки на Конференции Breaking Development во время выступления Stephen Hay о реалиях проектирования для различных устройств.

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

Публикация представляет собой сочетание философии и стратегии для аккумулирования лучших практик в области адаптивного дизайна.

Регулярно обновляемая коллекция веб-сайтов, которые используют Media Queries.

В 9 серии The Big Web Show Jeffrey Zeldman и Dan Benjamin пригласили Ethan Marcotte, чтобы обсудить адаптивный дизайн.

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