Пользователь покинет ваш сайт, если…

«Сделаем сайт для десктопа, а потом для мобильных, если успеем» «Демо мы будем проводить не с мобильного» «Заказчик будет смотреть сайт со своего ноутбука» «На мобильную вёрстку нам не выделили средства»

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

– 54% населения в России* выходят в интернет с мобильных устройств; – этот процент в мире достигает показателя 60%; – при этом 16% населения России выходит в Сеть только с мобильных.

Пользователь покинет ваш сайт, если:

– сайт долго открывается; – сайт не содержит необходимую информацию в начале; – сайт некорректно отображается; – на сайте неудобная навигация.

Наконец настали времена, когда пользователь стоит на первом месте. Сначала пользователь, а только потом код, облака и все остальные достижения современного программирования.

Игнорировать мировые тренды и статистику бессмысленно. Именно поэтому расскажем немного про то, что принято сейчас называть «mobile-first вёрсткой».

Mobile-first означает, что сначала выполняется дизайн и вёрстка для мобильных устройств, а только потом для широких экранов. Мобильные экраны очень узкие, действия пользователей очень специфичны, разрешение, как ни странно, лучше разрешения обычного монитора, а трафик передаётся и обрабатывается значительно медленнее по сравнению с полноценным ПК.

Удивительно, но позаботившись сначала о «мобильном» пользователе мы решаем массу проблем.

Какие же это проблемы?

– ускорение загрузки сайта; – выделение наиболее важного контента; – корректно и красивое отображение; – удобная навигация и то, что сейчас принято называть «UX».

С применением современных средств для вёрстки (less, sass, compass и пр.) верстать страницы по принципу mobile-first становится очень просто. Использование констант, mixin-ов и других плюшек современных CSS-препроцессоров помогут вам осознать всю мощь mobile-first подхода.

Более того, responsive-страница, свёрстанная по mobile-frist, реально содержит меньше кода, чем аналогичная страница свёрстанная по desktop-first. И это не единственный профит, который вы получите, а ещё у вас будет:

– достаточно компактный код; – современный дизайн; – почти готовая вёрстка страницы для desktop; – оптимизированные изображения; – минимум головной боли; – довольные пользователи вашего сайта.

Тем не менее, не всё так гладко: mobile-first вёрстка – достаточно сложный подход как технически, так и ментально. Но мы настоятельно рекомендуем попробовать его на практике.

*по данным WEB-Index УИ, Россия 0+

Есть вопрос? Напишите в комментариях!