Адаптивная верстка сайта

Адаптивная верстка по готовому макету

 imakeyouhappy.ru
2016

Заказчик поставил перед нами задачу сделать сайт с адаптивной версткой и предоставил макеты, подготовленные его дизайнерами.

Переработка макета

Макеты были рассчитаны на ширину экрана 320 и 1100 точек. Условно, этого достаточно только для того, чтобы сверстать сайт для iPhone 4 и одного типа мониторов. Но что делать с iPhone 6, широкоформатными мониторами и просто разными режимами работы браузеров?

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



Принципы адаптивной верстки

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

  • Текстовый формат номера телефона для удобного набора.
  • Компактное раскрывающееся меню с правильной дистанцией между ссылками.
  • Структурирование контента в зависимости от ширины экрана.
  • Увеличение размера шрифтов для "мобильной версии".
  • Элементы сайта не должны выходить за горизонтальные границы экрана.
  • Слайдеры должны быть отзывчивы к тач-скрину.


Преимущества адаптивного сайта

Ресурс, сделанный на основе адаптивного макета обладает рядом существенных преимуществ, как для посетителей, так и для владельцев:

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


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

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

Действительно ли сайт получился адаптивным?

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

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

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

Проверяем свою работу и получаем отличный результат: