Адаптивная верстка разрешения экранов: какая бывает и как сделать?

Содержание

какая бывает и как сделать?

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

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

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

Плюсы и минусы

К преимуществам такого подхода следует отнести:

Экономия ресурсов и средств на содержание сайта. Вместо нескольких версий достаточно обеспечить бесперебойную работу одной универсальной.

Каждая из версий страницы имеет один и тот же URL, что упрощает SEO продвижение.

Параллельно с этим упрощается и реклама в социальных сетях.

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

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

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

Это решение имеет и некоторые недостатки:

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

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

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

Адаптивный дизайн, отзывчивый или мобильная версия — в чем разница?

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

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

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

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

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

При создании «универсального» дизайна разработчики придерживаются следующих принципов:

Соответствие. Более компактная версия сайта оформлением не должна отличаться от объемной. Допускается скрыть лишние элементы с учетом потребностей пользователей различных устройств. Полная версия под разрешение монитора Full HD должна отображать полный функционал.

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

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

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

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

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

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

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

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

Смартфоны — 320 пикселей, 480 и выше;

Планшеты — 768 пикселей и выше;

Нетбуки — 1024 пикселей и выше;

Мониторы — 1280 пикселей, 1600, 1920 и выше.

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

Сегодня «хорошим тоном» в адаптивной верстке считается выполнение правила Mobile First: дизайн разрабатывается с приоритетом на разрешения экранов мобильных гаджетов и уже потом подгоняется под дисплеи с большим разрешением.

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

Вебмастер, который немного разбирается в HTML и CSS и имеющий некоторый опыт, при должном усердии сможет адаптировать даже давно работающий объемный сайт, но повозиться придется не мало. Давайте рассмотрим, как сделать адаптивный дизайн с минимальными затратами времени.

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

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

Bootstrap. Самый популярный фреймворк, используемый в веб-разработке. Легко и быстро адаптирует сайт под любое устройство, используя 12-колоночную сетку. Доступно огромное количество готовых компонентов. Поддерживает 2 самых популярных CSS-препроцессора: Sass и Less, а также Normalize.css, обеспечивающий кроссбраузерность контента.

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

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

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

Адаптируем текущий дизайн

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

Почти всегда строка с тегом Viewport выглядит следующим образом:

Параметр width дает браузеру команду подстроить страницу под экран устройства, с которого пользователь зашел на сайт. Масштабирование определяется автоматически. Initial-scale означает коэффициент масштабирования. Если ему присвоено значение 1, разрешение экрана устройства и CSS приравниваются друг к другу независимо от размера. Тег Viewport нужно прописать в head каждой страницы сайта.

Рассмотрим адаптацию работающего сайта на примере самого популярного фреймворка Bootstrap. Чтобы он работал на странице, в head нужно прописать и код его активации. В случае с последней, 5-й версией, это выглядит так:

Пример кода Bootstrap

Код для Bootstrap 4:

Пример кода Bootstrap 4

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

Классы сетки Bootstrap

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

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

Пример колонок равной ширины

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

Фиксированная ширина колонок

Для адаптации содержимого под размер экрана используется следующий метод:

Адаптация содержимого под размер экрана

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

Фиксированные размеры колонок и адаптивный размер для остального содержимого

CSS3 Media Queries

Как дополнительный инструмент можно использовать медиа-запросы — правила CSS, управляющие стилями элементов исходя из технических характеристик устройства. Эти конструкции помогают определить, какие элементы отображать на каком устройстве, а какие скрыть. Медиа-запросы, которые появились в версии CSS3, сегодня определяют все современные браузеры. В этом случае тоже нужно прописать тег Viewport в head страницы.

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

Синтаксис для медиа-запросов

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

@media all and (not handheld) { … }

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

Основные разрешения (размеры) экранов для адаптивной верстки

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

Размер экрана, разрешение и область просмотра: что это значит?

Зачем используется адаптивная вёрстка? Когда вы покупаете устройство, в спецификации вы можете наблюдать такие параметры как размер экрана и его разрешение. Размер экрана — это показатель длины его диагонали в дюймах. Не следует путать его с разрешением дисплея. Этот параметр показывает количество пикселей на экране. Часто он отображается, как количество пикселей по экранной ширине и высоте (например, 1024 × 768).

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

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

Нужна помощь в определении того, удобен ли ваш сайт для просмотра на разных мобильных устройствах? Воспользуйтесь нашим сервисом →.

Отзывчивый дизайн

Невозможно разработать стиль и дизайн сайта для каждого устройства. Поэтому для адаптивной вёрстки разработчики часто:

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

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

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

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

/* Стили для десктопа - начало */

@media screen and (max-width: 991px) {

/* стили для больших планшетов — начало */

}

@media screen and (max-width: 767px) {

/* стили для средних планшетов — начало */

}

@media screen and (max-width: 479px) {

/* стили для телефонов — начало */

}

Самые популярные разрешения экрана

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

Устройства Apple

	Разрешение дисплея	Viewport
iPhone
iPhone XR	828 x 1792	414 x 896
iPhone XS	1125 x 2436	375 x 812
iPhone XS Max	1242 x 2688	414 x 896
iPhone X	1125 x 2436	375 x 812
iPhone 8 Plus	1080 x 1920	414 x 736
iPhone 8	750 x 1334	375 x 667
iPhone 7 Plus	1080 x 1920	414 x 736
iPhone 7	750 x 1334	375 x 667
iPhone 6 Plus/6S Plus	1080 x 1920	414 x 736
iPhone 6/6S	750 x 1334	375 x 667
iPhone 5	640 x 1136	320 x 568
iPod
iPod Touch	640 x 1136	320 x 568
iPad
iPad Pro	2048 x 2732	1024 x 1366
iPad 3 и 4-го поколения	1536 x 2048	768 x 1024
iPad Air 1 и 2	1536 x 2048	768 x 1024
iPad Mini 2 и 3	1536 x 2048	768 x 1024
iPad Mini	768 x 1024	768 x 1024

Устройства Android

	Разрешение дисплея	Viewport
Телефон
Nexus 6P	1440 x 2560	412 x 732
Nexus 5X	1080 x 1920	412 x 732
Google Pixel 3 XL	1440 x 2960	412 x 847
Google Pixel 3	1080 x 2160	412 x 824
Google Pixel 2 XL	1440 x 2560	412 x 732
Google Pixel XL	1440 x 2560	412 x 732
Google Pixel	1080 x 1920	412 x 732
Samsung Galaxy Note 9	1440 x 2960	360 x 740
Samsung Galaxy Note 5	1440 x 2560	480 x 853
LG G5	1440 x 2560	480 x 853
One Plus 3	1080 x 1920	480 x 853
Samsung Galaxy S9+	1440 x 2960	360 x 740
Samsung Galaxy S9	1440 x 2960	360 x 740
Samsung Galaxy S8+	1440 x 2960	360 x 740
Samsung Galaxy S8	1440 x 2960	360 x 740
Samsung Galaxy S7 Edge	1440 x 2560	360 x 640
Samsung Galaxy S7	1440 x 2560	360 x 640
Планшеты
Nexus 9	1536 x 2048	768 x 1024
Nexus 7 (2013)	1200 x 1920	600 x 960
Samsung Galaxy Tab 10	800 x 1280	800 x 1280
Chromebook Pixel	2560 x 1700	1280 x 850

Узнать стоимость адаптации вашего сайта можете тут → или в форме ниже

Оставить заявку

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

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

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

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

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

Смартфоны (Портрет и ландшафтный)

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}

Смартфоны (ландшафтный)

@media only screen and (min-width : 321px) {}

Смартфоны (portrait)

@media only screen and (max-width : 320px) {}

iPads (Портрет и Ландшафтный)

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {}

iPads (Ландшафтный)

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}

iPads (Портрет)

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}

Настольные компьютеры и ноутбуки
```
@media only screen and (min-width : 1224px) {}
```

Большие экраны

@media only screen and (min-width : 1824px) {}

iPhone 4

@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {}

Для тестирования разрабатываемого сайта можно воспользоваться web-сервисами:

http://mattkersley.com
http://www.responsinator.com

Пояснение

@media only screen — только для экранов монитора;
min-width — условие «истина», когда ширина окна браузера больше установленного значения;
max-width — условие «истина», когда ширина окна браузера наоборот меньше установленного значения;
min-device-width — условие «истина», когда размер экрана устройства больше установленного значения;
max-device-width — условие «истина», когда размер экрана устройства меньше установленного значения;

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

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

Про мобильный трафик и новые требования к дизайну сайта

Объем мобильного трафика в мире колоссален и с каждым днем продолжает увеличиваться.

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

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

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

Галактическая подборка: 190 лучших книг по интернет-маркетингу

Как выглядит адаптивный сайт

Посмотрим на реальном примере, как выглядит адаптивный сайт на трех разных устройствах. Для примера возьмем сайт известного дизайнера Саймона Коллисона – colly.com.

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

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

Зачем нужен адаптивный дизайн и адаптивная верстка

Устройства, с которых можно выходить в интернет, не ограничиваются десктопами и смартфонами. Необходимо учитывать, как сайт отображается и на других видах устройств, например, планшетах и умных телевизорах. Поправка на эти устройства появилась и во многих веб-аналитиках, в частности в Google Analytics и «Яндекс.Метрике»:

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

Вот интересная статистика по числу планшетных пользователей с 2014 года по 2021. Доля планшетных устройств не сокращается, а увеличивается от года к году, пусть и довольно медленно:

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

Сложности адаптивной разработки

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

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

Удобство / юзабилити для мобильных устройств / адаптивность – это отдельные факторы ранжирования, которые учитываются Google и «Яндекс». К ним можно отнести сразу несколько показателей:

скорость загрузки страниц на мобильных устройствах;

удобство навигации;

отсутствие слишком мелких элементов, которые нечитаемы с экранов мобильных устройств;

размер шрифт а;

отсутствие элемент ов за пределами экрана.

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

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

Проверить адаптивность сайта можно прямо в браузере – без всяких дополнительных сервисов. Если вы используете Mozilla Firefox, достаточно воспользоваться сочетанием горячих клавиш Ctrl + Shift + M:

Проверить адаптивность сайта в Google Chrome можно, воспользовавшись сочетанием горячих клавиш Ctrl + Shift + I или просто нажав клавишу F12, затем – кликнуть по иконке эмуляции устройств (Toggle Device Toolbar):

Кроме этого, проверить адаптивность сайта можно при помощи инструмента «Проверка оптимизации для мобильных» от Google:

Какой экран учитывать изначально

Вопрос интересный. Есть два основных подхода.

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

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

