70% поискового трафика и 51% всей активности сети идёт с мобильных устройств. Столько людей просматривают сайты с небольших экранов – пожалуй, стоит позаботиться об их удобстве и позитивном опыте. Иначе все эти люди не останутся на вашем сайте надолго, не оставят заявок и ничего не купят. Как же подцепить эту огромную аудиторию? С помощью эффективного – адаптивного – дизайна.
Что такое адаптивный дизайн?
Это метод разработки веб-страниц, который заключается в автоматической оптимизации под размер и пропорции любого экрана. Проще говоря, адаптивный дизайн делает ваш сайт красивым для всех посетителей. И удобным, вне зависимости от устройства, с которого зашёл пользователь.
Давайте же разберёмся, как это всё работает, и почему адаптив лучше отдельных версий.
Как работает адаптивный дизайн?
Адаптивный сайт потому так и называется, что он адаптируется к размеру устройства и браузера для правильного отображения контента. Вы выставляете контрольные точки на целевые диапазоны, которые определяют конкретные дисплеи. То есть указываете, какой макет используется для какого соотношения сторон и разрешения. А движок проверяет, какой экран у устройства посетителя, и выдаёт нужный дизайн.
А отзывчивый дизайн?
Это более совершенная версия адаптива. Здесь движок не выбирает из нескольких вариантов, а плавно подстраивает размер элементов под параметры экрана и браузера.
О чём стоит помнить?
- Кнопки. Палец человека намного больше курсора на экране компьютера. Кнопки и гиперссылки должны быть не менее 48х48 пикселей, чтобы их можно было нажать с первого раза.
- SVG. Это подходящий формат для векторной графики, который прекрасно масштабируется без потери качества.
- Адаптируемые изображения. Не все изображения можно перевести в формат SVG. В случае с фото и другими растровыми картинками используйте CSS-правила для автоматической подстройки изображений под размер экрана.
- Шрифты. Убедитесь, что ваш шрифт читается на всех устройствах. Google рекомендует использовать размер шрифта в минимум 16 CSS-пикселей.
- Возможности устройства. Потенциальные и реальные клиенты не могут позвонить вам через свои компьютеры, но со смартфонами это реально. Попробуйте изменить призыв к действию «Напишите сейчас!» на «Позвони сейчас!» и укажите номер своего рабочего телефона вместо электронной почты.
- Проверка. Протестируйте свой адаптивный сайт на разных устройствах и в разных браузерах. Как именно – читайте в отдельном разборе.
Адаптив или отдельная мобильная версия?
Есть два основных подхода к созданию мобильных сайтов: адаптация одной версии к разным экранам и разработка отдельной мобильной версии.
Первый вариант универсален. Второй подходит только для очень функциональных ресурсов типа Facebook или Twitter. Адаптивный или отзывчивый дизайн более рентабелен, так как требует меньше вложений. Этот дизайн проще разрабатывать и поддерживать. Это тот же код, который выглядит по-разному на разных устройствах, но все элементы остаются в наличии.
Но если вы хотите сделать отдельную версию с изменённым функционалом (проще или со специальными мобильными фичами), лучше создать мобильный сайт с нуля.
Смотрите также:
Тестируем мобильную версию сайта: инструкция
Как нарастить трафик на сайт и увеличить окупаемость
Инструкция по ускорению загрузки сайта: режем HTTP-запросы
