5 базовых правил при создании адаптивной версии сайта

#Дизайн, #ошибки, #адаптив
5 базовых правил при создании адаптивной версии сайта

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

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

1 Шапка не должна быть высокой

Шапка фиксируется, чтобы лого и меню были всегда под рукой. Не крадите место у пользователей на экране - делайте шапку комфортной высоты (не более 70px).

шапка не должна быть высокой

2 Иллюстрация идет раньше текста

В блоках, где есть изображение сбоку от текста - в адаптивной версии, оно должно показываться раньше (сверху) текста.

иллюстрация выше текста

3 Сокращайте большие отступы

Дизайн на телефоне должен выглядеть компактно, но и не экстренно сжато. Делайте отступы не больше 60px.

соблюдение отступов

4 Центрируйте иллюстрации

Особенно иконки, проверяйте, что они визуально стали по центру.

центрирование иконок

5 Оставляйте воздух по бокам контейнера

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

отступы по бокам

Поделиться в соцсетях: