поправити у верстці перед випуском у продакшн?


Це стаття — чек-лист того, що потрібно не забути поправити в будь-якому проекті. Список корисних дрібниць. Весь текст поділений на дві частини. Перша — про прості елементи сторінки, такі як текст, кнопки, зображення, форми та інші. Друга частина про продуктивність, масштабованість, безпека та доступність.
Частина 1
Текст
Розмір шрифту, міжрядковий інтервал
Оптимальна висота рядка (
line-height
) 1.4 — 1.8 від розміру шрифту. Це значення краще вказувати множниками, а не конкретними значеннями в точках. Так воно буде масштабуватися щодо будь-якого розміру шрифту.
Довжина рядка
Обмеження довжини рядка допомагає легше перестрибувати віч з рядка на рядок. Текст зручно читати, якщо в нього зменшується мінімально 6 слів, а максимально 12. Досить використовувати
min-width
та
max-width
.
Довжина рядка впливає на інтерліньяж. На телефонах
line-height
має бути менше, ніж на великому моніторі. Існує цікавий адаптивний підхід (css-шлюзи), який плавно налаштовує розмір шрифту і інтерліньяж під екран.
Обмеження довгих слів
Текст в рядку може виявитися непередбачено великою, в цьому випадку його можна обмежити за допомогою text-overflow.

Вирівнювання по ширині
хто знає, як погано виглядає вирівнювання по ширині (
text-align: justify
). Текст стає важко читати через великих відступів між словами. У книгах і газетах немає таких великих прогалин через переносів у словах. Щоб включити такий перенос потрібно використовувати властивість
hypnens
, воно автоматично проставляє м'які переноси в словах. На жаль, це працює далеко не скрізь, але можна використовувати плагін і словник до нього.


Друкар
З-за того що на клавіатурі немає потрібних клавіш, в інтернеті використовуються знаки, які не відповідають правилам російської мови.
  • Це правильні лапки «», а це комп'ютерні ""
  • Це тире —, а це дефіс -
  • В типографіці також прийнято не розривати привід і слово до якого воно відноситься, навіть якщо привід виявляється в кінці рядка. Щоб зробити правильний перенесення, досить пробіл між словом і прийменником замінити на нерозривний пробіл
     
Всі ці проблеми можна вирішити за допомогою онлайн друкарів, плагінів і передвстановлених розширень на комп'ютер.
Просунуті методи роботи з типографікою
Зворотний зв'язок (наведення, клік, скролл)
Блоки
Зручний інтерфейс відгукується на кожну дію, будь то наведення миші або клік. Нестандартному кликабельному елементу потрібно не забути:
  • Додати звичний курсор руки замість стрілки (
    cursor:pointer
    )
  • Додати ховер. Хоча б просто
    opacity: 0.8
  • Додати аттрибут
    role
    значення
    button
    або
    link
  • Прибрати случаное виділення тексту по подвійному кліку (
    user-select: none
    )
  • Додати оброблювач натискання на enter
  • Передбачити фокус
  • Передбачити спиннер, якщо стан елемента залежить від асинхронного події

Область кліку
Чим більше і ближче об'єкт, тим легше на неї натиснути. Існує навіть математичне правило, яке це описує. Наприклад, у пошуковій видачі Google посиланням є не тільки номер сторінки, але і частина логотипу. Це рятує від випадкових промахів.

Щоб збільшити область кліка, слід використовувати
padding
замість
margin
. Сірим показаний відступ паддингом.

Не накладайте поверх клікабельних елементів інші елементи, наприклад, іконку лупи над инпутом. В крайньому випадку додайте іконці
pointer-events
або вирішите це більш підтримуваним способом (у випадку з лупою, додайте її через
background-image
).
Правильний формат посилання
Якщо посилання є поштовою адресою, вкажіть посилання
mailto:
. Тоді по кліку на неї відразу відкриється поштовий клієнт. Теж саме можна зробити для телефону префіксом
tel:
.
Скролл на айфоне
За замовчуванням, горизонтальний скрол в айфоні стрімчастий і незграбний. Включити звичний скролл з інерцією можна властивістю
-webkit-overflow-scrolling: touch
.
Инпуты
Тег form
Щоб форма працювала в будь-яких браузерах, навіть без js, потрібно використовувати тег
form
за призначенням. Форму можна покращувати дуже довго, аж до відправки даних навіть в офлайні.
Типи
Різні значення атрибуту
type
(email, number, password і інші) включають правильну клавіатуру на телефонах і допомагають валідувати дані
Автофокус
Якщо на сторінці основний елемент пошук, йому можна додати автофокус з допомогою атрибуту
autofocus
. У нього відразу буде можна вводити текст, попередньо не фокусуючись.
Зображення
picture і srcset
останнім часом з'являються нові можливості для роботи з зображеннями. Вони дозволяють уникнути зайвих завантажень для чуйних зображень. На телефон більше не вантажиться важка графіка для комп'ютера. На жаль, є проблеми з підтримкою, але про це все одно варто знати.
Таблиця
Адаптивність
Таблиця спочатку не передбачена під ширину екрану телефону. Є кілька варіантів, як змінювати таблицю під невеликі екрани
  • Зменшити розмір шрифту
  • Обернути таблицю в блок і зробити йому горизонтальний скрол
  • Перевернути. Сдулать таблицю замість короткою і широкою вузькою і довгою
  • Замінити таблицю на кілька списків
Зробити таблицю зручною не просто. Раджу почитати статті про відображення великих таблиць і переверстку.
Компоненти
Теорія близькості
Об'єкти, розташовані близько один до одного, сприймаються пов'язано. Якщо поставити заголовок посередині декількох статей, буде складно розібратися, до якого з текстів відноситься заголовок. До речі, на Хабре саме така помилка. Заголовок параграфа повинен бути ближче до свого параграфу, а не бути рівновіддалений від усіх. Існує маса інших прикладів з помилкою в теорії близькості.

Порожній блок
Буває, що банерна реклама не приходить у банерну позицію, тоді залишається великий незрозумілий пробіл. Щоб його прибрати, досить використовувати псевдоклас
:empty
:
.banner:empty {
display: none;
}

Майже, але не зовсім
Верстка (в плані дизайну) приємного сайту не розвалюється на ходу. Елементи рівне вирівняні, розміри добре підібрані. Подивіться статтю «Майже, але не зовсім», вона допоможе взгянуть на будь-який сайт свіжим поглядом.
Частина 2
Маштабируемость
Поддерживаемость
Кілька простих практик:
  • Використовувати менше фіксованих розмірів. Це дасть можливість легко вмонтувати одні компоненти в інші
  • inherit
    та
    currentColor
    . Вони підтримуються в будь-якому браузері і дозволяють успадковувати стилі

  • короткого написання властивостей. Наприклад,
    background: red
    змінює не один, а відразу 10 стилів, включаючи
    background-color
    ,
    background-size
    ,
    background-repeat
    та інші
  • Не використовувати багато сторонніх бібліотек і хитрих можливостей препроцесорів. Вони заважають іншим розробникам швидко вникнути в суть коду
Архітектура
Важливе умови для масштабування коду — однаковість. Сторонній розробник повинен як можна швидше вникнути в код та продовжити писати в тому ж стилі. Існують безліч методологій найменувань селекторів, в тому числі БЕМ.
Хорошим прикладом однаковості є бутстрап. Навіть незнайомий з проектом розробник легко продовжить писати код. Йому не потрібно буде вникати, він швидше за все вже все знає. Але важливо вміти верстати не тільки на бутстрапе, але і на звичайному css. Все швидко змінюється, навіть бутстрап може пропасти.
Типова сторінка
Якщо проект досить великий, попросіть дизайнера зібрати всі основні компоненти в окремий типовий лист. Сторінки можна буде збирати з готових елементів, як конструктор. Такі типові листи можуть перерости в цілі гайди і бібліотеки компонентів. Це відмінний підхід для великих компаній. Приклади:
Продуктивність
Селектори
Браузер обробляє властивості справа наліво. Селектор
.section a div
спочатку знайде всі елементи
div
на сторінці, потім всі посилання
a
і тільки потім визначить, які саме
a
входять в елемент
.section
. Набагато оптимальніше селектор по класу, наприклад,
.section__link
. Він простіше, менш специфічний і трохи швидше працює. Не варто переживати, що імена класів можуть вийде дуже великими, це ні на що не впливає.
Друга проблема селекторів — невикористовувані селектори. Селектор для пошуку невикористаного елемента обходить всі дерево і нічого не знаходить. Час витрачається даремно.
Анімації
Важкі анімації сильно гальмують сторінку. Найкращі властивості для анимирования —
transform
та
opacity
. Вони менше за інших впливають на продуктивність.
Існує спосіб оптимізувати складні обчислення за рахунок перенесення частини складних обчислень c центрального процесора на графічний. Таке апаратне прискорення можна включити властивістю
transform: translate3d(0, 0, 0)
. Воно створить окремий шар компонування з яким буде працювати графічний процесор. Існує ще один схожий підхід — заздалегідь попередити браузер про майбутні зміни елемента за допомогою will-change.
Не варто зловживати
translate3d
і властивістю
will-change
, більшість оптимізації браузер зробить за вас сам. Почитайте також докладний розбір анімацій на GPU.
Важкі властивості
Не варто використовувати великі радіуси, зайвий ресайзинг картинок (
background-size
) і складні тіні. Браузеру прийдеться робити величезну кількість перерахунків. Наприклад, Airbnb збільшила продуктивність скролла просто прибравши розмиття тіней.
Швидкість завантаження
Стиснути стилі
Конкатенируйте, минифицируйте і кешируйте файли стилів.
Критичні стилі
Критичний CSS це мінімальний набір блокуючого CSS, необхідного для візуалізації верхній частині сторінки. Решта CSS буде завантажена асинхронно пізніше. Проте, у такої практики неї є ряд недоліків:
  • Критичні стилі не вийде кеш в браузері
  • Складно працювати підходить для динамічних сайтів
Префетчинг
Браузер можна попередити про використання на сторінці ресурсів з іншої адреси. Тоді браузер заздалегідь перетворює URL цих ресурсів в IP і не буде витрачати час на пошук DNS.
<link rel="dns-prefetch" href="//example.com">

Крім цього, барузер можна попередити про файли, які обов'язково знадобляться у майбутньому. Браузер до цього часу їх завантажить і збереже в кеш.
<link rel="prefetch" href="image.png">

Існує ще кілька інших технік префетчига, однак ці можливості ще не дуже добре підтримуються браузерами і мають безліч обмежень.
Безпека
Target
Сторінка, відкрита через target="_blank", отримує частковий контроль над відкрила її сторінкою через js властивість window.opener. Цей прийом можна використовувати, щоб перевести користувача на фішинговий сторінку. Щоб уникнути уразливості, додайте до посилання target="_blank" атрибут rel="noopener noreferrer".
Семантика
Верстка
Нативні елементи HTML5 містять правильні семантичные аттрібути. Важливо верстати таблицю
<table>
, форми c допомогою
form
, за допомогою кнопки
<button>
і т. д. Не забудьте поставити аттрибут
alt
в кожній картинці.
ARIA та ролі
Ролі та атрибути ARIA допомагають користуватися сайтом зі скрін-рідера та інших нестандартних технологій. На доступному сайті не повинно бути недоступних з клавіатури елементів управління. Кожен такий елемент повинен мати свій опис. Цей опис може бути невидимим і зазначено через аттрибут
aria-label
.
Спробуйте походити по інтерфейсу за допомогою кнопки таб, зайдіть на сайт з електронної книги або кнопкового телефону (якщо є). Перевірте, що всі елементи управління фокусуються. Не відключайте просто так властивість
outline
. Наприклад, Яндекс фарбує його в свій фірмовий колір.


Порядок фокусування можна підредагувати атрибутів
tabindex
. Зовсім скасувати семантику елемента можна за допомогою
role="opendocument"
(наприклад, щоб використовувана для верстки таблиця не сприймалася як таблиця з даними). Велика кількість інших рекомендацій можна почитати в цій статті про доступність.
Друк
Спробуйте роздрукувати ваш інтерфейс.
Микроразметка
Існують різні словники і синтаксисы мікророзмітки. Вони допомагають різним роботам легше працювати з вашою сторінкою. Суті Schema.org можуть бути корисні для пошукачів, а з допомогою Open Graph можна налаштувати красиве відображення посилання на ваш сайт в публікаціях в соцмережах.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.