Современный интернет развивается огромными темпами и количество пользователей с каждым днем только растет. Если буквально 10 лет назад среднестатистический пользователь был примерно "одинаковый" и по некоторым параметрам отличался минимально, то сейчас эта разница более существенная и заметная. Особенно разница заметна в отличии девайсов и размеров экрана. В ежедневном трафике присутствует очень большое количество пользователей с разным разрешением экрана от самого маленького до самого большого. Плохо оптимизированные сайты имеют меньшее время нахождения пользователя на сайте. И поэтому очень важно оптимизировать сайты для комфортного восприятия его на любом устройстве и разрешении. Как показывает практика большая часть сайтов очень плохо адаптированы под различные устройства и грешат рядом типовых проблем. Все эти проблемы будут рассмотрены в начале статьи на примере нескольких крупных сайтов. А потом мы приступим к практике и сверстаем страничку с адаптивной и отзывчивой типографикой на примерe документации hamster framework.
Если вас заинтересовала эта тема, то добро пожаловать под кат.
Рассмотренные проблемы являются мнением автора, и это мнение может отличатся от пользовательского или создателей этих сайтов. Автор не преследует цель запятнать репутацию этих сайтов, опорочить честь, достоинство и деловую репутацию. Данные примеры даны, чтобы разработчики могли улучшить свои сайты, сделать их ближе к конечному пользователю и расширить свою аудиторию. Так же будут даны советы по оптимизации и примеры сайтов, которые по мнению автора не плохо оптимизированы. Для объективности, выбраны примеры сайтов разных тематик с минимальным пересечением.
Ниже представлены скриншоты сайтов с которыми мы будем работать. Первые два скриншота сделаны на 4к мониторе.
Десктопная версия сайта
Скрин 1
Скрин 2
Скрин 3
Мобильная версия сайта
Скрин 4
Проблемы
Как видно многие сайты вообще не оптимизированы к высоким разрешениям экрана и обычно оптимизация заканчивается верхней границей в 1920px. Желтым выделены блоки, которые живут отдельно от основного контента.
- Не рациональное использование пространства экрана — слишком много пустот. Выделено на картинках голубым цветом. Проявляется не только на 4к разрешении, но и на меньшем разрешении, но в меньшей мере.
Совет: При прототипировании сайта необходио делить экран на 4 равные части и выделить 2 или 3 части посередине под основной контент. Если основной контент сайта — это статья, то центральный блок должен занимать 2/4 — 3/4 экрана. Каждая строка статьи должна включать в себя текст из 45-70 знаков, если вмещается больше, то надо увеличивать размер шрифта для данного размера экрана. Если текст во второстепенном блоке, то оптимальное количество символов 35-55. Данные значения взяты не с потолка, а являются значениями, которые были найдены опытным путем в следствии развития и совершенствования типографики в течении большого количества времени. Основой послужило, то что это оптимальное расстояние для глаз, на которое они могут бегать по экрану без поворота головы и вызова дискомфорта при чтении. Наглядно показал самое тяжелое движение для глаз на картинке ниже. Чем больше диагональ тем сложнее перемещать глаза на следующую строчку. Подробнее это рассмотрено в специализированной литературе.
Прилипание к краям экрана. Основной контент должен быть ровно по середине, ни слева и ни справа. Читать удобно в середине, а не по краям. Чтение по краям вызывает дискомфорт и увеличивает время чтения контента. Довольно частая проблема у сайтов с адаптивным дизайном — не доделали.
- Маленький размер шрифта у основного контента. (К той же проблеме можно отнести больший размер шрифта у второстепенного контента(выделил на 3м скриншоте желтым), а при этом у основного контента меньший размер.). Например часто можно встретить размер шрифта типа 13px. Мне например такой текст не особо комфортно читать при ширине экрана 1920px на десктоп мониторе, и 800px на планшете. Так же встречается, что в сайдбаре размер контента больше чем в блоке с основным контентом.
Совет: Выделите целевую аудиторию сайта. Определите основной контент которым пользуется пользователь, в этом вам могут помочь разные аналитические инструменты(например популярные запросы, по которым приходит пользователь из поисковиков). Основной контент был выделен зеленным цветом. Правило одно — у основного контента размер блока и шрифта больше, у второстепенного меньше или равен размеру основного контента. Местами можно добавить жирный текст. (Для придания важности контенту существует всего пару методов: больше размер, курсив(фигурное оформление), жирность(массивность в случае с интерфейсом), выделение цветом)
Совет2: Чтобы подобрать оптимальный размер шрифта вам в идеале нужно иметь разные устройства. Но можно воспользоваться сочетанием клавиш ctrl + m в firefox. В хроме сtrl + shift + i, а затем ctrl + m. В браузере откроется инструментарий для проверки адаптивности сайта. Плавно изменяете размер экрана и наблюдайте изменения, которые происходят с сайтом. Для десктоп версии сайта оптимальное расстояние от экрана ~75см, для планшета расстояние вытянутой руки, для смартфонов расстояние примерно равное половине вытянутой руки. На этом расстоянии производится подбор размера шрифта! Размер необходимо подобрать таким образом, чтобы на этом расстоянии было комфортно читать весь видимый контент сайта.
- На мобильной версии сайта (4 скриншот) присутствует сайдбар с второстепенным контентом. Так же сайдбар присутствует на 3м скриншоте с десктоп версией сайта.
Не стоит пытаться впихнуть побольше блоков с маленьким размером шрифта. Дизайн должен быть простым с четкой и понятной структурой. Проблема выделена светло красным цветом.
В данном случае красный блок надо переориентировать на горизонтальную ориентацию и вставить после какого-то блока. На мобильной версии сайта желательно избавиться от сайдбаров. А у основного контента выделенного зеленным необходимо увеличить размер шрифта. На 4м сайте шрифт для мобильной версии сайта очень маленький для ширины экрана 800 пикселей. Такой размер самый маленький среди многих сайтов. Это размер на мой взгляд оптимален для ширины экрана 320-480 пикселей.
Относительно хорошо оптимизированные сайты:
- https://www.smashingmagazine.com/
- https://css-tricks.com/ (есть проблема с прилипанием к правому краю)
- https://russian.rt.com/
У RT стоит отметить мобильную версию сайта, которая является одной из лучших. К сожаление эти сайты еще плохо адаптированы под 4к разрешение. Главное стоит запомнить, что сайт должен комфортно читаться на любом устройстве, особенно под конец дня когда снижается острота зрения.
Тут читатель может сказать: — "Все, проблемы известны. Пойду быстрее исправлять." На что, я могу ответить, что не стоит спешить. И ниже расскажу одну психологическую особенность восприятия. Я ее называю плохая привычка.
Плохая привычка
Если человек носил в течении двух лет обувь, которая натирала мозоль и вызывала дискомфорт, то у человека вырабатывается привычка. Теперь если ему дать удобную и хорошую обувь, то он просто ответит: — "Что за ужасную и неудобную обувь вы мне дали? Верните мою обратно!!!". Это связано с тем, что они очень привязались к этой привычке, и если их резко лишить возможности эту привычку повторять, то они чувствуют дискомфорт будто потеряли часть себя. Например по этой причине в психотерапии специально растягивают работу на несколько сеансов, хотя существуют методы быстро решить определенные проблемы. Особо одаренные могу предпринять все усилия, чтобы эту боль вернуть обратно и совсем отказаться от лучшей жизни. По этой же причине все попытки выкатить новую версию сайта часто встречаются пользователями с недовольством, а если сайт очень крупный, то будет еще кучу хайпа. И в этот момент ни в коем случае не стоит делать опросы типы: "Нравится ли вам новый дизайн сайта?". Ответы будут просто не показательными. И из-за недовольства пользователей легко допустить ошибку — вернуть старую версию сайта.
Все изменения желательно делать медленно, чтобы пользователи со временем легче привыкали к новому оформлению.
Ну вот с теорией мы закончили и можем приступить к самому сладкому — практике.
Практическая часть
Верстать мы будем страницу: Документация Hamster framework
Также в документации представлен дополнительный теоретический материал, который будет полезен для ознакомления. Так же если, что-то не будет понятно в статье, то многие вещи разъяснены в документации.
Исходные коды доступные здесь: Github
Если просто описать работу Hamster Framework, то это язык макросов и функций, которые в дальнейшем легко могут трансформироваться в css код и любые единицы измерения. И самый главный плюс по сравнению с препроцессорами — остается максимальная читабельность CSS и мы знаем с какими свойствами работаем, плюс компактный и простой синтаксис.
Для начала если у вас не установлен node.js, то его нужно скачать по ссылке https://nodejs.org/en/ и установить.
Создаем рабочую директорию проекта. Запускаем консоль и переходим в рабочую директорию командой:
cd имядиректорииСоздаем новый проект:
npm initУстанавливаем необходимые расширения npm:
npm install gulp gulp-sourcemaps gulp-postcss@6.4.0 precss postcss-hamster --save-devgulp-postcss@6.4.0 — необходимо ставить именно эту версию, так как на момент публикации был баг в последней версии и не работал корректно import.
Создаем в директории gulpfile.js — это основной файл который мы будем запускать в проекте.
var gulp = require("gulp"),
sourcemaps = require("gulp-sourcemaps"),
postcssgulp = require("gulp-postcss"),
precss = require("precss"),
hamster = require("postcss-hamster");
gulp.task("css", function () {
var processors = [precss({
"lookup": false
}), hamster];
return gulp.src("./src/style.css")
.pipe(sourcemaps.init())
.pipe(postcssgulp(processors))
.pipe(sourcemaps.write("."))
.pipe(gulp.dest("./css"));
});
gulp.task("default", ["css"]);Дальше создаем в директории src файл base.css
/*@normalize;*/
@reset;
@box-sizing-reset;
nav {
user-select:none;
}
body {
font-family: @font-family;
color: @font-color;
background-color: #dee6ea;
font-weight: @font-weight;
height: 100%;
position: relative;
}
@ruler;@reset — запишет Eric Meyer's “Reset CSS” 2.0
@normalize — запишет normalize.
Выбирайте то, что вам больше по душе.
@box-sizing-reset — сделает box-sizing reset. Если вы не знаете, что это такое и для чего нужно, то можете посмотреть по этой ссылке: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
@ruler — добавляет сетку для отладки вертикального ритма.
Остальные ключевые слова начинающиеся с @ это константы, которые мы определим в файле varibales.css. Так же в нем находятся основные настройки hamster framework. Все настройки hamster framewok заключаются в блоке @hamster {} — это глобальные настройки. @ihamster {} — это локальные настройки. @hamster end; сбрасывает локальные настройки и возвращает глобальные. Для чего это нужно вы можете прочесть в документации. Так же в документации разъяснены все параметры.
Для нас самыми важными являются:
font-size — базовый размер шрифта, его ставят обычно элементу p и многим строчным элементам по умолчанию.
line-height — межстрочный интервал — вертикальный ритм.
font-ratio — коэффициент для modular scale.
Мы будем использовать для размеров шрифта буквенные алиасы cгенерированные на оcнове modular scale.
@hamster {
/* Base Font settings */
--font-size: 16px;
/* line height in pixels like 24px or relative value like 1.5 without em, rem! */
--line-height: 1.35;
--font-ratio: 1.2;
--remove-comments: true;
/* Vertical Rhythm settings */
--unit: rem;
--px-fallback: true;
--rem-fallback: false;
--properties: extend;
--ruler-style: switch ruler-debug;
--ruler-color: rgba(2, 179, 228, .7);
--ruler-icon-colors: #fff #02b3e4;
--ruler-icon-position: "position:fixed;top: spacing(1.125);left: spacing(.625);";
--ruler-icon-size: spacing(.75);
--ruler-pattern: 1 0 0 0;
--ruler-scale: 4;
--ruler-thickness: 1;
--round-to-nearest-half-line: false;
--min-line-padding: 1px;
/* Custom Typography constants */
--font-weight: 400;
--font-color: #304458;
--header-color: #02b3e4;
--sheader-color: #DA083D;
--background-color: #f5f5f5;
--block-color: #F2FBFF;
--hover-color: #1bba13;
--footer-color: #1C2733;
--wrapper-background: #fff;
--code-color: #faf9fa;
--font-family: Roboto, "Open Sans", "PT Sans", "Segoe UI", "Helvetica Neue", Helvetica, Verdana, Tahoma, Arial, sans-serif;
}
Дальше создадим файл typography.css — это основной файл где будут хранится основные стили для текстовых элементов. fs xxl запишет размер шрифта вместо текстового алиаса с именем xxl. Вы можете создавать свои алиасы, как это сделать описано в документации hamster framework.
Предопределенные алиасы. Чем больше число тем больше размер шрифта.
Alias Short Alias Size
tiny t -2
small s -1
base b 0
medium m 1
large l 2
xlarge xl 3
xxlarge xxl 4
xxxlarge xxxl 5Функция spacing() переданное число в параметрах умножает на высоту линии и возвращает полученный размер. Для всех единиц измерения расчеты происходят автоматически. В hamster framewok функций для расчетов несколько, но это самая распространенная. С полным списком функций вы сможете ознакомится по этой ссылке.
adjust-font-size: — для размера шрифта запишет свойство font-size и рассчитает межстрочный интервал. Размер можно задавать в px, em, rem.
%strong {
font-weight: 500;
}
%hlight {
color: @sheader-color;
}
h1 {
text-align: center;
font-weight: 600;
adjust-font-size: fs xxl;
color: #fff;
margin-top: spacing(1);
margin-bottom: spacing(1);
}
h2 {
@extend %strong;
color: @header-color;
adjust-font-size: fs xl;
margin-top: spacing(2);
margin-bottom: spacing(1);
padding-left: spacing(1);
padding-right: spacing(1);
border-left: spacing(.2) solid @header-color;
background: @code-color;
}
h3 {
@extend %hlight;
adjust-font-size: fs l;
margin-top: spacing(2);
margin-bottom: spacing(1);
}
h4 {
@extend %hlight;
adjust-font-size: fs m;
margin-top: spacing(1);
}
h5 {
@extend %hlight;
adjust-font-size: fs b;
margin-top: spacing(1);
}
h6 {
@extend %hlight;
adjust-font-size: fs s;
margin-top: spacing(1);
}
strong {
@extend %strong;
}
p {
adjust-font-size: fs b;
@hyphens;
margin-bottom: spacing(1);
}
a {
color: @header-color;
&:hover {
color: @font-color;
}
}
ul,
ol {
adjust-font-size: fs b;
list-style-position: inside;
margin-bottom: spacing(1);
}
ul {
list-style: disc inside;
}
ol {
list-style: decimal inside;
}
ul a, ol a {
text-decoration: none;
}
code,
pre {
font-family: "Roboto Mono", Inconsolata, monospace;
margin: 0;
padding: 0;
text-align: left;
tab-size: 4;
hyphens: none;
@forcewrap;
}Создадим основной файл style.css и подключим в нем остальные файлы:
@import "variables.css";
@import "base.css";
@import "typography.css";Теперь мы можем смело в консоли вводить:
gulpНа выходе в директории css мы получим файл style.css содержащий наши стили. (Единицы измерения могут быть любые, мы сами выбрали в настройках rem.)
h1 {
text-align: center;
font-weight: 600;
font-size: 2.0736rem;
line-height: 2.7rem;
color: #fff;
margin-top: 1.35rem;
margin-bottom: 1.35rem;
}
h2 {
color: #02b3e4;
font-size: 1.728rem;
line-height: 2.7rem;
margin-top: 2.7rem;
margin-bottom: 1.35rem;
padding-left: 1.35rem;
padding-right: 1.35rem;
border-left: 0.27rem solid #02b3e4;
background: #faf9fa;
}
h3 {
font-size: 1.44rem;
line-height: 2.7rem;
margin-top: 2.7rem;
margin-bottom: 1.35rem;
}
...Но одна не большая неприятность — все стили были сгенерированы для базового размера 16px. И наш css нисколько не адаптивный и не отзывчивый. Исправим эту ситуацию через медиа запросы и сгенерируем разные размеры для разных размеров экрана. CSS код, который мы будем дублировать, скопируем с помощью макроса @copy в переменную c именем "full", мы можем указать любое произвольное имя переменной. Дальше, указывая параметром имя переменной, с помощью макроса @paste мы вставим этот css код. Для начала вставим его просто как fallback с 16 размером шрифта, если браузер не поддерживает медиазапросы. Медиа запросы поддерживают ~ 98% всех браузеров. И тогда наш css в файле style.css примет вид примерно как ниже.
@import "variables.css";
@import "base.css";
@copy full {
@import "typography.css";
}
@paste full;
@media screen and (max-width: 479px) {
@ihamster {
--font-size: 14px;
--line-height: 1.25;
}
@baseline html;
@ruler;
@paste full;
@hamster end;
}
@media screen and (min-width: 480px) and (max-width: 599px) {
@ihamster {
--font-size: 15px;
--line-height: 1.3;
}
@baseline html;
@ruler;
@paste full;
@hamster end;
}
@media screen and (min-width: 800px) and (max-width: 1279px) {
@ihamster {
--font-size: 18px;
--line-height: 1.4;
}
@baseline html;
@ruler;
@paste full;
@hamster end;
}
@media screen and (min-width: 1280px) and (max-width: 1599px) {
@ihamster {
--font-size: 19px;
--line-height: 1.5;
}
@baseline html;
@ruler;
@paste full;
@hamster end;
}
@media screen and (min-width: 1600px) and (max-width: 1919px){
@ihamster {
--font-size: 20px;
--line-height: 1.55;
}
@baseline html;
@ruler;
@paste full;
@hamster end;
}Запускаем:
gulpНа выходе получаем адаптированную типографику под разные размеры экрана. Не правда ли очень просто? Не переживайте при этих манипуляциях будут сохранены все пропорции размеров! Все размеры высчитываются как относительные относительно базового размера! Например мы можем записать adjust-font-size: 1.5rem, и фреймфорк сам посчитает размер для нужных единиц измерения указанных в настройках, как unit.
Немного неудобно подбирать размеры в ручную экспериментальным путем. Но я пошел еще дальше и сделал первый в мире инструмент, который автоматически рассчитывает вертикальный ритм на основе размеров видимой области браузера.
Как это работает описано в статье.
Теперь наш style.css примет вид:
@import "variables.css";
@import "base.css";
@copy full {
@import "typography.css";
}
@paste full;
@media screen and (max-width: 799px) {
@ihamster {
--font-size: 14px;
--line-height: 1.25;
--to-font-size: 18px;
--to-line-height: 1.4;
--viewport: 320px 800px;
--unit: vw;
}
@ruler;
@paste full;
@hamster end;
}
@media screen and (min-width: 800px) and (max-width: 1919px){
@ihamster {
--font-size: 18px;
--line-height: 1.4;
--to-font-size: 21px;
--to-line-height: 1.5;
--viewport: 800px 1920px;
--unit: vw;
}
@ruler;
@paste full;
@hamster end;
}
@media screen and (min-width: 1920px){
@ihamster {
--font-size: 21px;
--line-height: 1.5;
--to-font-size: 42px;
--to-line-height: 1.6;
--viewport: 1920px 3840px;
--unit: vw;
}
@ruler;
@paste full;
@hamster end;
}--font-size: 21px; // Минимальный размер шрифта, будет при размере экрана 1920px
--line-height: 1.5; // Минимальная высота линии, будет при размере экрана 1920px
--to-font-size: 42px; // Максимальный размер шрифта, будет при размере экрана 3840px
--to-line-height: 1.6; // Максимальная высота линии, будет при размере экрана 3840px
--viewport: 1920px 3840px; // Минимальное и максимальное значение ширины экрана, на основе этих размеров будут динамически вычислятся размеры.
--unit: vw; // Выходные единицы измерения vw + минимальные расчеты в calcЗапускаем:
gulp
Как видим наш css код сократил количество медиа запросов и уменьшил размер выходного файла.
@media screen and (max-width: 799px) {
h1 {
text-align: center;
font-weight: 600;
font-size: calc(1.728vw + 23.5008px);
line-height: calc(3.2083vw + 24.7333px);
color: #fff;
margin-top: calc(1.6042vw + 12.3667px);
margin-bottom: calc(1.6042vw + 12.3667px);
}
h2 {
color: #02b3e4;
font-size: calc(1.44vw + 19.584px);
line-height: calc(3.2083vw + 24.7333px);
margin-top: calc(3.2083vw + 24.7333px);
margin-bottom: calc(1.6042vw + 12.3667px);
padding-left: calc(1.6042vw + 12.3667px);
padding-right: calc(1.6042vw + 12.3667px);
border-left: calc(0.3208vw + 2.4733px) solid #02b3e4;
background: #faf9fa;
}
h3 {
font-size: calc(1.2vw + 16.32px);
line-height: calc(3.2083vw + 24.7333px);
margin-top: calc(3.2083vw + 24.7333px);
margin-bottom: calc(1.6042vw + 12.3667px);
}
...
}
@media screen and (min-width: 800px) and (max-width: 1919px){
h1 {
text-align: center;
font-weight: 600;
font-size: calc(0.5554vw + 32.8814px);
line-height: calc(1.125vw + 41.4px);
color: #fff;
margin-top: calc(0.5625vw + 20.7px);
margin-bottom: calc(0.5625vw + 20.7px);
}
h2 {
color: #02b3e4;
font-size: calc(0.4629vw + 27.4011px);
line-height: calc(1.125vw + 41.4px);
margin-top: calc(1.125vw + 41.4px);
margin-bottom: calc(0.5625vw + 20.7px);
padding-left: calc(0.5625vw + 20.7px);
padding-right: calc(0.5625vw + 20.7px);
border-left: calc(0.1125vw + 4.14px) solid #02b3e4;
background: #faf9fa;
}
h3 {
font-size: calc(0.3857vw + 22.8343px);
line-height: calc(1.125vw + 41.4px);
margin-top: calc(1.125vw + 41.4px);
margin-bottom: calc(0.5625vw + 20.7px);
}
....
}
...К сожалению vw + calc поддерживает всего ~94% браузеров, плюс имеется оверхед для браузерных расчетов. Но за этим будущее и можно смело отдавать размеры в vw для современных браузеров.
PS. Возможно вы могли заметить, что на некоторых размерах экрана, контент на сайте документации чуть плывет относительно сетки вертикального ритма — это связано с технологией sub-pixel rendering и все браузеры реализуют ее по разному и по разному округляют значения. Особенно это заметно при значениях в calc. https://johnresig.com/blog/sub-pixel-problems-in-css/
Если вы хотите ускорить сборку проекта до 200мс, то рекомендую отключить postcss модуль cssnext(если вы его подключаете в своем проекте), и подключить отдельно autoprefixer. Как показала практика cssnext минимум в 5 раз увеличивает скорость сборки проекта.
Подведем итоги. Как вы могли заметить все очень легко и просто, и мы можем генерировать большие объемы похожего css кода с минимальными затратами. Функциональность не ограничивается только генерацией типографики. Вы можете генерировать адаптивные размеры для различных элементов, например кнопок, размеров сайдбаров итд. Примеры вы можете найти ЗДЕСЬ.
Все предложения и пожелания вы можете высказать в gitter. А так же можете принять участие в разработке и развитии проекта.
Поддержка / Обсуждение: Gitter
Документация: RU
Всем легкой верстки и успешных проектов!
С уважением, разработчик Hamster Framework.