Чек-лист правильной верстки сайтов

В этой статье описаны основные правила, которых придерживается наша команда по разработке при воплощении в жизнь новых проектов.

Итак, всё по порядку:

1. Кликабельные контакты

Все телефонные номера, e-mail адреса, контакты skype, viber, whatsapp и других распространенных мессенджеров, а также адреса оформляются не просто текстовой информацией, а в виде ссылок, позволяющих напрямую взаимодействовать с ними без необходимости выделять, копировать и вставлять куда-либо.

Т.е. чтобы позвонить по номеру, или отправить письмо на указанные e-mail, или связаться с организацией через skype, достаточно просто нажать на элемент и ваш девайс будет перенаправлен на необходимый сервис.

2. Удобная навигация

Основные разделы сайта выносятся в верхнее (основное) меню

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

3. Принцип сетки

В проектах мы стремимся следовать так называемому «принципу сетки». Его суть в ровном и грамотном разбиении контента сайта на области и разделы. Параллельно следим за правильным горизонтальным и вертикальным выравниванием объектов на странице.

4. Типографика

В своих проектах мы стремимся следовать всем правилам типографики. Задаем все необходимые стили оформления, отступы и размеры основным объектам (заголовкам, абзацам, ссылкам, маркированным и нумерованным спискам, изображениям, таблицам и т. д.). Таким образом клиент, наполняя сайт контентом, может не волноваться за правильность и грамотность его отображения на сайте.

5. Помощь пользователю

Для правильности заполнения форм, через которые происходит связь клиента (пользователя) с организацией, мы размещаем примеры заполнения тех или иных полей, а также подсказки, какого рода информацию необходимо ввести.

6. Кроссбраузерность

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

• Google Chrome
• Mozilla Firefox
• Safari
• Opera
• Microsoft Edge

Также в обязательном порядке мы проверяем корректное отображение сайта на разных операционных системах (Windows, MacOS, iOS, Android).

7. Адаптивность

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

8. Скорость загрузки и оптимизация кода

Все наши проекты после верстки проходят тщательную проверку на скорость загрузки страницы, т.к. этот параметр в значительной степени влияет на продвижение проекта и конверсию. Если проект имеет показатели Google PageSpeed-теста меньше 70, то он отправляется на доработку.

Также все наши сайты проходят проверку на соблюдение всех правил верстки, т.н. спецификации. Для этого используется валидатор верстки, разработанный компанией W3C (Консорциумом Всемирной паутины).