Шпаргалка: Виды вёрстки для тестировщика

Резиновая вёрстка

Ширина элементов задаётся в процентах, поэтому сайт 'тянется' и 'сжимается' вместе с окном браузера.

На что обращать внимание:

• Проверить поведение на очень узких экранах: не становится ли текст нечитаемым?
• Проверить поведение на очень широких экранах: не 'разъезжаются' ли блоки слишком сильно?

Адаптивная вёрстка

Сайт меняет свою структуру на определённых 'контрольных точках' (breakpoints).

На что обращать внимание:

• Проверить все контрольные точки (breakpoints).
• Протестировать работу 'бургер-меню' на мобильных разрешениях.
• Убедиться, что интерактивные элементы достаточно большие для нажатия пальцем.

Flexbox-вёрстка

Современный подход с использованием 'display: flex', который позволяет легко выравнивать и распределять элементы.

На что обращать внимание:

• Проверить выравнивание элементов (по центру, по краям).
• Проверить, как элементы ведут себя при добавлении/удалении контента.
• Убедиться, что элементы корректно переносятся на новую строку (flex-wrap).

Блочная вёрстка (div-вёрстка)

Современный стандарт, где элементы структурированы с помощью блоков `<div>`.

На что обращать внимание:

• Корректность отступов (margin) и полей (padding).
• Правильный порядок элементов в потоке документа (DOM).
• Проверить, как блоки взаимодействуют друг с другом (схлопывание отступов).

Табличная вёрстка

Устаревший подход, где всё строится с помощью HTML-таблиц `<table>`.

На что обращать внимание:

• Вёрстка часто 'рассыпается' на узких экранах.
• Сложно поддерживать и вносить изменения.
• Проверить корректность объединения ячеек (`colspan` и `rowspan`).