Под какие размеры адаптировать сайт
Перейти к содержимому

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

  • автор:

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

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

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

extrusion_adaptive

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

adaptiv-niris

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

main

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

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

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

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

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

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

Продвигаем сайты с гарантией
Растим продажи, позиции и посещаемость

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

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

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

main

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Бургер-меню

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

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

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

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

menu_1

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

menu_1

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

menu_1

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

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

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

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

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

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

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

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

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

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

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

table

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

table

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

table

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

table

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

table

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

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

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

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

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

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

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

Адаптивная верстка: знакомство с медиазапросами

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

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

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

Для создания адаптивной верстки необходимо знание медиа-запросов.

Медиа-запросы были представлены в спецификации CSS2 и поддерживаются всеми современными браузерами: Internet Explorer 10-11, Edge, Chrome, Opera и Opera Mini, Safari, Mozilla Firefox, Android.

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

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

Этот код запретит масштабирование контента. А ширина страницы станет равной размеру устройства, на котором происходит просмотр. Теперь можно писать медиа-запросы.

Требования:

meta name="viewport" content="width=device-width, initial-scale=1.0"
  • Отсутствие полосы горизонтальной прокрутки в независимости от ширины экрана
  • Отличное отображение сайта не только на компьютерном экране, но и на разнообразных мобильных смартфонах, планшетах и ноутбуках
  • Четкое отображение контента в независимости от разрешения экрана

Для создания адаптивной верстки необходимо знание медиа-запросов.

Применение:

  • Тестирование ширины и высоты окна просмотра
  • Тестирование ширины и высоты устройства
  • Тестирование ориентации устройства. Проверяется, в каком режиме смартфон или планшет: портретном или альбомном?
  • Тестируется разрешение экрана

Синтаксис

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

Все медиа-запросы начинаются с правила @media, за которым в круглых скобках следует условие. Лучше всего посмотреть это на примере. Давайте зададим для всех устройств, у которых ширина экрана меньше либо равна 400px, маленький размер шрифта:

@media (max-width: 400px) < body < font-size: 12px; >>

Типы устройств

Есть возможность задавать конкретные медиа-запросы в зависимости от устройства. Рассмотрим их:

  • Все устройства (all)
  • Принтеры (print)
  • Экран (screen). Имеется ввиду экран компьютера, ноутбука, планшета, смартфона
  • Устройства, использующие программы чтения с экрана (speech)

Для задания типа устройства достаточно указать в медиа-запросе соответствующее ключевое слово, вот так:

@media screen and (min-width: 375px) < p < color: green; >>

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

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

  • Речевые и звуковые синтезаторы (aural)
  • Устройства для чтения слепыми людьми (braille)
  • Принтеры для слепых людей (embossed)
  • Смартфоны (handheld)
  • Проекторы (projection)
  • Телетайпы, терминалы и другие устройства с фиксированным размером (tty)
  • Телевизоры (tv)

Логические операторы

Подобные операторы позволяют совершать выбор, в зависимости от конкретного условия:

    Объединение нескольких условий: логическое И
    Запрос применится ко всем возможным устройствам, чья ширина экрана не превышает 600 пикселей.

@media all and (max-width: 600px)
@media all and (not print)
@media all and (orientation: portrait), all and (max-width: 600px)

Ориентация устройства

  • Альбомный режим (landscape). Ширина устройства превышает его высоту.
@media screen and (orientation: landscape) < p < color: red; >>
@media screen and (orientation: portrait) < p < color: orange; >>

Размеры устройства

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

В чем различия между экраном устройства и областью просмотра? Экран устройства – это фиксированный размер (физический размер экрана компьютера, телефона), а область просмотра меняются в зависимости от изменения размеров окна браузера.

Есть возможность задать ширину области просмотра:

(min-width)
(width)
(max-width)

То же самое касается высоты: минимальная

(min-height)

конкретная

(height)
(max-height)

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

(max-device-width)

и минимальную ширину. ⁠

(min-device-width)

Минимальная и максимальная высота экрана устройства – соответственно

(min-device-height)
(max-device-height)

Следует отметить, что на сегодняшний день ключевые слова

device-height
device-width

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

Разрешение

Apple выпускает устройства с высокой плотностью пикселей, позволяющие показывать изображения более качественными, яркими и четкими. Такие дисплеи называются «Ретина».

Улучшение качества изображения достигается за счет увеличения количества пикселей, там, где обычный дисплей покажет 1 пиксель, Ретина уместит 2.

Соответственно, существуют запросы, позволяющие определить плотность пикселей на экране:

@media (min -device-pixel-ratio: 2)

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

@media screen and (min-resolution: 2dppx)

Для максимальной плотности существует аналогичный запрос:

@media screen and (max-resolution: 1dppx)

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

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

Под какие разрешения рисовать адаптивный дизайн?

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

1. Мобильные телефоны — 320px. Ориентируемся на viewport айфона, т.к. он самый маленький. У современных андроидов вьюпорт больше, поэтому их игнорируем (растянется на верстке).

2. Планшеты — 768px. Опять-таки ориентируемся на айпад в портретной ориентации , т.к. у андроид планшетов вьюпорты обычно имеют размер от 800×1200 или совпадают с айпадом. Планшеты с вьюпортом 600×1024px устарели. К тому же ничего страшного, если в вертикальной ориентации сайт на таком планшете будет выглядеть как на мобильнике, а в горизонтальной ориентации — как на десктопе.

3. Десктоп и планшеты в ландшафтной ориентации — 1000px. Почему 1000, а не 1024: первое, в настольных браузерах полоса прокрутки съедает (обычно) 18px ширины; второе, от 1000px верстальщику удобнее расчитывать размеры в процентах, а до 1024 все равно растянется при верстке.

В принципе, этого достаточно, чтобы верстальщик справился.

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

В каком порядке рисовать? Смотря как поставлено тех.задание. Чаще всего в задании описан полный функционал для настольной версии. Тогда проще нарисовать дизайн под 1000px и перекомпоновать под 768 и 320, выбросив или упростив по пути менее значимые элементы сайта. Т.е. двигаться от сложного к простому.

Верстать при этом удобнее от меньшего экрана к большему (от простого к сложному). При mobile first верстальщику приходится дописывать новые стили для бóльших экранов поверх базовой версии в 320px вместо того, чтобы обнулять написанные для настольных браузеров стили. В результате для мобильника css весит меньше и парсится быстрее.

Ответ написан более трёх лет назад
Комментировать
Нравится 32 Комментировать

IonDen

JavaScript developer. IonDen.com

Если немного подумать логически, то получится что расклад примерно такой:
1. Мобилы. На примере Iphone 4 (другие мобилы, кроме лопатофонов имеют схожие размеры). Если держать телефон в руке вертикально, то ширина экрана 320 пикселей, если горизонтально то 480.
2. Далее планшеты. На примере iPad (другие планшеты соответственно похожи по разрешениям). Если держишь вертикально, то 768, если горизонтально то 1024.
3. Далее десктоп. Тут самое популярное на сегодня 1200+, рисовать варианты еще шире, обычно не имеет смысла, сайт просто центрируется на более высоких разрешениях. К тому же, большинство пользователей огромных экранов обычно не открывают браузеры на весь экран.

В общем у вас должно получится примерно 5 разрешений в итоге (+ каждое из этих разрешений должно обладать некоторой гибкостью (+/- 30 пикселей), чтобы можно было учесть все разнообразие адройдовских экранов.

Что такое адаптивная вёрстка страниц сайта: полный гайд, теория и практика

Адаптивная верстка сайта — это формирование структуры документа на базе HTML-разметки, предусматривающей автоматическое изменение страницы в зависимости от размера экрана пользователя. Простыми словами это макет страницы, автоматически подстраивающийся под размер экрана пользователя.

Присоединяйтесь к нашему Telegram-каналу!

  • Теперь Вы можете читать последние новости из мира интернет-маркетинга в мессенджере Telegram на своём мобильном телефоне.
  • Для этого вам необходимо подписаться на наш канал.

Помните советскую игру «Тетрис»? Там нужно было складывать падающие блоки конструктора, чтобы они подходили друг к другу по форме фигур.

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

Взгляните на макет страницы:

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

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

  1. Удобство для пользователей . Такие сайты удобны для просмотра на любых устройствах: от смартфонов и планшетов до телевизоров. Если страница остается читаемой только на десктопе, а мобильному пользователю приходится прикладывать определенные усилия, чтобы тапнуть по элементу или даже просто ознакомиться с контентом, то количество отказов на сайте резко увеличится.
  2. Больше трафика. Без адаптивности сайт теряет огромный сегмент аудитории, который связан с мобильными устройствами. Соответственно, и трафик, который они могли бы привести.
  3. Более высокий коэффициент конверсий . Есть исследования, которые показывают — адаптивный веб-дизайн может привести к увеличению коэффициента конверсии посетителей в покупателей на 10,9 %.

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

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

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

Читайте также:
Мобильные версии сайтов 2024: интересные тенденции и неожиданные выводы

Стоит отметить несколько достоинств и недостатков обоих подходов.

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

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

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

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

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

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

  • Не нужно генерировать дополнительные URL-адреса.
  • Расшаривание содержимого страниц более удобное, так как контент находится в рамках одного домена.
  • Легче оптимизировать сайт для SEO.
  • Простая реализация.
  • Не нужно задействовать перенаправления.
  • Проще сканировать краулерам.
  • Все ранее наработанные показатели остаются с вами и можно не бояться, что страницы неожиданно вылетят из индекса или вообще в него не попадут.

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

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

Читайте также:
Как составить грамотное ТЗ на создание сайта: примеры и частые ошибки

Теория. Устройство адаптивной верстки

Давайте смотреть, как это работает.

Медиазапросы стилей

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

@media screen and ( max — width : 600 px ) <

Логический оператор and, который позволяет связывать вместе разные типы условий >

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

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

«Жидкие» сетки

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

Поведение «жидкого» макета в разных разрешениях экрана

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

Гибкие изображения

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

Могут быть и другие варианты реализации гибких изображений:

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *