07 янв 2015

Что нужно учесть при разработке адаптивного сайта

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

Возможность создавать подобные сайты появилась в июне 2012 года, с принятием стандартов CSS3. Для того чтобы лучше понимать что такое адаптивный веб-сайт вы можете найти множество удачных примеров на сайте http://mediaqueri.es/.

Какой подход выбрать

Существуют 2 кардинально разные похода к построению адаптивных сайтов, и каждый из них имеет свои плюсы и минусы. Давайте рассмотрим их более подробно:

  • Подход «Сперва мобильные» (mobile first) – построение страницы начинается от самого мелкого разрешения, затем поэтапно добавляются стили для больших разрешений. Преимущество такого подхода – большее количество поддерживаемых устройств, обычно меньший размер страницы. Минус – требуется глубокая проработка и проектирование.
  • Подход «Сперва настольные» (desktop first) – при таком подходе создается полная настольная версия, и затем последовательно уменьшая и скрывая лишнее вырисовываются мобильные вариации. Минус подхода – не всегда получается сделать мобильную версию удобной и не урезать функционал, плюс – скорость создания и простота.

Какие разрешения дисплеев следует учесть

Устройства для просмотра WEB`а принято делить на 3 категории: смартфоны, планшеты и ПК. Основная суть создания адаптивного сайта – покрыть как можно большее количество устройств. Можно делать полностью резиновый дизайн, а можно фиксировать ширину на определенных диапазонах (например при ширине от 768 до 1024 фиксировать контейнер шириной 740 пикселей). Основные диапазоны поддерживаемых разрешений должны быть такими:

  • 320x480
  • 480x800
  • 768x1024
  • 1024x768
  • ширина более 1280
  • 1920X1080

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

В первоначальной разработке поможет инструмент разработчика в Google Chrome (позволяет примерять различные разрешения, симулировать сенсорный ввод и ретина дисплей):
Панель разработчика Google Chrome

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

Способы ввода

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

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

Навигация и поиск

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

Поддержка дисплеев повышенной четкости (retina)

С появлением дисплеев повышенной четкости появилось такое понятие как физическое и логическое разрешение экрана. Например логическое разрешение iPhone 4 – 320 на 480, а физическое 640 на 960, что позволяет более четко отображать векторную графику и шрифты. Для отображения растровой графики предусмотрели специальные медиа-запросы и использование изображений с двойным разрешением.
Сравнение оптимизированной и не оптимизированного под retina изображения

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

Руководитель отдела разработки

Подписаться на блог

2 комментария

  • Опубликован 29 июля , 2015 года в 10:18
  • автор: Jane
  • Ответить

а что за плагин на скрине под заголовком "Какие разрешения дисплеев следует учесть"?

  • Опубликован 30 июля , 2015 года в 09:33
  • автор: Виталий
  • Ответить

Это стандартная панель разработчика в google chrome. Нажимаете F12 и кликаете на иконку с телефоном http://joxi.ru/KAxzNX1sgeg3m8

Оставить свой комментарий

Задать вопрос Вверх