Создание мобильной верстки сайта proma.ru

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

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

Мобильная верстка на примере сайта proma.ru

Подготовка

В первую очередь нужно определиться с требованиями.

  1. Выберите нужные разделы
    Не все разделы сайта нужны пользователям мобильных устройств, нужно выбрать наиболее важные из них. Экономим бюджет.
  2. Упростите функционал
    Оставляем только самое важное, ведь телефоны и планшеты имеют ограничения:
    • мобильный интернет может быть медленным, убираем лишнюю графику;
    • возможно вашим посетителям нужны только контакты, тогда нет смысла в адаптации сложных калькуляторов и т.п.
  3. Список устройств, мобильных браузеров
    Дешевле обходится поддержка только последних версий телефонов android, apple и браузеров safari, chrome, firefox.

Готовые инструменты

Самый быстрый и простой способ создания мобильной верстки – это использование так называемых CSS-фреймворков (по-русски библиотек). Они содержат набор готовых правил для управления отображением страницы в зависимости от размеров экрана. В основе таких фреймворков лежит размерная сетка.

  Телефоны Планшеты Ноутбук Десктоп
Размер экрана: <768px ≥768px ≥992px ≥1200px

Наиболее популярные среди CSS-фреймворков являются: Foundation, Bootstrap. Для работы над нашим примером был выбран Bootstrap.

 

Макеты дизайна

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

  • Hover («Наведение») — отсутствует в мобильных устройствах. Поэтому все эффекты, связанные с наведением курсора мыши на объект должны быть переделаны на Tap (касание пальцем) или Swipe (листать)
  • Ориентация устройства. В отличие от обычного монитора, мобильное устройство может быть использовано в двух ориентациях. В случае, если это также нужно учитывать, и они между собой отличаются, то количество макетов должно быть увеличено в 2 раза. Для каждого устройства ровно по два макета (вертикальная и горизонтальная ориентация экрана).
  • Размер имеет значение. Физиология человека тоже накладывает свои ограничения. В мобильной версии не должно быть элементов с линейными размерами менее 1см (28px). По ним трудно попасть.

 

Заключение

Результат работы вы можете наблюдать на сайте-примере. Вот так просто можно сделать адаптивную версию верстки практически любого сайта. Для качественного сравнения рекомендуем использовать инструмент от Google – PageSpeed Insights. В нашем случае правки позволили повысить оценку с 40 баллов до 85.

 

 

Бесплатная консультация

Нажимая кнопку "Отправить" вы подтверждаете согласие на обработку персональных данных. Соглашение об обработке персональных данных