Раньше наиболее распространенным способом разработки был второй вариант. Сегодня более актуален первый способ – эта концепция получила название Mobile First. Этот способ разработки является более логичным и простым изначально.

Основные правила адаптивного дизайна

Адаптивный дизайн подразумевает соблюдение нескольких основных «законов». Поговорим о самых главных из них подробнее.

Размеры макетов. Брейкпоинты

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

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

«Каноничные» значения для адаптивного дизайна следующие:

смартфоны: от 320 пикселей / 480 / выше;

экран монитора компьютера: от 1280 пикселей и выше;

планшеты: от 768 пикселей и выше;

нетбуки: 1024 пикселей.

Относительность координат, размеров и масштабов

Большое разнообразие экранов и типов устройств не позволяет использовать какие-либо точные единицы измерения. Когда мы говорим об адаптивном дизайне, то нужно понимать, что в качестве таких единиц используются относительные значение. Потому что на каждом экране существует своя собственная плотность пикселей, которая, естественно, соотносится и с его размером. Так, разрешение 360 x 240 пикселей будет абсолютно по-разному выглядеть на экране планшета и телевизора. Именно поэтому адаптивный дизайн использует относительные значения. Например: координаты/размеры/масштабы блока определяются по отношению к верхней границе или по отношению к любому другому элементу.

Вложенность

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

Поточность

Имеется в виду отсутствие сдвигов блоков. При приеме сайта обратите внимание: если блоки смещаются, то просмотр страницы становится настоящим испытанием.

Графические форматы

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

Шрифты

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

TTFB, или время ответа сервера: как увеличить скорость загрузки сайта

Мобильная версия: что учесть

Адаптивная верстка и мобильная версия – в чем разница

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

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

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

Технические требования: чеклист мобильной версии

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

создать условия для удобного просмотра страниц;

сделать комфортной навигацию и взаимодействие с элементами сайта;

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

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

Какое перенаправление теперь используется для создания редиректа на мобильную версию сайта? (должно использоваться 302-ое перенаправление)

Открыта ли индексация каскадных таблиц (CSS) в системном файле robots?

Активирована ли индексация JS?

Задействован ли viewport? Этот метатег используется для указания области экрана, которая видна без скролла страницы. Прописывается этот тег вместе с требуемыми параметрами (в Head-разделе).

При разработке мобильной версии ни в каком виде не должны использоваться Applet, Microsoft Silverlight, Flash.

Юзабилити: чек-лист мобильной версии

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

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

Мы видим, что здесь не нужно заполнять ФИО, город, адрес, e-mail – достаточно авторизоваться по номеру телефона и указать код из SMS. Если ваша форма заказа для нового покупателя содержит очень много полей, лучше сократить их до минимума, либо разбить заполнение формы на несколько экранов.

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

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

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

М еню должно быть доступно с любой страницы сайта .

К нопка домой /главная должна быть доступна с любой страницы сайта. Можно сделать ее в виде логотипа сайта, в шапке. В роли кнопки «Домой» может также выступать название сайта:

Шрифт не должен быть очень мелким. Минимальный размер символов – 12px: для чтения такого текста все еще придется напрячь глаза и сделать определенное зрительное усилие. Чтобы текст был читаемым и комфортным для глаз, лучше использовать размер от 14 до 16px.

Р асстояние между интерактивными элементами должно составлять минимум 28px (иначе по ним будет сложно нажимать на небольших экранах, кроме этого элементы могут накладываться друг на друга).

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

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

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

Достоинства мобильной версии – быстро грузится, удобная и красивая.

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

Плюсы адаптива – он подешевле (как правило), контент остается более-менее читаемым на экранах любых размеров.

Минусы адаптива – если страниц на сайте много и сайт тяжелый (неоптимизированный), то адаптив будет тормозить.

Что выбрать? Если сайт «тяжелый» (с точки зрения оптимизации, контента, функционала), то можно разрабатывать полноценную мобильную версию. Если сайт небольшой и простой, хватит и возможностей адаптивной верстки.

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

Как проверять верстку адаптивного сайта — часть 1

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

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

Пример: extrusion-info.com

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

Пример: niris.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

По графику видно, что наибольшей популярностью при посещении корпоративных сайтов является разрешение 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. Это больше вопрос престижа, чем необходимости.

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

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

Разумеется, это утверждение относится к растровым изображениям, фотографиям (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-скрипты, которые позволяют выбранные нами блоки, при определенных разрешениях перемещать в любую часть страницы. Это позволяет избежать лишнего дублирования информации и облегчить жизнь контент-менеджерам.

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

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

Под какие разрешения рисовать адаптивный дизайн? — Хабр Q&A

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

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

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

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

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

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

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

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

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

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

Смартфоны (Портрет и ландшафтный)

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}

Смартфоны (ландшафтный)

@media only screen and (min-width : 321px) {}

Смартфоны (portrait)

@media only screen and (max-width : 320px) {}

iPads (Портрет и Ландшафтный)

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {}

iPads (Ландшафтный)

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}

iPads (Портрет)

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}

Настольные компьютеры и ноутбуки

@media only screen and (min-width : 1224px) {}

Большие экраны

@media only screen and (min-width : 1824px) {}

iPhone 4

@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {}

Для тестирования разрабатываемого сайта можно воспользоваться web-сервисами:

http://mattkersley.com

http://www.responsinator.com

Сопровождение сайта

Какой идеальный размер экрана для адаптивного дизайна

По состоянию на 2020 год в мире насчитывается 3,5 миллиарда пользователей смартфонов. Это 45% населения Земли. По состоянию на 2019 год люди выходили в Интернет с более чем 9000 различных устройств. Каждый пользователь ожидает, что каждый веб-сайт, к которому он обращается, будет безупречно отображаться на его мобильном устройстве. Это означает, что разработчики веб-сайтов должны создавать веб-сайты, которые будут отображаться на экранах разных размеров по всему миру.

Другими словами, им нужен адаптивный дизайн.

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

Что такое адаптивный дизайн?

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

Кроме того, Google рассматривает «удобство для мобильных устройств» как параметр для ранжирования. Цитата из центрального блога Google для веб-мастеров,

«. Начиная с 21 апреля (2015 г.), мы будем расширять использование удобства для мобильных устройств в качестве сигнала ранжирования. Это изменение повлияет на мобильный поиск на всех языках мира и окажет значительное влияние на наши результаты поиска. Следовательно, пользователям будет проще получать релевантные высококачественные результаты поиска, оптимизированные для их устройств .”

Как найти идеальный размер экрана для адаптивного дизайна?

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

Статистика разрешения экрана мобильных устройств во всем мире: январь 2020 г. — январь 2021 г.

Источник изображения

Обратите внимание на переход пользователей с экрана меньшего размера (360 * 640) со значительным падением с января 2020 года по январь 2021 года.Несмотря на то, что это очень важный размер мобильного экрана, большая часть аудитории все еще остается на нем. Хотите проверить, как ваш сайт выглядит в этом разрешении? Протестируйте сейчас.

Статистика разрешения экрана в мире: январь 2020 г. — январь 2021 г.

Источник изображения

Согласно мировой статистике разрешения экрана (январь 2020 г. — январь 2021 г.), наиболее часто используемые разрешения на мобильных устройствах, настольных компьютерах и планшетах: :

1920 × 1080 (8.89%)
1366 × 768 (8,44%)
360 × 640 (7,28%)
414 × 896 (4,58%)
1536 × 864 (3,88%)
375 × 667 (3,75%)

Бесплатный тест на отзывчивость на часто используемых разрешениях

Попробуйте проверить отзывчивость своего веб-сайта на реальных устройствах.

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

Знаете ли вы, , как определять отзывчивые точки останова?

Доля рынка настольных ПК, мобильных и планшетов в мире: январь 2020 г. — январь 2021 г.

Источник изображения

Согласно документации Microsoft,

С огромным количеством целевых устройств и размеров экрана в экосистеме Windows 10 , вместо оптимизации пользовательского интерфейса для каждого устройства мы рекомендовали разработать несколько категорий ширины клавиш (также называемых «точками останова»):

Маленький (меньше 640 пикселей)
Средний (от 641 до 1007 пикселей)
Большой (1008 пикселей и больше)

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

Проверить отзывчивость веб-сайта бесплатно

Знаете ли вы: Как протестировать свой веб-сайт на экранах разных размеров с помощью бесплатных инструментов? Выяснить.

Лучшие практики для реализации адаптивного дизайна

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

Знайте свои точки останова : В адаптивном дизайне точка останова — это «точка» », При котором содержание и дизайн веб-сайта будут адаптироваться определенным образом, чтобы обеспечить наилучшее взаимодействие с пользователем. Чтобы сделать веб-сайт адаптивным, дизайнеры должны добавить точку останова, когда контент выглядит смещенным.В зависимости от количества устройств, на которые выравнивается сайт, необходимо установить несколько точек останова, чтобы обеспечить его отзывчивость. Обратитесь к этой статье об адаптивных точках останова, чтобы подробно узнать о них и их эффективности.
Создание гибких дизайнов : Гибкий дизайн — это макет дизайна, который может смещаться (расширяться и сжиматься), чтобы соответствовать области просмотра устройства, на котором он работает. Фиксированный макет дизайна будет нежелательно искажать все области просмотра, по которым они не выровнены. Работайте над макетами дизайна, используя% единиц, а также максимальную ширину, чтобы макет соответствовал видовым экранам мобильного устройства, не становясь слишком широким на видовых экранах настольных устройств.
Уменьшение трения : Это в основном означает, что конструкция должна быть простой в использовании на нескольких устройствах. Адаптивный дизайн включает не только то, как выглядит веб-сайт, но и то, как он работает с точки зрения доступности и удобства использования. Сосредоточьтесь особенно на трении на маленьком экране, потому что по мере уменьшения размеров экрана веб-элементы имеют меньше места для рендеринга и с большей вероятностью будут скремблироваться и искажаться.
Design Mobile-First : Поскольку трение более вероятно на небольших экранах, проектируйте с подходом, ориентированным на мобильные устройства.Сложнее сузить макет рабочего стола для мобильного окна просмотра, тогда как сделать наоборот проще. При разработке дизайна для мобильных устройств дизайнер включает в себя все, что абсолютно необходимо для обеспечения оптимального взаимодействия с пользователем.

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

Расставить приоритеты по важным параметрам меню
Устранить все визуальные отвлекающие факторы
Оптимизировать дизайн для удобного касания — упростить касание
Удалите ненужные формы и информационные поля.
Выделите основной CTA.
Выделите основные функции поиска и фильтрации.

