Современный интернет развивается огромными темпами и количество пользователей с каждым днем только растет. Если буквально 10 лет назад среднестатистический пользователь был примерно "одинаковый" и по некоторым параметрам отличался минимально, то сейчас эта разница более существенная и заметная. Особенно разница заметна в отличии девайсов и размеров экрана, на которых пользователь просматривает веб страницу. В ежедневном трафике присутствует очень большое количество пользователей с разрешением экрана от самого маленького до самого большого. И поэтому необходимо оптимизировать сайты для комфортного восприятия его на любом устройстве и разрешении. Как показывает практика большая часть сайтов очень плохо оптимизированы под разные устройства и грешат рядом типовых проблем. Все эти проблемы будут рассмотрены в начале статьи на примере нескольких крупных сайтов. А потом мы приступим к практике и сверстаем страничку с адаптивной и отзывчивой типографикой на пример документации 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
Для начала если у вас не установлен node.js, то его нужно скачать по ссылке https://nodejs.org/en/ и установить.
Создаем рабочую директорию проекта.
Запускаем консоль и переходим в рабочую директорию командой:
cd имядиректории
Создаем новый проект:
npm init
Устанавливаем необходимые расширения npm:
npm install gulp gulp-sourcemaps gulp-postcss@6.3.0 precss postcss-hamster --save-dev
gulp-postcss@6.3.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. Если вы знаете, что это такое и для чего нужно, то советую вбить в поисковик "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.
@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 функций для расчетов несколько, но это самая распространенная. С полным списком функций вы сможете ознакомится по этой ссылке https://h0tc0d3.github.io/hamster/hamster-ru.html#helpers
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 содержащий наши стили. Но одна не большая неприятность — все стили были сгенерированы для базового размера 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; }
Не правда ли очень просто? Не переживайте при этих манипуляциях будут сохранены все пропорции размеров!
Немного неудобно подбирать размеры в ручную экспериментальным путем. Но я пошел еще дальше и сделал первый в мире инструмент, который автоматически рассчитывает вертикальный ритм на основе размеров видимой области браузера.
Как это работает описано статье https://habrahabr.ru/company/mailru/blog/315196/
Теперь наш 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 принял более компактный вид.
К сожалению vw + calc поддерживает всего ~94% браузеров, плюс имеется оверхед для браузерных расчетов. Но за этим будущее и можно смело отдавать размеры в vw для современных браузеров.
Подведем итоги. Как вы могли заметить все очень легко и просто, и мы можем генерировать большие объемы похожего css кода с минимальными затратами. Функциональность не ограничивается только генерацией типографики. Вы можете генерировать адаптивные размеры для разных элементов. Дополнительные примеры вы можете найти по ссылке: https://github.com/h0tc0d3/postcss-hamster/blob/master/web/src/
Все предложения и пожелания вы можете высказать в gitter. А так же можете принять участие в разработке и развитии проекта.
Поддержка / Обсуждение: Gitter.
Документация: RU.
Всем легкой верстки и успешных проектов!
С уважением, разработчик Hamster Framework.
ссылка на оригинал статьи https://habrahabr.ru/post/328812/
Добавить комментарий