Да, мы говорим о тексте здесь. Не столь гламурная и часто пренебрегаемая часть веб-дизайна. В то время как все говорят о последних модных решениях в области адаптивного проектирования, иконок, конверсий и прочего, скромный текст слишком часто игнорируется. И я их не виню. Единственные люди, которые действительно обращают на это внимание — это фанаты типографии или авторы контента. Но, возможно, пришло время изменить это. Нравится вам это или нет, простой старый текст может испортить ваш сайт.
«Читательский = доход»
— Д Бнонн Теннант
Цель многих веб-сайтов — зарабатывать деньги прямо или косвенно. Сайт — это бизнес-актив. Это должно генерировать хорошую отдачу от инвестиций. Каждый элемент должен быть направлен на это. Чтобы сделать эту продажу, веб-сайт должен сказать людям, что делать, почему они должны это делать, и облегчить им это на самом деле.
Как передать это сообщение? Кроме редкого удара гения дизайна, это делается с помощью текста. Если вы не являетесь Google, вы не сможете получить простой белый экран и окно поиска.
Это действительно все о тексте в любом случае
С большой долей посетителей веб-сайтов, приходящих с мобильных устройств ( по данным StatCounter , по состоянию на сентябрь 2014 года ~ 36%), неудивительно, что все создают адаптивные дизайны. Тем не менее, большинство адаптивных проектов по-прежнему сосредоточены на гибких сетках, гибких изображениях и правильной обработке медиа-запросов. Самое большее, в некоторых проектах есть несколько медиазапросов, чтобы уменьшить размер текста по умолчанию для маленьких экранов, чтобы текст помещался на экране. Маленький шрифт, на маленьком экране. Вы можете себе представить, как весело это читать.
«Веб-дизайн — это 95% типография»
— Оливер Райхенштейн
На мобильном устройстве вы действительно не можете позволить себе роскошь экранного пространства. Вы не можете позволить себе иметь необычные элементы дизайна и кнопки, которые загромождают ваш экран. Пространство над сгибом ограничено. И вы хотите, чтобы это оказало влияние. Единственный способ сделать это — через текст.
Как можно гарантировать, что текст будет не только читаемым, но и приятным, особенно на экранах небольшого размера? Недостаточно просто настроить размер текстового контейнера и переформатировать текст. По-настоящему отзывчивый дизайн требует большего. В конце концов, цель состоит не только в том, чтобы показать что-то на экране, но и в том, чтобы контент был оптимизирован для удобства чтения, удобства использования, доступности и общего графического баланса.
Рекомендации по хорошей читаемости — на мобильных устройствах
Стандарт Easy-2-Read был стандартом хорошей читаемости. Вот моя обновленная версия руководства по хорошей читабельности, особенно для мобильных устройств.
-
Размер шрифта по умолчанию должен быть легко читаемым . Без масштабирования. Без нажатия на любую кнопку. Вам придется масштабировать свой шрифт в соответствии с размером экрана. Имейте в виду, что среднее расстояние от экрана при чтении с мобильных устройств составляет всего 8-10 дюймов, как в книге, по сравнению с 23-28 дюймами для настольного компьютера.
-
Текст должен дышать . Хотя на мобильном устройстве больше места на экране, заполнение его текстом не поможет вашему делу. Так что избегайте соблазна. Оставьте достаточно свободного места вокруг текста. Это снижает уровень стресса у читателя и привлекает его внимание к важной части — тексту.
-
Держите столбцы пропорциональными . Если вы все еще используете несколько столбцов в мобильном макете, имейте в виду, что ширина столбца должна быть пропорциональна размеру шрифта. Выбор правильной ширины столбца — это не только дизайн или формат. Речь идет об обеспечении разборчивости и легкого потока. Точно так же, как на рабочем столе, если столбцы слишком узкие, они заставляют глаза слишком часто менять линии и нарушают поток чтения. Лучше всего иметь одну колонку для разметки телефона. Как правило, 10-15 слов в строке обеспечивают плавность чтения.
-
Отрегулируйте высоту линии . О том, что чтение между строк — это боль. Никто не хочет это делать. Линии, расположенные слишком близко друг к другу, заставляют глаз одновременно воспринимать как верхнюю, так и нижнюю линии, заставляя читателя размыть их. Таким образом, часть вашего дизайна должна обеспечивать достаточное пространство между линиями, даже если все это уменьшено для экрана мобильного устройства.
-
Избегайте текста в изображениях . Как только ваше изображение масштабируется в соответствии с размером экрана, нет никаких гарантий, что текст на изображении все еще будет читаемым. Если этот текст был вашей изюминкой, слишком плохо, вы потеряли свой шанс.
«… прочитайте то, что вы разрабатываете, и представьте, что читаете это впервые, как кто-то, кто только что нашел это» — Дин Аллен
Инструменты
Итак, теперь, когда мы установили необходимость и рекомендации для правильной обработки текста на мобильных устройствах, как мы поступим? Есть много способов сделать это, некоторые более полезные, чем другие. Давайте быстро посмотрим.
Самый простой способ добиться масштабирования шрифта — установить гибкую базовую линию. Вместо указания размера основного шрифта в пикселях, установите его на 100% от контейнера, а затем установите любой другой размер шрифта относительно этого, используя em :
body { font-size:100%; } p { font-size: 0.875em; /* If the baseline is 16px, this will scale the font to 14px */ line-height: 1em; /* This keeps the line height proportional to the font size */ }
Использование медиазапросов
Если вы хотите масштабировать специально для небольших экранов, медиа-запросы могут помочь. Как и с другими вещами в Интернете, нет единственно правильного способа сделать это. В зависимости от ваших требований вы можете использовать единицы измерения px , em , rem или viewport, чтобы указать измерение. Пиксели хороши только тогда, когда вам нужна высокая степень точности, но они не дают универсальности, необходимой для масштабирования.
Использование em обеспечивает гибкость , делая все измерения относительно размера основного текста. Хотя это требует от вас дополнительной математики, это отличный способ убедиться, что шрифты масштабируются. Однако, поскольку он относится к контексту контейнера, он может стать довольно громоздким, если у вас есть пара уровней в вашей иерархии или вам нужно переместить модули на более поздний срок.
Здесь приходит спасение. Единицы rem очень похожи на em , за исключением того, что они относятся к размеру шрифта корневого элемента и не зависят от контекста текущего контейнера. Проблема в том, что rem не поддерживается в старых браузерах. Итан Маркотт предлагает несколько полезных советов о том, когда использовать каждую из этих единиц. Еще один полезный способ — установить размеры на основе единиц просмотра .
Мы кратко рассмотрим, что вы можете сделать, используя em в качестве примера. Чтобы сделать шрифты чуть меньше для экрана мобильного устройства, вы можете масштабировать их следующим образом:
@media screen and (max-width: 30em) { body { font-size: 90%; } } @media screen and (max-width: 20em) { body { font-size: 80%; } }
Поскольку ранее мы указывали размер шрифта абзаца и высоту строки в терминах em , простое изменение размера основного шрифта также обеспечит их изменение. Конечно, это очень простой пример, просто чтобы показать, как это делается. Возможно, вы захотите перейти к статье Сары Соуэдан, где она подробно разберется .
Использование плагина jQuery
Хотя медийные запросы являются более популярным способом создания адаптивного текста, они не являются действительно гибким решением, поскольку полагаются на точки останова. Доступно несколько плагинов jQuery, чтобы заполнить пробел и помочь вам легко и быстро масштабировать текст. Плагин jQuery Responsive Text и FlowType хорошо масштабируют размер шрифта в зависимости от ширины определенного элемента. FlowType также позволяет указать минимальный и максимальный размер шрифта, чтобы текст не выходил за пределы желаемого диапазона.
Заголовок иногда требует другого подхода. Поскольку заголовок делает жирный оператор, вы можете не захотеть, чтобы он масштабировался равномерно и распределялся по нескольким строкам. Потрясающий плагин slabText не только слепо масштабирует текст, но и вычисляет идеальное количество символов в каждой строке и соответствующим образом разбивает заголовок на новые строки, одновременно масштабируя текст. Если вы хотите, вы также можете контролировать точки разделения. У Sara Soueidan есть несколько интересных примеров, показывающих разницу в ее аккаунте на CodePen . Вот отзывчивый заголовок с использованием плагина slabText по сравнению с тем, как он выглядел бы при использовании простого масштабирования области просмотра .
Есть несколько других подходов к адаптивному тексту, которые довольно интересны, но все еще зарождаются. HeadTrackr от Marko использует функцию обнаружения лица с помощью веб-камеры пользователя, чтобы определить, насколько близко или далеко они находятся от экрана, а затем соответствующим образом изменяет размер текста. Ян Сторм Тейлор и другие защищают запросы Элементов вместо медиа-запросов — основывая решения на свойствах элемента, а не на экранах. Это все еще скорее обсуждение, а запросы элементов еще не являются частью CSS.
Вывод
В связи с тем, что мобильные технологии перешли на то, как мы потребляем цифровые мультимедиа, акцент сместится с сложных макетов и причудливых дизайнов на более простые, большие типографики, ориентированные на мобильные устройства.
Игнорирование адаптивного текста больше не вариант.