Больше функциональности, меньше набора текста. : Очевидно, печатать на мобильных устройствах сложнее, чем на настольных.Поэтому имеет смысл свести к минимуму необходимость набора текста на мобильных версиях веб-сайтов. Замените набор текста сознательным использованием функций устройства, таких как GPS, считывание QR-кода, биометрическое удостоверение личности и т. Д. Сделайте так, чтобы пользователям было проще делиться информацией, писать по электронной почте или звонить по соответствующим номерам, разместив ссылки, запускающие необходимые функции. Имейте в виду, что лучший адаптивный дизайн предполагает упрощение и устранение неудобных мобильных взаимодействий.
Тестировать, тестировать, тестировать : как только разработчик или дизайнер знает, какие размеры экрана лучше всего подходят для адаптивного дизайна, он выполняет работу и создает адаптивный веб-сайт.Однако, чтобы убедиться, что веб-сайт действительно отображается так, как задумано, на устройствах, для которых он был создан, его необходимо протестировать именно на это. Легкий способ сделать это — использовать средство проверки адаптивного дизайна. Вместо того, чтобы запускать веб-сайт через отдельные устройства с разными окнами просмотра, введите URL-адрес в средство проверки и посмотрите, как он отображается на множестве новейших устройств при разном, часто используемом разрешении устройства. Приведенная выше программа проверки предлагает отзывчивую проверку на последних мобильных устройствах, таких как iPhone X, Galaxy Note 10, iPhone 8 Plus и других.Кроме того, используйте облако BrowserStack, чтобы проверить, как веб-сайт отображается на тысячах мобильных и настольных устройств. Просто зарегистрируйтесь бесплатно, выберите необходимое устройство, перейдите на веб-сайт и проверьте, как оно выглядит в реальных условиях пользователя.

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

Попробуйте Responsive Checker бесплатно

Размеры экрана и точки останова для адаптивного дизайна — приложения для Windows

24.09.2020
3 минуты на чтение

В этой статье

Приложения

для Windows могут работать на любом устройстве под управлением Windows, включая телефоны, планшеты, настольные компьютеры, телевизоры и т. Д. Учитывая огромное количество целевых устройств и размеров экрана в экосистеме Windows 10, мы рекомендовали не оптимизировать пользовательский интерфейс для каждого устройства, а несколько категорий ширины ключей (также называемых «точками останова»):

Маленький (менее 640 пикселей)
Среднее (от 641 до 1007 пикселей)
Большой (1008 пикселей и больше)

Подсказка

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

Точки останова

В этой таблице описаны различные классы размера и точки останова.

Класс размеров	Точки останова	Типичный размер экрана	Устройства	Размеры окон
Малый	до 640 пикселей	от 4 дюймов до 6 дюймов; От 20 дюймов до 65 дюймов	Телефоны, телевизоры	320×569, 360×640, 480×854
Средний	641–1007 пикселей	от 7 дюймов до 12 дюймов	Таблетки	960×540
Большой	1008ps и выше	13 дюймов и более	ПК, ноутбуки, Surface Hub	1024×640, 1366×768, 1920×1080

Почему телевизоры считаются «маленькими»?

Хотя большинство телевизоров физически довольно большие (обычно от 40 до 65 дюймов) и имеют высокое разрешение (HD или 4k), проектирование для телевизора 1080P, который вы смотрите с расстояния 10 футов, отличается от дизайна для монитора 1080p, расположенного в футе. на вашем столе.Если учесть расстояние, 1080 пикселей телевизора больше похожи на 540-пиксельный монитор, который намного ближе.

Система эффективных пикселей

UWP автоматически учитывает расстояние просмотра. Когда вы указываете размер для элемента управления или диапазон точки останова, вы фактически используете «эффективные» пиксели. Например, если вы создаете отзывчивый код для 1080 пикселей и выше, монитор 1080 будет использовать этот код, а телевизор 1080p — нет, потому что, хотя телевизор 1080p имеет 1080 физических пикселей, он имеет только 540 эффективных пикселей.Это делает проектирование для телевизора похожим на проектирование для телефона.

Число эффективных пикселей и масштабный коэффициент

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

Когда ваше приложение выполняется на устройстве, система использует алгоритм для нормализации отображения элементов пользовательского интерфейса на экране. Этот алгоритм масштабирования учитывает расстояние просмотра и плотность экрана (пикселей на дюйм) для оптимизации воспринимаемого размера (а не физического размера).Алгоритм масштабирования гарантирует, что шрифт размером 24 пикселя на Surface Hub на расстоянии 10 футов будет так же удобочитаем для пользователя, как шрифт 24 пикселя на 5-дюймовом телефоне, находящемся на расстоянии нескольких дюймов.

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

При проектировании можно игнорировать плотность пикселей и фактическое разрешение экрана. Вместо этого разработайте эффективное разрешение (разрешение в эффективных пикселях) для класса размера (подробности см. В статье «Размеры экрана и точки останова»).

Подсказка

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

, кратное четырем

Размеры, поля и позиции элементов пользовательского интерфейса всегда должны быть кратны 4 epx в ваших приложениях UWP.

UWP масштабируется для ряда устройств с плато масштабирования 100%, 125%, 150%, 175%, 200%, 225%, 250%, 300%, 350% и 400%. Базовая единица — 4, потому что ее можно масштабировать до этих плато как целое число (например, 4 x 125% = 5, 4 x 150% = 6). Использование числа, кратного четырем, выравнивает все элементы пользовательского интерфейса по целым пикселям и обеспечивает четкость и резкость краев элементов пользовательского интерфейса. (Обратите внимание, что к тексту это требование не предъявляется; текст может иметь любой размер и положение.)

