Адаптивная верстка: плюсы и минусы внедрения

Опубликовано: | 0 1 801

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

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

Что приходилось делать до адаптивной верстки?

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

  • Разный HTML-код для разных версий устройств
  • Разные адреса сайтов
  • Разное содержимое для разных устройств.

Из-за чего приходилось делать и поддерживать 2 разных сайта вместо одного, что само собой разумеется неудобно, в тоже время технология Responsive web design предлагает создавать один HTML-документ для всех версий сайта, но при этом возникает необходимость писать для каждой из версии свой код стилей документа.

Какие плюсы адаптивной верстки?

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

Какие минусы адаптивной верстки?

  • Адаптивный дизайн и верстка, как правило, стоят на порядок выше
  • Файлы больше весят.
  • HTML и CSS содержат в себе код всех версий, все изображения используемые в сайте вырезаются из самой большой версии (настольной) и затем происходит масштабирование с помощью CSS.
  • Процесс создания сайта занимает гораздо больше времени чем если бы Вы создали две отдельные версии.

Адаптивный веб-дизайн: принципы и примеры построения

Адаптивный веб-дизайн делается с помощью CSS3 медиа-запросов — так называемых развилок в CSS такого рода:

@media screen and (max-width: 1600px) {

div.for-example {width: 1500px;}

}

@media screen and (max-width: 1280px) {

div.for-example {width: 1100px;}

}

@media screen and (max-width: 1024px) {

div.for-example {width: 980px;}

}

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

Устройства которые поддерживает Адаптивный веб-дизайн:

  • Настольные компьютеры, ноутбуки, нетбуки.
  • Планшеты.
  • Мобильные устройства.

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

Поддержка браузеров :

  • Google Chrome 4+
  • Mozilla Firefox 3.5+
  • Opera 9.5+
  • Safari 4+
  • IE9+

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

Хотите получать только самые актуальную и полезную информауию?
Подписывайтесь на обновления WebVirtual и получайте их на почту
Загрузка...

Комментарии читателей статьи "Адаптивная верстка: плюсы и минусы внедрения"

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Похожие материалы