Адаптивная верстка что это и как использовать

Оглавление (нажмите, чтобы открыть):

Адаптивная верстка сайта

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

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

1. Адаптивная верстка сайта — что это такое

Не стоит путать мобильную версию сайта и адаптивную верстку сайта. Мобильная версия находится на отдельном поддомене и полностью дублирует контент сайта. Адаптивный сайт содержит те же самые адреса URL страниц, но в зависимости от устройства подгружает разные стили CSS, что позволяет отображать сайт в более удобном виде.

2. SEO оптимизация и адаптивная верстка

Поисковые системы на данный момент имеют две разные выдачи (они очень похожи). Одну для пользователей ПК, другую мобильную. Если сайт не оптимизирован под мобильные устройства, то это считается отрицательным фактором и позиции сайта будут понижены на 2-3 (бывает и больше). При этом было бы логично, если бы занижались позиции только мобильной версии, однако практика показывает еще и ухудшение позиций и для основной версии сайта.

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

3. Как проверить сайт на адаптивность

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

В интернете есть гораздо более быстрое и простое решение. Например, можно установить в браузер Google Chrome специальный плагин Window Resizer и с помощью него открывать сайт в самых популярных разрешениях.

Можно просто вручную изменять размеры окна браузера по ширине и смотреть результат. В Firefox или Google Chrome есть адаптивный дизайн браузера нажав Ctrl+Shift+M.

Самое главное условие — это добиться отсутствия горизонтальной прокрутки и отсутствия flash-плагинов на странице.

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

Ссылки для онлайн проверки сайта на адаптивность в поисковых системах:

После проверки возможно два варианта. Либо сайт оптимизирован, либо нет:

Например, проверка адаптивности в Google:

Проверка адаптивности в Яндексе:

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

Сделать адаптивную верстку сайта может только человек, разбирающийся в CSS и html. Мы рассмотрим основные моменты, поскольку единого рецепта нет.

Чтобы сделать адаптивную верстку, нужно создавать таблицы стилей CSS в третьей версии. Разница между 2 и 3 есть, но в данном вопросе очень сильное значение имеет отсутствие абсолютных значений в стилях. Короче говоря, все значения размеров блоков длина, ширина, размеры — все это задается в процентах.

Помимо этого в CSS3 появилось правило » media queries «, которое позволяет использовать разные стили в зависимости от ширины экрана браузера. Про медиа запросы можно прочитать более подробно в отдельной статье: свойство CSS @media

Синтаксис CSS @Media

Например, напишем условия при которых стили будут работать для устройств с шириной экрана меньше 800px.

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

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

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

5. Практичные примеры адаптивной верстки сайта

5.1. Адаптируем очень длинные слова

Например, на странице встретится очень длинное слово и тогда если не установлены свойство overflow, то это может повлечь за собой появление горизонтальной прокрутки. Чтобы этого избежать нужно контенту прописать следующие CSS свойства

5.2. Адаптивное меню сайта

Сайдбар сайта как правило занимает ширину в районе 200-300 пикселей, что занимает почти всю ширину браузера на мобильных устройствах. Поэтому чаще всего делают выпадающие меню с помощью стандартной кнопки в виде трех штрихов (это стало уже классикой).

Реализовать это на сайте можно, но придется немного повозиться со стилями. Давайте рассмотрим все по шагам.

Ситуация, когда у нас есть меню и есть основной контент (я не стал рисовать шапку и футер):

Html код такой структуры может быть примерно таким:

Преобразуется на странице в

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

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

Приведем html-код адаптивной верстки с комментариями:

Уменьшим ширину экрана до 700 пикселей (к примеру). Вот как это выглядит на странице

Т.е. меню появляется лишь при нажатии кнопки.

Вот что будет при нажатии на кнопку:

5.3. Адаптивные изображения

Изображением нужно прописать ширину в процентах, а высоту присваиваем значнеи auto , только так мы добьемся адаптивности html кода.

Адаптивная верстка сайта: пошаговая инструкция с примерами

Верстка — это создание структуры и оформление элементов web-страницы. Написанием кода веб-страницы занимается верстальщик или front-end разработчик. Он использует графическую программу для нарезки макетов, редактор кода, дополнительные программы для ускорения процесса.

Что такое верстка

Код верстки является скелетом страницы сайта, пишется на языке разметки html. Состоит из логически разбитых на элементы частей страницы — тегов. Каждый из них отвечает за свою область: меню, подвал сайта, медиа, формы, карты, поиск по сайту, время. У них есть атрибуты, с их помощью идентифицируются отдельно взятые элементы. За оформление отвечают каскадные таблицы стилей, а за динамические эффекты — джаваскрипт.

Качественно сделанная верстка одинаково отображается на всех браузерах. Результат определяется проведением ряда тестов. Способность работать на более, чем одной аппаратной платформе, называется кроссплатформенность. Существует несколько подходов реализации верстки, используются различные фреймворки.

Для создания страниц по современным стандартам применяются разные методы адаптивной верстки. Это обеспечивает корректное отображение элементов на всех типах экранов.

Виды макетов

Стандарты постоянно совершенствуются, и, как следствие, меняются способы разработки макетов. На данный момент существует 3 основных вида страниц:

Статические макеты представляют собой страницы, которые не способны менять свое оформление. Их дизайн не меняется, а размеры элементов имеют четкое значение.

Адаптивная верстка подразумевает, что элементы сайта будут подстраиваться под размер экрана используемого устройства. При изменении ширины документа происходит перестройка блоков, одни части заменяются другими, некоторые элементы пропадают. Идея адаптивности пришла на смену мобильным версиям сайта, живущих на отдельных поддоменах. Главным принципом создания адаптивности является разработка дизайна под три экрана: компьютера, планшета, смартфона.

При создании резиновой верстки также учитываются изменения размеров экрана и все элементы подстраиваются. Главным отличием от адаптивной является то, что верстка расширяется или сужается под экран на каждом моменте изменений.

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

Размеры для адаптивной верстки

Для создания адаптивных макетов используются относительные единицы измерений вместо стандартного статического px. Самые распространенные:

В адаптивной верстке на html em используется для того, чтобы задавать размеры шрифтов и отступов. По умолчанию 1 em равняется 16 пикселям. Соответственно, чтобы задать шрифт для параграфа p размером 32 пикселя, необходимо указать следующие:

Особенностью использования единицы является то, что 1em равняется размеру шрифта своего элемента. То есть 1em принимает различные значения в разных участках кода. Например, в блоке, где размер шрифта равняется 2em (32px), margin в 1em будет равняться 32 пикселям. Но там, где шрифт равняется 1em (16px), padding в 1em будет равняться стандартным 16 пикселям.

Rem — корневой em, который определяется в теге . 1 root-em, в отличие от 1em, равняется одному числу при любых обстоятельствах. Значение меняется только тогда, когда изменения задаются принудительно.

Проценты, как правило, используются для установления ширины блоков или изображений. Независимо от размеров экрана он будет соответствовать указанному значению, например, 80 %.

Медиазапросы

В CSS включена поддержка различных технических параметров устройств. Определяется смартфон с маленьким расширением экрана, указывается стилевое свойство под его значение. Медиазапросы выявляют различия ориентации: портретная и альбомная. Широко применяются для создания адаптивной верстки. Макет подстраиваться под указанное разрешение экрана, меняется структура документа в соответствии с кодом.

Определяемые типы устройств:

  • устройства braille и принтеры embossed для слепых;
  • обычные принтеры print;
  • экран монитора screen;
  • речевые синтезаторы speech;
  • телевизоры tv.

В значении имени запросов указываются несколько условий. Например, выводить содержимое только для экранов мониторов и только максимальной шириной 600 px. Это выглядит так:

@media screen and (max-width: 600px) < код вывода >.

Адаптивный дизайн строится на использовании медиазапросов. Создается верстка для экранов, у которых минимальная ширина 1200 пикселей, тело кода помещается в @media screen and (max-width: 1200px) < >. Далее создается блок для планшетов @media screen and (min-width: 700px) < >и мобильных устройств @media screen and (max-width: 699px) < >.

Mobile First

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

Подход Mobile First предполагает отображение самого важного содержимого, легкий и оптимизированный веб-сайт, отказ от загрузки других ресурсов.

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

Bootstrap

Один из популярных фреймворков, который дал простой ответ на вопрос, как сделать адаптивную верстку, — это Twitter Bootstrap. С помощью 12-колоночной сетки бутстрап создаются сайты, которые сразу по умолчанию правильно отображаются на экранах мобильных устройств. В качестве основных инструментов используются:

  • заранее заданная ширина колонок, которыми можно определить ширину элементов;
  • фиксированные и резиновые компоненты документа;
  • встроенные шрифты и классы для них;
  • средства оформления таблиц;
  • классы оформления в меню, панели инструментов.

Динамические эффекты написаны на jQuery, для описания внешнего вида используется препроцессор SASS, в функционал встроены популярные веб-шрифты. Сайты, разработанные на последней версии bootstrap, не отображаются корректно в редко используемых версиях браузеров, таких как IE8, IE9 и iOS 6. Примечательно, что в качестве размеров шрифтов некоторых элементов используются корневые em. На официальном сайте есть подробные мануалы на английском и русском языке, примеры адаптивной верстки, способы использования встроенных компонентов.

Foundation

Foundation — мощный фреймворк, один из главных конкурентов Twitter Bootstrap. Поддерживает любые размеры сеток, имеет ряд преимуществ, которых не хватает в Bootstrap.

Компоненты отличаются большим набором различных анимационных эффектов, которые могут настраиваться. Для управления стилями используется препроцессор SASS. В списке базовых шаблонах содержатся слайдеры, панели навигации, иконки Social Media.

Размеры задаются значениями, приведенными в таблице.

Адаптивная версия для сайта. Набор требований и особенностей. Тестирование.

Сначала, давайте кратко разберемся, что такое адаптивная верстка и чем она отличается от мобильной версии сайта.

Адаптивная верстка – это html-верстка сайта сразу под несколько наиболее популярных разрешений. Например — 340px, 420px, 768px, 1024px, 1200px (все в ширину). Таким образом, сайт будет занимать всю или почти всю рабочую область на большинстве устройств – телефонов, планшетов, ноутбуков, настольных ПК. Но т.к. сейчас выпускается очень много устройств с абсолютно разными экранами, то при адаптивной верстке сайт не всегда занимает 100% ширины экрана.

Респонсив верстка – это более сложный вид адаптивной верстки, который позволяет сайту всегда занимать 100% ширины экрана.

Мобильная версия сайта – предполагает наличие или отдельного шаблона (как минимум) или вообще наличие отдельного сайта.

При адаптивной и респонсив верстке – контент сайта один и тот же, просто отображается в разном виде.

При мобильной версии сайта – контент управляется отдельно, для больших экранов и мобильных устройств.

Все подходы, имеют свои плюсы и минусы:

Адаптивная верстка

Плюсы: наибольшая простота из наших вариантов. Включая поддержание и наполнение.

Минусы: не всегда занимает 100% ширины экрана, лишний трафик для пользователя.

Респонсив верстка

Плюсы: красота, всегда занимает 100% ширины экрана.

Минусы: сложно для создания и поддержания, лишний трафик для пользователя.

Отдельная мобильная версия

Плюсы: свобода реализации.

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

В итоге, что выбрать?

Самый оптимальный вариант с точки зрения цена\качество – адаптивная верстка. Если нужно качество – респонсив-верстка. Если у вас сложный функционал на сайте (портал, много интерактива), то можно рассмотреть отдельную мобильную версию или мобильное приложение.

Для каких разрешений нужно делать адаптивную верстку

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

По графику видно, что наибольшей популярностью при посещении корпоративных сайтов является разрешение 1366px. За ним, примерно в равной пропорции 1280 и 1920px. И далее идут все остальные – 360px, 1600, 1024, 1440 и 768px.

Эти данные в целом вполне коррелируют со статистикой LiveInternet и StatCounter.

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

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

Какие разрешения нужно контролировать, при проверке сайта на адаптивность. Мы рекомендуем проверять сайт на разрешениях:

320px, 360px, 768px, 1024px, 1280px, 1440px, 1920px. Этот диапазон, от 320 до 1920px охватывает, как правило, 90% всей аудитории корпоративных сайтов. На этих разрешениях Ваш сайт должен выглядеть хорошо.

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

Существуют некоторые ограничения на максимальную ширину сайта. В первую очередь – удобная длина строки. Если делать длинную длину строки, то текст, растянутый на нее, станет очень неудобно читать. Поэтому, к сайту добавляются сайдбары – левая и\или правая колонки. Информация разбивается на блоки, но на корпоративных сайтах это часто невозможно. Поэтому, максимальное разрешение для корпоративного сайта мы оставляем 1200 или 1300px.

Рассмотрим аналогичный график по браузерам (отмечаю, график среднестатистический – в разных тематиках, соотношение может меняться):

Здесь наметились два явных лидера – Google Chrome и Яндекс.Браузер(только на территории РФ). Если к Хрому добавить статистику по его мобильной версии, то их суммарная доля составит около 60% всех посещений. Следом идет FireFox с 10% посещений и далее менее 10%: Opera, MSIE 11, Mobile Safari, Edge.

Т.о. основные браузеры под которые нужно разрабатывать – Google Chrome и Яндекс.Браузер. Однако, все же не стоит забывать проверить отображение сайта в Opera, IE11 и Safari. Это больше вопрос престижа, чем необходимости.

Еще одной частью адаптивной верстки является повышенные требования к изображениям.

Мастер Йода рекомендует:  5 собеседований в топовых компаниях и 5 предложений о работе

Сначала поговорим о том, что при масштабировании фотографий в большую сторону (увеличении) происходит неприятное размытие. При масштабировании в меньшую сторону (уменьшении), размытие малозаметное или вообще незаметное.

Разумеется, это утверждение относится к растровым изображениям, фотографиям (jpeg, jpg, png)

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

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

В последнее время, в требованиях предъявляемых к изображениям на адаптивном сайте появилось еще одно. Разрешение картинки должно быть не просто соответствовать верхней границе диапазона адаптивности, но и превышать ее на 50-100%. Это необходимость возникла с массовым появлением компактных мониторов с повышенной плотностью пикселей.

Сейчас, например, ваш покорный слуга пишет эту статью за 15 дюймовым ноутбуков с разрешением 1900px по ширине. А т.к. при таком разрешении все сайты казались бы очень маленькими, то в операционную систему внедрено автоматическое масштабирование всего содержимого браузеров. Раньше эта особенность касалась только экранов Apple с технологией Retina, но уже несколько лет похожая технология применяется и на windows-ноутбуках, т.е. она приобрела массовый характер.

Как следствие, картинки предназначенные для отображения на сайте масштабируются в большую сторону на 25-50%, что ведет к их заметному размытию. В моем конкретном случае – на 25%, но можно выставить увеличение и на 50, и на 75%.

По нашему опыту, считаем, что достаточно закладывать в размер картинки 50% увеличение.

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

Поэтому приходится подстраховывать svg-картинку обычной, растровой jpg-картинкой. Несомненно, за этим форматом – будущее веб дизайна, но … не сейчас.

Как следствие, применение svg оправдано только в критически-важных изображениях – логотипах, отдельных важных иллюстрациях.

Особые приемы, которые должны быть использоваться на всех адаптивных сайтах

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

Рассмотрим интересные приемы, которые используются в адаптивных сайтах.

Бургер-меню

В первую очередь, конечно – это мобильные меню. Как правило, они раскрываются при клике на «три полоски» (т.н. «бургер-меню»)

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

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

1. Выезжающее слева или справа, со значком закрытия и блокирующее прокрутку контента сайта. Скриншот для примера:

2. Появляющееся поверх сайта, со значком закрытия и блокирующее прокрутку контента.

3. Раскрывающее вниз от бургер-меню, без значка закрытия, но тоже блокирующее прокрутку контента. Скриншот примера:

Разумеется, в бургер-меню обязательно должны располагаться все основные страницы сайта. Если подпунктов не много, их так же можно добавить в бургер-меню. Но размещать в бургер-меню все категории каталога – плохой тон, пользоваться таким меню будет неудобно. Поэтому, как всегда, при составлении структуры бургер-меню старайтесь пользоваться принципом разумности.

Так же, обязательно бургер-меню должно поддерживать смахивание (т.н. «свайп») – это когда бургер-меню можно закрыть, проведя пальцем по смартфону, одним смахивающим движением. Это очень удобно.

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

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

Кликабельные телефоны и мессенджеры

Незаменимой особенностью мобильной адаптивной верстки должно являться наличие кликабельных телефонов, значков мессенджеров WhatsApp, Viber, Telegam и формы обратного звонка. По тому, как разместить у себя на сайте кликабельные значки мессенджеров читайте в статье моего коллеги, Алексея – читать.

Обратите внимание, значки мессенджеров, поиск по сайту, ссылку на профиль – очень удобно размещать в бургер-меню.

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

Еще одной проблемной частью при разработке адаптивного сайта являются таблицы. Не те, что в верстке сайта, а таблицы в контенте, прайс-листы, характеристики товаров и прочее.

Рассмотрим несколько примеров адаптации таблиц

1. Использование горизонтальной и вертикальной прокрутки внутри таблицы. Честно, считаем этот способ самым грубым и не заслуживающим внимания. Пример вживую можно посмотреть здесь: https://www.w3schools.com/howto/howto_css_table_responsive.asp

2. Транспонирование (замена строк на столбцы). Очевидный способ, который применяется, когда на сайте используются таблицы очень широкие, но с маленьким количеством строк. Удобным будет так же добавить в него прилипание шапки по мере вертикальной прокрутки.
Пример вживую можно посмотреть здесь: https://codepen.io/dbushell/full/8e6a1ee85418f3c5abe839647dbcdec5/

3. Скрытие ненужных столбцов внутрь строки. Например, скриптом FooTable. При таком способе, контент-менеджер заранее выбирает столбцы, которые обязательно отображаются, остальные столбцы транспонируются – для каждой строки отдельно.
Пример вживую можно посмотреть здесь: http://fooplugins.github.io/FooTable/docs/examples/basic/single-header.html

4. Преобразование строк таблицы в карточки(отдельные мини-таблички). Например, скриптом Stackable. При этом способе происходит почти тоже самое, что и в предыдущем, только без скрытия:
Пример вживую можно посмотреть здесь: http://johnpolacek.github.io/stacktable.js

5. Аналогичный скрипт по превращению таблиц в карточки предлагается скриптом Responsive Tables.
Пример вживую можно посмотреть здесь: https://elvery.net/demo/responsive-tables

Нет смысла в этой статье перечислять все способы – их очень много, под каждый случай можно подобрать свой скрипт. Естественно, чем сложнее таблицы – тем сложнее подобрать скрипт.

Кнопки «Читать далее»

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

Скрытие части контента, перемещение блоков

Иногда, при разработке адаптивной верстки возникает необходимость какой-либо из блоков перенести в другую часть страницы, например в самый низ. А другие, просто поменять местами и т.д. С помощью верстки такие изменения сделать не получится, тут на помощь нам снова приходят JS-скрипты, которые позволяют выбранные нами блоки, при определенных разрешениях перемещать в любую часть страницы. Это позволяет избежать лишнего дублирования информации и облегчить жизнь контент-менеджерам.

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

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

Что такое адаптивная верстка

26 июня 2020 года. Опубликовано в разделах: Азбука терминов. 11391

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

Адаптивная верстка сайта сегодня создается при помощи языка разметки HTML5 и каскадных таблиц стилей CCS3. Но до того момента, как соответствующие технологии стали стандартом для всех популярных браузеров, для соответствующих целей использовался язык программирования JavaScript. Еще раньше (до 2010-го года) верстальщикам приходилось создавать несколько вариантов одних и тех же страниц, но с разной разметкой, чтобы разрабатываемый ими сайт правильно отображался на различных экранах.

Для чего нужна адаптивная верстка страницы

До относительно недавнего времени при заходе на многие сайты в нижней части браузера можно было увидеть ползунок, обеспечивающий скроллинг страницы по горизонтали. Такое происходило, например, если окно интернет-обозревателя не было развернуто на весь экран, а занимало сравнительно небольшую его площадь. Также это можно было почти всегда видеть, когда разрешение экрана, на который выводилось изображение, составляло 800 на 600 или, тем более, 640 на 480 пикселей.

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

Почему и когда появилася адаптивный дизайн?

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

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

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

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

При помощи чего и как создается адаптивная верстка?

Прежде чем приступить к рассмотрению вопроса, который касается того, как сделать адаптивную верстку, необходимо кратко рассмотреть основные применяемые технологии. Сейчас их две: HTML5 и CSS3. До недавнего времени применялись HTML4 и CSS2, но чтобы при помощи них можно было создать универсальный дизайн, приходилось использовать еще и JavaScript.

CSS3 – это новое поколение каскадных таблиц стилей. Данная технология предназначается для создания правил отображения элементов страницы в браузере пользователя. При помощи нее можно указать, например, какой размер должен иметь элемент при определенном разрешении экрана пользователя, либо установить правило, что тот всегда должен занимать определенный процент пространства (100% — заполнение всей рабочей области браузера).

Именно в CSS третьего поколения появилось правило «media queries», используя которое верстальщик может создавать отдельные классы для каждого конкретного разрешения.

Человек, который планирует использовать CSS3 для верстки адаптивного дизайна, должен знать, что, в отличие от CSS2, в третьем поколении каскадных таблиц стилей для указания размеров объектов используются не пиксели, а проценты.

Что касается HTML5, то при его помощи выполняется непосредственно разметка страницы, т.е указывается то, где должны размещаться определенные элементы. Чтобы объекты подстраивались под разрешение, в параметрах HTML-тегов указываются заранее созданные при помощи CSS3 классы.

Простой пример адаптивной верстки

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

Вначале при помощи HTML разместим на странице сам элемент:

Тег DIV – указывает, что все, что в нем заключено, является отдельным блоком. Когда на странице много таких блоков, указывается атрибут «class». Это необходимо, чтобы браузер понял, какое правило применять для конкретного блока.

Теперь необходимо создать непосредственно само правило, так называемый,

В этом коде как раз задаются разрешения для адаптивной верстки. В частности, здесь указано, что ширина (wight) должна всегда составлять 100% от ширины рабочей области веб-обозревателя, тогда как высота (height) подстраивается автоматически.

Проверка адаптивной верстки

Существуют специальные инструменты для проверки адаптивной верстки. Например, в браузере GoogleChrome можно нажать на клавишу «F12», а затем, на открывшейся панели, кликнуть по значку с изображением смартфона и планшета. После этого действия появятся еще несколько панелей, в который нужно указать интересующее разрешение.

Можно сделать еще проще. Чтобы проверить, работает ли адаптивный дизайн, нужно зажать CTRL, а затем нажать на «+» или «-«. После этого действия страница должна увеличиться или уменьшиться соответственно, но элемент, к которому применена адаптивная верстка, сохранит соотношение своих пропорций (или сделает что-то другое, то, что было указано в правилах).

Инструменты, упрощающие верстку адаптивного дизайна

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

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

Чтобы начать его использовать необходимо, во-первых, получить знания непосредственно о самих CSS3 и HTML5, а затем изучить особенности фреймворка. Однако, поняв большую часть тонкостей работы с ним, впоследствии можно многократно сократить время на разработку адаптивного дизайна веб-сайтов.

Адаптивная верстка сайта

Дата публикации: 2015-12-25

От автора: в будущем в мире интернета ожидается постоянный прирост мобильного трафика. Значит, уже сейчас нужно уметь верстать так, чтобы ваш проект хорошо выглядел на всех устройствах. Решение давно найдено – адаптивная верстка сайта! О ней мы и поговорим.

2 способа угодить мобильным пользователям

Простейший способ определить, как сверстан сайт – это уменьшить размеры окна. Если появилась горизонтальная полоса прокрутки, значит это фиксированная верстка. Все размеры задавались, скорее всего, в пикселах. Удобно ли будет пользоваться таким сайтом пользователям на мобильных устройствах? Нет.

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

Рис. 1. Как видите, даже на мобильном телефоне webformyself неплохо отображается.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Адаптивность – начало пути

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

Давайте разберемся подробнее с этой записью.

@media – собственно обозначение медиа-запроса

Screen – указываем, что это относится к экрану (тут можно также указать телевизор или проектор). Only – означает, что правила будут применены только к screen.

And (и) – добавление условия, для которого будет работать медиа-запрос. Условие добавляется в круглых скобках.

Max-width: 980px – само условие. Простым языком это означает, что медиа-запрос будет работать, когда ширина экрана составляет максимум 980 пикселей (то есть от 0 до 980рх). Если ширина больше 980, правила не сработают. Чаще всего здесь в качестве условия выступают max-width, min-width, max-device-width, min-device-width. Последние два означают, что правила будут работать только на самих мобильных устройствах (то есть при изменении ширины окна на компьютере горизонтальный скролл появится). Также можно указывать max-height, но это используют очень редко.

<> – в этих фигурных скобках как раз прописываются все css-правила. Их может быть сколько угодно. Приведу сразу пару примеров, чтобы вам было понятно:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Переводим на человеческий язык: если ширина окна меньше 980 пикселей, то к элементу с классом selector будет применено правило . Еще более простым языком – фон этого элемента станет черным.

Второй пример: если ширина окна больше 600 пикселей, то все изображения будут прижаты к левому краю.

До вас уже дошла вся гениальность этого способа верстки? По сути, с помощью медиа-правил вы можем скорректировать существующие или дописать новые css-правила. Таким образом, вы сможем реализовать полностью адаптивный шаблон.

Рис. 2. Пример медиа-запроса, в котором прописываются правила для широкоэкранных мониторов.

Подробнее об адаптивности

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

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

Сложно ли освоить адаптивную верстку?

Когда я только начинал изучение веб-технологий, я даже толком незнал, что такое адаптивная верстка сайта. Сделать такое самому не представлялось возможным. Страх – наш главный враг. Оказалось-то все достаточно просто. И сейчас, когда я порой просматриваю код адаптивных шаблонов, я понимаю, насколько порой легко реализовывается адаптивность.

Как тестировать адаптивность

Проще всего делать это в браузере. Например, у меня в Google Chrome при нажатии F12 появляется отладчик. Попробуйте теперь изменить размеры окна. В правом верхнем углу вы увидите значение его ширины. Это очень удобно для того чтобы быстро проверить свою верстку. Еще я могу порекомендовать responsivetest.net. Сервис достаточно удобен и отлично проверяет адаптивность.

Рис. 3. При зажатии F12 появляется отладчик. Теперь в правом верхнем углу можно видеть текущую ширину окна при изменении.

Почему адаптивная верстка?

Вначале статьи я говорил о том, что существует и другой способ угодить мобильным пользователям – разработать отдельно версии для различных устройств. А вы как думаете, какой способ проще? Реализовать адаптивность намного легче. Это всего лишь пару сотен дополнительных строк кода, а не отдельная версия сайта, которая зачастую сильно отличается по дизайну. Как показывает практика, мобильные версии для своих сайтов делают только крупные компании, которые могут себе позволить потратить больше денег на разработку проекта.

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

Мастер Йода рекомендует:  14 полезных трюков для работы с консолью

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Адаптивная верстка сайтов: обзор подходов и CSS фреймворков

October 24, 2020 Jazz Team Технические статьи , 0

Предисловие

В настоящее время доля мобильного трафика растет стремительными темпами. С каждым днем людей, использующих девайсы с выходом в Интернет, становится все больше. Телефон всегда под рукой, в любом месте люди могут посмотреть необходимую информацию, прочитать новости и т. д. Обычный сайт можно просмотреть с помощью мобильного устройства. Однако, возникают некоторые нюансы при просмотре — для чтения отдельных блоков текста на относительно небольшом экране необходимо масштабировать страницу. Как следствие, теряется читабельность, удобство, сайт нужно постоянно пролистывать, растягивать, приближать. Многие элементы управления сайтов неудобно использовать, так как страницы не рассчитаны на управление с помощью прикосновений к экрану. Для решения этих проблем начали разрабатывать сайты, способные удобно отобразить информацию на любом устройстве.

О статье

Данная статья предназначена для разработчиков, имеющих опыт верстки сайтов, знающих HTML и CSS, понимающих назначение CSS селекторов и т. д.

В данной статье будут рассмотрены виды версток, позволяющие корректно отображать сайты на любом разрешении, техники, с помощью которых это осуществляется. Разберем понятие CSS-фреймворка и сделаем сравнительный анализ наиболее популярных.

Виды версток

Рассмотрим основные виды версток, их разницу и основные принципы, используемые при их реализации.

Фиксированная верстка

Фиксированная верстка (Fixed Layout) — подход создания страниц сайта, которые имеют заданную ширину. Ширина компонентов на странице не изменяется. На мониторах с маленьким разрешением появляется горизонтальная полоса прокрутки. Данный тип верстки не подходит для удобного отображения информации на мобильных устройствах.
Пример ниже демонстрирует строгое задание ширины для тега body:

Резиновая верстка

Резиновая верстка (Elastic layout) подразумевает возможность компонентов сайта менять свои размеры в зависимости от размера окна браузера, растягиваться от и до указанных минимальных и максимальных размеров. Это достигается благодаря использованию относительных значений, max-width / min-width (максимальная / минимальная ширина), max-height / min-height (максимальная / минимальная высота).
Примеры использования техник резиновой верстки:

Адаптивная верстка

Адаптивная верстка (Adaptive Layout) позволяет подстраиваться основному контейнеру и любому другому элементу сайта под разрешение экрана, делая возможным менять размер шрифта, расположение объектов, цвет и т. д. Происходит это динамически, например, с использованием медиа-запросов (@media), позволяющих автоматически определять разрешение монитора, тип устройства и подставлять указанные значения в автоматическом режиме. В примере ниже задается ширина div равная 960px для всех устройств, ширина которых меньше 1200px и 320px для всех устройств, ширина которых меньше 480px.

Отзывчивая верстка

Отзывчивая верстка (Responsive Layout) — это объединение резиновой и адаптивной вёрстки. При данном подходе используются как медиа-запросы, так и процентное задание ширины компонентов. Используя данный вид верстки можно с уверенностью сказать, что сайт приспособится к любому устройству.
Ниже задается ширина div равная 50% от размера родительского компонента для всех устройств, ширина которых меньше 1200px и 100% для всех устройств, ширина которых меньше 480px.

Основные техники реализации сайтов под любое разрешение

Относительные значения

Использование относительных значений позволяет отобразить информацию и компоненты на странице без потери читабельности и удобства просмотра.

Относительные значения для размеров и отступов

Относительные значения можно задавать для width, height, margin, padding и т. д. Самый известный способ задания относительного размера — указание в процентах (%).
Ниже приводится пример задания ширины равной 90% от размера родительского компонента.

При этом значение высчитывается относительно родительского компонента.
Также существуют значения относительно размера экрана:

  • vw — 1% ширины окна. При уменьшении ширины окна, уменьшается ширина, высота, шрифт элемента;
  • vh — 1% высоты окна. При уменьшении высоты окна, уменьшается ширина, высота, шрифт элемента;
  • vmin — выбирается наименьшее из vw и vh;
  • vmax — выбирается наибольшее из vw и vh.

Ниже рассмотрен пример использования vw и vh. В данном случае ширина и высота тега div будут равны 50% от ширины и высоты экрана соответственно.

Относительные значения для размера шрифта

Существуют следующие относительные значения для шрифтов:

  • em — задаёт размер относительно шрифта родителя;
  • rem — задаёт размер относительно шрифта .

Вычислим размер шрифта для тега body. В данном примере размер шрифта для body задается относительно размера html. Таким образом, размер шрифта для body будет равен 30px (20px * 1.5 = 30px).

Также относительные размеры шрифта можно задавать с помощью %, vw, vh и т. д. В следующем примере размер шрифта для body равен 80% от размера шрифта html — 16px.

Максимальные и минимальные размеры компонентов

Для задания максимальных и минимальных значений ширины и высоты компонента используются свойства max-width / min-width и max-height / min-height соответственно.

Допустим, что родительским компонентом данного div является body. Тогда, при изменении ширины экрана, ширина данного компонента будет составлять 60% от ширины body. Однако он будет увеличиваться только до величины, определенной в max-width, это 500px. Как только контейнер достигнет этой ширины — он перестанет увеличиваться.

Использование медиа-запросов

Медиа-запросы позволяют задать стили для определенного размера экрана, типа устройства на основе характеристик устройства и т. д. Все медиа-запросы начинаются с @media, а далее следует условие.

С помощью медиа-запросов можно задать стили для следующих типов устройств:

  • all — все типы (значение используется по умолчанию)
  • braille — устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми
  • embossed — принтеры, использующие для печати систему Брайля
  • handheld — смартфоны и аналогичные им аппараты
  • print — принтеры и другие печатающие устройства
  • projection — проекторы
  • screen — экран монитора
  • speech — речевые синтезаторы, а также программы для воспроизведения текста вслух
  • tty — устройства с фиксированным размером символов
  • tv — телевизоры.

Пример задания ширины для тега div, на экранах мониторов, смартфонах и т. п.

Ссылки по техникам реализации адаптивной верстки

Подробнее просмотреть и изучить рассмотренные в данной статье подходы и другие можно по ссылкам:

CSS-фреймворки

CSS-фреймворк — фреймворк, созданный для упрощения работы верстальщика, быстроты разработки и исключения максимально возможного числа ошибок вёрстки (проблемы совместимости различных версий браузеров и т. д.). Данные фреймворки подразумевают использование различных подходов для корректного отображения сайтов на устройствах любого размера.
Многие разработчики предпочитают использование CSS-фреймворков, вместо прописывания всех стилей вручную. Это обусловлено следующими причинами:

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

Как и библиотеки скриптовых языков программирования, CSS-библиотеки, обычно имеющие вид внешнего CSS-файла, добавляются в заголовок веб-страницы.

Рассмотрим самые популярные CSS-фреймворки.

Bootstrap

Самый популярный фреймворк для разработки адаптивных и мобильных web-проектов. Bootstrap — это инструмент с открытым исходным кодом для разработки сайтов с помощью HTML, CSS и JS. Bootstrap — интуитивно простой и в тоже время мощный интерфейсный фреймворк, повышающий скорость и облегчающий разработку web-приложений.

Bootstrap легко и эффективно масштабирует ваш проект с одной базой кода — от телефонов и планшетов до настольных компьютеров. Для этого используется 12-колоночная сетка:

В дополнение к CSS данный фреймворк включает в себя поддержку двух самых популярных CSS-препроцессоров: Less и Sass.

  • 12 — колоночная сетка
  • Большое количество готовых для использования компонентов
  • Поддержка Less и Sass
  • Использование Normalize.css.

Material Design for Bootstrap

Material Design for Bootstrap — это инструментарий с открытым исходным кодом для разработки приложений, основанный на Bootstrap и использующий подходы Material Design.
Фреймворк позволяет быстро создавать приложение с помощью переменных Sass, адаптивной сетки, большого количества готовых компонентов и мощных плагинов, реализованных на jQuery.

  • 12 — колоночная сетка
  • Большое количество готовых для использования компонентов в соответствии с концепцией Material Design.

Materialize

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

  • 12 — колоночная сетка
  • Большое количество готовых для использования компонентов в соответствии с концепцией Material Design
  • Поддержка Sass.

Bulma

Bulma — современный CSS-фреймворк основанный на новом способе отображения Flexbox. Flexbox — самый современный инструмент компоновки, доступный в CSS.

  • Использование Flexbox вместо колоночной сетки
  • Большое количество готовых для использования компонентов
  • Поддержка Sass
  • Не используются JS-файлы

Pure — набор небольших адаптивных CSS-модулей, которые вы можете использовать в любом веб-проекте. Pure построен на Normalize.css и предоставляет разметку и стили для собственных HTML-элементов, а также наиболее распространенные компоненты пользовательского интерфейса. Pure — адаптивный фреймворк, поэтому элементы отлично смотрятся на всех размерах экрана. Pure имеет минимальные стили, что подразумевает написание собственных кастомизированных стилей.

  • 24 — колоночная сетка
  • Модульный фреймворк
  • Не используются JS-файлы
  • Использование Normalize.css
  • Минимальное количество готовых компонентов и стилей.

Заключение

Быстрый рост популярности просмотра сайтов на мобильных устройствах обуславливает необходимость реализации удобного и читабельного отображения компонентов в независимости от типа устройств и размеров экранов. Рассмотренные в данной статье подходы помогут создавать сайты для различных устройств и размеров экранов. Описание CSS-фреймворков упростит выбор подходящего фреймворка для использования в проекте.

Адаптивная вёрстка: для чего нужна и как реализовывать?

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

Есть ли необходимость доказывать, что доля мобильного интернет-трафика стремительно растёт с каждым годом? По данным международного аналитического агентства We are social на 2020 год около 52 % пользователей Интернет по всему миру выходят в сеть, используя мобильные устройства.

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

Адаптивная вёрстка сегодня является неотъемлемой частью веб-разработки. Страницы сайта должны выглядеть одинаково привлекательно и быть удобными для пользователя как на десктопе, так и на экране смартфона. Всё реже можно встретить страницы в интернете, которые некорректно отображаются на обоих видах девайсов. Особенно если дело касается продажи товаров или услуг. Ведь если сайт будет отображаться, мягко говоря, странно, человек его просто закроет, даже не сделав попытки что-то купить.

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

А как проверить адаптивность сайта при просмотре с десктопа? У Google Chrome есть специальный плагин Window Resizer. Он позволяет открывать сайты в самых популярных разрешениях.

Адаптивная вёрстка или mobile friendly позволяет менять дизайн страницы в зависимости от ширины экрана устройства, на котором она открывается. При использовании этой технологии дизайн страницы для каждого разрешения не отрисовывается заново, а меняется размер и расположение отдельных элементов.

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

Адаптивная вёрстка представляет собой работу над размером изображений и текстов, а также в изменении расположения элементов страницы в целом. Реализация адаптивной вёрстки осуществляется при помощи CSS3 и языка разметки HTML5.

Медиа запросы CSS

С помощью медиа запросов CSS (media queries) вы можете управлять стилем любого элемента страницы в зависимости от параметров устройства, на котором открывается веб-страница. То есть медиа запрос представляет собой правило, определяющее стиль каждого элемента, ориентируясь на ширину экрана устройства.

Любой запрос начинается с @media. Затем прописываются условия о типе носителя, медиа функциях и логических операторах.

Медиа функции, используемые при адаптивной вёрстке:

  • width – предъявляет требования к ширине области просмотра;
  • height – предъявляет требования к высоте области просмотра;
  • orientation – проверяет режим отображения страницы (портретный или альбомный режим);
  • aspect-ratio – указывает отношение ширины области просмотра к высоте;
  • resolution – определяет разрешение устройства ввода;
  • grid – определяет, что устройство имеет фиксированный размер символов.

Перед некоторыми функциями могут стоять min или max, которые, соответственно, обозначают минимальное или максимальное значение. Например, функция min-height: 300px означает, что область просмотра будет не больше 300 пикселей.

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

Помимо удобства адаптивность влияет на SEO-продвижение, так как для поисковых систем сайт, оптимизированный под мобильные устройства, будет в приоритете. То есть сайт, который одинаково удобен при просмотре с десктопа и со смартфона Google будет ставить выше в поисковой выдаче.

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

Mobile First

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

В 2015 году компания Google задала тренд на стратегию Mobile First. Эта концепция подразумевает, что первостепенное значение имеет мобильная версия. То есть, прежде всего, веб-разработчики подгоняют проект под смартфоны и только потом адаптируют его для отображения на компьютерах.

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

Хорошим примером сайта, который сделан по принципу Mobile First является booking.com.

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

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

Адаптивная верстка или мобильная версия?

Простой, приятный, стильный и понятный дизайн сайта — важный фактор для повышения коэффициента конверсии сайта.

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

Адаптивная верстка сайта обладает неоспоримыми преимуществами:

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

Подробнее.

Размещение статей, содержащих информацию о фирме и, ссылку на ее сайт в электронных СМИ позволит привлечь широкую или целевую аудиторию.

Качественный контент не только повышает пользовательскую симпатию к ресурсу, но и значительно влияет на повышение конверсии сайта.

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

Каждый третий посетитель сайтов — пользователь Интернета на мобильном устройстве. Такова официальная статистика. Ее признают и крупнейшие поисковые системы «Яндекс» и Google, которые с особой тщательностью приступили к проверке ресурсов на наличие версий, адаптированных под карманные девайсы.

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

Время диктует правила, или Как выжить в век тотальной мобилизации

В конце 2015 года исследовательская компания TNS опубликовала результаты проекта Web Index , посвященного изучению поведения интернет-аудитории в России. Оказалось, что во втором полугодии 2015 года 64% пользователей каждый день выходили в сеть с мобильных устройств. Причем, визитов со смартфонов было в 2 раза больше, чем с планшетов.

Не менее убедительную статистику представил сервис MobilizeToday.ru. Оказалось, что 46% посетителей предпочитают не заходить на сайт с неудобной навигацией. Из всех остальных 23% немедленно покидают такой ресурс и только 31% остаются более или менее лояльными.

Все растущую активность среди пользователей смартфонов и планшетов подтверждают и поисковые системы. По данным «Яндекс.Метрики», треть всех запросов в строке поиска вводятся с мобильных устройств. Тот факт, что карманные девайсы покоряют мир, официально подтвердил и другой гигант — Google, введя в апреле 2015 года новый алгоритм ранжирования поисковой выдачи на мобильных устройствах. Отныне сайты, у которых нет мобильной версии или адаптивной верстки, автоматически опускаются в хвост поисковой выдачи.

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

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

  • Удобство навигации и действий. Пользователь не промахивается, нажимая на кнопки, не увеличивает поле ввода, чтобы ввести туда текст.
  • Развитие электронной коммерции. Карточка заказа полностью адаптирована под мобильное устройство: удобно просмотреть, выбрать, заказать.
  • Отсутствие необходимости оплачивать разработку приложений для разных платформ. Сайт будет открываться в браузере на любом устройстве.
  • Большая вероятность спонтанных покупок. Мобильные сайты всегда рядом с пользователем, в том числе в ситуациях, когда ему неожиданно захотелось что-то приобрести.
Мастер Йода рекомендует:  Бьерн Страуструп о первом компиляторе C++ и будущем языка

На крупнейшем в СНГ ресурсе для IT-специалистов «Хабрахабр» приведены отзывы сотрудников различных западных компаний, которые отмечают, что после верстки сайта под мобильные устройства конверсия заметно выросла. Цифры приводятся разные: от 13 до 400%. Можно говорить о том, что результат будет зависеть от качества адаптивной или мобильной версии, продуманности и отраслевой принадлежности сайта.

Для создания ресурсов, дружественных к мобильным гаджетам (mobile-friendly), используют две основные стратегии. Это адаптивная верстка и разработка мобильной версии сайта. Первая предполагает создание страниц, которые автоматически подстраиваются под размеры экрана того устройства, с которого пользователь вышел в Интернет. Сайты с адаптивной версткой, которую непрофессионалы часто путают со схожей технологий RWD (Responsive Web Design — отзывчивый веб-дизайн), одинаково удобно посещать как со стационарного компьютера, так и с планшета или смартфона. Для просмотра разных макетов страницы используется один и тот же HTML.

Мобильная версия сайта создается специально для открытия сайта на мобильных устройствах. Пользователей перенаправляют на отдельный поддомен. Например, для сайта kkk.com адрес поддомена может быть m.kkk.com. Информационно такой сайт более скудный. Сохранен лишь тот контент, который, по мнению заказчиков, полезен для владельцев мобильных гаджетов.

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

