Основные ошибки при разработке адаптивного дизайна

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

Скрывать контент

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

Не оптимизировать под touch-устройства

Большинство мобильных устройств с touch-управлением, поэтому нужно обязательно оптимизировать элементы интерфейса под него. Популярные техники описаны в хабратопике Оптимизация сайта для планшетов.

Не оптимизировать типографику

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

Использовать слишком большие файлы

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

Использовать слишком большие изображения

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

Упрощать дизайн

При разработке адаптивно сайта очень заманчиво делать примитивный дизайн, который просто «сложится» на экране смартфона. Нужно делать дизайн, который будет максимально удобен на любом устройстве.

Использовать тяжелые фреймворки, когда это не нужно

Разрабатывать сайт на адаптивном CSS-фреймворке, со всеми надстройками и плагинами, зачастую избыточно. Иногда достаточно простой легкой сетки. Или можно вообще разрабатывать с нуля.

Не думать о контенте

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

Не думать о больших экранах

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

Отключать зум

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

Забывать о Home Screen иконке

Это аналог favicon для iOS устройств, добавляется простым кодом:

<link rel="apple-touch-icon" href="/custom_icon.png"/>