Пользователь покинет ваш сайт, если… | OTUS
⚡ Подписка на курсы OTUS!
Интенсивная прокачка навыков для IT-специалистов!
Подробнее

Курсы

Программирование
C++ Developer. Professional
-5%
Scala-разработчик
-8%
Backend-разработчик на PHP
-9%
Алгоритмы и структуры данных
-9%
Team Lead
-6%
Архитектура и шаблоны проектирования Golang Developer. Professional
-5%
HTML/CSS
-11%
C# ASP.NET Core разработчик
-5%
Kotlin Backend Developer
-8%
iOS Developer. Professional
-8%
Java Developer. Professional Web-разработчик на Python MS SQL Server Developer Android Developer. Basic Разработчик программных роботов (RPA) на базе UiPath и PIX Microservice Architecture Unity Game Developer. Basic Разработчик голосовых ассистентов и чат-ботов React.js Developer Node.js Developer Интенсив «Оптимизация в Java» Супер-практикум по использованию и настройке GIT Symfony Framework Java Developer. Basic Unity Game Developer. Professional Супер-интенсив Azure
Инфраструктура
Инфраструктурная платформа на основе Kubernetes
-6%
Экспресс-курс «IaC Ansible»
-10%
Administrator Linux.Basic
-10%
Мониторинг и логирование: Zabbix, Prometheus, ELK
-10%
Экспресс-курс «CI/CD или Непрерывная поставка с Docker и Kubernetes»
-30%
Administrator Linux. Professional
-6%
Экcпресс-курс «ELK»
-10%
Экспресс-курс по управлению миграциями (DBVC)
-10%
Базы данных Network engineer Cloud Solution Architecture Highload Architect Разработчик голосовых ассистентов и чат-ботов VOIP инженер Супер-практикум по работе с протоколом BGP Супер - интенсив по паттернам проектирования Супер - интенсив по Kubernetes Супер-интенсив "Tarantool"
Специализации Курсы в разработке Подготовительные курсы
+7 499 938-92-02

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

WebDev_Deep_LAST_25.07_2_Site.png

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

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

– 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+

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

Не пропустите новые полезные статьи!

Спасибо за подписку!

Мы отправили вам письмо для подтверждения вашего email.
С уважением, OTUS!

Автор
0 комментариев
Для комментирования необходимо авторизоваться