Як відрізнити хорошу верстку від поганої? Коротка інструкція нижче.
кросбраузерність
Кросбраузерність - здатність сайту відображатися однаково в усіх браузерах.
Погана верстка. Сайт відображається по-різному в залежності від браузера. У найгірших варіантах верстка «роз'їжджається» на старих версіях. Найгірше справи йдуть з браузером Internet Explorer.
Хороша верстка. Сайт виглядає ідентично у всіх браузерах. Варто зауважити, що зовсім не обов'язково верстати під всі браузери, є ті, які вже вийшли з використання.
Продумана структура каркаса сайту
Погана верстка. Починають верстати дрібні елементи перш ніж продумали каркас всього сайту. Раніше зверстані елементи починають скріплювати один з одним усіма можливими способами, що тягне за собою зайвий і не структурований код.
Блокова верстка проти табличній
Погана верстка. Використовують таблиці для розташування елементів сайту. При такій структурі вміст таблиць почне відображатися тільки після того, як буде завантажена вся таблиця (вся сторінка). Це тягне до значного збільшення часу завантаження сторінок сайту та громіздкою коду. Незважаючи на очевидні мінуси, багато верстальники досі застосовують табличну верстку.
Хороша верстка. Застосовують блочну верстку (верстку на div-ах). Такий підхід дозволяє істотно зменшити кількість коду і збільшити швидкість завантаження вмісту сторінок. Збільшення швидкості досягається за рахунок того, що div-и завантажуються по черзі, користувачеві відразу промальовується верхні блоки сайту, поки він почне прокручувати сторінку вниз, вже будуть промальовані і всі інші.
семантика коду
Хороша верстка. Повне розділення контенту і оформлення. Html-теги використовують тільки для логічного поділу тексту (заголовки, абзаци, списки). Для візуалізації підключають файли таблиць стилів css і скрипти. Це професійний підхід до верстки.
оптимізація зображень
Зображення зліва займає 63 Кб, праворуч - 15 Кб. Для людського ока різниця зовсім не видно. Скоротити розмір файлу в 4 рази вдалося за допомогою правильної оптимізації.
Погана верстка. Зображення для фонів сайту зберігають звичайним способом. Таким чином, передається багато непотрібної інформації, яка не використовується, а місце займає. Використовують великі зображення для повторюваних фонів.
Хороша верстка. Зберігають зображення спеціально для web-пристроїв, де прибирають всю зайву інформацію і можна регулювати якість: в більшості випадків можна скоротити вагу зображення в 2-3 рази без втрати якості помітного для ока. Для повторюваних фонів застосовують патерни, це невеликі зображення, які при з'єднанні не залишають швів.
Від якості верстки безпосередньо залежить зовнішній вигляд і сприйняття відвідувачами вашого сайту, тому це не та частина, на якій варто заощаджувати.