Требование «Читабельность прежде всего» к шаблонам и медиа-запросам

() translation by (you can also view the original English article)

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

«Mobile First» - ориентация на малоформатные телефоны с шириной примерно в 320 пикселей, которая потом увеличивается.
«Desktop Down» - полноразмерный дизайн, который уменьшается по мере необходимости.
«Content First» - создание тестового контента в начале процесса, а потом дизайна шаблона на основе контента.
«Device Specific» - ориентация на серию специфичных для устройства разрешений с брекпоинтами в соответствующих значениях px, например, телефоны с разрешением от 320 до 480 пикселей, планшеты с разрешением от 768 до 1024 пикселей, 1200 пикселей + для десктопа и т. д.
«Device Agnostic» - создание одного дизайна для всех, который гибко подстраивается под любое разрешение.
«Подход Златовласка» - оставьте базовый размер шрифта браузера или размер шрифта, предпочитаемый пользователями, затем пропишите в стилях размеры, указанные в em, а в результате создайте три макета: «Слишком большой», «Слишком маленький», «Прямо такой, как нужно».

В этой статье я буду говорить о способах, которые представляют собой смесь некоторых из вышеперечисленных, с добавлением нескольких дополнительных функций. Это и «Content First», и «Device Agnostic», которые изначально была вдохновлены типографикой, ориентированной на em в методе "Goldilocks Approach"

Я расцениваю эти способы как «Читабельность прежде всего». После этого подхода дизайн:

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

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

К тому же, я еще с вами поделюсь скриптом под названием «RDBL» (от англ. Redability first), созданный для оценки того, насколько читаемо ваше текстовое содержимое в различных точках. Даже если вы не нравится метод «Читабельность прежде всего», все равно используйте его в адаптивном дизайне любого шаблона.

Принципы «Читабельность прежде всего»

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

1. Не устанавливайте свой базовый размер шрифта; оставьте это на усмотрение браузера или пользователя

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

В основном эта идея проявляется так:

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

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

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

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

1	html { font-size: 100%; }

Внедряйте заготовку контента в начале процесса дизайна, а не в конце

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

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

Вставьте заготовку текста в тег section или article.
Пропишите значения для font-family и font-weight.
Добавьте относительные стили CSS, для оптимизации читабельности (подробнее об этом в следующем разделе).
Добавьте дополнительные визуальные стили для коррекции при необходимости.

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

Причина, по которой мы делаем все наоборот:

Чтобы визуально «украсить» и успешно адаптировать макет, вам нужно знать, каким будет этот макет.
Чтобы создать гибкий, оптимизированный для чтения макет, вам нужно знать, как текст отображается в браузере.
Чтобы увидеть, как будет выглядеть текст с одинаковыми значениями font-family и font-weight в разных браузерах и на разных девайсах.
Чтобы выбрать и применить значения font-family и font-weight, вам нужно использовать заготовки текста.

Таким образом, прежде чем переходить к стилизации макета, во время чего потребуется коррекция типографики, основные значения font-family и font-weight уже должны быть прописанными к заготовке текста.

3. Создайте свой дизайн в относительных значениях% и em / rem, а не в px

Этот подход, как правило, вы не предполагает использования px. Вместо этого все, от высоты и ширины, полей (margins) и отступов (paddings), до радиуса и ширины границы, задается в относительных единицах % и em / rem.

Основные причины:

Используя значения в процентном соотношении % в wrappers макетов и columns, вы создаете дизайн, в котором дизайн плавно перетекает по ширине из одного брекпоинта в другой (breakpoints), а не перепрыгивает с одной ширины на другую
Использование значения em / rem в другим элементах позволяет дизайну масштабироваться пропорционально базового размера шрифта, установленного браузером / пользователем.

Гибкость wrappers и columns на основе процентного соотношения %

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

1	.wrapper {
2	width: 100%;
3	max-width: 40em;
4	}

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

Однако текст в макете с шириной 100% на широкоэкранном мониторе не будет нечитабельным. Поэтому мы прописали max-width 40em для того, чтобы даже на большом мониторе wrapper сайта никогда не был шире этой величины. Для удобства чтения это значение может быть дополнительно отрегулировано, о чем рассказано в следующих разделах.

К columns также могут быть применены значения %, а не px, поэтому они также плавно корректируются в области просмотра. Paddings и borders колонок (с шириной em) могут назначаться в %, не испортив макет и гарантируя, что к border-box присвоено значение свойство box-sizing. Поля в колонках должны быть установлены в % значениях. Margins в колонках должны быть установлены в % значениях.

Примечание: Подробнее о работе с макетами такого типа читайте в моей статье о grid mixins.

Равномерно масштабируемый дизайн макета em / rem

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

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

4. Придерживайтесь идеального диапазона символов в строке ваш для текстового контента

Естественно, в методе «Readability First» основное внимание уделяется текстовому контенту и его презентации. У большинства сайтов есть разделы, в которых хранится их основной контент, и поэтому для удобства чтения мы начинаем с оптимизации этого пространства. Как только основной контент оптимизирован, вокруг него может быть построена остальная часть макета.

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

Количество символов за одно движение глаз, количество движений глаз на строку

Когда мы читаем текст, мы не читаем каждую отдельную букву или слово. Вместо этого мы, используя периферийное зрение, направляем взгляд на группу символов и воспринимаем их сразу. Каждый раз, когда глаза перемещаются от одной группы символов к другой, такое действие называется «саккадой». Саккада может содержать от 1 до 20 символов, но в среднем от 7 до 9.

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

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

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

Как реализовать «Читабельность прежде всего»

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

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

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

Чтобы в содержимом основного блока было максимум около 81 символа на строку, вам необходимо соответствующим образом ограничить ее ширину даже для широкоэкранных макетов. Это обычно составляет максимальную ширину где-то около плюс-минус 35em - 40em.

Это связано с тем, что мы рассмотрели выше по поводу обертки для гибких участков при ширине 100% и максимальной ширине около 40 em. Этот параметр максимальной ширины будет одним из настраиваемых значений, которые допускают определенное количество символов в строке ниже верхнего читаемого предела. Поэтому, если вы создаете дизайн с одной колнкой, внешняя обертка вашего сайта будет где-то около 35–40em плюс любое количество отступов, которое вы поместите вокруг текста.

Если вы создаете дизайн с несколькими колонками, ширина колонок также будет добавлена к общей ширине вашей обертки. Например, если ваш блок с основным контентом должен быть не шире 40em и находится внутри колонки с шириной 66,66%, а боковая панель рядом с ней - 33,33%, для элемента внешней обертки потребуется значение max-width около 60em. Поначалу это может показаться сложным, но на самом деле это довольно просто реализовать на практике, в чем вы убедитесь позже.

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

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

Использование метода RDBL для определения максимальной читаемой ширины

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

RDBL предоставит вам небольшой ползунок вверху вашего дизайна и информацию о различных элементах, которые вы найдете полезными в рамках этого процесса. Чтобы оценить читабельность, вы просто ему сообщаете ему, на какую часть вашего сайта вы нацеливаетесь, то есть свою основную область контента, и вам сообщают, является ли этот элемент "слишком широким" ("Too Wide"), "слишком узким" ("Too Narrow") или "в диапазоне" ("In Range").

Примечание. Скрипт автоматически будет искать теги article, section или main (в порядке предпочтения), но вместо этого вы также можете ввести любое имя класса или идентификатор в поле «Target Content Element».

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

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

В этом примере я начал с некоторой заготовки текста в очень простом HTML-макете, поместив элемент article в обертку main элемента (вы можете использовать любые предпочитаемые вами теги):

<main>
<article>
<h3>Heading</h3>
<p>Put a few paragraphs of dummy text here.</p>
<p>I personally like Samuel L. Ipsum.</p>
</article>
</main>

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

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

Затем я также применяю некоторый базовые стили в CSS, которые устанавливают размер шрифта по умолчанию, значение border-box для свойства box-sizing, создает гибкую обертку вокруг моего контента, устанавливает общее значение font-family «Open Sans» "от Google Webfonts и font-weight текста 400:

* {
    box-sizing:border-box;
  -moz-box-sizing:border-box;
}
html, body {
	padding:0;
	margin:0;
	font-family: 'Open Sans';
}
main {
	width:100%;
	max-width:40em;
	margin:3em auto;
}
h3 {
	font-weight: 700;
}
article {
	font-weight: 400;
}

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

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

При ширине 40em этот текст выводит по 85 символов в строке, что немного завышено. Это среднее значение, взятое из первого абзаца текста в целевом элементе.

Теперь у меня есть два варианта. Во-первых, просто используйте верхнее число из "Estimated Readable Em Range, отображаемого на показаниях, в качестве моего максимума, который в данном случае составляет 38.117em. Тем не менее, это приблизительная оценка, поэтому я также могу использовать ползунок, чтобы постепенно сжимать сайт, пока я не увижу, что флаг читаемости станет зеленым и примет ширину em, отображаемую в этой точке:

Получаем значение 38.5em, которое близко к нужному значению. Поэтому я изменяю настройку максимальной ширины оболочки на это значение:

main {
    width:100%;
	max-width:38.5em;
	margin:3em auto;
}

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

Добавление отступов

Теперь, когда я знаю, что моя максимальная читаемая ширина составляет 38.5em, я добавляю отступы по краям этого содержимого. Я изменяю CSS для элемента article следующим образом (с цветом фона, чтобы вы могли видеть отступы):

article {
    font-weight: 400;
	padding:1.25em 2.25em;
	background: #F5F5F5;
}

Чтобы добавить дополнительные 2,25em ширины, добавленные к каждой стороне элемента article, я добавляю 4,5em к max-width основной обертки. Вы даже можете автоматизировать этот процесс с помощью переменных препроцессора CSS.

main {
    width:100%;
	max-width:43em;
	margin:3em auto;
}

Теперь при обновлении добавлены отступы, но, поскольку внутренняя ширина 38,5 em была сохранена, флаг читабельности остается зеленым.

Многоколоночные макеты

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

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

Чтобы преобразовать этот одноколоночный макет в многоколоночный с добавлением боковой панели, я начну с внедрения элемента aside в свой HTML-код после элемента article:

1	<aside>
2	Sidebar
3	</aside>

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

Поэтому я временно закомментирую настройку mаx-width главной обертки. Это позволит мне использовать ползунок RDBL, чтобы уменьшить масштаб макета со 100%, пока я не найду новый параметр, который следует применить.

main {
    width:100%;
	/*max-width:43em;*/
	margin:3em auto;
}
h3 {
	font-weight: 700;
}
article {
	float:left;
	width:65%;
	font-weight: 400;
	padding:1.25em 2.25em;
	background: #F5F5F5;
}
aside {
	float:left;
	width:35%;
	padding:2.25em 1.25em;
	background: #CCC;
}

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

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

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

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

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

Используя ползунок RDBL для уменьшения ширины двухколоночного макета, мы видим, что первая точка, в которой красный флаг снова появляется, составляет 54,812em, на этот раз с надписью "Too Narrow" из-за того, что количество символов в строке падает ниже 63.

Это первый "break point" читабельности, и поэтому я создам медиа запрос, чтобы контент не достиг этой точки. Я хочу отрегулировать ту ширину брекпоинта, в котором макет становится слишком узким, поэтому я использую RDBL ползунок для регулировки ширины, чтобы снова загорелся зеленый флажок. На данный момент я вижу, что ширина макета составляет 55em. Я копирую содержимое поля "код медиа запроса" и вставляю его в мой CSS файл:

1	@media (max-width: 55em) { /.../ }

Теперь я должен решить, как лучше настроить макет на этом этапе. На более ранней стадии разработки, состоящей из одной колонки, я помню, что основной контент должен был иметь максимальную ширину 43em. Это означает, что 55em будет слишком широким для основного содержимого в одну колонку, поэтому я пока не могу просто полностью убрать боковую панель. Вместо этого я могу просто уменьшить его размер, позволяя контенту занимать больше места.

Для этого я уменьшаю процентную ширину элемента aside и увеличивая процентную ширину элемента article:

@media (max-width: 55em) {
    article {
		width:70%;
	}
	aside {
		width:30%;
	}
}

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

На этот раз читабельность ломается на значении в 50.875em, когда текст снова становится слишком узким. Опять же я регулирую ширину просто, чтобы зажегся зеленый свет, а потом копирую медиа запрос из RDBL , на этот раз со значением 51em. Это все еще слишком широко, чтобы преобразовать макет в одну колонку, поэтому я еще раз увеличил ширину article и уменьшил sidebar:

@media (max-width: 51em) {
    article {
		width:75%;
	}
	aside {
		width:25%;
	}
}

Следующий брекпоинт читабельности появляется на 47,5em, а боковая панель становится все меньше. Однако пока мои показатели выше 43em, что было изначально установлено для главной обертки для читабельности контента в одной колонке. Как я сделаю?

Ответ заключается в том, чтобы все равно на этом этапе преобразовать макет в одну колонку, но добавить достаточное количество отступов к article, чтобы содержимое внутри все еще находилось в пределах читаемого диапазона. Поэтому я создаю еще один медиа-запрос на 47,75em, увеличу отступ статьи до 4em и преобразую макет в одну колонку:

@media (max-width: 47.75em) { 
    article {
		float:none;
		padding:4.5em;
		width:100%;
	}
	aside {
		float:none;
		padding:4.5em;
		width:100%;
	}
}

После обновления теперь макет находится в читаемом диапазоне одной колонки, когда он становится уже, чем 47,75em.

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

1	@media (max-width: 40.5em) {
2	article {
3	padding:2.25em 1.25em;
4	}
5	aside {
6	padding:2.25em 1.25em;
7	}
8	}

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

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

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

Однако флаг «Слишком узкий» на этой точке не вызывает особого беспокойства, поскольку устройства с расширением меньше этого составляют всего 2,9% мобильного пространства, и даже в этом случае они будут иметь только около 5–6 символов на строку, что все еще приемлемо.

Добавление вашего визуального стиля "paint job"

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

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

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

Везде, где возможно, используйте CSS3 вместо изображений (например, для теней, градиентов, закругленных углов, границ, свечения), поскольку стили, созданные таким образом, полностью масштабируемы, пока используются значения em / rem.
Используйте обычные иконки (например, Fontello) вместо иконок в виде изображений, поскольку они также будут масштабироваться вместе с размером шрифта браузера / пользователя.
Там, где вы используете изображения в качестве фона, старайтесь обеспечить их мозаичное заполнение, чтобы заполнить любое пространство при масштабировании вашего дизайна.

Примечание: Если вы привыкли работать с Photoshop над созданием элементов дизайна с большим количеством изображений, вы можете вместо этого использовать Adobe Edge Reflow в качестве средства для генерации стилей CSS3 известным для вас способом. Прочтите мою статью здесь «"5 Useful Things You Can Do With Reflow Now"» для дополнительной информации об этой опции.

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

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

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

Вы можете в любое время изменить количество символов в диапазоне строк, изменив значения непосредственно в виджете, или вы можете указать предпочитаемый диапазон при запуске функции инициализации сценария, например, init_rdbl (63, 90);

Когда вы масштабируете свой макет повышая и понижая значения, не беспокойтесь, если вы заметите красный флажок "Too Wide" или "Too Narrow". Если для 0,001еms ширины отображается слишком мало символов, это не важно. Пока вы видите красный флажок только на мгновение, вы можете считать, что ваш макет находится в пределах читаемого диапазона.

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