Адаптация сайта под мобильные устройства: пошаговая инструкция. Мобильная версия сайта

Мобильная адаптация сайта становится всё более востребованной из-за увеличения количества смартфонов и планшетов. Что она собой представляет? Какие преимущества даёт? Особенно этот вопрос актуален для владельцев интернет-магазинов, сайтов различных сервисных компаний, блогов и популярных форумов. Как может быть проведена адаптация сайта под мобильные устройства? Вот небольшой перечень вопросов, которые мы рассмотрим в рамках статьи.

Общая информация

Итак, для начала давайте рассмотрим, что собой представляет адаптивный дизайн. Так называется конфигурация, при которой на все устройства отправляется один и тот же HTML-код, но размеры элементов корректируются благодаря CSS. Различные поисковые роботы умеют распознавать такие сайты при условии, что страницы и ресурсы открыты для сканирования. Для того чтобы указывать браузерам на наличие такой возможности, используется тег meta name="viewport". Что же представляет собой адаптация сайта под мобильные устройства?

Рассмотрим тег

Итак, необходимо позаботиться о том, чтобы был тег meta name="viewport". Зачем он? Именно в нём находятся инструкции для браузера о том, как следует корректировать размеры и масштабировать страницу с учетом ширины экрана устройства, с которого просматривается сайт. Если не добавить этот небольшой элемент, то по умолчанию будет показана страница, рассчитанная на компьютеры. Но при этом мобильные браузеры будут стараться оптимизировать содержание, что выразится в увеличении шрифтов, масштабируемости содержания или отображении части содержимого, которое влезает на экран. Приятно ли это? Нет, мобильная версия сайта в таком случае вызовет только негативное восприятие. Ведь шрифты будут непропорциональными, придётся прокручивать страницу и совершать ещё ряд действий, которые, хотя и являются второстепенными, но всё же утомительны. Проверить адаптацию сайта под мобильные устройства можно с помощью смартфона, планшета или специальных сервисов и программ. Конечно, два первых варианта более предпочтительны, но если нужен тщательный анализ с позиции различных устройств и экономии времени, тогда подойдут последние.

Какие же преимущества даёт адаптация сайта под мобильные устройства?

Использование подобного подхода позволяет:

1. Пользователям делиться контентом в тех случаях, когда у него есть один адрес.
2. Алгоритмам поисковых систем получать точные параметры страницы, нет путаницы с разными версиями.
3. Снизить вероятность возникновения ошибок.
4. Сократить время загрузки благодаря отсутствию необходимости переиндексации.
5. Экономить ресурсы.

Кроме того, адаптивную страницу создать легче, нежели несколько вариантов чего-то одного. Адаптация сайта под мобильные устройства (самому это сделать вполне возможно) не является чем-то сложным, достаточно знать JavaScript и уметь работать с каскадными таблицами стилей (CSS) и изображениями. Существует множество подходов к выполнению поставленной задачи. В рамках статьи будет рассмотрено три самых популярных варианта:

1. Упор на JavaScript.
2. Комбинирование.
3. Динамическое использование JavaScript.

Давайте же рассмотрим их более подробно.

Адаптация с использованием JavaScript

В таком случае используется один контент. А с помощью JavaScript меняется форматирование с механизмом работы страницы. Всё в таких случаях зависит от платформы. Этот алгоритм похож на медиа-запросы каскадной таблицы стилей. Рассмотрим небольшой пример работы на практике. Итак, у нас есть страница с HTML-кодом, в котором размещен элемент <script>. При его запросе будут передавать одни и те же самые данные. Но вот когда дело дойдёт до обработки, на это значительное влияние окажут характеристики устройства. И как результат – будет меняться форматирование страницы. В качестве примера можно привести ситуацию с изображением, которое будет оптимизировано с целью просмотра именно на смартфонах и планшетах, а не на компьютерах. Важным преимуществом такого варианта является то, что компьютером реализация распознаётся автоматически. К тому же не нужно обзаводиться специальным заголовком, поскольку нет динамического показа контента.

Комбинирование

В данном случае адаптация сайта под мобильные устройства используется благодаря совмещению и возможностей JavaScript и функций сервера. Как выглядит общая схема? Пользователь заходит на сайт с определённого устройства. JavaScript получает информацию о том, чем же он пользовался, и передаёт её серверу. Там генерируется необходимый код, который впоследствии и отправляется на устройство. Причем информация об этом сохраняется в файлах куки. И при последующем посещении сервер считывает данные именно с них. Особенностью данного подхода является возможность использования различных вариантов кода HTML. Правда, для корректной работы необходимо позаботиться о наличии заголовка Vary: User-agent. Мобильная версия сайта в таком случае требует немного больше труда.

Динамический JavaScript и друге варианты

В этом случае предусматривается, что будет предоставлен один и тот же код с определённым элементом, что указывает на внешний файл, содержимое которого меняется в зависимости от того, какой агент используется. То есть перед нами будет динамическая страница. Как же это реализуется? Многие используют для этого всё тот же Vary: User-agent. А при работе со страницами информация к тому же будет обновляться в режиме реального времени, что, безусловно, очень хорошо. О теории можно ещё много говорить. Как не вспомнить дивы (<div>), с помощью которых можно буквально «жонглировать» внешним видом сайта и о множестве иных различных вещей. Но ведь нас интересует, как же это сделать!

Подготовка к реализации

Следует отметить, что существует два подхода при выполнении такой задачи, как создание адаптивного сайта:

1. Ручной.
2. Автоматический.

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

Гибкий макет

Для того чтобы у нас вышла буквальная "конфетка", необходимо использовать только относительные единицы измерения. На практике шрифты все подгоняются под em, а размер элементов указывается в процентах. Хотя периодически можно (если очень хочется) использовать и рх, но лучше обойтись без них. Когда указывается ширина (width) или высота, следует использовать не определённое фиксированное число вроде 1080, 1260 или же 768, а процентный показатель. Как пример – width: 90%. Можно сделать и 80%, и 99%, и 100%. Всё зависит от желания мастера. Но как быть с текстом, который выводится на определённом элементе? На такой случай есть одна очень хорошая формула: ширина шрифта делится на этот же показатель фонового компонента, и мы получаем наш исковый результат. Порой бывает и такое, что числа могут быть очень длинными. К примеру, стандарт – это 1260. А заходят пользователи, у которых ширина экрана составляет 780. При делении у нас получится очень длинное число. Обязательно ли его округлять? Что ж, тут ситуация сложная. Многие этого делать категорически не советуют. Лучше всё же смотреть по ситуации и оценивать, насколько важной является точность. Можно, к примеру, установить, чтобы учитывалось только два, три, четыре или же десять знаков после запятой. Поверьте, несложная работа сие есть, эта адаптация сайта под мобильные устройства. CSS, если содержит записи без ошибок, сможет всё воспроизводить.

Гибкость шрифта, изображений и медиазапросы

По умолчанию в браузерах размер шрифта выставлен на показателе в 16 px. Но, как уже ранее говорилось, для нас такой подход весьма нежелателен. Что же делать в таком случае? Тогда нужное значение делим базовое. Рассмотрим пару примеров:

1. 16/16 = 1 em.
2. 18/16 = 1,125 em.

Полученный результат необходимо записать в font-size, добавив после двоеточия. Правда, если эти значения в последующем будут включены ещё где-то, следует учитывать, что будет отображаться именно введённая нами величина.

А сейчас относительно изображений. Всё можно вносить или в их атрибуты, или в каскадную таблицу стилей с помощью max-width. Не забывайте, что размер указывается в процентах! И ещё несколько слов о медиазапросах. Их можно использовать в тех случаях, когда необходимо поставить определённые условия. К примеру, если ширина экрана меньше 1260 пикселей, будут применяться правила, вложенные в медиазапрос. Что же они могут делать? Если у нас есть красивая фоновая картинка, которая должна отображаться полностью, а у пользователя маленький экран, в таких случаях можно прописать, чтобы она убиралась. В некотором роде медиазапросы напоминают конструкцию if. Но их особенностью является очень большая… индивидуальность. В них можно записать все изменения, которые необходимо проводить при работе с браузеров определённых размеров.

Заключение

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