Поддержка экранов разных размеров | Разработчики Android

Устройства Android

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

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

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

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

Но имейте в виду, что адаптация к разным размерам экрана не
обязательно сделайте свое приложение совместимым со всеми форм-факторами Android.Вам следует
предпринять дополнительные шаги для поддержки Android Wear, TV, Auto и Chrome OS
устройств.

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

Создание гибкого макета

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

Используйте ConstraintLayout

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

Самый простой способ построить макет с ConstraintLayout — использовать
Редактор макета в Android Studio. Он позволяет перетаскивать новые представления в макет,
прикрепляют свои ограничения к родительскому представлению и другим родственным представлениям, и
редактировать свойства представления, и все это без ручного редактирования XML
(см. рисунок 1).

Дополнительные сведения см. В разделе Создание адаптивного пользовательского интерфейса с помощью
ConstraintLayout.

Рисунок 1. Редактор макета
в Android Studio отображается файл ConstraintLayout

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

Избегайте жестко заданных размеров макета

Чтобы ваш макет был гибким и адаптировался к разным размерам экрана,
вы должны использовать "wrap_content" или "match_parent" для
ширина и высота большинства компонентов представления вместо жестко заданных размеров.

"wrap_content" сообщает представлению установить любой размер
необходимо, чтобы содержание соответствовало этому представлению.

"match_parent" позволяет максимально расширить представление в пределах
родительский вид.

Например:

Хотя фактический макет для этого вида зависит от других атрибутов в его
родительский вид и любые родственные представления, этот TextView намеревается установить его ширину равной
заполните все доступное пространство ( match_parent ) и установите его высоту ровно на столько
пространство требуется высотой текста ( wrap_content ).Это позволяет
вид, чтобы адаптироваться к разным размерам экрана и разной длине текста.

На рисунке 2 показано, как регулируется ширина текстового представления с использованием "match_parent"
по мере изменения ширины экрана в зависимости от ориентации устройства.

Рисунок 2. Гибкое текстовое представление

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

Примечание: При использовании ConstraintLayout вы не должны
используйте match_parent .Вместо этого установите размер на 0dp , чтобы включить специальный
поведение, называемое «ограничениями соответствия», которое обычно совпадает с тем, что вы
ожидать от match_parent . Для получения дополнительной информации см., Как настроить
размер представления в ConstraintLayout.

Использовать SlidingPaneLayout для пользовательских интерфейсов списка / деталей

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

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

Ширина и вес здесь являются ключевыми факторами, определяющими поведение.Если
окно достаточно велико, чтобы отображать оба вида (не менее 580 dp), затем боковые
используется побочный пользовательский интерфейс. Однако, если он меньше этого, то полноэкранный
list заменен полноэкранным детальным пользовательским интерфейсом.

В режиме бок о бок размер окна может быть больше минимального требования.
580dp в этом примере. Значения веса будут использоваться для определения размера двух панелей.
пропорционально. В этом примере размер панели списка всегда будет 280dp, а
панель деталей заполнит оставшееся пространство.Единственное исключение из этого — когда
с использованием SlidingPaneLayout V1.2.0-alpha01 и более поздних версий на складных устройствах. В этих
case SlidingPaneLayout автоматически настроит размер панелей, чтобы
что они находятся по обе стороны от сгиба или петли.

Создать альтернативные макеты

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

Рисунок 3. Одно и то же приложение на экранах разных размеров.
использует разные макеты для каждого

Вы можете предоставить макеты для конкретных экранов, создав дополнительные
res / layout / каталогов — по одному на каждый
конфигурация экрана, требующая другого макета, а затем добавить экран
квалификатор конфигурации для макета имя каталога (например, layout-w600dp
для экранов с доступной шириной 600dp).

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

Чтобы создать альтернативный макет в Android Studio (с использованием версии 3.0 или выше),
действуйте следующим образом:

Откройте макет по умолчанию и нажмите Ориентация для предварительного просмотра
на панели инструментов.
В раскрывающемся списке щелкните, чтобы создать предлагаемый
вариант, например Создать ландшафтный вариант или щелкните Создать другой .
Если вы выбрали Create Other , появится Select Resource Directory .
Здесь выберите квалификатор экрана слева и добавьте его в список из Chosen
Квалификаторы . Когда вы закончите добавлять квалификаторы, щелкните OK . (См.
следующие разделы для получения информации о квалификаторах размера экрана.)

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

Используйте квалификатор наименьшей ширины

Квалификатор размера экрана «наименьшая ширина» позволяет указать альтернативный
макеты для экранов, которые
иметь минимальную ширину в пикселях, не зависящих от плотности (dp или dip).

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

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

res / layout / main_activity.xml # Для телефонов (доступная ширина менее 600 dp)
res / layout-  sw600dp  /main_activity.xml # Для планшетов с диагональю 7 дюймов (шириной 600dp и больше)

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

Вот как другие значения наименьшей ширины соответствуют типичным размерам экрана:

320dp: типичный экран телефона (240×320 ldpi, 320×480 mdpi, 480×800 hdpi и т. Д.).
480dp: большой экран телефона ~ 5 дюймов (480×800 mdpi).
600dp: 7-дюймовый планшет (600×1024 mdpi).
720dp: 10-дюймовый планшет (720×1280 mdpi, 800×1280 mdpi и т. Д.).

На рис. 4 более подробно показано, как различается ширина экрана dp.
обычно соответствуют разным размерам и ориентации экрана.

Рисунок 4. Рекомендуемая ширина контрольных точек для поддержки
разные размеры экрана

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

Примечание: Размеры, которые вы указываете с помощью этих квалификаторов, равны , а не
Реальные размеры экрана . Скорее, размеры указаны для ширины или высоты в
Единицы dp, которые равны , доступны для окна вашей деятельности .В
Система Android может использовать часть экрана для пользовательского интерфейса системы (например, системный
панель внизу экрана или строка состояния вверху), поэтому некоторые
экран может быть недоступен для вашего макета. Если ваше приложение используется в
многооконный режим
тогда у вашего приложения есть только доступ
к размеру этого окна. При изменении размера окна запускается
изменение конфигурации
с новым размером окна, чтобы система могла выбрать
соответствующий файл макета. Таким образом, размеры, которые вы декларируете, должны быть конкретно
о размерах, необходимых для вашей деятельности — система учитывает любое пространство
используется пользовательским интерфейсом системы при объявлении, сколько места он предоставляет для вашего макета.

Используйте квалификатор доступной ширины

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

res / layout / main_activity.xml # Для мобильных телефонов (доступная ширина менее 600 dp)
res / layout-  w600dp  /main_activity.xml # Для планшетов с диагональю 7 дюймов или любого экрана с разрешением 600dp
                                     # доступная ширина (возможно, для телефонов с горизонтальной ориентацией)

Если вас беспокоит доступная высота, то вы можете сделать то же самое, используя
квалификатор «доступная высота». Например, layout-h600dp для
экраны с высотой экрана не менее 600 dp.

Добавить квалификаторы ориентации

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

Для этого вы можете добавить квалификаторы port или land в каталог ресурсов.
имена. Только убедитесь, что это после других квалификаторов размера. Например:

res / layout / main_activity.xml # Для мобильных телефонов
res / layout-  land  /main_activity.xml # Для телефонов в альбомной ориентации
res / layout-  sw600dp  /main_activity.xml # Для планшетов с диагональю 7 дюймов
res / layout-  sw600dp-land  /main_activity.xml # Для планшетов с диагональю 7 дюймов в горизонтальной ориентации

Дополнительные сведения обо всех квалификаторах конфигурации экрана см. В таблице 2.
в руководстве по предоставлению ресурсов.

Модульное оформление компонентов пользовательского интерфейса с помощью фрагментов

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

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

Дополнительные сведения см. В разделе Создание динамического пользовательского интерфейса с помощью
Фрагменты.

Поддержка Android 3.1 с устаревшими квалификаторами размера

Если ваше приложение поддерживает Android 3.1 (уровень API 12) или ниже, вам необходимо использовать
квалификаторы устаревшего размера
в дополнение к наименьшей / доступной ширине
квалификаторы сверху.

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

res / layout / main_activity.xml # Для телефонов (меньше 640dp x 480dp)
res / layout-  large  /main_activity.xml # Для маленьких планшетов (640dp x 480dp и больше)
res / layout-  xlarge  /main_activity.xml # Для больших планшетов (960dp x 720dp и больше)

Использовать псевдонимы макетов

При поддержке версий Android до и после 3.2 вы должны использовать обе версии.
квалификаторы самой маленькой ширины и большие для ваших макетов.Итак, у вас будет
файл с именем res / layout-large / main.xml , который может быть идентичен
разрешение / макет-sw600dp / main.xml .

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

res / layout / main.xml # однопанельный макет
res / layout / main_twopanes.xml # двухпанельный макет

И сложите эти два файла:

Эти два файла имеют идентичное содержание, но на самом деле они не определяют
расположение.Они просто установили main как псевдоним для main_twopanes . С
в этих файлах есть селекторы large и sw600dp , они
применяется к большим экранам независимо от версии Android (планшеты до 3.2 и телевизоры соответствуют
large , а post-3.2 будет соответствовать sw600dp ).

Реактивный ранец Compose

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

Создать гибкий макет

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

Создать альтернативные макеты

Jetpack Compose не использует ресурсы для представления макетов, поэтому вы не можете использовать
квалификаторы ресурсов для предоставления альтернативных макетов. Вместо этого вы можете построить это
логику в ваши составные части.А
Локальная конфигурация
экземпляр предоставляет информацию о текущем
конфигурация устройства. Это в целом соответствует квалификаторам, используемым для
указать альтернативные ресурсы в традиционном режиме просмотра
UI. Например, ориентация экрана, размер, видна ли клавиатура,
и так далее. можно определить по следующей выборке:

  @ Составной
fun DynamicLayout () {
    val конфигурация = LocalConfiguration.current
    if (configuration.smallestScreenWidthDp <580) {
         SmallLayout ()
     } еще {
         LargeLayout ()
     }
}

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

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

  @ Составной
fun AdaptiveLayout () {
    BoxWithConstraints {
        если (maxWidth <580.dp) {
            SmallLayout ()
        } еще {
            LargeLayout ()
        }
    }
}

В этом примере создаются разные макеты в зависимости от того, больше или меньше максимальная ширина составного объекта AdaptiveLayout 580dp.

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

Создание растягиваемых растровых изображений с девятью фрагментами

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

Растровое изображение с девятью патчами - это в основном стандартный файл PNG, но с дополнительным 1 пикселем.
граница, указывающая, какие пиксели следует растянуть (и .9.png
расширение вместо .png ). Как показано на рисунке 5, пересечение
между черными линиями слева и вверху находится область растрового изображения,
можно растянуть.

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

Рис. 5. Изображение с девятью патчами
( button.9.png )

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

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

Тестирование на всех размерах экрана

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

Android 10 (уровень API 29) и выше поддерживает более широкий диапазон соотношений сторон. Со складными формами и форм-факторами
может варьироваться от сверхвысоких длинных и тонких экранов (например, 21: 9 для сложенного
устройства) вплоть до 1: 1.

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

Если вы не можете поддержать некоторые из этих соотношений, вы можете использовать
maxAspectRatio (как
before), а также
minAspectRatio , чтобы указать
самое высокое и самое низкое соотношение, с которым может справиться ваше приложение.В случаях с экранами, превышающими
эти ограничения, ваше приложение может быть переведено в режим совместимости.

Когда в нижней части навигации пять значков
Посмотреть
устройствам под управлением Android 10 (уровень API 29) и выше гарантирован минимальный размер сенсорной цели 2
дюймы. См. Определение совместимости
Документ.

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

Если вы предпочитаете тестировать на физическом устройстве, но не хотите покупать
устройства, вы можете использовать
Лаборатория тестирования Firebase
для доступа к устройствам в центре обработки данных Google.

Объявить поддержку определенного размера экрана

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

Руководство по адаптивному веб-дизайну для новичков в 2021 году

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

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

Таким образом, если вы поместите ваш контент в один столбец и вызовете его выход, это не приведет к его сокращению.

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

И это улучшение пользовательского опыта означает более высокие конверсии и рост бизнеса.

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

Посмотрите наше видео-руководство по адаптивному веб-дизайну:

Что такое адаптивный веб-дизайн?

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

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

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

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

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

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

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

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

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

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

Почему так важен адаптивный дизайн

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

Ответ прост. Уже недостаточно заниматься дизайном для одного устройства. Мобильный веб-трафик превысил трафик компьютеров и теперь составляет большую часть трафика веб-сайтов, составляя более 51%.

Доля рынка мобильных устройств, планшетов и настольных ПК

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

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

Мобильный поисковый трафик

Наконец, за последние несколько лет мобильная связь стала одним из важнейших рекламных каналов.Даже на рынке после пандемии расходы на мобильную рекламу растут на 4,8% до 91,52 миллиарда долларов.

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

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

Адаптивны ли сайты WordPress?

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

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

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

Строительные блоки адаптивного веб-дизайна

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

CSS и HTML

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

HTML против CSS (Источник изображения: codingdojo.com)

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

Вы можете установить «класс» или «идентификатор», на которые впоследствии можно будет настроить таргетинг с помощью кода CSS.

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

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

Адаптивная верстка разрешения экранов: какая бывает и как сделать?

какая бывает и как сделать?

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

Плюсы и минусы

Адаптивный дизайн, отзывчивый или мобильная версия — в чем разница?

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

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

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

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

Адаптируем текущий дизайн

CSS3 Media Queries

Основные разрешения (размеры) экранов для адаптивной верстки

Размер экрана, разрешение и область просмотра: что это значит?

Отзывчивый дизайн

Самые популярные разрешения экрана

Устройства Apple

Устройства Android

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

Пояснение

Похожие записи

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

Про мобильный трафик и новые требования к дизайну сайта

Как выглядит адаптивный сайт

Зачем нужен адаптивный дизайн и адаптивная верстка

Сложности адаптивной разработки

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

Какой экран учитывать изначально

Основные правила адаптивного дизайна

Размеры макетов. Брейкпоинты

Относительность координат, размеров и масштабов

Вложенность

Поточность

Графические форматы

Шрифты

Мобильная версия: что учесть

Адаптивная верстка и мобильная версия – в чем разница

Технические требования: чеклист мобильной версии

Юзабилити: чек-лист мобильной версии

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

Как проверять верстку адаптивного сайта — часть 1

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

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

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

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

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

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

Бургер-меню

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

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

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

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

Под какие разрешения рисовать адаптивный дизайн? — Хабр Q&A

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

Какой идеальный размер экрана для адаптивного дизайна

Размеры экрана и точки останова для адаптивного дизайна — приложения для Windows

В этой статье

Точки останова

Почему телевизоры считаются «маленькими»?

Число эффективных пикселей и масштабный коэффициент

, кратное четырем

Поддержка экранов разных размеров | Разработчики Android

Создание гибкого макета

Используйте ConstraintLayout

Избегайте жестко заданных размеров макета

Использовать SlidingPaneLayout для пользовательских интерфейсов списка / деталей

Создать альтернативные макеты

Используйте квалификатор наименьшей ширины

Используйте квалификатор доступной ширины

Добавить квалификаторы ориентации

Модульное оформление компонентов пользовательского интерфейса с помощью фрагментов

Поддержка Android 3.1 с устаревшими квалификаторами размера

Использовать псевдонимы макетов

Реактивный ранец Compose

Создать гибкий макет

Создать альтернативные макеты

Создание растягиваемых растровых изображений с девятью фрагментами

Тестирование на всех размерах экрана

Объявить поддержку определенного размера экрана

Руководство по адаптивному веб-дизайну для новичков в 2021 году

Посмотрите наше видео-руководство по адаптивному веб-дизайну: