Адаптивная вёрстка
Не будем ходить вокруг и перейдем к теме сразу. В связи со стремительным развитием электронных устройств, требуется все более совершенное программное обеспечение, алгоритмы и вычисления непрерывно усложняются. Сайты, приложения и различные агрегаторы становятся более удобными, быстрыми и понятными для восприятия. И конечно же все это не может обойти стороной SEO оптимизацию и продвижение сайтов. Усложнение вычислительных процессов влечет за собой увеличение требований к ресурсам в сети, усложняется фильтрация качества сайтов, вводятся новые требования и правила игры.
Что это?
Трафик, потребляемый различными мобильными устройствами, постоянно увеличивается, пользователи становятся более требовательными и нуждаются в сайтах с удобным интерфейсом. Здесь в игру вступает понятие - адаптивная верстка. Именно она позволяет удовлетворить данную потребность, так как позволяет в автоматическом режиме изменять структуру веб-страниц, и подстраивать их под параметры используемого устройства.
SEO оптимизация и продвижение сайтов напрямую зависят от качества адаптивной верстки. Так как удобство для просмотра контента в любых условиях и с любого устройства является главной задачей наших специалистов.
Немного истории
Примерно до 2010 года верстальщики использовали два подхода для решения данной задачи.
• Первый заключался в банальном уменьшении всей страницы и ее элементов, при этом создавались дополнительные страницы и собирались в так называемую мобильную версию сайта.
• Второй способ заключался в отсутствии каких-либо действий, и пользователь мог осуществлять навигацию по ресурсу при помощи элементов прокрутки по вертикали и горизонтали.
В наше время современная адаптивная верстка реализуется путем использования языка разметки HTML5 и использования CCS3. Естественно второй способ верстки сразу же никого не устраивал. А первый имел внушительный список недостатков.
Основы
В сам начале программисту необходимо проработать каждый элемент сайта таким образом, чтобы он умещался в рамки относительного маленького экрана и всего в одну колонку. Адаптивная верстка реализуется следующими способами:
• Элементы сайта сжимаются, пока не достигнут размера экрана устройства. Если по какой-то причине сжатие дальше невозможно, то блоки размещаются друг за другом в виде вертикальной ленты
• Расположение дополнительных блоков сразу же меняется при изменении ширины экрана – сайдбары автоматически перемещаются вниз сайта.
• При изменении масштаба некоторые элементы и блоки перестают отображаться, им задаются соответствующие параметры. Примером может служить логотип большого размера, который нет смысла отображать на маленьком экране мобильного устройства.
• Меню сайта сворачивается до размера одной кнопки, располагается в верхнем правом или левом углу. Разворачивается вертикально при нажатии.
Перед тем как приступить к работе с адаптивной версткой необходимо иметь четкое представление о том какие средства и технологии для этого используются. На данный момент это CSS3 и HTML5.
Технология CSS3 представляется новым поколением каскадных таблиц. Разработчиком задаются правила, согласно которым на экране будут отображаться элементы и блоки именно с заданными параметрами. Эта технология очень гибкая и позволяет задать такие параметры: процент занимаемого пространства, размер элемента при определенном разрешении экрана и т.д.
HTML5 используется для разметки страницы, для указания местоположения элементов. Созданные классы указываются в параметрах тегов HTML, чтобы объекты могли подстроится под нужное разрешение.
В этом материале наша команда SEO оптимизаторов постаралась кратко донести суть и преимущества адаптивной верстки. Так как это один из ключевых моментов в продвижении сайтов. В следующем материале мы продолжим рассмотрение острых моментов, а также продемонстрируем примеры и код.