Создание мобильной верстки сайта proma.ru
Сегодня мобильная версия сайта не просто дополнительный бонус для посетителей, использующих телефоны, а первоочередная функция вашей верстки. Поэтому современные сайты, выполненные по индивидуальному заказу или даже на базе готовых шаблонов, по умолчанию изначально уже имеют мобильную версию. Но что делать если сайт создан в эпоху, когда самой современной моделью был Nokia 3310? Об этом и пойдет речь в нашей статье.
Мобильная верстка на примере сайта proma.ru
Подготовка
В первую очередь нужно определиться с требованиями.
- Выберите нужные разделы
Не все разделы сайта нужны пользователям мобильных устройств, нужно выбрать наиболее важные из них. Экономим бюджет. - Упростите функционал
Оставляем только самое важное, ведь телефоны и планшеты имеют ограничения:
- мобильный интернет может быть медленным, убираем лишнюю графику;
- возможно вашим посетителям нужны только контакты, тогда нет смысла в адаптации сложных калькуляторов и т.п.
- Список устройств, мобильных браузеров
Дешевле обходится поддержка только последних версий телефонов 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.