Адаптация сайта под мобильные устройства: пошаговая инструкция. Мобильная версия сайта
Мобильная адаптация сайта становится всё более востребованной из-за увеличения количества смартфонов и планшетов. Что она собой представляет? Какие преимущества даёт? Особенно этот вопрос актуален для владельцев интернет-магазинов, сайтов различных сервисных компаний, блогов и популярных форумов. Как может быть проведена адаптация сайта под мобильные устройства? Вот небольшой перечень вопросов, которые мы рассмотрим в рамках статьи.
Общая информация
Итак, для начала давайте рассмотрим, что собой представляет адаптивный дизайн. Так называется конфигурация, при которой на все устройства отправляется один и тот же HTML-код, но размеры элементов корректируются благодаря CSS. Различные поисковые роботы умеют распознавать такие сайты при условии, что страницы и ресурсы открыты для сканирования. Для того чтобы указывать браузерам на наличие такой возможности, используется тег meta name="viewport". Что же представляет собой адаптация сайта под мобильные устройства?
Рассмотрим тег
Итак, необходимо позаботиться о том, чтобы был тег meta name="viewport". Зачем он? Именно в нём находятся инструкции для браузера о том, как следует корректировать размеры и масштабировать страницу с учетом ширины экрана устройства, с которого просматривается сайт. Если не добавить этот небольшой элемент, то по умолчанию будет показана страница, рассчитанная на компьютеры. Но при этом мобильные браузеры будут стараться оптимизировать содержание, что выразится в увеличении шрифтов, масштабируемости содержания или отображении части содержимого, которое влезает на экран. Приятно ли это? Нет, мобильная версия сайта в таком случае вызовет только негативное восприятие. Ведь шрифты будут непропорциональными, придётся прокручивать страницу и совершать ещё ряд действий, которые, хотя и являются второстепенными, но всё же утомительны. Проверить адаптацию сайта под мобильные устройства можно с помощью смартфона, планшета или специальных сервисов и программ. Конечно, два первых варианта более предпочтительны, но если нужен тщательный анализ с позиции различных устройств и экономии времени, тогда подойдут последние.
Какие же преимущества даёт адаптация сайта под мобильные устройства?
- Пользователям делиться контентом в тех случаях, когда у него есть один адрес.
- Алгоритмам поисковых систем получать точные параметры страницы, нет путаницы с разными версиями.
- Снизить вероятность возникновения ошибок.
- Сократить время загрузки благодаря отсутствию необходимости переиндексации.
- Экономить ресурсы.
Кроме того, адаптивную страницу создать легче, нежели несколько вариантов чего-то одного. Адаптация сайта под мобильные устройства (самому это сделать вполне возможно) не является чем-то сложным, достаточно знать JavaScript и уметь работать с каскадными таблицами стилей (CSS) и изображениями. Существует множество подходов к выполнению поставленной задачи. В рамках статьи будет рассмотрено три самых популярных варианта:
- Упор на JavaScript.
- Комбинирование.
- Динамическое использование JavaScript.
Давайте же рассмотрим их более подробно.
Адаптация с использованием JavaScript
Комбинирование
В данном случае адаптация сайта под мобильные устройства используется благодаря совмещению и возможностей JavaScript и функций сервера. Как выглядит общая схема? Пользователь заходит на сайт с определённого устройства. JavaScript получает информацию о том, чем же он пользовался, и передаёт её серверу. Там генерируется необходимый код, который впоследствии и отправляется на устройство. Причем информация об этом сохраняется в файлах куки. И при последующем посещении сервер считывает данные именно с них. Особенностью данного подхода является возможность использования различных вариантов кода HTML. Правда, для корректной работы необходимо позаботиться о наличии заголовка Vary: User-agent. Мобильная версия сайта в таком случае требует немного больше труда.
Динамический JavaScript и друге варианты
Подготовка к реализации
- Ручной.
- Автоматический.
Первоначально необходимо выбрать, по какому пути идти. Так, плагин для адаптации сайта под мобильные устройства поможет выполнить всю работу быстро. Но только в том случае, если всё создано по определённым, четко регламентированным правилам. Если ресурс создавался согласно им, программа для адаптации сайта под мобильное устройство должна выполнить всё беспроблемно. Из-за таких ограничений, а порой и иных моментов и отсутствия полноценной свободы творчества большинство делает выбор в пользу ручной настройки. А программы хоть и помогают буквально за несколько минут получить привлекательную версию ресурса, но всё же имеют и определённые недостатки.
Гибкий макет
Гибкость шрифта, изображений и медиазапросы
По умолчанию в браузерах размер шрифта выставлен на показателе в 16 px. Но, как уже ранее говорилось, для нас такой подход весьма нежелателен. Что же делать в таком случае? Тогда нужное значение делим базовое. Рассмотрим пару примеров:
- 16/16 = 1 em.
- 18/16 = 1,125 em.
Полученный результат необходимо записать в font-size, добавив после двоеточия. Правда, если эти значения в последующем будут включены ещё где-то, следует учитывать, что будет отображаться именно введённая нами величина.
А сейчас относительно изображений. Всё можно вносить или в их атрибуты, или в каскадную таблицу стилей с помощью max-width. Не забывайте, что размер указывается в процентах! И ещё несколько слов о медиазапросах. Их можно использовать в тех случаях, когда необходимо поставить определённые условия. К примеру, если ширина экрана меньше 1260 пикселей, будут применяться правила, вложенные в медиазапрос. Что же они могут делать? Если у нас есть красивая фоновая картинка, которая должна отображаться полностью, а у пользователя маленький экран, в таких случаях можно прописать, чтобы она убиралась. В некотором роде медиазапросы напоминают конструкцию if. Но их особенностью является очень большая… индивидуальность. В них можно записать все изменения, которые необходимо проводить при работе с браузеров определённых размеров.