Шаг за шагом: адаптируем сайт под мобильные устройства

Что значит адаптировать сайт «по-мобильному»?

Начнем с того, что определим понятие адаптации сайта под разные устройства и понятие его мобильной версии.


Адаптация или оптимизация сайта под мобильные устройства – это технические мероприятия по модернизации интернет-ресурса для его одинаково удобного визуального восприятия посетителями с настольных и мобильных устройств, которые, как правило, имеют разные разрешения экранов. Другими словами она заключается в разработке адаптированного дизайна для одного сайта практически под любое устройство.

Мобильная версия сайта — это отдельная версия основного сайта, которая имеет разные URL-адреса и структуру дизайна. Другими словами, это отдельный сайт, который обычно доступен на поддомене основного (m.основной-сайт.ru), предназначающийся исключительно для мобильных устройств.

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

предыдущие записи

  • 17:31 10/03/2015

    Анализ неявных предпочтений пользователей — важнейший фактор в ранжировании документов в результатах поиска или, например, показе рекламы и рекомендации новостей.

  • 00:58 27/11/2014

    Хотите сделать Landing Page по ремонту квартир? Мы подобрали для Вас примеры лучших лендингов, которые нашли в поисковых системах.

  • 19:27 21/03/2015

    Хотите сделать Landing Page для продажи горящих путёвок? Мы подобрали для Вас примеры лучших лендингов, которые нашли в поисковых системах.

  • Landing Page для языковой школы

    19:07 21/03/2015

    Хотите сделать Landing Page для услуг языковой школы? Мы подобрали для Вас примеры лучших лендингов, которые нашли в поисковых системах.

Наши работы

Потяните за разделитель на изображении чтобы сравнить версии до и после адаптации

Шапка сайтаНе видно логотипа. Непонятное содержимое шапки сайта

МенюНеудобное меню, которого почти не видно на экране телефона

ТекстМелкий текст, который не удобно читать

Шапка сайтаЛоготип стал оптимального размера, а поиск по сайту стал гораздо удобнее

МенюУдобное мобильное меню, с основными разделами сайта

ТекстТекст стал читаемым, таблицы подстраиваются под разрешение экрана телефона Меню Мелкое меню каталога и основное меню сайта, которыми очень неудобно пользоваться

СлайдерМелкое фото товара и его текстовое описание. Также очень не удобно листать слайды.

ТекстНечитабельный текст

МенюУдобное мобильное меню, которое позволяет в пару кликов попасть в любой раздел сайта

СлайдерБольшое фото товара и читабельный текст описания товара. Удобное листание практически одним касанием.

ТекстТекст на всю ширину экрана с оптимальным для чтения размером

Шапка сайтаМелкий текст важной информации о госпитале

МенюНеудобное основное меню сайта

ТекстНечитабельный текст из контентной части. Интерактивными элементами невозможно пользоваться

Шапка сайтаВажная информация о госпитале оптимального размера для чтения текста

МенюУдобное мобильное меню и заметная контактная информация

ТекстТекст стал читабельным, все блоки подстраиваются под ширину экрана устройства Шапка сайтаНечитабельная контактная информация, логотип


Поиском почти невозможно воспользоваться

МенюБольшое неудобное меню, пункты которого было сложно прочитать.

Контентная частьВ основной части контента было практически не видно ни фото категорий товаров, ни их названий

Шапка сайтаНомера телефонов и логотип стали оптимального размера. Поиск стал удобным.

МенюМеню стало удобным, теперь можно легко найти и перейти в нужный раздел сайта.

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

МенюМелкие пункты меню, которых почти не видно

СлайдерМелкий текст и неудобное перелистывание слайдов

Шапка сайтаВерхняя часть сайта стала удобной, все элементы оптимального размера

МенюУдобное мобильное меню, с помощью которого можно попасть в любой раздел сайта

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

МенюНеудобное меню, которого почти не видно на экране телефона

Основной текстМелкий текст, который не удобно читать

ЛоготипЧитабельный логтип

МенюУдобное мобильное меню, с основными разделами сайта

Основной текстТекст стал читаемым, все информационные блоки подстраиваются под разрешение экрана телефона Шапка сайтаНечитабельная информация в шапке сайта. Неудобное меню.

СлайдерНеразборчивый слайдер

Контентная частьМелкий текст и фото в листинге товаров

Меню Удобное мобильное меню, с основными разделами сайта

Шапка сайтаРазборчивые логотип и контактная информация

Контентная частьБлоки товаров теперь на всю ширину и располагаются друг под другом. Информация легко воспринимается Шапка сайтаНе видно логотипа. Непонятное содержимое шапки сайта

МенюНеудобное меню, которого почти не видно на экране телефона

ТекстМелкий текст, который не удобно читать


Шапка сайтаЛоготип стал оптимального размера, а название и контактный телефон легко читаются

МенюУдобное мобильное меню, с основными разделами сайта

ТекстТекст стал читабельным, все блоки подстраиваются под ширину экрана устройства Ширина экранаСодержимое сайта не влазит в экран, появляется горизонтальная прокрутка

МенюНеудобное меню, которого почти не видно на экране телефона

Контентная часть Нечитабельный текст не позволяет ознакомиться с описанием и ценами услуг

Шапка сайтаУдобное мобильное меню, логотип оптимального размера. Кнопка с телефоном для быстрого совершения звонка

Ширина экранаСайт подстраивается под любые разрешения экранов мобильных устройств

Контентная часть Блоки с ценами и описаниями услуг теперь располагаются друг под другом, текст легко читается.

Как сделать адаптивную верстку сайта

Во-первых, если вы взялись верстать адаптивный дизайн сайта, между тегами <head></head> вставьте следующий код:

<meta name="viewport" content="width=device-width, initial-scale=1">

Какой я был дурак, что не сделал этого сразу, когда пытался сделать адаптивную верстку сайта!!! Проблема мобильных браузеров в их масштабировании верстки сайта, даже адаптивной.

Представьте себе, я рисую дизайн, потом прописываю все нужные стили и запросы, проверяю адаптивность сайта при разных разрешениях. Все вроде бы хорошо! Но, когда я открываю свой блог на смартфоне, я вижу, что сайт просто напросто сжался. Он не адаптировался к мобильному устройству, а просто уменьшились размеры шрифта, картинок и т.д. 

Как так? Я стал перепроверять все стили, правильно ли я прописал классы, в итоге дошел до того, что через javascript проверил ширину окна браузера в px. Я был в шоке. При проверке на ноутбуке я получил результат 1024px, и примерно такой же результат я получил открыв сайт на смартфоне!

Но ведь этого не может быть!

Оказывается, если не прописать код, который я указал выше, мобильный браузер не понимает, что сайт адаптивный и пытается просто уменьшить страницу сайта, чтобы она влезла в маленький экран мобильника.

Из-за своей глупости и некомпетентности я потерял очень много времени. Зато теперь запомнил навсегда))).

Адаптивная верстка CSS media запросы

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

Это как? Да, очень просто. В CSS файле нужно прописать запросы типа:

@media screen and (min-width: 1440px) and (max-width: 1599px){     }

Это код означает, что стили заключенные между “{    } ” будут работать для экранов с минимальной шириной 1440px и максимальной 1599px.

То есть те стили элементов сайта, которые должны быть адаптированны в зависимости от разрешения экрана, должны быть прописаны отдельно для каждой возможной ширины экрана.

Самые важные разрешения экрана, при адаптивной верстке

  • 320 px — Мобильные устройства (портретная ориентация);
  • 480 px — Мобильные устройства (альбомная ориентация);
  • 600 px — Небольшие планшеты;
  • 768 px — Планшеты (портретная ориентация);
  • 1024 px — Планшеты (альбомная ориентация)/Нетбуки;
  • 1280 px и более — PC.

