+7(921)326-90-60


Разработка веб-ресурса — это комплексная услуга, результатом которой является такой продукт как «веб-сайт» (сокр. сайт).

Визуальное представление сайтов

Интернет-магазин Pets Well с адаптивным дизайном интерфейса для удобства мобильных пользователей Все веб-сайты можно условно разделить по визуальному представлению и назначению.

В данной статье рассмотрим первый аспект — визуальное представление.

Дизайн веб-сайтов исторически разделен технологическим решением на следующие группы:

  • Фиксированные (по ширине) сайты — визуально подходят для экрана ПК.
  • Адаптивные сайты — для ПК, планшетов и смартфонов.

Краткая историческая справка о дизайне веб-сайтов

Исторически сначала были фиксированные сайты. Технологическая смена фиксированных сайтов на адаптивные сайты пришлась в России на 2010-2013 годы в связи с ростом популярности мобильного интернета.

Подробнее о динамике проникновения сети Интернет в России и росте мобильного трафика

Фиксированные сайты удобны только для ПК и ноутбуков

Фактически дизайн фиксированных сайтов масштабировался в меньший размер за счет пропорционального сжатия. Это приводило к невозможности нормального чтения и использования фиксированных по ширине элементов сайта на экране смартфона.

Адаптивный дизайн корпоративного каталога ювелирных украшений Aaron Jewelry

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

Адаптивные сайты используют технический метод определения ширины экрана (блоки @media в каскадных таблицах стилей CSS для грамотного отображения содержания по ширине экрана с учетом зрительного масштаба).

В Inmotus Design принято за стандарт выполнять адаптивный дизайн на три ключевые «точки» по ширине:

  • 1024px — ширина экрана для ПК.
  • 768px — ширина экрана для планшетов.
  • 320px — ширина экрана для смартфонов.

Промежуточные размеры по ширине являются отчасти проблемными и адаптируются в ходе тестирования и отладки при помощи блоков правил @media.

Промежуточные размеры по ширине являются отчасти проблемными и адаптируются в ходе тестирования и отладки при помощи блоков правил @media

Анализ качественных и количественных показателей дизайна сайта

Проверка качества адаптивных сайтов определяется несколькими критериями:

  • Удобство использования с экрана мобильного устройства: логический принцип «удобно/не удобно» (навигация, чтение, масштаб элементов).
    В англ. литературе: usability, mobile friendly.

  • Скорость загрузки — как быстро загружается интерфейс и контент сайта для мобильного устройства.
    В англ. литературе: page speed.

  • Соответствие трендам дизайна — плоский дизайн (flat design), metro style, информационный дизайн и т.д.

Проверка качества адаптивного дизайна и верстки сайтов

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

Google Mobile Friendly
Скриншот анализа женского блога Miss Future в сервисе Google Mobile Friendly

Главное при тестировании адаптивного дизайна сайта: определить не только usability, но и скорость загрузки — для мобильного пользователя. Измерить эти показатели можно c помощью Google Speed Test и Google Mobile-Friendly.

В статье представлены положения на основе опыта разработки адаптивных сайтов в Inmotus Design.

Конверсия целевой аудитории на сайте с адаптивным дизайном

Основной вопрос, возникающий у профессионалов маркетинга, — это какова конверсия трафика целевой аудитории на сайте с адаптивным дизайном.

Не каждый представленный макет эффективен по своей композиции для целей маркетинга (получения заявок, нажатия на ссылку или кнопку и т.д.)

Фактически это означает, что необходимо проводить A/B тесты для выявления наиболее эффективных адаптивных дизайн-решений (по конверсии по «целям» маркетинга).

Вернуться к документации

Поделиться ссылкой


Ссылки на источники

Wikipedia. Статья «Web design»

Wikipedia. Статья «Flat Design»

Wikipedia. Статья «Интерфейсы Metro»

Набор элементов. Дизайн Metro UI CSS


Документы

Бриф на разработку логотипа

Бриф на дизайн сайта

Бриф на разработку сайта

Бриф на брендбук

Описание CMS Inmotus для интернет-магазина


Уточнение автора

В англоязычной литературе используются два термина, определяющих понятие «адаптивность дизайна»: responsive design и adaptive design.


К сведению

Студия Inmotus Design публикует основные документы по решению технических задач в сфере разработки, поддержки, наполнения и оптимизации веб-ресурсов.

Проконсультироваться

Проконсультироваться со специалистом по телефону
Задать вопрос специалисту по электронной почте