Адаптивная верстка главной страницы сайта

Адаптивная верстка главной страницы сайта

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

Поисковые системы используют несколько пунктов для оценки адаптивности сайта для мобильных устройств. Google стремится упростить пользование Интернетом для владельца смартфона и планшета, отмечая пометкой mobile-friendly адаптированные под мобильные устройства веб-сайты. В Яндексе тоже работает алгоритм, который предпочитает сайты с мобильным/адаптивным кодом для пользователей мобильного поиска.

Проверить адаптивность страницы сайта для мобильных устройствах можно на специальных сервисах Google Search Console (Проверка оптимизации для мобильных) и Яндекс.Вебмастер (Проверка мобильных страниц).

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

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

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

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

Posted in HTML and CSS on янв 29, 2018