Контрольные точки

Обзор отзывчивости

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

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

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

Отзывчивый, адаптивный и мобильный

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

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

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

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

Минимальная ширина 1200px: зачем это нужно вашему сайту

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

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

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

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

Требования к текстовому содержимому

Для текстовых элементов обязательно указывать шрифт и его размер (учитывая, что стандартных шрифтов всего ничего), желательно в комментариях, фотошоп умеет их делать. Никаких трасформаций с текстом. Размер меняется размером шрифта.
Быть внимательными в использовании нестандартных шрифтов. Стандартных шрифтов очень мало, которые есть в каждой операционной системе. Можно, конечно, подгрузить шрифт, но 100% не будет работать в старых браузерах.
Шрифт должен быть бесплатным или должна быть приобретена лицензия на его использование.
Лучше всего шрифты выбирать на сайте google.com/fonts. Выбрав тут шрифты, можно без проблем подключить их на сайте, и тем более использовать.
Минимум изменений стандартных контролов форм, таких как селекты.
Все текстовые элементы должны быть без сглаживания, т.е стандартный шрифт.
Описать поведение ссылок в дизайне (неактивная, при наведении, посещенная) в меню/модуле, то же самое касается ссылок, отличающихся от дефолтного стиля (например, ссылки в меню, pathway и т.д.).
Обязательно должно быть указано оформление следуюших HTML-тегов: параграф, абзац (<p>), заголовки с 1 по 4 уровень (h1, h2, h3, h4), маркированный список (<ul>), нумерованный список (<ol>), цитирование (<blockquote>).

Фиксированный макет с одной колонкой

containerОбласть дизайна всегда выровнена по центру и имеет фиксированную ширину

Ширина колонки задается свойством width, а выравнивание по центру свойством margin со значением auto.

Свойство margin со значением auto выравнивает блок по центру только в комбинации со свойством width.
Чтобы убрать поля, установленные по умолчанию для веб-страницы, для селектора body следует добавить свойство margin с нулевым значением.

Откройте Пример 1, попробуйте изменить ширину окна браузера. Проанализируйте код данной web-страницы.

В данном примере шапка сайта зафиксирована в верхней части окна браузера.
Для этого использовалось свойство position со значением fixed.
Элемент остается на одном месте при прокрутке, а его положение задается координатами через свойство(а) top, right, bottom, left.

Добавление отступов и границ к блочному элементу увеличивает его ширину, что надо учитывать при вёрстке.
Однако ширина вырастает, только если для блока установлено значение width.
Если требуется использовать свойство width совместно со свойствами padding и/или border, то следует:

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

Данный способ использовался в примере 1.
Учесть значения свойств padding и/или border при вычислении значения свойства width=ширина макета-padding*2-border*2.
Умножаем на 2, чтобы учесть как левое поле/границу, так и правую.

Данный способ использовался в примере 2.
CSS-свойство width задаёт не общую ширину блока, а только ширину содержания. Общая ширина блока затем складывается из трёх компонентов: ширины содержания, отступов и ширины рамок слева и справа.
Можно измененить алгоритм расчета ширины элемента так, чтобы свойство width задавало не ширину содержания, а общую ширину блока.
Для этого следует использовать свойство box-sizing со значением border-box.

Данный способ использовался в примере

Что такое пиксель

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

Глубина пикселя определяет количество оттенков, которые могут быть отображены в каждом пикселе. К примеру, для черно-белого изображения глубина пикселя составляет 1 бит или 2 значения (черный и белый), в то время как для цветного изображения глубина пикселя может составлять 24 бита или более, что позволяет отображать более 16 миллионов цветов.

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

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

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

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

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

Зачем нужна минимальная ширина 1200px?

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

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

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

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

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

Размер шрифта в веб-дизайне

Размер шрифтов в Интернете можно изменять разными способами:

Pixel (px) — Пиксель.
Point (pt) — Пункты.
em — размер шрифта зависит от размера шрифта родительского контейнера.
Root em (rem) — размер шрифта наследуется от корня стиля.
Percentage (%) — процент.
(vw или vh) — ширина или высота области просмотра.
(см) — сантиметр.
(мм) — миллиметр.
Inch (in) — дюйм.

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

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

Другой вариант — использовать em и rem. em наследует свой размер от своего родителя, а rem наследует от корневого стиля (поэтому он назван root em).

Размер шрифта по умолчанию во всех браузерах составляет примерно 16 пикселей. Обычной практикой является установка корневого font-size равным 62,5%, что переводит значение по умолчанию 16 пикселей примерно в 10 пикселей. Мы делаем это, чтобы упростить мысленное преобразование размера шрифта при использовании em или rem (например, 1 rem = примерно 10 px, а 1,8 rem = примерно 18 px). Это удобный подход по двум причинам:

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

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

В CSS это делается с помощью медиа-запросов.

Например, мы можем установить размер шрифта по умолчанию для элемента h1 равным 3,5 rem. Это может отлично смотреться на настольном компьютере, но на мобильном устройстве будет слишком большим. Следовательно, у нас может быть медиа-запрос вроде:

h1 {
    font-size: 3.5rem;
}

@media only screen and (max-width: 400px) {
    h1 {
        font-size: 2rem;
    }
}

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

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

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

Что такое медиа-запрос?

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

Синтаксис

Мы можем ориентироваться на различные типы устройств в зависимости от условий. Правила внутри медиа-запроса применяются только при совпадении условий and/or в типах устройств.

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

Правило @Media

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

Скобка

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

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

Важно: медиа-запросы всегда должны находиться в конце CSS-файла

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

Типы устройств размещаются сразу после правила @media. Если тип не указан, правило @media выбирает все типы по умолчанию. Существует множество видов устройств, однако их можно разделить на 4 категории:

all — для всех типов устройств;
print — для принтеров;
screen — для экранов компьютеров, планшетов и смартфонов;
speech — для скринридеров, которые «читают» страницу вслух.

Например, чтобы выбрать только экраны, нужно установить ключевое слово screen сразу после правила @media. Правила также необходимо объединить ключевым словом «and»:

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

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

Здесь точка останова составляет 480 пикселей. Теперь медиа-запрос знает, когда устанавливать или перезаписывать новый класс. Если ширина устройства меньше 480 пикселей, то будет применен класс text.

Распространенные точки останова: есть ли стандартное разрешение?

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

Следовательно мы не можем сказать, что существует стандартное разрешение для устройств, однако в повседневном программировании есть несколько часто используемых вариантов. Если вы используете фреймворки CSS (например, Bootstrap, Bulma и т. д.), вы также можете применять их точки останова.

Рассмотрим некоторые распространенные точки останова:

320px — 480px: мобильные устройства;
481px — 768px: планшеты;
769px — 1024px: маленькие экраны, ноутбуки;
1025px — 1200px: большие экраны;
1201px и больше — очень большие экраны, телевизоры.

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

Почему это плохо

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

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

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

Кстати, будет несправедливо не выделить тут заодно и минусы мобильной версии сайта (по сравнению с адаптивным дизайном). Это:

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

ограничение информации

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

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

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

Вернемся к адаптивному дизайну.

Vkontakte

Во «ВКонтакте» (VK) можно общаться и слушать музыку, рекламировать товары и услуги, а также пользоваться сервисами, которые упрощают жизнь.

Фотография профиля или сообщества

Минимальный размер: 200×200 px

Формат: JPG, PNG, GIF

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

Под логотипом профиля в сообществе отображаются иконки в меню, их габариты — 376×256 px.

Посты VK

Рекомендуемый размер: 1920×1080 px

Формат: JPG, PNG, GIF

Максимальный вес — 50 Мб. Загружать можно с разным соотношением сторон, например:

горизонтальные — от 1.91:1 до 5:1;
вертикальные — до 4:5;
квадратные — 1:1.

Масштаб для постов различается в зависимости от формата и расположения. Оптимальными считаются габариты от 537 до 1080 пикселей по ширине и соответствующей высоты. Фотоснимки, размещенные в галерее, имеют стандартный масштаб 510×510, а превью в главной новостной ленте — до 150×150.

Картинки для ссылок

Минимальный размер: 537×240 px

Формат: JPG, PNG, BMP, GIF

Рекомендуемые пропорции — 1,91:1 для иллюстраций 1200×628 px, до 15 Мб. В новостной ленте фотоснимок будет уменьшен до 537×240, поэтому стоит выбирать файлы с четкими деталями и хорошей читаемостью даже в маленьком формате.

Главная обложка сообщества в ВК

Минимальный размер: 1590×400 px

Форматы: JPG, PNG, GIF

Загружайте горизонтальные баннеры 1920×768 px и весом до 5 Мб. В приложении на мобильном по ширине будет сжатие до 640 пикселей, поэтому не размещайте какую-либо информацию близко к краям.

Оптимальный размер: 1080×1920 px

Форматы: JPG, PNG, GIF, MP4

Обложки статей в VK

Минимальный размер: 510×286 px

Форматы: JPG, PNG, GIF

«ВКонтакте» оптимизирует кадр для статей автоматически в параметры 510×286 без потери качества. Сам сервис рекомендует добавлять заставки 1920×1080 px, чтобы он наилучшим образом сжал файл.

Витрина товаров

Минимальный размер: 400×400 px

Формат: JPG, PNG, GIF

Карточки товаров отображаются как 1:1. Даже если загрузить их в горизонтальном виде, они оптимизируются под квадрат. Сервис советует параметры 1080×1080. Допустимый максимум — по 6000 пикселей с обеих сторон.

Истории в ВК

Минимальный размер: 100×100 px

Формат: JPG, PNG, GIF, MP4

VK Stories имеет вертикальную ориентацию, поэтому изоражения, которые вы размещаете, должны быть в книжной раскладке. Рекомендуется масштаб 1080×1920, до 15 Мб.

Таргетированная реклама

Минимальные значения для баннеров в таргете во «ВКонтакте» меняются в зависимости от типа платного продвижения:

одинарное: 400×400 (1:1);
карусель: 1080×1080 (1:1; 1.91:1; 4:5);
слайдер: 1080×1350 (1:1; 1.91:1; 4:5).

Вид списка

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

В представлении списка – в этом конкретном примере с электронными письмами — iOS обрабатывает имя отправителя как текст обычного размера (17pt), а тему письма и предварительный просмотр – как вторичный, меньший текст (15pt). Я думаю, это стоит отметить, потому что, опять же, как дизайнер, инстинктивно хотел сделать наоборот: сделать основной текст размером по умолчанию, а имя отправителя еще больше. Заметили здесь тренд? iOS не устанавливает размеры шрифта так, как вы могли наивно ожидать.

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

Примечание ниже настроек («AirDrop позволяет вам мгновенно делиться …») написано шрифтом 13pt, что является наименьшим размером во всех рассмотренных примерах интерфейса.

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

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

Body text (Основной текст) — размер шрифта для основного текста должен быть не менее 16 пикселей. В некоторых случаях можно уменьшить размер шрифта (например, если шрифт имеет необычно большие символы или используются прописные буквы), при этом минимальным размером будет 14 пикселей. Для контекста в Material Design от Google используется минимальный предлагаемый размер дополнительного шрифта в 14 пикселей, а в рекомендациях Apple — 15 пикселей.

Headings (Заголовки). Заголовки должны быть примерно в 1,3 раза больше, чем основной текст, чтобы создать достаточный контраст. Это будет означать, что если используется 16 пикселей для размера основного шрифта, то для заголовков должен использоваться ~ 21 пиксель. Это уменьшено по сравнению с 3,5 бэр, которые использовались на настольных компьютерах.

Subheadings (Подзаголовки) — здесь тоже часто бывают уменьшены по сравнению с размером заголовка, но есть небольшая проблема, в которой подзаголовок может выглядеть слишком похожим на размер шрифта основного текста. По этой причине некоторые дизайнеры предпочитают визуально отличать подзаголовки за счет использования веса, форматирования, например курсива и межбуквенного интервала. Если использовался 21 пиксель для заголовка, можно выбрать 18 или 16 пикселей для подзаголовка, но с меньшим весом, чем заголовок или основной текст.

Input fields (Поля ввода) — они должны точно соответствовать правилам основного текста.

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

Соотношение пиксельной плотности и расстояния просмотра

В общем, чем меньше устройство, тем меньше пикселей *.

* Под «пикселем» я подразумеваю не физические пиксели, а концепцию, попеременно относящуюся к «CSS пикселям» (веб-сайт), «независимым от плотности пикселям» (Android) или «точкам» (iOS). В настоящее время большинство флагманских устройств имеют настолько небольшие физические пиксели, что они искусственно раздувают изображение в два раза (или три раза), как большое. Каждый «пиксель» на изображении фактически занимает 4 (или 9) физических пикселей. Таким образом, «физический пиксель» становится довольно бесполезным, как термин размера. Вместо этого у нас есть три термина: один из них – пережиток прошлого, когда все экраны были с низким разрешением (CSS-единица «пиксель»), второй – новое значение для старого печатного термина («точка») и последний – совершенно новая единица, чье определение связано с мудреной, неприятной детализацией, которая отличает ее от других единиц («независимый от плотности пиксель» или «dp»).

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

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

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

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

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

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

Spark Box представляет собой хороший пример адаптивного дизайна.

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

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

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

Недостатки отзывчивого дизайна

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

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

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

Дизайнеру потребуется разработать макеты адаптивного сайта для шести экранов шириной: 320, 480, 760, 960, 1200 и 1600 пикселей.

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

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

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

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

Оптимизированный опыт просмотра для отдельных устройств.
Более быстрая загрузка на всех устройствах.
Дизайнеры могут оптимизировать демонстрацию рекламы.
Может быть адаптирован к действующим веб-сайтам.

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

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

Под какие устройства и разрешения экранов оптимизировать сайт

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

Но нужно принимать во внимание, что:

Наиболее распространенный формат Андроид — 480×800 (hpdi), он соответствует всем смартфонам Samsung и большинству популярных Nokia.
Второй по популярности формат — mdpi, 320×480
Большинство смартфонов оснащены тач-скрином.

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

320×480 px — iPhone5
480×800 — HTC Desire, Nexus One, i9000 Galaxy S и другие
768×1024 — iPad
640×960 — iPhone 4
1000 и более×бесконечность — планшеты и десктоп

Обзор отзывчивости

Отзывчивый, адаптивный и мобильный

Минимальная ширина 1200px: зачем это нужно вашему сайту

Требования к текстовому содержимому

Фиксированный макет с одной колонкой

Что такое пиксель

Зачем нужна минимальная ширина 1200px?

Рекомендации по мобильному веб-дизайну

1.Поймите пути перемещения пользователей

2. Откажитесь от навигации

3. Ограничьте количество вариантов

4. Упростите все

5. Изображения и видео

6. Размещение

7. Ссылка на контактную информацию

Размер шрифта в веб-дизайне

Что такое медиа-запрос?

Синтаксис

Правило @Media

Скобка

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

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

Распространенные точки останова: есть ли стандартное разрешение?

Почему это плохо

Vkontakte

Фотография профиля или сообщества

Посты VK

Картинки для ссылок

Главная обложка сообщества в ВК

Обложки статей в VK

Витрина товаров

Истории в ВК

Таргетированная реклама

Вид списка

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

Соотношение пиксельной плотности и расстояния просмотра

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

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

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

Недостатки отзывчивого дизайна

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

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

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

Под какие устройства и разрешения экранов оптимизировать сайт

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

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