Google является лидером в сфере поиска в сети интернет не только в Рунете, а и во всем мире. Тот, кто следует его рекомендациям, получает больше целевого трафика.

Как сообщают официальные источники, из трех способов создания мобильных версий сайтов, а именно, адаптивного дизайна, динамического обновления страницы и раздельных URL, в Google не отдают никому предпочтения. Они уверяют, что все методы хороши, при условии, что Googlebot может просканировать все страницы. Но всегда есть место для маленького уточнения. Среди существующих методов рекомендует Google адаптивную верстку, и вот почему.

Адаптивная верстка и ее преимущества

Принцип адаптивного дизайна заключается в том, что на сервере находится одна версия страницы, но она имеет «резиновые» размеры. Определение мобильных пользователей происходит очень простым способом, сервер запрашивает данные об устройстве, с которого ведется загрузка, и устанавливает диагональ экрана. В зависимости от этого параметра происходит подстройка дизайна веб-страницы средствами CSS.

Как мы уж сказали, Google рекомендует использовать адаптивный дизайн, преимущества данного метода заключаются в следующем:

• алгоритмы Google точнее индексируют такие сайты, т.к. на них отсутствуют версии одинаковых страниц;
• Googlebot тратит меньше времени на проверку сайта. Экономия ресурсов достигается за счет того, что контент представлен в единичной версии;
• пользователям удобнее делиться контентом, когда у каждой страницы только один URL и при отправке его с одного типа устройство на другой у получателя не возникнет проблем с входом;
• снижается время загрузки, за счет отсутствия переадресации между различными версиями одной страницы. Исключения этого фактора также позволяет избежать множества связанных ошибок в работе сайта;
• как показывает практика на верстку одной адаптивной страницы нужно меньше времени, чем на выполнение аналогичной работы другим методом;
• меньше сложностей связанных с указанием rel="canonical" для ориентирования поискового робота на основные страницы;
• упрощается работа с файлом robots.txt.

И еще один важный момент, про который часто забывают. Если вы делаете адаптивный дизайн, то вполне можно обойтись без специальных программ или самих мобильных устройств. Просто уменьшаете окно вашего браузера до нужного размера, и наблюдаете результат своей работы.

Особенности создания мобильной версии

Работая над созданием страницы для мобильных устройств следует обращать внимание на ряд особенностей.

1. Длинное горизонтальное меню, как и сама горизонтальная ориентация блоков, является нецелесообразной. На мобильном сайте все постоянно прокручивают, поэтому выстраиваем свой сайт вертикально. Но не забываем про, то, что производители смартфонов и планшетов взяли уверенный курс на создание мобильных «лопат». Не сбейте себя с толку и сделайте отдельную версию для гаджетов с достаточно широкой диагональю.

2. Контент доступный на десктопных устройствах может не отображаться на мобильных. Из этого следует, что не нужно рисковать и использовать flash, а всю необходимую анимацию реализовываем на HTML5. Также актуален вопрос с видео, далеко не все форматы можно открыть на мобильном браузере. Поэтому используем только файлы с популярными расширениями и на всякий случае делаем текстовую расшифровку. Второй вариант полезен и для обычных сайтов, мало ли что может случиться у пользователя, и он не сможет открыть ролик, а текстовая информация всегда доступна.

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

Это далеко не все особенности мобильной верстки, но даже этих основ достаточно для создания удовлетворительного адаптивного дизайна.