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

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

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



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



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

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

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

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



Не оптимизировать для сенсорных устройств

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

Популярные методики описаны в хабратопике.

Оптимизация сайта для планшетов .



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

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



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

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



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

На самом деле это частный случай предыдущей ошибки, который встречается крайне часто.

Любое изображение должно быть оптимизировано, как по весу, так и по размеру.



Упрощение дизайна

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

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



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

Разработка веб-сайта с использованием адаптивного CSS-фреймворка со всеми надстройками и плагинами часто является излишним.

Иногда достаточно простой легкой сетки.

Или вы даже можете разработать его с нуля.



Не думайте о содержании

Содержимое сайта может быть самым разнообразным – крупные тексты, фотографии, видео, таблицы и многое другое.

Необходимо подумать о том, как все это будет отображаться на страницах сайта.



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

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

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



Отключить масштабирование

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

(На всякий случай дам ссылку на Документация Apple по использованию Viewport )

Забудьте об значке главного экрана

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

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

Теги: #адаптивный дизайн #разработка сайтов #CSS
Вместе с данным постом часто просматривают: