Вёрстка

Чем вёрстка отличается от дизайна и разработки?

Дизайн определяет внешний вид страниц, вёрстка переносит этот вид в код, который читает браузер, а разработка создаёт функции, которые сохраняют и обрабатывают данные, — например, запись и оплату. На небольших сайтах один человек нередко совмещает несколько этапов.

При вёрстке в основном используют три языка. HTML отвечает за каркас содержимого — заголовки, тексты, фото, CSS — за оформление: цвета, размеры, расположение, а JavaScript — за движение: открытие меню, перелистывание фото.

Вёрстка важна для вас потому, что клиенты видят не макет, а свёрстанные страницы. Даже при одном и том же макете тщательная вёрстка делает сайт удобнее для чтения с телефона и быстрее.

Сайт-визитку без записи и оплаты иногда можно завершить одним дизайном и вёрсткой. А если нужны запись и оплата, добавляется этап подключения разработанных функций к свёрстанным страницам, и сроки увеличиваются.

Как понять, что вёрстка сделана хорошо?

Качество вёрстки — это не столько совпадение с макетом, сколько то, что страница не разваливается на разных экранах и в разных ситуациях. Даже при одинаковом внешнем виде от того, как написан код, зависят видимость в поиске и скорость.

Эти критерии не видны глазу, и проверить их самому сложно, но достаточно спросить подрядчика, «по каким критериям проверяли». Можно также вставить адрес в бесплатный инструмент Google PageSpeed Insights и посмотреть результаты проверки скорости.

Веб-доступность нужна не только людям с инвалидностью. Страница с достаточным контрастом текста и фона и понятными надписями на кнопках удобна и тем, кто смотрит телефон на солнце, и пожилым клиентам, которые увеличивают шрифт.

• Оформлены ли заголовки и подзаголовки настоящими тегами заголовков, чтобы поисковики и программы экранного доступа понимали структуру
• Не наезжают ли друг на друга текст и фото при любой ширине — на телефоне, планшете, компьютере
• Уменьшен ли вес фото, чтобы страница быстро открывалась даже при медленном интернете
• Достаточно ли крупные кнопки для нажатия пальцем
• Не обрезается ли содержимое, если увеличить шрифт в настройках телефона

Как писать описания к фото (alt)?

Описание к фото (alt) — это короткая фраза, которая передаёт содержание фото тем, кто его не видит. Её читают, когда фото не загрузилось, а также клиентам, которые слушают сайт через программу экранного доступа.

Подписи вроде «фото» или «изображение1» не несут никакой информации. Для фото из меню кафе конкретно опишите, что на нём: например, «кусочек клубничного торта со сливками и американо».

Google тоже называет alt самым важным атрибутом, передающим информацию об изображении в поиске по картинкам. Но перечислять ключевые слова через силу, наоборот, вредно — пишите естественную фразу, описывающую фото. Для бессмысленных декоративных изображений, например узоров, описание правильно оставить пустым.

Как проверить свёрстанные страницы?

Если смотреть результат вёрстки только на одном устройстве, легко пропустить проблемы. По порядку ниже за 10–15 минут можно найти большинство из них.

Найдя проблему, сообщите, на каком устройстве и на какой странице она возникла, и приложите скриншот. Проблемы вёрстки часто проявляются только на определённых моделях или ширине экрана, поэтому название устройства сильно ускоряет исправление.

При проверке удобно держать рядом макет и сравнивать. Мелкие отличия из-за ширины экрана естественны, поэтому смотрите в первую очередь, не пропала ли информация и не изменился ли порядок.

1. 01Откройте одну и ту же страницу на своём телефоне и на телефонах других моделей у родных или сотрудников.
2. 02Поверните телефон горизонтально и проверьте, не разваливается ли страница.
3. 03Увеличьте шрифт в настройках телефона и откройте страницу снова.
4. 04На компьютере медленно сужайте окно браузера и смотрите, как перестраиваются колонки.
5. 05Отключите Wi-Fi, откройте через мобильный интернет и проверьте, не слишком ли долго грузятся фото.
6. 06Нажмите хотя бы раз все пункты меню, кнопки и ссылки на номер телефона.

Какие проблемы чаще всего возникают на этапе вёрстки?

Самая частая проблема — короткий временный текст из макета заменяют длинным реальным, и он не помещается в блок. Если названия процедур в салоне или описания мастер-классов длинные, на телефоне строки много раз переносятся и расположение «плывёт».

Таблицы с большим числом колонок, как прайс-лист или расписание, на телефоне легко вылезают за край и обрезаются. Для такого содержимого на телефоне может понадобиться другое расположение — например, карточки.

На страницах с большим количеством фото, как карточки товаров мастерской, первый экран откроется быстрее, если загружать фото по мере приближения к ним (отложенная загрузка). Спросите подрядчика, как он обеспечивает скорость страниц с большим количеством фото.

• Тяжёлые оригинальные фото загружены как есть, и первый экран открывается медленно
• На телефоне попап закрывает весь экран, и трудно найти кнопку закрытия
• Тяжёлые файлы шрифтов, из-за которых текст появляется с задержкой
• Информация, видимая только на компьютере, отсутствует на телефоне

Что спросить у веб-студии о вёрстке?

Выбирать вёрстку вам не нужно, но если спросить о критериях, станет понятно, какое качество обещает подрядчик.

После запуска обновления операционной системы телефона или браузера изредка меняют отображение страниц. Заодно уточните, исправляют ли такое в рамках техподдержки.

Спросите и о том, подстраивается ли сайт под телефон адаптивно в рамках одного сайта или для телефона делают отдельную версию. Во втором случае при правках может понадобиться менять содержимое в двух местах.

• На каких устройствах и в каких браузерах проверяют сайт
• Уменьшают ли вес фото и проверяют ли скорость
• Закладывают ли основы поиска · доступности: описания к фото (alt) · структуру заголовков
• Кто и как будет править тексты вроде цен · часов работы в будущем