Сегодня скорость и покрытие связи позволяет нам все больше действий в Интернете выполнять именно со смартфона. Сегодня одинаково корректное отображение и работа сайта как на компьютере, так и на других мобильных устройствах (смартфон, планшет) уже не прихоть, а необходимость. Реализовать это позволяет адаптивная вёрстка сайта.
Существует ряд типичных ошибок, которые специалисты часто совершают на этапе проектирования адаптивного дизайна. Ознакомьтесь и не повторяйте их.
1 Шапка не должна быть высокой
Шапка фиксируется, чтобы лого и меню были всегда под рукой. Не крадите место у пользователей на экране - делайте шапку комфортной высоты (не более 70px).
2 Иллюстрация идет раньше текста
В блоках, где есть изображение сбоку от текста - в адаптивной версии, оно должно показываться раньше (сверху) текста.
3 Сокращайте большие отступы
Дизайн на телефоне должен выглядеть компактно, но и не экстренно сжато. Делайте отступы не больше 60px.
4 Центрируйте иллюстрации
Особенно иконки, проверяйте, что они визуально стали по центру.
5 Оставляйте воздух по бокам контейнера
Пример, как не должна выглядеть верстка: отступы по бокам отсутствуют как класс. Почувствуйте разницу:
