5 нюансов адаптивной верстки под мобильные устройства

  1. Главная
  2. Блог
  3. Исследования и анализ
  4. Резиновая верстка под мобилку

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

Кстати, адаптивную верстку можно заказать у нас.

Как мобильная версия влияет на продвижение

SEO оптимизаторам известно, что на ранжирование сайта в поисковых системах очень существенно влияет удобство пользования в мобильных устройствах. Также, при анализе причин большого показателя отказов, уделяется внимание корректному отображению ресурса в мобильниках и планшетах. Подсчитано, что после запуска мобильной версии сайта, трафик посетителей увеличивается, в среднем на 5%. Доля мобильных устройств среди пользователей интернета растет, эта ниша далека от заполнения, поэтому важность адаптивной верстки очень велика. По данным TNS,14% пользователей сети в России  заходят в сеть только с мобильных устройств, 41% пользуется смартфонами для входа в  интернет, 26% посетителей сайтов - осуществляют поиск с планшетов. Таким образом, сайты без адаптивной верстки или мобильной версии теряют весьма существенный дополнительный трафик (11,8 млн. в России, данные за январь - март 2015).

Mobile-Friendly

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

Среди крупных торговых площадок, в топе 10 поисковых систем - абсолютное большинство сайтов имеют адаптивную верстку. Это совсем неслучайно, так как поисковые системы первыми улавливают тенденции в сети. С 21 апреля 2015 года Гугл изменил алгоритм ранжирования мобильных  и адаптированных версий сайтов. Теперь необходимо соответствовать требованиям теста Mobile-Friendly, чтобы не потерять позиции, либо продвинуться в топ. Учитываются:

  • присутствие мета-тега viewport;
  • легко читаемый шрифт;
  • размеры кнопок и других активных элементов;
  • зазоры между кнопками, достаточные, чтобы исключить неправильное нажатие.

Мобайл френдли работает как сервис, который проверяет и выдает список замечаний. Причем, сейчас нет простых методов обмануть тест, как было после его запуска.

Что следует учесть верстальщику

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

Мета теги для мобильных устройств

Для устранения данной проблемы применяется метатег viewport.

Задаем ширину вашего дизайна, например 1024:

Ели данный метатег не используется, мобильные браузеры сами адаптируют сайт, и тогда часть контента может быть не видна. Обратная проблема, если ваш дизайн уже, чем стандартный экран iPhone 980 пикс. Тогда сбоку будет пустая полоса, что тоже недопустимо. С помощью метатега viewport можно установить требуемую ширину, например, 700 пикс. Кстати, именно этот метатег используется для определения сайта как мобайл френдли в поисковиках. Метатег HTTP-equiv используется в заголовке страницы, и дает команду браузеру - с помощью каких данных необходимо обработать содержание документа. Например, он передает браузеру сведения о кодировке текста.

Использование медиа запросов.

За удобное распределение и загрузку контента на странице отвечают медиа запросы (начинается с команды @media.). С их помощью задается количество колонок для данного типа устройства, размеры текстовых блоков и картинок. Стиль применяется в соответствии с прописанной шириной макета. Если, например, окно уменьшить, контент распределяется уже иначе. Также можно задавать стили для портретной (orientation) или альбомной ориентации страницы.

@media screen and (min-width: 200px) and (max-width: 480px) {

#content {

width: 80%;

float: none;

}

#sidebar {

width: 20%;

float: none;

}

}

В данном примере набор стилей будет работать только для устройств с разрешением  200 - 480 пикс. Для другого диапазона экранов эти команды не работают.

Удобство применения Media Queries  состоит в применении наборе правил под каждое устройство. Одним этим способом нельзя решить все вопросы адаптивной верстки, поэтому они применяются вместе с мета тегами.

Они отвечают, в частности, за показ изображения в высоком разрешении на маленьком экране смартфона:

@media all and (-webkit-min-device-pixel-ratio : 1.5) {
#wrap header .logo{
background-image: url("path/to/image@2x.png");
background-size: 150px 150px;
}
#wrap header .logo:hover {
background-image: url("path/to/image_hover@2x.png");
background-size: 150px 150px;
}
}

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

Глобальный сброс css свойств для всех браузеров (CSS Reset)

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

* {margin: 0; padding: 0;}

Данной командой обнуляются отступы и поля. Еще один способ с помощью селектора:

* {box-sizing: border-box;}

Он изменяет рамку и отступ, которые встраиваются в ширину элемента.

Дополнительные плюшки адаптации к мобильным устройствам

Еще несколько плюсов адаптивного дизайна: - статистика Google не искажается, так как при качественной разработке верстки поисковая система воспринимает мобильную версию как основной сайт, а не как дубль страницы; - быстрая и качественная индексация гуглоботами; - ссылки на страницы такие же, как на основном сайте, ими удобно делиться; - отсутствие полосы прокрутки в любом девайсе; Что касается стоимости такой услуги, она дороже стандартной, но это можно считать сравнительно небольшим одноразовым вкладом в быстрое продвижение сайта.

Понравилось? Репост!

Читайте также

Антон
Доступно и кратко, Спасибо! Прочитав статью назрел вопрос. Как можно протестировать мобильную версию сайта не имея устройств различных разрешений. Есть ли бесплатные сервисы?
Игорь
А есть ли какие-либо фреймворки для адаптивной верстки? Уверен должны такие быть, наверняка не одному мне доставляет неудобство все делать с нуля)
Антон
Углубился в эту тему, нашел множество бесплатных сервисов для адаптивного дизайна. Но не об этом) Мне интересно, как вы верстаете. В начале делайте шаблон под мобильные устройства и далее по нарастающей до самых больших экранов или от больших к маленьким разрешениям?
Натан
Как жаль, что позади те времена, когда не нужно было заморачиваться с адаптивностью. Страшно, подумать, что будет дальше)) Ладно еще резина, но адаптивность забирает много времени((
Романыч
Игорь, попробуйте поработать на бутстрапе, уверен это облегчит ваши труды. Я в последнее время еще использую susy сетку.
Костя
Да,раньше было все гораздо легче и проще.Прогресс не стоит на месте,приходится усовершенствовать методы.Хорошая и полезная статья на актуальную тему.
Дима
Адаптивность сейчас просто необходима, но усилий и времени занимает очень много. Со временем,я думаю,должны придумать метод для облегчения данного процесса.