Разница между фиксированной, резиновой, адаптивной и отзывчивой вёрсткой

• Макет отзывчивого сайта, рекомендации

"Резиновый", "адаптивный", "отзывчивый" сайт. Что это такое, что выбрать, что лучше, в чём разница?

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

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

<style>
#temnyi { display: inline-block; background: cyan; }
#svetlyi { display: inline-block; background: orange; }
</style>

<div id="temnyi">способ</div><div id="svetlyi">верстки</div>

И посмотрим как они ведут себя при изменении ширины окна браузера.

фиксированная верстка

фиксированная верстка

резиновая вёрстка

резиновая вёрстка

адаптивная вёрстка

адаптивная вёрстка

отзывчивая вёрстка

отзывчивая вёрстка

Фиксированная верстка

Блоки не меняют свою ширину. На мониторах с маленьким разрешением появляется горизонтальная полоса прокрутки.

<style>
#temnyi, #svetlyi { width: 440px; }
</style>

Резиновая вёрстка

Блоки меняют свою ширину в зависимости от размера окна браузера. Она может принимать максимальное и минимальное значение (свойство max-width). Но нельзя по мере уменьшения экрана из 50% сделать 100%.

<style>
#temnyi, #svetlyi { width: 50%; }
</style>

Адаптивная вёрстка

Воплощается с помощью @ Media или благодаря скриптам (например, как для AdSense). Заточен под конкретные известные устройства (320, 768, 1024, т.д.). Любое изменение происходит рывками, после достижения одного из указанных уровней. Однозначно подходит для создания версии для печати. Автор подхода - Aaron Gustafson.

<style>
#temnyi, #svetlyi { width: 430px; }

@media (max-width: 1220px) {
  #temnyi, #svetlyi { width: 380px; }
}

@media (max-width: 1120px) {
  #temnyi, #svetlyi { width: 325px; }
}

@media (max-width: 680px) {
  #temnyi, #svetlyi { width: 200px; }
}
</style>

Отзывчивая вёрстка

Это объединение резиновой и адаптивной вёрстки. В реализации самая сложная. Но результат получается наиболее приемлемый. Можно с уверенностью сказать, что сайт приспособится к любому устройству. Автор подхода - Ethan Marcotte.

<style>
#temnyi, #svetlyi { width: 50%; }

@media (max-width: 1006px) {
  #temnyi, #svetlyi { width: 100%; }
}
</style>

Мобильная версия сайта

Фактически это другой сайт, с другой вёрсткой и дизайном. Он имеет отдельный URL (поддомен m.site.ru или папка site.ru/m). На него происходит перенаправление пользователя с основного проекта, если тот использует телефон.