Адаптивная верстка сайтов | Введение

Адаптивная верстка сайтов

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

Для тех, кто не в танке и впервые слышит об этой новомодной (с 2012 года) фишке, краткое пояснение:

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

Здесь следует дать одно очень важное разъяснение касательно различных похожих определений в современном веб-дизайне, а именно: адаптивный (adaptive) и отзывчивый (responsive) веб-дизайн. Очень многие ошибочно полагают, что это одно и то же. Но это не так.

Адаптивный (adaptive) vs отзывчивый (responsive)

Во-первых, необходимо различать адаптивный веб-дизайн (adaptive web design) и адаптивную верстку (adaptive layout). Это совершенно разные понятия. Адаптивный веб-дизайн — это глобальный подход к проектированию сайта, тогда как адаптивная верстка — всего лишь частный случай способа верстки для отзывчивого (responsive) веб-дизайна.

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

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

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

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

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

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

Адаптивная верстка сайта имеет в своем арсенале два главных оружия:

1. Все элементы верстки являются «резиновыми» (flexible) — их размеры зависят от размера экрана отображающего устройства.

2. Медиа-запросы (Media Queries) — отдельная часть файла стилей, задающая различные стили в зависимости от размеров экранов отображающих устройств и их расположения в пространстве (portrait или landscape).

Что касается «резиновости», то эта плюшка задается старым добрым способом:

width: 100%;

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

#content {
max-width: 1200px;
}

Это если вы не хотите, чтобы ширина сайта превышала 1200 пикселей (на ваше усмотрение). В этом есть определенный сенс. Дело в том, что комфортная ширина читаемого текста не более 10 – 12 слов в строке. Если статья будет растягиваться (например, при просмотре сайта на телевизоре) от края до края, то читать такой текст будет весьма затруднительно.

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

img, embed, video {
max-width: 100%;
}

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

А вот о медиа-запросах мы поговорим подробно в следующий раз. Оставайтесь на связи!

Адаптивная верстка сайтов | Введение
Адаптивная верстка сайтов | Медиа-запросы
Адаптивная верстка сайтов | Сначала мобильные

14.08.2014

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (6 votes, average: 5,00 out of 5)
Загрузка...

Похожие записи:

Подпишитесь на рассылку блога Вебсовет, чтобы первыми получать самые интересные материалы:

5 комментариев

  1. Gandalf White
    http://gandalfwhite.ru/
    15.08.2014

    Очень важная сейчас тема эта адаптивная верстка. Я например вот здесь http://startbootstrap.com/template-categories/all/ беру уже готовые адаптивные html шаблоны с нужной мне структурой, и редактирую под свои нужны.

  2. Игорь Квентор
    http://www.websovet.com/
    15.08.2014

    Gandalf White, полезный ресурс с шаблонами, спасибо! Про Bootstrap как-нибудь соберусь рассказать подробно, что за зверь и как им пользоваться.

  3. J

    26.12.2015

    Самый лучший сайт для новичков, поскольку хотя в интернете много информации по верстке, но пока не поймешь что и для чего нужно, все очень плохо запоминается. Спасибо большое за такой информативный блог! Please keep it going :) Еще очень хотелось бы почитать о верстке писем, было бы круто, если бы Вы добавили такую рубрику

  4. Игорь Квентор
    http://www.websovet.com/
    26.12.2015

    Спасибо за добрый отзыв! :) О письмах будет отдельная тема обязательно. Вэлкам!

  5. Дмитрий
    http://koskomp.ru
    04.03.2016

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

Оставить комментарий: