Адаптивная вёрстка - зачем это нужно?

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

Для чего нужна адаптивная вёрстка
Технологии в IT сфере развиваются в геометрической прогрессии. Если вы оглядитесь вокруг, то увидите, что, практически, у любого человека есть девайс с выходом в интернет. Это и телефоны, и телевизоры, плееры, планшеты, электронные книги. Я не знаю ни одного человека, у которого нет устройства с выходом в интернет.
Адаптивная вёрстка позволяет динамически изменять структуру и контент сайта, делая его более привлекательным. К примеру, если вы сейчас зайдете на мой блог с мобильного устройства, вы увидите то же самое, что видите и на экране компьютера. Вроде так и должно быть. Но нет, появляется необходимость увеличивать контент, для возвращения или выбора меню - снова уменьшать. В принципе, пару лет назад это считалось очень хорошо, однако, сейчас, большая доля людей просто покинет такой сайт, так как они не хотят делать лишних телодвижений. Вот для этого и создавалась адаптивная вёрстка, которая позволяет адаптировать ваш сайт под любое устройство с любым разрешением экрана. К примеру, на экране монитора вы можете видеть слайд-шоу, а так же 2-х колончатый дизайн, на планшете вы будете видеть все то же слайд-шоу, только вот дизайн станет в одну колонку, а сайдбар переместиться под контент. В свою очередь, на телефоне, где и так медленный интернет, вместо фона-изображения, вы увидите обычную заливку цветом, сладера уже не будет, а дизайн будет в одну колонку.
С помощью использования адаптивного дизайна вы сможете расширить свою аудиторию. Если вы посмотрите отчеты о посещениях, то увидите, что колизество заходов с мобильных устройств догоняет, а то и опережает количество заходов с компьютера.
Помимо этого, нет необходимости создавать несколько версий сайтов, а в большинстве случаев, вообще, использовать дополнительный движок для мобильного сайта.
В случае с адаптивной версткой, нет проблем с индексацией поисковиками и дублей. Ведь раньше, создавая поддомен третьего уровня (еще один плюс - нет необходимости создавать поддомен третьего уровня для мобильной версии сайта), мы писали ту же информацию. А для поисковика, в лучшем случае, это дубль. В худшем - ворованный контент, так как поддомен третьего уровня считается отдельным сайтом.
Как видите, использование адаптивной вёрстки окупает потраченное на неё время. Даже в AdSense появились адаптивные рекламные блоки, а это говорит уже о многом.
И под конец, основные расширения экранов, под которые стоит делать адаптивную верстку:
320px/480px — мобильные устройства
740px — современные смартфоны
1024px — разрешение планшетов
1333px — современные ультрабуки
1920px — большие мониторы
2500px+ — жк. десктопы

Уважаемые читатели! Если вы обнаружили в тексте ошибку, не поленитесь, выделите слово и нажмите CTRL+Enter. Сделаем язык чище!

  • 0
comments powered by Disqus

Ваше Имя:

Ваш E-Mail:

Или войтите с помощью социальных сетей

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
  • Введите два слова, показанных на картинке: