Делаем адаптивный шаблон

Ныне в моде адаптивные шаблоны для сайтов.

Адаптивный шаблон, это такой шаблон, при который внешний вид сайта сам подстраивается под размер экрана клиента. (не путать с резиновой вёрсткой). Чтобы понять, что это за зверь такой, нужно просто зажать кнопочку Ctrl на клавиатуре и покрутить колёсиком мышки (поменять размер странички сайта). Перемигивание отрисовки количества блоков и размеров картинок во время этой процедуры – это как раз и есть адаптация шаблона под разные разрешения экрана клиента.

Адаптивный шаблон

(новое – хорошо забытое старое...)

Адаптивные шаблоны известны с незапамятных времён. Просто ими не пользовались так широко. Не было надобности. Несмотря на древность своего кода, адаптивный шаблон – это некоторое новшество в разметке страницы и своего рода – новое слово в вёрстке. В отличие от «резинового шаблона», который просто растягивается и сжимается, адаптивный шаблон позволяет эффективно изменять количество выдаваемой информации на экран за счёт её скрытия от просмотра и изменения размеров показываемых блоков и картинок.

Сама идея адаптивного шаблона заключена в CSS-свойстве @media, позволяющего подключать и отключать отрисовку блоков и их свойств в зависимости от размеров экрана. Таким образом, первоначально, веб-страница сайта грузится полностью, а в последствии, на экране отрисовывается только самая необходимая информация. Всё остальное будет скрыто от клента. Причём, при масштабировании страницы (Ctrl + / -), на экране пользователя всё время будет идти перестройка блоков и их свойств, в зависимости от установленного размера страницы и разрешения экрана.

Адаптивный шаблон | Зачем это надо

Наш век – это время сплошной мобилизации. В Сети наступило засилье и кайф для переносных экранов и экранчиков (типа, смартов и ноутов). А вся эта переносная хрень имеет такое невероятное количество размеров экранов, что невольно приходится искать выход из создавшегося ракообразного положения. Если шаблон сайтеца верстается под стандартное разрешение, вида 1020 px, а посетитель на него заходит со смарта, с экранчиком в 300 px – это целая беда. Ну, и что он там увидит?

Выручают адаптивные шаблона.

С таким шаблоном на сайте, пользователь сразу видит сайт в адаптированном виде под свой размер экрана. При этом, никто не запрещает этому самому пользователю самостоятельно «зажать» клавишу Ctrl и покрутить колёсико мышки, подстраиваясь под различные отображения. Вот Вам и вся кроссбраузерность. Удобно, неправда-ли?

Адаптивный шаблон – не панацея

Самый большой камень в огород адаптивного шаблона – это перерасход трафика. Если у пользователя на экране первоначально отрисовывается не всё содержимое страницы, то зачем его грузить? И, наоборот – а что если у клиента экранчик совчем небольшой, но он хочет всё равно посмотреть полную, а не «урезанную» (адаптиированную) версию сайта? Что пользователю тогда делать? Тискать мышь да крутить колесо? Или ёрзать пальчами до бесконечности, если экран сенсорный? Нда. Сплошная дискриминация и ущемление прав потребителя – налицо.

Частично, проблему с перерасходом трафика и лишним загружаемым контентом HTML-страницы, позволяют решить современные технологии динамической продгрузки страниц (вида AJAX). Но это уже, совсем другая история, связанная больше с программированием, нежели с обычной вёрсткой.

Да уж, адаптация шаблона под разные размеры экрана – это тема № 1 для современного верстальщика. Однако, сдаётся, в любом случае должна просматриваться общая специализация вёрстки идеи самого проекта – под десктоп, под планшет, или под «чиcтую» мобилу. Ибо, как известно – угодить сразу и всем – абсолютно не реально.