обработка данных

Нажмите сюда, если долго загружается,
либо "ESC" - отмена
 
Заказ обратного звонка
Заказать звонок
Наш специалист свяжется с Вами и ответит на все вопросы
Обработка данных
Наш специалист свяжется с Вами и ответит на все вопросы.
OK

Адаптивная и отзывчивая типографика с помощью Hamster Framework

Источник: https://habrahabr.ru
Время чтения: ~12 мин
Адаптивная и отзывчивая типографика с помощью Hamster Framework
Статьи
678
Изображение носит иллюстрационный характер. Источник: habrahabr.ru
Современный интернет развивается огромными темпами и количество пользователей с каждым днем только растет. Если буквально 10 лет назад среднестатистический пользователь был примерно "одинаковый" и по некоторым параметрам отличался минимально, то сейчас эта разница более существенная и заметная. Особенно разница заметна в отличии девайсов и размеров экрана. В ежедневном трафике присутствует очень большое количество пользователей с разным разрешением экрана от самого маленького до самого большого. Плохо оптимизированные сайты имеют меньшее время нахождения пользователя на сайте. И поэтому очень важно оптимизировать сайты для комфортного восприятия его на любом устройстве и разрешении. Как показывает практика большая часть сайтов очень плохо адаптированы под различные устройства и грешат рядом типовых проблем. Все эти проблемы будут рассмотрены в начале статьи на примере нескольких крупных сайтов. А потом мы приступим к практике и сверстаем страничку с адаптивной и отзывчивой типографикой на примерe документации hamster framework.
Ниже представлены скриншоты сайтов с которыми мы будем работать. Первые два скриншота сделаны на 4к мониторе.
Десктопная версия сайта
Адаптивная и отзывчивая типографика с помощью Hamster Framework
Скриншот 1. Источник: habrahabr.ru
Адаптивная и отзывчивая типографика с помощью Hamster Framework
Скриншот 2. Источник: habrahabr.ru
Адаптивная и отзывчивая типографика с помощью Hamster Framework
Скриншот 3. Источник: habrahabr.ru
Мобильная версия сайта
Адаптивная и отзывчивая типографика с помощью Hamster Framework
Скриншот 4. Источник: habrahabr.ru
Проблемы
Как видно многие сайты вообще не оптимизированы к высоким разрешениям экрана и обычно оптимизация заканчивается верхней границей в 1920px. Желтым выделены блоки, которые живут отдельно от основного контента.

Не рациональное использование пространства экрана — слишком много пустот. Выделено на картинках голубым цветом. Проявляется не только на 4к разрешении, но и на меньшем разрешении, но в меньшей мере.
Совет: При прототипировании сайта необходио делить экран на 4 равные части и выделить 2 или 3 части посередине под основной контент. Если основной контент сайта — это статья, то центральный блок должен занимать 2/4 — 3/4 экрана. Каждая строка статьи должна включать в себя текст из 45-70 знаков, если вмещается больше, то надо увеличивать размер шрифта для данного размера экрана. Если текст во второстепенном блоке, то оптимальное количество символов 35-55. Данные значения взяты не с потолка, а являются значениями, которые были найдены опытным путем в следствии развития и совершенствования типографики в течении большого количества времени. Основой послужило, то что это оптимальное расстояние для глаз, на которое они могут бегать по экрану без поворота головы и вызова дискомфорта при чтении. Наглядно показал самое тяжелое движение для глаз на картинке ниже. Чем больше диагональ тем сложнее перемещать глаза на следующую строчку. Подробнее это рассмотрено в специализированной литературе.
Адаптивная и отзывчивая типографика с помощью Hamster Framework
Источник: habrahabr.ru
- Прилипание к краям экрана. Основной контент должен быть ровно по середине, ни слева и ни справа. Читать удобно в середине, а не по краям. Чтение по краям вызывает дискомфорт и увеличивает время чтения контента. Довольно частая проблема у сайтов с адаптивным дизайном — не доделали.

- Маленький размер шрифта у основного контента. (К той же проблеме можно отнести больший размер шрифта у второстепенного контента(выделил на 3м скриншоте желтым), а при этом у основного контента меньший размер.). Например часто можно встретить размер шрифта типа 13px. Мне например такой текст не особо комфортно читать при ширине экрана 1920px на десктоп мониторе, и 800px на планшете. Так же встречается, что в сайдбаре размер контента больше чем в блоке с основным контентом.
Совет: Выделите целевую аудиторию сайта. Определите основной контент которым пользуется пользователь, в этом вам могут помочь разные аналитические инструменты (например популярные запросы, по которым приходит пользователь из поисковиков). Основной контент был выделен зеленным цветом. Правило одно — у основного контента размер блока и шрифта больше, у второстепенного меньше или равен размеру основного контента. Местами можно добавить жирный текст (для придания важности контенту существует всего пару методов: больше размер, курсив (фигурное оформление), жирность(массивность в случае с интерфейсом), выделение цветом).

Ещё совет: Чтобы подобрать оптимальный размер шрифта вам в идеале нужно иметь разные устройства. Для десктоп-версии сайта оптимальное расстояние от экрана ~75см, для планшета расстояние вытянутой руки, для смартфонов расстояние примерно равное половине вытянутой руки. На этом расстоянии производится подбор размера шрифта! Размер необходимо подобрать таким образом, чтобы на этом расстоянии было комфортно читать весь видимый контент сайта.
- На мобильной версии сайта (4 скриншот) присутствует сайдбар с второстепенным контентом. Так же сайдбар присутствует на 3м скриншоте с десктоп версией сайта.

Не стоит пытаться впихнуть побольше блоков с маленьким размером шрифта. Дизайн должен быть простым с четкой и понятной структурой. Проблема выделена светло красным цветом.
В данном случае красный блок надо переориентировать на горизонтальную ориентацию и вставить после какого-то блока. На мобильной версии сайта желательно избавиться от сайдбаров. А у основного контента выделенного зеленным необходимо увеличить размер шрифта. На 4м сайте шрифт для мобильной версии сайта очень маленький для ширины экрана 800 пикселей. Такой размер самый маленький среди многих сайтов. Это размер на мой взгляд оптимален для ширины экрана 320-480 пикселей.
Тут читатель может сказать: — "Все, проблемы известны. Пойду быстрее исправлять." На что, я могу ответить, что не стоит спешить. И ниже расскажу одну психологическую особенность восприятия. Я ее называю плохая привычка.
Плохая привычка
Если человек носил в течении двух лет обувь, которая натирала мозоль и вызывала дискомфорт, то у человека вырабатывается привычка. Теперь если ему дать удобную и хорошую обувь, то он просто ответит: — "Что за ужасную и неудобную обувь вы мне дали? Верните мою обратно!!!". Это связано с тем, что они очень привязались к этой привычке, и если их резко лишить возможности эту привычку повторять, то они чувствуют дискомфорт будто потеряли часть себя. Например по этой причине в психотерапии специально растягивают работу на несколько сеансов, хотя существуют методы быстро решить определенные проблемы. Особо одаренные могу предпринять все усилия, чтобы эту боль вернуть обратно и совсем отказаться от лучшей жизни. По этой же причине все попытки выкатить новую версию сайта часто встречаются пользователями с недовольством, а если сайт очень крупный, то будет еще кучу хайпа. И в этот момент ни в коем случае не стоит делать опросы типы: "Нравится ли вам новый дизайн сайта?". Ответы будут просто не показательными. И из-за недовольства пользователей легко допустить ошибку — вернуть старую версию сайта.

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

Ну вот с теорией мы закончили и можем приступить к самому сладкому — практике.
Практическая часть
Верстать мы будем страницу: Документация Hamster framework.

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

Исходные коды доступные здесь: Github.

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

Для начала если у вас не установлен node.js, то его нужно скачать по ссылке и установить.

Создаем рабочую директорию проекта. Запускаем консоль и переходим в рабочую директорию командой:
CODE
Создаем новый проект:
CODE
Устанавливаем необходимые расширения npm:
CODE
gulp-postcss@6.4.0 — необходимо ставить именно эту версию, так как на момент публикации был баг в последней версии и не работал корректно @import.

Создаем в директории gulpfile.js — это основной файл который мы будем запускать в проекте.
CODE
Дальше создаем в директории src файл base.css
CODE
@reset — запишет Eric Meyer's “Reset CSS” 2.0
@normalize — запишет normalize.
Выбирайте то, что вам больше по душе.

@box-sizing-reset — сделает box-sizing reset. Если вы не знаете, что это такое и для чего нужно, то можете посмотреть по этой ссылке.

@ruler — добавляет сетку для отладки вертикального ритма.

Остальные ключевые слова начинающиеся с @ это константы, которые мы определим в файле varibales.css. Так же в нем находятся основные настройки hamster framework. Все настройки hamster framewok заключаются в блоке @hamster {} — это глобальные настройки. @ihamster {} — это локальные настройки. @hamster end; сбрасывает локальные настройки и возвращает глобальные. Для чего это нужно вы можете прочесть в документации. Так же в документации разъяснены все параметры.Для нас самыми важными являются:

font-size — базовый размер шрифта, его ставят обычно элементу p и многим строчным элементам по умолчанию.
line-height — межстрочный интервал — вертикальный ритм.
font-ratio — коэффициент для modular scale.

Мы будем использовать для размеров шрифта буквенные алиасы cгенерированные на оcнове modular scale.
CODE
Дальше создадим файл typography.css — это основной файл где будут хранится основные стили для текстовых элементов. fs xxl запишет размер шрифта вместо текстового алиаса с именем xxl. Вы можете создавать свои алиасы, как это сделать описано в документации hamster framework.

Предопределенные алиасы. Чем больше число тем больше размер шрифта.
CODE
Функция spacing() переданное число в параметрах умножает на высоту линии и возвращает полученный размер. Для всех единиц измерения расчеты происходят автоматически. В hamster framewok функций для расчетов несколько, но это самая распространенная. С полным списком функций вы сможете ознакомится по этой ссылке.

adjust-font-size: — для размера шрифта запишет свойство font-size и рассчитает межстрочный интервал. Размер можно задавать в px, em, rem.
CODE
Создадим основной файл style.css и подключим в нем остальные файлы:
CODE
Теперь мы можем смело в консоли вводить:
CODE
На выходе в директории css мы получим файл style.css содержащий наши стили. (Единицы измерения могут быть любые, мы сами выбрали в настройках rem.)
CODE
Но одна небольшая неприятность — все стили были сгенерированы для базового размера 16px. И наш css нисколько не адаптивный и не отзывчивый. Исправим эту ситуацию через медиа запросы и сгенерируем разные размеры для разных размеров экрана. CSS код, который мы будем дублировать, скопируем с помощью макроса @copy в переменную c именем "full", мы можем указать любое произвольное имя переменной. Дальше, указывая параметром имя переменной, с помощью макроса @paste мы вставим этот css код. Для начала вставим его просто как fallback с 16 размером шрифта, если браузер не поддерживает медиазапросы. Медиа запросы поддерживают ~ 98% всех браузеров. И тогда наш css в файле style.css примет вид примерно как ниже.
CODE
Запускаем:
CODE
На выходе получаем адаптированную типографику под разные размеры экрана. Не правда ли очень просто? Не переживайте при этих манипуляциях будут сохранены все пропорции размеров! Все размеры высчитываются как относительные относительно базового размера! Например мы можем записать adjust-font-size: 1.5rem, и фреймфорк сам посчитает размер для нужных единиц измерения указанных в настройках, как unit.

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

Теперь наш style.css примет вид:
CODE
Запускаем:
CODE
Как видим наш css код сократил количество медиа запросов и уменьшил размер выходного файла.
CODE
К сожалению vw + calc поддерживает всего ~94% браузеров, плюс имеется оверхед для браузерных расчетов. Но за этим будущее и можно смело отдавать размеры в vw для современных браузеров.
Если вы хотите ускорить сборку проекта до 200мс, то рекомендую отключить postcss модуль cssnext(если вы его подключаете в своем проекте), и подключить отдельно autoprefixer. Как показала практика cssnext минимум в 5 раз увеличивает скорость сборки проекта.

Подведем итоги
Как вы могли заметить все очень легко и просто, и мы можем генерировать большие объемы похожего css кода с минимальными затратами. Функциональность не ограничивается только генерацией типографики. Вы можете генерировать адаптивные размеры для различных элементов, например кнопок, размеров сайдбаров и т.д. Примеры вы можете найти здесь.
Поделиться
Поделиться
Поделиться
Поделиться
Поделиться
Поделиться
Поделиться
Подписка на новости. Получайте важное первым
ПОДПИСАТЬСЯ