Мой отдел электронного маркетинга +7 (495) 640-89-97
05 марта 2018 13:03

Как сделать адаптивный дизайн сайта

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

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

создание адаптивного сайта

Чтобы помочь вам разобраться в особенностях подхода, мы собрали советы, как сделать адаптивный дизайн, на известных профессиональных ресурсах: 99designs, The Next Web, WIRED.

Не ищите «стандартные разрешения экранов»

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

  • Маленькие: ширина до 600px. Это для телефонов.
  • Средние: 600px–900px. К таким устройствам относятся фаблеты, планшеты и небольшие нетбуки.
  • Большие: 900px. Это ноутбуки и мониторы.

Другую версию мы слышали от представителя крупной российской веб-студии. Они разрабатывают дизайн под 5 разрешений:

  • 320x568px
  • 360x640px
  • 768x1024px
  • 768x1366px
  • 1080х1920px

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

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

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

Что делать? Попробуйте протестировать мобильную и десктопную верстку на максимальном количестве устройств. Используйте специальный софт, например, Am I Responsive? Пока ничего лучше для проверки адаптивной версии сайта не придумали.

адаптивный дизайн проверить

Так работает сервис Am I Responsive?

Начинайте с мобильной верстки

Выражение mobile first уже набило оскомину, но актуальность не потеряло. Больше всего проблем возникает с текстом и логотипом. И тут очевидно, что если текст читается на телефоне, то у вас будет меньше проблем на планшетах, а затем — на десктопе.

Изображения должны подходить под все устройства

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

Верстка мобильного меню — это отдельный вопрос

Чаще всего элементы меню на мобильных устройствах убирают в иконку «Гамбургер»:

адаптивный меню сайта

Гамбургер-меню — узнаваемый элемент, и обычно пользователи знают, что с ним делать. Но многие специалисты по UX критикуют такой подход, потому что чтобы добраться до элемента, приходится кликать 2 и более раз. Вместо этого они предлагают выводить на экран максимальное количество элементов меню.

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

В плане навигации на мобильных устройствах специалисты чаще всего хвалят решения YouTube:

адаптивная навигация для сайта

Учитывайте жесты

На планшетах и мобильных устройствах людям нравится управлять контентом с помощью жестов:

  • Tap (Тап) — это клик
  • Swipe (Свайп) — прокручивание экранов влево-вправо
  • Scroll (Скролл) — прокручивание экрана вверх-вниз
  • Long Press (Долгое нажатие) — как клик правой кнопкой мыши
  • Pinch (Стягивание)
  • Spread (Растягивание)
  • Double tap (Двойное нажатие)
  • Сильное нажатие

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

адаптивный слайдер для сайта

Пример фотогалереи-«карусель» от ИТ ШЕФ

Согласно гайдлайнам Apple, минимальный размер элементов для тапа — 44x44px. Правда, этот стандарт часто нарушается, и веб-дизайнеры уменьшают показатель до 25x25px.

Не делайте адаптивные макеты под устройства абсолютно разными

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

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

Найдите крутого разработчика в помощь

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

Адаптивный дизайн может показаться монстром, которого невозможно одолеть: уж слишком много факторов нужно учитывать, чтобы не ошибиться. Хорошая новость в том, что с этими проблемами сталкиваются 100% современных веб-дизайнеров и каждый решает их по-своему. Это и есть креативная работа.

А если вас интересует сайт как объект бизнеса, а не дизайна, изучите инструкцию Комплето к разработке сайтов.

Хотите получить предложение от нас?
(Visited 232 times, 1 visits today)
Рассказать друзьям
Комментарии
Вконтакте 0 Facebook 0
comments powered by Disqus
ЗАПРОСИТЬ ПРЕДЛОЖЕНИЕ

Заполните это поле

Заполните это поле

Заполните это поле

Заполните это поле

Начать сотрудничество

Принято!

Спасибо за обращение.

До конца рабочего дня с Вами свяжутся.