Именно на эти разрешения и нужно делать упор и уделять им особое внимание при адаптивной верстке. Это самые распространенные виды разрешений экранов

bootstrap адаптивный дизайн

Очень удобно использовать для создания адаптивной верстки bootstrap. Удобство в том, что все стили для адаптации блоков, кнопок, таблиц и т.д. уже прописаны в bootstpap. Нужно только разобраться какой класс к какому элементу присвоить.

Для начала, качайте свежую версию bootstrap и подключите его к своему сайту. Учтите, что подключение стилей и скриптов к wordpress имеет свои особенности.

Верстка на bootstrap отличается тем, что ширина блока или экрана делится на 12 равных частей. И присваивая определенный класс блоку, можно задать ширину блока равной нужному количеству частей.

Например, такая конструкция позволит выделить один широкий блок для контента шириной в 8 частей и один узкий для сайдбара шириной в 4 части экрана:

<div class="col-md-8 "></div>
<div class="col-md-4"></div>

Ширина блоков будет рассчитываться автоматически в зависимости от ширины экрана. А при просмотре на мобильном устройстве эти блоки будут смещаться друг под друга.

Также можно регулировать отступ блок от края, опять же, на нужное количество частей. Например такая конструкция:

<div class="col-md-10 col-md-offset-1  "> </div>

Будет создан блок шириной в 10 частей с отступом слева в 1 часть экрана.


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

В будущем я планирую выложить несколько уроков по работе с bootsrap. Поэтому советую , чтобы не упустить этот момент.

Адаптивный веб-дизайн

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

Если говорить об адаптивной верстке сайтов, то следует упомянуть, что в специализированных источниках часто используют разные названия или типы дизайна. И это несколько вводит в тупик, поэтому надо четко определиться с терминами. Общее, что их объединяет, — сайт подстраивается под любой размер экрана, а уже каким методом это выполняется, зависит от личных предпочтений и квалификации исполнителя.

Adaptive design (адаптивный) 

Характеризуется созданием готовых версий под каждое разрешение экрана, достигается за счет перестройки контентных блоков. 

Responsive design (отзывчивый) 

Объединяет в себе черты «адаптивного» и «резинового» дизайна. Он подстраивается под любое разрешение экрана, как при «резиновой» верстке, но также перестраивает и порядок контентных блоков. Это наглядно показано на сайте liquidapsive.com. Понять суть этого принципа можно, выбрав тип дизайна (статичный, резиновый, адаптивный и отзывчивый) в правом верхнем углу и изменив размер окна браузера. 

RESS

Этот метод, испольщующий программирование на стороне сервера, чтобы создать CSS и HTML для различных устройств: мобильные пользователи получают один набор кода, а пользователи десктопных компьютеров — другой. Таким образом, происходит оптимизация кода в зависимости от устройства, что значительно увеличивает скорость загрузки контента. 

Есть и другие способы реализации, я выделил лишь основные. Непосредственно на реальных проектах мы предпочитаем использовать из каждого метода лучшее, комбинируя оптимизацию кода RESS и гибкость Resposive design. 

Преимущества: 

  • Один адрес у страницы: это положительно сказывается на шеринге страниц;
  • Наследственность: навигация, расположение контента похоже на всех устройствах, что положительно сказывается на адаптации пользователей к сайту Сохранность контента: контент в абсолютно полном объеме на всех устройствах;
  • Поддержка одного сайта: здесь все просто, вам не надо одновременно развивать несколько версий сайта;
  • Подстройка под любые устройства: грамотно спроектированный адаптивный дизайн подразумевает не только наличие мобильной версии, но и подстройку под такие устройства как ТВ, планшеты, игровые устройства (PSP);
  • Оптимизация под SEO и работу с поисковыми роботами: следует из наличия одной версии страницы, без ее дублирования и усложнения структуры сайта;

Недостатки: 

  • Большой вес страниц: разработчики часто забывают делать подгрузку картинок с меньшим разрешением для мобильных устройств или отключать подгрузку ненужных скриптов, которые не отображаются, что сказывается на скорости загрузки страницы.
  • Контент не адаптирован: иногда сайт не решает задач пользовательских сценариев для мобильных устройств, потому что цели на десктопе несколько отличаются, и это надо учитывать при проектировании.

Особенности оптимизации сайта под мобильные устройства

Если вы хотите сделать сайт дружественным к мобильным устройствам, вамобязательнонеобходимо учесть три основные составляющие:

  • оптимизацию CSS и настройку медиазапросов;
  • настройку области просмотра с помощью специальных метатегов;
  • оптимизацию используемых плагинов.

Оптимизация CSS и настройка медиазапросов

Первая проблема, с которой сталкивается пользователь, попадая на полную версию сайта с мобильного устройства и наоборот, — некорректное отображение ресурса по отношению к разрешению экрана.

Происходит это, потому что верстальщики, получая макет, по умолчанию прописывают значения ширины или высоты различных элементов в абсолютных величинах (в пикселях) для самых распространенных разрешений обычных ПК, например:

.container {width:210px;height:200px;}

Избежать этого можно, если при обозначение размеров элементов на странице использовать вместо абсолютных величин относительные (например, в процентах):

.container {width: 21,75%;height: 20,408%;}

Это позволит элементам страницы подстраиваться под изменения масштаба всей страницы.

Настройка области просмотра

Большинство сайтов при просмотре с экрана небольшого размера показываются пользователю в точно таком же разрешении (обычно это около 980 пикселей), как и при просмотре с ПК, например:

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

Использование специализированного метатега “viewport” помогает настроить ширину экрана под любое устройство:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Атрибут “initial-scale=1” указывает браузеру пользователя соотношение пикселей CSS и устройства (равное 1:1 независимо от ориентации дисплея) для корректного отображения в альбомной ориентации.

Оптимизация используемых плагинов

Многие мобильные устройства и браузеры не поддерживают или поддерживают не все версии современных плагинов, поэтому рекомендуется пересмотреть необходимость наличия на странице плагинов Flash, Silverlight или Java. Многие элементы HTML5 на данный момент позволяют найти замену всем плагинам без потери качества отображения контента.

Помимо всего прочего сокращение или полный отказ от плагинов на сайте позволит оптимизировать вес страниц, что также положительно скажется на его индексации поисковыми системами.

Дополнительные рекомендации

Помимо основных моментов, перечисленных выше, существует масса дополнительных настроек, которые сделают ваш сайт удобным в использовании с мобильных платформ:

Правильно подходите к выбору контрольных точек при задании процентных величин элементов макета, на эту тему можно почитать гуру адаптивного веб-дизайна –Итана Маркотта.

Пример оптимизации текста под смартфон и ПК

  • По возможности максимально оптимизируйте JavaScript.
  • Используйте понятную навигацию по сайту в верхней части страниц. Особенно это актуально для сайтов с гибким дизайном. Помните, что при «серфинге» с мобильной платформы пользователю должно быть так же удобно пользоваться сайтом, как и с ПК. Понятное меню и удобная навигация позволят не потеряться на страницах ресурса. Хороший вариант верстки лендинга с адаптивным дизайном —http://www.theverge.com/a/virtual-reality.

Пример навигации по сайту с адаптивным дизайном на экране ПК и смартфона

  • Не пренебрегайте сжатием gzip или deflate, это положительно влияет на скорость загрузки страниц сайта на всех устройствах.
  • Обязательно применяйте кеширование изображений.
  • Зафиксируйте до и после доработок значения таких показателей, как время и глубина просмотра страниц, показатель отказов, основные позиции сайта по всем ключевым запросам, а также статистику по мобильным устройствам и технологиям. Это позволит оценить, все ли вы сделали правильно.

С этим читают