1. 1 Перевірка валідності
2. 2 Онлайн-сервіси
3. 3 Реальні пристрої
4. 4 Зоопарк браузерів
5. 5 Різний контент
6. 7 Вибір фреймворка
7. 8 Вихідні тексти
8. 9 Продуктивність
9. 10 Семантика

Незважаючи на низький поріг входження, верстка є важливим етапом у створенні будь-якого інтернет-проекту. Але найчастіше верстці приділяється незаслужено мало уваги. Незважаючи на те, що при прийомі результатів роботи верстальника особливих питань не виникає і всіх все влаштовує, це зовсім не виключає того, що верстка виконана неякісно. Тому до перевірки верстки, з якої напевно доведеться мати справу іншим верстальщикам, програмістам, сеошників (в першому пункті пояснюється, чому), а головне - користувачам, потрібно підійти не менш грунтовно, ніж, скажімо, до дизайну.

У цій статті я зібрав 10 вимог, які варто пред'являти до верстальщику.

1 Перевірка валідності

Дотримання стандартів гарантує правильне відображення сайту в браузерах, які теж розробляються з урахуванням стандартів. І навіть якщо все збігається з макетом, тобто кілька нюансів, які проявлять себе якщо не відразу, то пізніше; в будь-якому випадку, рекомендується верстати відповідно до стандартів, які розробляються аж ніяк не навмання. Валідність верстки є одним з великого числа факторів ранжирування для пошукових систем.

Перевірити валідність HTML-частини: http://validator.w3.org/nu/

Перевірити валідність CSS: https://jigsaw.w3.org/css-validator/

валідація CSS

2 Онлайн-сервіси

Крім офіційних валідаторів, які перевіряють лише відповідність стандартам, існують також сервіси, які зроблять аналіз CSS-файлів і дадуть поради щодо їх оптимізації та організації.

Особисто мені подобається перший сервіс.

Аналіз CSS за допомогою TestMyCSS

3 Реальні пристрої

В даний час різноманітність дозволів екранів досить значна, тому протестувати верстку на адаптивність найпростіше прямо в браузері - підійде навіть банальне зміна розмірів області відображення сайту. Однак завжди варто мати під рукою пристрої з різними характеристиками (наприклад, PPI) або знайомих, цими пристроями володіють.

Популярність дозволів екрану

4 Зоопарк браузерів

Традиційно у верстальників встановлені всі популярні браузери, кожен з яких має своєрідні особливості. Але буває так, що верстальник ледачий або йому мало платять, тому він працює тільки в одному браузері, який вважає еталоном, а інші не потрібні.

Автоматизувати перевірку можна за допомогою даного сервісу https://developer.microsoft.com/en-us/microsoft-edge/tools/screenshots/ , Який згенерує скріншоти сайту з різних браузерів і пристроїв.

Популярність браузерів

5 Різний контент

Найчастіше при розробці дизайну сайту упускається важливий момент - вміст може бути різного об'єму (дозвіл зображення, кількість символів тексту). Анонс новини може бути не тільки в 4 рядки, як красиво намалював дизайнер, а в 3 або 5. А, може, і все 100. Зображення в слайдері, завантажене контент-менеджером, може раптом виявитися не еталонного розміру, як намальовано в макеті, а взагалі поверненим на 90 градусів. Або взагалі не існувати.

Саме такі моменти і повинен передбачити верстальник. Звичайно, деякі речі зазвичай прийнято вирішувати в тому числі і на стороні сервера, наприклад, генерація мініатюр і виведення зображення за замовчуванням, але хорошим тоном вважається передбачати це і на рівні верстки.

Також верстальник повинен передбачати такі ситуації, коли цілі блоки сайту (шапка, підвал, новини, слайдер і ін.) Можуть ховатися або змінюватися між собою місцями. В даному випадку вкрай бажано, щоб, наприклад, обмін місцями двох блоків не привів до яких-небудь несподіванок, наприклад, значна зміна вертикальних відступів між цими або сусідніми блоками.

7 Вибір фреймворка

Фреймворки служать для прискорення розробки. Одним з популярних фреймворків є Bootstrap, який містить безліч готових типових рішень (кнопки, типографіка, форми, модальні вікна та ін.).

Але у цієї зручності є зворотна сторона - обсяг даних. Використання фреймворків може уповільнити роботу сайту, що особливо помітно на мобільних пристроях або при повільному з'єднанні.

8 Вихідні тексти

Якщо верстальник використовує препроцесори та інші засоби автоматизації, то вам двічі пощастило. По-перше, це говорить про те, що верстальник, швидше за все, хороший. По-друге, супровід проекту в такому випадку стає простіше.

Але якщо проект буде переходити з рук в руки, то варто попереджати наступних виконавців про це.

9 Продуктивність

Перегляд діафільму замість плавно прокручуваному сторінки може зіпсувати враження від сайту. Так як верстальник звичайно треба макету, то варто з розумом підійти до розробки дизайну і не захоплюватися Паралакс, анімаціями і іншими візуальними ефектами, які можуть справити на відвідувача не те враження, яке очікується.

Взагалі, це відноситься в тому числі і до дизайнера.

Статті по темі:

10 Семантика

Якщо верстальник ліпить все на одних div-ах, то це поганий верстальник. У HTML5, про який відомо вже досить давно, і для якого крім офіційних документів існує незліченна кількість посібників, уроків та інших освітніх способів донесення інформації.

Інтерактивні елементи на зразок кнопок теж варто реалізовувати за допомогою тега button, а не div або span.

Статті по темі: