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

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

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

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

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

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

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

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

viewport — говорим с мобильным браузером и настраиваем изменение размера экрана

До того как вы начнете верстать под мобильную версию стоит вставить в шаблон сайта(в html код) строку с viewport. Эта строка вставляется в head, её задача объяснить мобильному браузеру как себя вести и как отображать сайт для вашего пользователя, к примеру данное решение растянет мобильный экран на 970 пикселей.

<meta content=»width=970″ name=»viewport» />

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

<meta name=»viewport» content=»width=device-width, initial-scale=1.0, maximum-scale=3.0, user-scalable=yes»/>

Работаем с компьютера

Для того чтобы просмотреть сайт в мобильной версии в firefox необходимо нажать ctrl+shift+m, здесь же можно посмотреть и основные разрешения экрана. Ориентироваться нужно на оба расширения экрана как на вертикальное так и на горизонтальное. Повернуть экран можно стрелочкой сбоку.

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

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

При разработке сайта учитывайте восприятие сайта гуглом, проверить этот параметр можно тут: https://search.google.com/search-console/mobile-friendly,https://testmysite.withgoogle.com/intl/ru-ru/,https://developers.google.com/speed/pagespeed/insights/. Приложение проверяет расширение 480 пикселей, именно это расширение нужно поправить для того чтобы максимально подружиться с гуглом. Другие расширения можно не трогать.

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

Смартфоны
@media only screen and (min-width : 320px) and (max-width : 479px) {

/*Тут будет CSS код для разрешения 320 пикселей и до 479 пикселей*/

}

Смартфоны 2
@media only screen and (min-width : 480px) and (max-width : 639px) {

/*Тут будет CSS код для разрешения 480 пикселей и до 639 пикселей*/

}

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

/*Тут будет CSS код для разрешения 640 пикселей и до 767 пикселей*/

}

Планшеты
@media only screen and (min-width : 768px) and (max-width : 1023px) {}

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

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

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

@media only screen and (min-width : 1530px) and (max-width : 1919px) {}

Большие экраны
@media only screen and (min-width : 1920px) {}

Адаптивный дизайн — разрешения для планшетов

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

600×800, 800×600

Ritmix RMD-825, 3Q Qoo! Q-pad, Texet TB-823A

768х1024, 1024×768

Apple iPad mini, Acer Iconia Tab

768×1366, 1366×768

ASUS Transformer Book, Samsung ATIV Smart, Acer Aspire

800х1280, 1280×800

Acer Iconia Tab A3, ASUS MeMO Pad, ASUS Nexus 7, Lenovo Yoga Tablet, Lenovo Idea Tab, Samsung Galaxy Tab, Sony Xperia Tablet

1080×1920, 1920×1080

Nokia Lumia 2520, Microsoft Surface, Samsung ATIV Smart, Lenovo ThinkPad, Acer Iconia Tab W700

1536×2048, 2048×1536

Apple iPad

1600×2560, 2560×1600

ASUS Transformer Pad, Samsung Galaxy Tab Pro

Адаптивная верстка — разрешения для смартфонов

240х320, 320х240

Nokia 225, Nokia Asha 230, Nokia 220, Samsung Galaxy Pocket, Samsung GT-C3590, HTC WildFire, HTC Touch3

320х480, 480х320

Samsung Galaxy S II, Samsung Galaxy Fame, Samsung Galaxy Young, Samsung Rex, Samsung Galaxy Pro, Nokia X6, Nokia E7, HTC Legend, HTC Salsa, HTC Hero, Apple iPhone 3

480х800, 800х480

Samsung Galaxy S III mini, Samsung Galaxy Golden GT, Samsung Galaxy Grand Neo, Nokia Lumia, Nokia X, Nokia XL, HTC Desire 300-500

540х960, 960х540

Samsung Galaxy Core, Samsung Galaxy S4 mini, HTC Desire 600-700, HTC One S, HTC Sensation XE, Sony Xperia

640х1136, 1136х640

Apple iPhone 4, Apple iPhone 5

720х1280, 1280х720

Samsung Galaxy S III, Samsung Galaxy Note, Samsung Galaxy Grand, Nokia Lumia 900+, Sony Xperia T2 Ultra, Sony Xperia Z1 Compact

750х1334, 1334×750

iPhone 6

1080х1920, 1920х1080

Samsung Galaxy S4, Samsung Galaxy S5, Samsung Galaxy Note 3, Nokia Lumia 1520, Sony Xperia Z1, Sony Xperia Z2, Sony Xperia Z Ultra, HTC One, HTC One MAX, HTC One M8

1440х2560, 2560х1440

LG G3, Samsung Galaxy S6

Современный телефон поворачивает экран при смене ориентации с портретной на ландшафтную, что приводит к необходимости создания отдельных дизайнов для каждой его ориентации. При этом дизайны для разных телефонов, даже имеющие одинаковую ширину, могут значительно отличаться. Например, iPhone 3 в горизонтальной ориентации имеет разрешение 480х320, а HTC Desire 300 в вертикальном положении имеет экран 480х800. И хотя ширина у обоих опорных дизайнов одинакова, из-за различной высоты этих экранов потребуется совершенно различный дизайн — ведь их экраны способны вместить совершенно различное количество интерфейсных элементов.

рис. Конфигурация элементов при одинаковой ширине, но различной высоте экрана
(HTC Desire 300 — 480×800, iPhone 3 — 480×320):

Вы видите, что, несмотря на одинаковую ширину экранных разрешений этих устройств в различных ориентациях, они фактически имеют разный размер: вертикальный HTC значительно уже горизонтального iPhone. Это обусловлено тем, что на 1 дюйме экрана iPhone 3 вмещает 165 пикселей, а экран HTC Desire 300 гораздо качественнее (217 пикселей/дюйм), что и приводит к этой разнице. Этот пример наглядно показывает, почему для многих ширин экрана делается по два (и иногда по 3) различных адаптивных дизайна.

Адаптивный дизайн сайта | Данил Фимушкин

Адаптивный дизайн — это дизайн сайта, который подстраивается под разрешение устройства, с которого выполнен вход на сайт. Расскажу о принципах проектирования адаптивных сайтов и зачем нужны разные версии сайтов. Скачайте PSD-исходник адпативного сайта.

Есть принцип «сначала мобильные», об этом есть полезная книга. Больше книг для дизайнеров в статье «книги для веб-дизайнеров». Книга хорошая, но её суть можно изложить в двух предложениях.
1. Компании, которые не делают мобильную версию сайта, теряют много денег.
2. Веб-разработчики и дизайнеры должны разрабатывать концепты сайта сначала для мобильных, потом для компьютеров.
Принцип «сначала мобильные» (или “mobile first”) основан на том, что самый важный  параметр любого сайта — контент, то есть содержание вашего сайта. Он максимально важен и должен хорошо отображаться на любых устройствах. Когда начинаешь рисовать дизайн сначала для большого экрана, есть вероятность, что напичкаешь его совершенно ненужным контентом. Пропадают акценты. Помимо заголовков на первый план может выйти корзина или какие-то кнопки. Когда пользователь заходит на сайт, он не понимает с чего начать. Такая беспорядочная структура распространена на старых сайтах. Если начинаешь проектирование сайта с мобильной версии и у тебя мало пространства, ты сделаешь акцент на нужной вещи, будь то заголовок или какой-то товар. Принцип «сначала мобильные» дисциплинирует, когда создаешь макет.

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

Есть один и тот же сайт, но на разных устройствах он выглядит по-разному:

Как адаптивный сайт выглядит на разных устройствах

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

Как понять адаптивный сайт или нет

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

Блог перестроился версии для ПК на версию для планшета при сжатии браузера

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

По принципу «сначала мобильные» нужно начинать с разработки версии для мобильного устройства (например, айфона), то есть с размер макета 460 х 960. Второй размер для планшета 768×1024, третий — разрешения ноутбука 1280×802. Последний контрольный размер 1600×992. Под эти разрешения нам нужно разрабатывать наши дизайн-макеты.

Создание адаптивного дизайна сайта в Фотошоп

Проектирование сайта для настольного ПК. Создаешь макет как обычно с использованием модульной сетки и 12 колонок.

Макет адаптивный дизайн сайта для ПК и ноутбука

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

Адаптивный дизайн сайта для планшета

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

Адаптивный дизайн сайта для планшета

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

Адаптивный контент

Если вы сделали блог и хотите, чтобы он удобно читался на всех устройствах, надо предусмотреть все возможные разрешения, на которых сайт будет открываться. После отрисовки макетов для всех устройств, верстальщик их превратит в действующий html. В коде есть возможность отключать ненужные элементы и я советую помимо адаптивного дизайна делать адаптивный контент. Допустим, у вас есть в интернет-магазине карточка товара для наушников. В версии для компьютера вы ставите фотографию, пишете название, цену, кнопку купить и большую таблицу с техническими характеристиками. Для мобильной версии сайта в той же карточке товара важно оставить название, фото, цену и кнопку купить. Характеристики, желательно, прятать в специальную вкладку, чтобы она дополнительно загружалась, при желании клиента. С телефона вся остальная информация избыточна и её тяжело читать, да и не заходят с мобильного для того, чтобы информацию читать. Если же человеку это действительно нужно прочитать, он сможет это подгрузить. Это принцип адаптивного контента. В мобильных версиях старайтесь использовать минимум контента. Исходи из принципа «было бы мне удобно?». Представляй себя человеком, который заходит на сайт в метро, одной рукой держится за поручень, другой открывает твой сайт. Было бы тебе удобно перемещаться по сайту и искать нужную информацию?!

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

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

Дополнительная информация по адаптивному дизайну

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

Не теряй деньги клиента из-за неудобного сайта, создавай адаптивные сайты и зарабатывай больше 🙂

Адаптивный дизайн сайта и основные стратегии по его внедрению

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

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

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

Понятие адаптивности

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

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

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

Стратегия «Mobile First»

Данная стратегия разработки была предложена еще в 2009-м году Люком Вроблевски — автором книг и статей по веб-дизайну, руководителем социальной сети Bagcheck, которую всего через 9 месяцев после создания приобрела компания Twitter Inc.

Предложенный Люком Вроблевски подход к разработке получил название «Mobile First» («Первым делом мобильные») по трем причинам:

мобильная среда позволяет фокусироваться и избавиться от беспорядка, возникающего вследствие «захламления» большого количества места на экране;

мобильный рынок имеет тенденцию к развитию бешеными темпами;

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

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

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

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

Контентная стратегия «Content out»

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

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

Наполнение должно непрерывно создаваться и обсуждаться как на этапе создания адаптивного дизайна сайта, так и после его завершения! Как сказал известный дизайнер Cennydd Bowles, «дизайн и контент должны идти рука об руку». Они должны дополнять друг друга.

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

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

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

Уделите время созданию скетча и прототипа

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

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

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

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

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

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

P.S.: а вы уже подписались на обновления нашего блога?

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

Смотреть видео

верстка под любой экран — учебник CSS

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

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

Адаптивный веб-дизайн (англ. responsive web design, RWD) — это подход к созданию веб-страниц, при котором их внешний вид определяется через CSS, основываясь на ширине окна браузера. Это позволяет обеспечить удобный дизайн для любого устройства, без необходимости создания нескольких разных сайтов.

CSS-инструменты для адаптивного дизайна

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

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

Медиа-запросы — это CSS-технология, которая позволяет определять условия для отображения тех или иных стилей. К примеру, вы можете задать один набор CSS-правил для экранов шириной менее 768 пикселей, второй — для ширины более 991 пикселей и т. д.

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

Настройки для адаптивного дизайна

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

Источник: developers.google.com

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

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

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

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

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

---

Далее в учебнике: медиа-запросы CSS.

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

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

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

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

Рис.1 Размеры экранов и PPI

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

Рис.2 Пропорции экрана

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

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

1. Размеры своего устройства и устройства клиента, чтобы вы могли сразу закачать картинки себе на телефон и сразу протестировать свой дизайн непосредственно в руках.
2. Размеры флагмана. Нужно сделать адаптивный дизайн под топовый телефон, под самый популярный телефон, который сейчас продается. Если говорить про сегодняшний день, то флагманом среди iPhone будет iPhone 8/8  Plus  и iPhone X. Под эти размеры экрана нужен адаптивный дизайн.
3. Адаптация под самое большое разрешение, чтобы все хорошо работало
4. Адаптация под самое маленькое разрешение. Под самое маленькое, адекватно нужное разрешение.

Если мы говорим про iOS, то самое большое разрешение сейчас у iPhone 8 plus — 1920х1080, самое маленькое iPhone 4. И вы обязательно должны это в дизайне учитывать. Обязательно нарисовать четвертый iPhone посмотреть, какой у него размер, и прикинуть, как будет выглядеть дизайн на уменьшенном размере экрана (рис.3).

Рис.3 Размеры экрана iPhone

Кстати, рекомендую посмотреть прямо сейчас:

Если мы говорим про Андроид, в том числе про Samsung, то сейчас в топе серия Galaxy, у Ace размер экрана 480х320 и тоже будет интересно посмотреть, как будет смотреться дизайн в маленьком разрешении.

Рис.4  Размеры экрана  Samsung

Тестировать картинки удобно через Дропбокс (рис.5)

1. Рисуем макет под разрешение вашего телефона
2. Храним картинки на компьютере в папке Дропбокса
3. Открываем эти картинки на телефоне через мобильное приложение Дропбокс.

Рис.5 Дропбокс

То есть у нас есть рабочая панель, папка с проектами (картинками) и она очень просто переносится вам в телефон по облаку (рис.6). Дальше мы кликаем в картинку и если она нарисована для нашего разрешения, то мы можем видеть в реальном времени как это все выглядит. Есть разумеется хитрые программы, которые позволяют это делать. На мой взгляд это самый простой и быстрый способ посмотреть как ваш дизайн выглядит на мобильных устройствах. Их можно перекинуть, можно очень быстро с ними работать. Вы только сохранили файл и он уже доступен в вашем айфоне. И это бесплатно. Разумеется это может быть не только Дропбокс, но и любой другой облачный сервис ( mail,yandex и т.д.).

Рис.6 Работа с Дропбокс ( dropbox.com)

И какое здесь правило, принцип?

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