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

13.03.2018

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

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

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, то он отправляется на доработку.

В среднем наши проекты набирают показатели в районе 80+.

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

Будьте на связи

Хочу стать клиентом