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

Пример адаптивного сайта. С 21 апреля 2015 года поисковая система Google, внесла изменения в свои правила по выдачи поискового запроса интернет-пользователю и коснется это скорее всего веб-мастеров.

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

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

Все эти элементы, header, colLeft, colRight, footer должны быть независимы друг от друга. Их можно как в игре "Пятнашки", передвигать и менять местами. А зависеть все это будет от того, с какого мобильного устройства будет осуществляться просмотр сайта (размер его экрана). Я не имею виду именно данный шаблон, он самый простой и здесь много не подвигаешь. Другие шаблоны у которых имеется дополнительные колонки одна или две, добавочное горизонтальное меню и т.д., но об этом позже.

Сайтбар

#wrapper - каркас сайта, то что объединяет весь шаблон его закрывающий тег находится перед закрывающимся </body>.

#header - шапка сайта, ее можно поставить как перед wrapper так и после.

#header h1 - логотип.

#content - служит в качестве блочного элемента, объединяет colLeft и colRight.

#colRight - сайтбар.

#colLeft - место под контент.

#footer - подвал сайта.