В чем разница между responsive и adaptive design?

Отзывчивый веб-дизайн

Отзывчивый веб-дизайн обеспечивает оптимальный просмотр сайта независимо от того, на каком устройстве его видит пользователь. Википедия описывает его как «подход, нацеленный на создание сайтов для обеспечения оптимального удобства просмотра — удобного чтения и навигации с минимальным изменением размера, панорамированием и прокруткой — на широком диапазоне устройств (от мобильных телефонов до мониторов настольных компьютеров)». Это делается с помощью жидкостных сеток. Это термин для дизайна, который работает независимо от размера экрана. Поэтому независимо от того, на сколько вы измените размер экрана, этот же макет будет автоматически реагировать на этот размер, как если бы один шарик увеличивался или уменьшался, чтобы проходить через несколько различных обручей.

Некоторые определения

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

На адаптивных веб-сайтах есть гибкий макет, который изменяется и адаптируется независимо от используемого размера экрана. Медиа-запросы позволяют реагировать на сайты, которые могут даже измениться, «на лету», если размер браузера изменяется.

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

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

Сравнение адаптивного и отзывчивого дизайна

Отзывчивый сделать труднее

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

Адаптивный менее гибкий

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

Отзывчивые сайты загружаются быстрее

Время загрузки является очнь важным фактором. Адаптивный сайт должен загружать ВСЕ возможные макеты, тогда как отзывчивые сайты должны загружать только один. Адаптивным сайтам приходится загружать много кода — все эти дополнительные макеты требуют дополнительного времени и ресурсов, поэтому знайте, что они будут немного медленнее, чем их отзывчивые аналоги. Однако это не всегда будет так, например, если у вас есть отзывчивый дизайн сайта с 100 страницами по сравнению с сайтом на адаптивной верстке с 10 страницами — при большом размере сайта адаптивный, скорее всего, будет быстрее.

Какие бывают типы HTML-макетов сайтов?

Для начала небольшая ремарка. В этой конкретной статье, HTML-макетами мы будем называть готовые сверстанные HTML-страницы, а не PSD-макеты.

Я рассмотрю фиксированные, резиновые, адаптивные, отзывчивые и смешанные HTML-макеты. В конце подведу итог.

Фиксированные макеты (static, fixed)

Фиксированный или статичный HTML-макет — такой макет сайта, у которого ширина контента страницы является строго зафиксированной в пикселях. Ширина не зависит и не меняется вслед за изменением размеров окна браузера.

В 2016 году считается, что такие макеты — пережитки прошлого. Раньше, когда веб-технологии еще не получили достаточного развития, ширина вебстраниц была продиктована разрешением популярных экранов устройств пользователей: 800х600, 1024х768, 1200х800 и так далее.

Даже сейчас можно встретить фиксированную ширину макетов сайтов, скажем, в 960 пикселей. Такой макет можно было бы использовать 10 лет назад, но сейчас…

Резиновые макеты (liquid)

Резиновый или тянущийся («жидкий» от англ. liquid) макет — такой макет сайта, при котором контент сайта может принимать размер любого экрана пользователя. Достигается это за счет того, что величины структурных элементов сайта выражаются не в абсолютных показателях (px), а в относительных (%). Т.е., допустим, ширина элемента в css так и прописывается: не 560px, а 50%.

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

Адаптивные макеты (adaptive)

Не путайте с адаптивным веб-дизайном, позже я объясню почему и покажу разницу.

Адаптивный макет базируется на использовании медиа запросов css (css media queries) — так контент адаптируется под разные экраны.

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

Т.е. несколько контрольных точек задают фиксированное положение и размеры контента на разных экранах.

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

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

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

Отзывчивые макеты (responsive)

В данной классификации макетов, отзывчивые макеты идут еще дальше адаптивных: используют «резину» вместо статики — «%» вместо «px».

Т.е. мы также расставляем контрольные точки при помощи медиа-запросов, но приспособление контента к этим контрольным точкам идет в относительном выражении (процентах), а не абсолютном (пикселях).

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

Смешанные макеты (adaptive + responsive)

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

Число контрольных точек увеличивается, для задания величины элементов используются то пиксели, то проценты — по необходимости.

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

Иногда такой подход используется для адаптации и оптимизации существующего макета под мобильные устройства. В этом случае его называют «mobile last».

Итог

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

Вот о веб дизайне и поговорим. Сначала об отзывчивом, потом о «mobile first» и концепции постепенного улучшения, потом об адаптивном веб-дизайне.

Ну и в самом конце отвечу на некоторые вопросы об адаптивных макетах сайтов.

Что такое отзывчивый дизайн

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

Адаптивный дизайн

Резиновый (гибкий) макет сайта

Резиновый (гибкий) макет сайта — это макет, который изменяется в зависимости от ширины рабочей области окна (вкладки) браузера. Потребность в такой разметке возникла, когда у многих пользователей появились мониторы, имеющие диагональ 19″, 21″ и больше.

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

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

Пример верстки первого макета:

  <style>
  body {
    margin: 0;
  }
  .aside {
    float: left;
    width: 250px;
  }
  .main {
    margin-left: 250px;
  }
  </style>

  <div class="container">
    <aside class="aside">
      ASIDE
    </aside>
    <main class="main">
      MAIN
    </main>
  </div>
  

Пример верстки второго макета:

<style>
body {
  margin: 0;
}
.aside {
  float: left;
  width: 25%;
}
.main {
  margin-left: 25%;
}
</style>

<div class="container">
  <aside class="aside">
    ASIDE
  </aside>
  <main class="main">
    MAIN
  </main>
</div>

После десктопов начали появляться и другие электронные устройства. В настоящее время просматривать сайты можно с помощью смартфонов (размер экрана от 3″ до 6″), планшетов (от 7″ до 10″), ноутбуков (10″ и выше), десктопов (19″ и выше) и TV (32″ и выше).

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

Чтобы было понятно, выполним расчёты на примере вышеприведённого резинового макета. А именно вычислим ширину блоков (1 и 2), которые они будут иметь на смартфоне с горизонтальным разрешением 320рх. В первом варианте: 1 блок — 250рх, 2 блок — 70рх. Во втором: 1 блок — 80рх, 2 блок — 240рх.

Как видно из расчётов, сайт, имеющий такой резиновый (гибкий) макет выглядеть на смартфонах будет просто ужасно.

Навигация

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

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

Что должны изменять медиазапросы?

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

Исходя из представленного изображения медиазапросы должны быть ориентированы на следующие изменения:

«Резиновая ширина» — использование фиксированной ширины (свойство width) для элементов не подходит для устройств с небольшим экраном, по этой причине при определенных условиях необходимо использовать для ширины элементов автоматические значения (auto), или значения в процентах. Это позволит превратить фиксированную сетку макета в резиновую, и независимо от разрешения экрана элемент поместиться на экране, не вызывая при этом переполнение содержимого

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

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

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

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

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

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

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

Изменение фоновых изображений — если вы используете растровые изображения, например, формат png в качестве фона для элемента, обратите внимание на такой момент, что при уменьшении разрешения экрана фоновое изображение будет масштабироваться теряя при этом свой изначальный вид. Обратите внимание, что вы можете использовать для необходимого вам элемента другое фоновое изображение меньшего размера, которое будет лучше подходить для определенного размера экрана. Для этих целей изменяйте значение CSS свойства background-image для вставки изображения в качестве фонового для конкретного элемента.

Макеты с фиксированной шириной

Макет сайта с фиксированной шириной отличается основной областью для содержания (wrapper), ширина которой выставлена в неизменное значение, не зависящее от разрешения экрана пользовательского агента. Наиболее распространенной и разумной считается ширина в 760 пикселей — размер, при котором пользователи мониторов с разрешением 800×600 увидят основное содержание сайта практически во всю ширину экрана, не прибегая к дополнительной горизонтальной прокрутке.

Авторский блог является примером такой верстки, хотя его можно легко привести к резиновому или эластичному макету без изменения текущих картинок.

Плюсы такого макета

• Контейнер для основного содержания сайта жестко зафиксирован, для него не нужно выставлять максимальную или минимальную ширину (у которой нет, на самом деле, кросс-броузерной поддержки на текущий момент);
• В некоторых случаях использовать макеты с фиксированной шириной проще для создания определенных эффектов или дизайнерских решений (например, для позиционирования выпадающего меню или всплывающих подсказок к полям формы). Некоторые макеты дизайна разумно верстаются только с использованием фиксированной ширины основного контейнера;
• Макет, основанный на заявленной выше ширине основного поля — 760 пикселях — что является типичной шириной для такого рода макетов, является, в моем представлении, оптимальным для максимальной читаемости текста (частично соглашусь с автором статьи, в таком случае еще около 200 пикселей можно отвести на боковое меню, и сайт будет помещаться в 1024×768 по ширине, однако, тогда, скорее, будет иметься в виду ширина основного поля в 1000 пикселей).

Его минусы

• Заявленная «оптимальная для максимальной читаемости текста» ширина не может адекватно выполнять свою роль, если текст на сайте был значительно увеличен при неизменном отношении высоты строки текста к его размеру (в данном случае получается, что текст «разреживается», и его очень трудно воспринимать). Однако, стоит заметить, что при наличии хорошего дизайна эта проблема возникает только при очень сильном увеличении текста;
• У пользователей с небольшими мониторами (640×480 пикселей, также стоит не забывать про мобильные устройства) возникнет горизонтальная полоса прокрутки на сайте шириной в 760 пикселей. Хотя и это очень нечастая проблема;
• Сайт, шириной в 760 пикселей может смотреться довольно неприглядно (слишком узко) на мониторах с большим разрешением экрана;
• Небольшая ширина основного контейнера может ограничивать разумное количество столбцов при верстке, но это может быть также и плюсом, потому что заставляет создавать сайт, учитывая такие жесткие рамки (т.е. особо много излишеств и дизайнерских приемов нельзя будет применить, потому что таковы наложенные ограничения).

Советы по макету с фиксированной шириной

• Располагайте основное содержание страниц сайта слева, чтобы пользователям с мониторами 640×480 не приходилось прокручивать сайт по горизонтали для нормального чтения;
• Обеспечьте сайт небольшими таблицами стилей для поддержки портативных небольших (портативных) устройств. Будет замечательно, если вы создадите также таблицы стилей для поддержки проекторов и телевизоров.

Пример блока фиксированной ширины

Все примеры «вживую» можно посмотреть в авторской статье.

<div style="width:500px; font-weight:bold; text-align:center; color:#c90;
background-color:#f7fbf3; border:1px solid #9c6; margin:0 auto; padding:10px">
	<p>Этот <code>блок</code> имеет фиксированную ширину 500 пикселей. 
	У него нельзя изменить размер, при увеличении текста, он будет заново 
	разбиваться на строки внутри этого блока.</p>

</div>

Преимущества адаптивного дизайна

1. Соотношение цены и качества

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

1. Удобство для пользователя

Адаптивный дизайн соответствует всем потребностям пользователя. Это большой шаг в сторону повышения юзабилити. Если страница адаптирована под мобильные устройства, выше трафик и лучше поведенческие факторы.

1. Функциональность

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

1. Универсальность 

1. Влияние на поисковую выдачу

Принцип Mobile First появился не просто так. Так как мобильный трафик растет и уже превысил десктопный, Google и Яндекс считают важным фактором ранжирования адаптацию под мобильные устройства. Это касается и дизайна, и скорости работы. Сайту с адаптивным дизайном поисковой робот присвоит более высокий рейтинг, чем такому же сайту, но без адаптива. 

В заключении

Как вы можете видеть, у каждой из описанных разновидностей макетов есть свои плюсы и минусы (может быть, вы знаете и другие?). И я не могу с уверенностью сказать, какой же из них лучше. Это просто уровень представления сайта, как я заметил в самом начале, поэтому с большой ответственностью и не меньшей уверенностью я могу заявить, что любой из этих макетов может быть применим для верстки доступных, удобных для пользователей, сайтов. Таким образом, я предлагаю не вставать не тропу приверженцев «идеологической правоты», делая что-то только потому, что она «правильно», в ущерб доступности или удобству. Я не пытаюсь их критиковать, ибо они заставляют нас размышлять над каждым шагом и являются источником вдохновения, но если вы следуете по их пути, делайте это с опаской. Пусть у вас будет цель и будет план. «Просто потому что» не является достаточной причиной — так я говорю своим детям.

Спасибо всем, кто дочитал до конца статьи. Буду рад любой критике и комментариям.

Всеми правами на перевод CSS макеты: фиксированные, резиновые, эластичные. Плюсы и минусы обладает Николай Мациевский. Дата оригинальной публикации 16 августа 2007 года.

Пять вопросов, требующих внимания

Адаптивный макет должен обращать внимание на следующие два момента:

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

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

Сначала мобильные

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

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

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

Контрольные точки медиа-запросов с учётом «сначала мобильные» могут выглядеть следующим образом.

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

Демонстрация

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

Сначала мобильные

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

Что такое отзывчивый дизайн?

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

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

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

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

Сетки и расширения Photoshop

Modular Grid Pattern

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

Плагин для Photoshop, помогающий в создании направляющий.

Одна из лучших модульных сеток для Photoshop, помогающая в создании адаптивного дизайна.

960 pixel — подборка шаблонов модульных сеток для Adobe Photoshop и Fireworks в диапазоне от 3 до 16 колонок.

Responsive Grid PSD

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

Golden Grid
— фреймворк на основе CSS. Использует правила «золотого сечения». Изменяет количество колонок от 4 до 18, в зависимости от размера экрана.

Самый популярный фреймворк для разработки адаптивных и мобильных web-проектов. Включает в себя HTML и CSS шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейсов, включая JavaScript расширения. Bootstrap использует самые современные наработки в области CSS и HTML. Интуитивно простой и в тоже время мощный инструмент, повышающий скорость и облегчающий разработку web-приложений.

Простой шаблон для создания адаптивной модульной сетки. Адаптирует дизайн в любое количество колонок.

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

Skeleton — фреймворк на основе CSS и JavaScript. Адаптивная сетка основана на многим знакомой 960 пиксельной сетке, однако ее легко адаптировать под разные устройства.

PURE

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

Настоятельно рекомендует обратить внимание на данный фреймворк, если вы занимаетесь разработкой адаптивных сайтов

YAML

Yaml — СSS Framework от немецких разработчиков для создание адаптивных кроссбраузерных сайтов. Как и любые другие CSS фреймворки, он создан для облегчения жизни front-end разработчика. В нем можно создать шаблон как для простого, так и для сложного сайта. Yaml хорошо документирован, имеется множество примеров, которые пригодиться при верстки.

960 grid — классика среди CSS фреймворков, очень полезный инструмент в основе которого лежит ширина каркаса в 960 пикселей. Grid 960 — СSS фреймворк, позволяющий разработчикам быстро разрабатывать прототипы дизайна. Являются прекрасным инструментом для создания макетов. Система создаст каркас шириной 960 пикселей и все блоки, созданные в этом каркасе будут соответствовать определённым пропорциям.

Часто задаваемые вопросы

Адаптивный дизайн-макет или мобильная версия сайта?

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

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

Если у вас форум, сообщество — делайте мобильную версию.

Если у вас информационный сайт, блог, контент-проект — используйте адаптивные макеты.

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

Под какие разрешения экранов делается адаптивность сайта?

Для ответа на этот вопрос, обратимся к бутстрапу:

• Большие дисплеи → 1200 пикселей и больше;
• Стандартная ширина → 980 пикселей и выше (до 1200 пикселей);
• Портретная ориентация планшетов → 768 пикселей;
• Смартфоны/планшеты → 767 пикселей;
• Телефоны → 480 пикселей и меньше.

У российских разработчиков встречается также еще один вариант расположения контрольных точек для адаптивной верстки макета:

• 1600 пикселей — для десктопов;
• 1280 пикселей — для десктопов, планшетов и ноутбуков;
• 1024 пикселя — для планшетов и ноутбуков;
• 800 пикселей — для смартфонов;
• 320/480 пикселей — для телефонов и смартфонов.

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

Напоследок, нашел для вас подборку разрешений наиболее популярных устройств.

Адаптивный макет — разрешения стационарных ПК и ноутбуков:

Адаптивный дизайн — разрешения планшетов:

Адаптивная верстка — разрешения смартфонов:

Проблема с производительностью

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

Подумайте об этом. Действительно ли мы должны посылать на мобильный телефон
100-килобайтовую картинку размером 990х300 пикселей, предназначенную для
десктопа. Конечно, посетитель может использовать wifi-соединение из местной
кофейни — но может быть, что он где-то в дороге, индикация приема сети упала до
одной полоски, а он пытается найти на вашем сайте ключевую информацию. Каждый
мобильный пользователь, который уходит со страницы, потому что она грузится
слишком долго — это потенциальный потерянный клиент.

На бескрайних просторах интернета можно найти большое количество мобильных
сайтов, которые такие же по размеру или даже больше, чем их десктопные версии.
Гай Подъярный провел несколько замеров с разницей в год, и не сказать,
чтобы ситуация улучшалась: в 2011 86% мобильных сайтов были такого же
размера или больше, а в 2012 эта цифра уменьшилась до 72%, но средний вес
сайта увеличился. Дэйв Руперт очень тонко обозначил проблему в своей статье
“Больше пикселей — больше проблем”.

Еще одна сложность: предварительная загрузка в браузерах

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

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

Из-за предзагрузки большинству нужно либо решение на бэк-энде
(чтобы опередить предзагрузку) — или специальная разметка и JavaScript.

Определение пропускной способности

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

W3C работает над Network Information API, которая в будущем может очень
пригодиться, но на данный момент поддерживается только очень ограниченным
набором устройств (и никем из популярных). В нескольких решениях для отзывчивых
картинок эта API уже используется, но я не думаю, что ее будут широко применять
до того, как большее количество устройств начнет его поддерживать. Измерять
скорость работы сети сложно, и, как отмечает Йоав Вайс в своей статье в
Smashing Magazine, надежные «медиа-запросы для пропускной способности сети» вряд
ли можно будет точно реализовать в ближайшем будущем.

Foresight.js Адама Брэдли использует JavaScript для того, чтобы
протестировать, сколько браузер будет загружать картинку в 50 КБ, и потом
сохраняет эту информацию для того, чтобы вы могли принимать решения относительно
пропускной способности сети. Но у этого подхода есть несколько маленьких
недостатков: к весу страницы прибавляется 50 кб, и библиотека блокирует загрузку
остальных изображений, пока не скачается тестовое. Многие из решений для
отзывчивых изображений, которые включают определение пропускной способности
сети, используют Foresight.js или похожие приемы.