Мобильная версия сайта: прожиточный минимум

Речь идет о самостоятельном проекте, который требует разработки отдельного дизайна, оптимизации контента и проработки юзабилити. Разработчик должен передать важную для компании информацию с помощью всего одной «колонки». Функционал сокращается, меняется структура. С полноценной версией мобильную объединяет только дизайн и, возможно, наименования разделов.

Как это работает?

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

Варианты верстки мобильной версии сайта

Разработка включает в себя несколько этапов:

  • оценка поведения посетителей, которые посещают основную версию сайта (определение типа устройств, которыми они пользуются чаще всего);
  • разработка единой концепции;
  • выстраивание архитектуры;
  • разработка дизайна;
  • программирование и верстка;
  • тестирование, финальный запуск;
  • оптимизация под поисковые системы, продвижение.

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

Затраты времени

Создание качественной и функциональной мобильной версии невозможно без глубокого погружения в тематику основного сайта и специфику компании-заказчика. Четкого временного интервала, который на это отведен, не существует.

Цена вопроса

Стоимость мобильной версии сайта заметно ниже, чем разработка мобильного приложения или создания полноценного ресурса. Так, одностраничный мобильный сайт можно изготовить за 20 тысяч рублей, многостраничный — за 40. Мобильная версия с уникальным дизайном обойдется заказчику в сумму от 30-ти тысяч рублей.

Плюсы подхода

Мобильная версия обладает очевидными преимуществами:

  • Автономность работы. Десктопную и мобильную версии можно менять независимо друг от друга.
  • Быстрое время загрузки. Сокращения количества запросов к серверу, оптимизация и сжатие кода.
  • Удобная навигация для работы на смартфоне или планшете.
  • Минимум отвлекающей информации, пользователю доступен только наиболее важный функционал.

Минусы подхода

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

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

Для кого подойдет решение?

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

А что с конверсией и CTR?

Зависимость конверсии от адаптивности ресурса к мобильным экранам изучали в своих исследованиях Google и Calltouch . Они совместно отобрали 1,5 тысячи сайтов из 20-ти отраслей и провели тестирование с помощью сервиса Google Mobile-Friendliness. Оценивали, насколько ресурс удобен для пользователей мобильных устройств. Оказалось, что конверсия с адаптированных ресурсов (мобильных сайтов) на 50% выше, чем с неадаптированных.

Каждый сайт также проверили через Google PageSpeed Insights — сервис для определения скорости загрузки. Дополнительные исследования на KissMetrics выявили, что 46% пользователей ждут, пока загрузится сайт, не более 10-ти секунд. Еще 16% готовы потерпеть 15 секунд, после чего покидают так и не открывшуюся страницу. Высокая скорость загрузки, которая входит в число преимуществ мобильной версии сайта, положительно сказывается на конверсии и CTR.

Примеры успешной реализации

В настоящее время мобильные версии функционируют у таких крупных проектов, как «Леруа Мерлен», «Эльдорадо», Ozon, «Финам», Toyota Motor и многих других. Примером практического эффекта от использования мобильной версии может служить опыт американской компании TicketsNow, которая занимается продажей билетов на различные мероприятия. В течение первого месяца после запуска мобильной версии конверсия выросла на 50%, продажи — на 100%, средний чек — на 8%.

Высокой популярностью пользуются мобильные версии новостных порталов и информационных агентств: BBC, Lenta.ru и других, где ключевым фактором выступает время загрузки конкретной статьи. Оно составляет от 1,5 до 3,5 секунд, что меньше, чем в стандартной версии сайтов.

Итак, подход «обычный сайт плюс мобильная версия» представляет собой путь наименьшего сопротивления. Особенно с учетом того, что современные CMS позволяют сократить расходы на создание второго ресурса. Технология оправдана для крупных проектов. Но наиболее прогрессивной и универсальной эксперты все же считают адаптивную верстку.

Адаптивная верстка, или Dolce vita

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

Ликбез для «чайников», или В чем особенность технологии

Настройка макета при адаптивной верстке сайта обычно происходит на CSS с помощью медиазапросов с учетом размера области просмотра. Веб-страницы при отображении на ПК, планшете, телевизоре, смартфоне имеют один и тот же HTML.

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

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

Адаптивная верстка подразумевает прохождение нескольких этапов.

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

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

Затраты времени

Сделать адаптивную верстку сложнее, чем стандартный десктопный или тем более мобильный сайт. При проектировании время возрастает примерно на треть. В 1,5 раза увеличивается время верстки каждого макета и тестирования, в 2 раза — отладки.

Смета

Временные затраты напрямую связаны с ростом цен на услуги разработчиков. Стоимость также определяет дизайн, интеграция с веб-версией, отдельная верстка для планшетов и смартфонов и т.д. Цена на адаптивную верстку на 30–100% выше стоимости создания статичной верстки. Так, разработка простого ресурса и дизайна обойдется в 30 тысяч рублей и выше. Сложный адаптивный ресурс — в 100 тысяч рублей.

Неоспоримые преимущества

Адаптивная верстка значительно усиливает положение сайта в результатах поиска. Кроме того, она обладает и другими преимуществами:

  • единый URL у обычной версии и страницы с адаптивной версткой, перенаправление пользователей не требуется;
  • оптимально отображение страниц с сохранением всех элементов и полного функционала;
  • сохранность содержимого контента, отсутствие дублирования на второй версии, возможность SEO-оптимизации;
  • улучшение поведенческих метрик сайта.

Ложка дегтя

Недостатки адаптивного дизайна:

  • высокая трудоемкость процесса;
  • высокая цена (в сравнении с ценой разработки мобильной версии).

Для кого подойдет решение?

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

А что с конверсией и CTR?

Показатели конверсии при адаптации сайта к мобильным устройствам растут, это мы отмечали ранее. Для еще большего увеличения «полезности» ресурса для заказчиков можно заменить некоторые элементы сайта. Например, длинные статьи — видеофайлами. Слишком большое количество контента путает потребителя, снижает интерес к сайту и в конечном итоге оборачивается упадком.

Примеры сайтов с адаптивной версткой

Адаптивная верстка идет «по умолчанию» к подавляющему большинству создаваемых ныне сайтов. Есть примеры проектов, которым после перехода на адаптированную версию удалось добиться ощутимого роста прибыли. Так, в компании O’Neill Clothing отмечают, что сайт стал более живым и дружественным, что позволило на 65% увеличить конверсию, на 112% — количество транзакций и на 101% — выручку. Skinny Ties использовала адаптивные технологии для создания прогрессивной платформы, сайт стал компактным и консистентным. За три месяца выручка возросла на 42%, показатель отказов снизился на 23%, на 44% выросла средняя длительность пребывания пользователей на сайте.

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

Как выбрать надежного подрядчика?

Вне зависимости от выбранной технологии, до того, как отдать заказ в работу, важно убедиться в том, что исполнитель способен справиться с задачей, которая будет перед ним поставлена. О том, как не ошибиться с выбором подрядчика, нам рассказал менеджер интернет-проектов компании BeneQuire Юрий Окунев:

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

Могу сказать, что специалисты компании BeneQuire, прежде чем взять проект, проводят тщательный анализ, разрабатывают эффективный план достижения цели и, ориентируясь на него, предлагают клиентам возможные решения. Для лендингов, промо-страниц и новых сайтов у нас есть базовый адаптив, который подразумевает проработку для мониторов, планшетов, смартфонов. В случае редизайна сайта мы используем адаптив «Стандарт», а для тех, кто ведет полноценный онлайн-бизнес, — прорабатываем все варианты существующих устройств и экранов. Такой подход позволяет клиентам не переплачивать за ненужный функционал и использовать возможности онлайн-ресурса полностью».

P.S. Компания BeneQuire предоставляет полный комплекс услуг в сфере веб-разработок: от создания мобильных приложений до крупных сервисов и автоматизированных систем. В списке проектов — сайты интернет-магазинов, онлайн-сервисов, корпоративные ресурсы, лендинги, сайты-визитки и многое другое. Отдельное направление — создание адаптивных сайтов под ключ.

В рос­сий­ском сег­мен­те мо­биль­ный тра­фик со­став­ля­ет в сред­нем 25–40%, в за­ви­си­мос­ти от от­рас­ле­вой при­над­леж­нос­ти сай­тов. Оче­вид­но, что те­рять це­ле­вую ауди­то­рию из-за от­сут­ст­вия адап­ти­ро­ван­ной верст­ки по­прос­ту не­ра­зум­но, при этом, ре­шив­шись на реб­рен­динг или со­зда­ние но­во­го про­ек­та, вла­дель­цы адап­тив­но­го ди­зай­на по­лу­ча­ют: • гра­мот­ное ото­бра­же­ние стра­ниц на лю­бых устройст­вах; • со­от­вет­ст­вие тре­бо­ва­ни­ям Google; • еди­ный URL для всех ва­ри­ан­тов; • со­хра­не­ние при­вле­ка­тель­нос­ти ди­зай­на; • эко­но­мию на SEO-про­дви­же­нии. Как ре­зуль­тат все­го это­го — рост тра­фи­ка на 25–70% и по­лу­че­ние но­вых кли­ен­тов.

Что лучше: адаптивная верстка или мобильный сайт?

А также вопросы перехода на адаптивный дизайн при использовании мобильной версии

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

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

При разработке сайта, верстальщики верстают сайт не под определенный размер, например, 800х480px, а создают страницы сайта из элементов, автоматически подстраивающихся под ширину экрана. Блоки просто изменяют свое расположение, а некоторые и вовсе не показываются на смартфонах.

Преимущества адаптивного дизайна:

  • Удобство разработки.
  • Стоимость ниже, чем создание мобильной версии на поддомене.
  • Грамотное отображение страниц сайта и всех его элементов на любых устройствах за счет адаптации стилей к мобильным браузерам.
  • Один URL у обычной версии сайта и с адаптивной версткой, благодаря чему не понадобится перенаправление пользователей, а также, посетителям не нужно будет запоминать отдельный адрес поддомена.
  • Соответствует требованиям Google к удобству просмотра на мобильных устройствах.
  • Красота изначального сайта: все-таки красивый дизайн можно сохранить и это немаловажно.
  • Медленная загрузка из-за большого веса страниц сайта. Адаптивный дизайн не дает возможности заменить тяжелые десктопные элементы облегченными, поэтому сайт дольше грузится с мобильных устройств. Это критично, поэтому скорость загрузки нужно оптимизировать.
  • В случае проблем на адаптивной верстке, посетитель сайта не имеет возможности перейти на обычную версию сайта.
  • Адаптивный дизайн предполагает переработку всех страниц сайта, что может оказаться неудобным, если ваш бизнес полностью зависит от сайта и от его работы.
  • Разные задачи – типовые задачи «мобильных» пользователей крупных сайтов обычно отличаются от задач пользователей ПК. Поэтому для программистов это добавит дополнительные сложности, нежели внедрение разных версий сайта на отдельных доменах.

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

Мобильная версия сайта

Мобильная версия предполагает разработку версии сайта на поддомене, например, «m.site.ru», на который перенаправляется посетитель в случае использования мобильного устройства. Такая технология позволяет создать мини версию сайта с наиболее важной информацией, не перегруженную контентом и различными элементами дизайна, а главное большими элементами навигации.

  • Мобильная версия сайта удобна для пользователя, потому что сильно упрощена по сравнению с обычной версией. Мобильная версия дает наиболее приоритетную информацию, а также позволяет совершать заказ/покупку с минимумом действий.
  • Легко вносить существенные изменения, т.к. это отдельная версия и не требуется вносить изменения в основной сайт.
  • Быстрая загрузка страниц, так как все необходимые элементы имеют меньший вес.
  • Есть возможность перейти на полную версию сайта, в случае с проблемами на мобильной.
  • Мобильная версия соответствует требованиям Google к удобству просмотра на мобильных устройствах.
  • Стоимость разработки – разработка мобильной версии сравнима с созданием полноценного сайта.
  • Стоимость обслуживания – необходимо поддерживать работу версии для разных устройств.
  • От части информации: контента, файлов и возможностей сайта придется отказаться.

В целом, создание мобильных версий сайтов оправдывает себя достаточно хорошо, в частности, для крупных проектов. Как пример – Amazon, который использует у себя специальную, мобильную версию сайта.

Если у вас мобильная версия сайта на поддомене

  • Легко вносить существенные изменения, т.к. это отдельная версия и не требуется вносить изменения в основной сайт.
  • Быстрая загрузка страниц.
  • Высокая стоимость обслуживания и разработки (бюджет основного сайта х 2).
  • В случае создания нового сайта с нуля предпочтительнее вариант с адаптивной версткой (это дешевле и в разы быстрее в разработке).
  • В случае, если сайт УЖЕ работает на поддомене, то тут необходимо принимать решение исходя из конкретной ситуации. В общем случае, в виду уже ранее разработанной версии сайта на поддомене, предпочтительно оставаться на текущей мобильной версии, так как на данный момент она удовлетворяет текущим тенденциям создания сайтов.

Как перейти на адаптивный дизайн, если вы используете мобильную версию сайта?

  • Реализуйте на своем сайте адаптивный дизайн.
  • Настройте переадресацию 301 так, чтобы прежние URL мобильной версии указывали на обновленные страницы с адаптивным дизайном. Эту процедуру необходимо выполнить для каждого URL по отдельности.
  • Убедитесь, что для URL сайта не заданы какие-либо настройки, связанные с адаптацией для мобильных устройств, например, HTTP-заголовок Vary или переадресация, которая зависит от определенных условий. Рекомендуем задать атрибут rel=»canonical» на URL сайта с адаптивным дизайном, которые указывают на самих себя.

Адаптивный дизайн — зачем нужен и как работает

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

Глава 1. Что такое «Адаптивный дизайн»?

Адаптивный web-дизайн обеспечивает автоматическую адаптацию страницы к размерам экрана.

Этот тренд не является новизной у веб-разработчиков, но стал крайней необходимостью, т.к. технологии продолжают развиваться и мобильные устройства становятся все популярнее и популярнее. Неадаптивные к мобильным устройствам web-сайты не достигают целевой аудитории и теряют в продажах.

Обратите внимание на статистику: более 60% интернет-пользователей просматривают сайты на мобильных устройствах! При этом 46% пользователей мобильных устройств испытывают трудности с просмотром неадаптивных сайтов, что становится основной причиной, по которой их покидают. Кроме того, 50 % запросов в Google делаются напрямую с мобильных устройств, так что теперь Google оптимизировал поисковой алгоритм в пользу web-страниц, адаптированных к мобильным устройствам. Это означает, что когда вы начнёте поиск в интернете с мобильного устройства, Google будет отдавать предпочтение страницам с адаптивным дизайном.

Добавить комментарий