Мобильная адаптация сайта становится всё более востребованной из-за увеличения количества смартфонов и планшетов. Что она собой представляет? Какие преимущества даёт? Особенно этот вопрос актуален для владельцев интернет-магазинов, сайтов различных сервисных компаний, блогов и популярных форумов. Как может быть проведена адаптация сайта под мобильные устройства? Вот небольшой перечень вопросов, которые мы рассмотрим в рамках статьи.
Общая информация
Итак, для начала давайте рассмотрим, что собой представляет адаптивный дизайн. Так называется конфигурация, при которой на все устройства отправляется один и тот же HTML-код, но размеры элементов корректируются благодаря CSS. Различные поисковые роботы умеют распознавать такие сайты при условии, что страницы и ресурсы открыты для сканирования. Для того чтобы указывать браузерам на наличие такой возможности, используется тег meta name="viewport". Что же представляет собой адаптация сайта под мобильные устройства?
Вам будет интересно:Как создать американский Apple ID простейшими способами
Рассмотрим тег
Итак, необходимо позаботиться о том, чтобы был тег meta name="viewport". Зачем он? Именно в нём находятся инструкции для браузера о том, как следует корректировать размеры и масштабировать страницу с учетом ширины экрана устройства, с которого просматривается сайт. Если не добавить этот небольшой элемент, то по умолчанию будет показана страница, рассчитанная на компьютеры. Но при этом мобильные браузеры будут стараться оптимизировать содержание, что выразится в увеличении шрифтов, масштабируемости содержания или отображении части содержимого, которое влезает на экран. Приятно ли это? Нет, мобильная версия сайта в таком случае вызовет только негативное восприятие. Ведь шрифты будут непропорциональными, придётся прокручивать страницу и совершать ещё ряд действий, которые, хотя и являются второстепенными, но всё же утомительны. Проверить адаптацию сайта под мобильные устройства можно с помощью смартфона, планшета или специальных сервисов и программ. Конечно, два первых варианта более предпочтительны, но если нужен тщательный анализ с позиции различных устройств и экономии времени, тогда подойдут последние.
Вам будет интересно:Mock up ("мокап") - это... Зачем нужен и как его сделать?
Какие же преимущества даёт адаптация сайта под мобильные устройства?
Использование подобного подхода позволяет:
Вам будет интересно:NSLookUp команды и имена DNS в контексте развития Сети интернет
Кроме того, адаптивную страницу создать легче, нежели несколько вариантов чего-то одного. Адаптация сайта под мобильные устройства (самому это сделать вполне возможно) не является чем-то сложным, достаточно знать JavaScript и уметь работать с каскадными таблицами стилей (CSS) и изображениями. Существует множество подходов к выполнению поставленной задачи. В рамках статьи будет рассмотрено три самых популярных варианта:
Давайте же рассмотрим их более подробно.
Адаптация с использованием JavaScript
В таком случае используется один контент. А с помощью JavaScript меняется форматирование с механизмом работы страницы. Всё в таких случаях зависит от платформы. Этот алгоритм похож на медиа-запросы каскадной таблицы стилей. Рассмотрим небольшой пример работы на практике. Итак, у нас есть страница с HTML-кодом, в котором размещен элемент
Гибкий макет
Для того чтобы у нас вышла буквальная "конфетка", необходимо использовать только относительные единицы измерения. На практике шрифты все подгоняются под em, а размер элементов указывается в процентах. Хотя периодически можно (если очень хочется) использовать и рх, но лучше обойтись без них. Когда указывается ширина (width) или высота, следует использовать не определённое фиксированное число вроде 1080, 1260 или же 768, а процентный показатель. Как пример – width: 90%. Можно сделать и 80%, и 99%, и 100%. Всё зависит от желания мастера. Но как быть с текстом, который выводится на определённом элементе? На такой случай есть одна очень хорошая формула: ширина шрифта делится на этот же показатель фонового компонента, и мы получаем наш исковый результат. Порой бывает и такое, что числа могут быть очень длинными. К примеру, стандарт – это 1260. А заходят пользователи, у которых ширина экрана составляет 780. При делении у нас получится очень длинное число. Обязательно ли его округлять? Что ж, тут ситуация сложная. Многие этого делать категорически не советуют. Лучше всё же смотреть по ситуации и оценивать, насколько важной является точность. Можно, к примеру, установить, чтобы учитывалось только два, три, четыре или же десять знаков после запятой. Поверьте, несложная работа сие есть, эта адаптация сайта под мобильные устройства. CSS, если содержит записи без ошибок, сможет всё воспроизводить.
Гибкость шрифта, изображений и медиазапросы
По умолчанию в браузерах размер шрифта выставлен на показателе в 16 px. Но, как уже ранее говорилось, для нас такой подход весьма нежелателен. Что же делать в таком случае? Тогда нужное значение делим базовое. Рассмотрим пару примеров:
Полученный результат необходимо записать в font-size, добавив после двоеточия. Правда, если эти значения в последующем будут включены ещё где-то, следует учитывать, что будет отображаться именно введённая нами величина.
А сейчас относительно изображений. Всё можно вносить или в их атрибуты, или в каскадную таблицу стилей с помощью max-width. Не забывайте, что размер указывается в процентах! И ещё несколько слов о медиазапросах. Их можно использовать в тех случаях, когда необходимо поставить определённые условия. К примеру, если ширина экрана меньше 1260 пикселей, будут применяться правила, вложенные в медиазапрос. Что же они могут делать? Если у нас есть красивая фоновая картинка, которая должна отображаться полностью, а у пользователя маленький экран, в таких случаях можно прописать, чтобы она убиралась. В некотором роде медиазапросы напоминают конструкцию if. Но их особенностью является очень большая… индивидуальность. В них можно записать все изменения, которые необходимо проводить при работе с браузеров определённых размеров.
Заключение
Количество мобильных устройств и людей, которые ими пользуются, постоянно растёт. Поэтому очень желательно, чтобы в макете сайта перед началом его разработки были проработаны даже самые мелкие детали, не говоря уже о концепциях. Ведь необходимо добиться того, чтобы пользователи, заходящие на сайт с телефонов, не загружали данные, которые им не будут отображены. Почему? Ну, это элементарно – чтобы не замедлять загрузку страниц. И лучше сделать так, чтобы данные загружались небольшими порциями, а сам сайт работал быстро и эффективно.