0 added
0 removed
Original
2026-01-01
Modified
2026-03-10
1
<p>Теги: python, web-разработка, less, web, mobile-first вёрстка, sass, compass, mixin, css-препроцессоры, responsive-страница</p>
1
<p>Теги: python, web-разработка, less, web, mobile-first вёрстка, sass, compass, mixin, css-препроцессоры, responsive-страница</p>
2
<p><em>"Сделаем сайт для десктопа, а потом для мобильных, если успеем"</em><em>"Демо мы будем проводить не с мобильного"</em><em>"Заказчик будет смотреть сайт со своего ноутбука"</em><em>"На мобильную вёрстку нам не выделили средства"</em></p>
2
<p><em>"Сделаем сайт для десктопа, а потом для мобильных, если успеем"</em><em>"Демо мы будем проводить не с мобильного"</em><em>"Заказчик будет смотреть сайт со своего ноутбука"</em><em>"На мобильную вёрстку нам не выделили средства"</em></p>
3
<p>Эти и некоторые другие фразы вы наверняка слышали. И, к сожалению, сейчас эти фразы не имеют ничего общего с реальностью...</p>
3
<p>Эти и некоторые другие фразы вы наверняка слышали. И, к сожалению, сейчас эти фразы не имеют ничего общего с реальностью...</p>
4
<p>- 54% населения в России* выходят в интернет с мобильных устройств; - этот процент в мире достигает показателя 60%; - при этом 16% населения России выходит в Сеть только с мобильных.</p>
4
<p>- 54% населения в России* выходят в интернет с мобильных устройств; - этот процент в мире достигает показателя 60%; - при этом 16% населения России выходит в Сеть только с мобильных.</p>
5
<h2>Пользователь покинет ваш сайт, если:</h2>
5
<h2>Пользователь покинет ваш сайт, если:</h2>
6
<p>- сайт долго открывается; - сайт не содержит необходимую информацию в начале; - сайт некорректно отображается; - на сайте неудобная навигация.</p>
6
<p>- сайт долго открывается; - сайт не содержит необходимую информацию в начале; - сайт некорректно отображается; - на сайте неудобная навигация.</p>
7
<p>Наконец настали времена, когда пользователь стоит на первом месте. Сначала пользователь, а только потом код, облака и все остальные достижения современного программирования.</p>
7
<p>Наконец настали времена, когда пользователь стоит на первом месте. Сначала пользователь, а только потом код, облака и все остальные достижения современного программирования.</p>
8
<p>Игнорировать мировые тренды и статистику бессмысленно. Именно поэтому расскажем немного про то, что принято сейчас называть "mobile-first вёрсткой".</p>
8
<p>Игнорировать мировые тренды и статистику бессмысленно. Именно поэтому расскажем немного про то, что принято сейчас называть "mobile-first вёрсткой".</p>
9
<p>Mobile-first означает, что сначала выполняется дизайн и вёрстка для мобильных устройств, а только потом для широких экранов. Мобильные экраны очень узкие, действия пользователей очень специфичны, разрешение, как ни странно, лучше разрешения обычного монитора, а трафик передаётся и обрабатывается значительно медленнее по сравнению с полноценным ПК.</p>
9
<p>Mobile-first означает, что сначала выполняется дизайн и вёрстка для мобильных устройств, а только потом для широких экранов. Мобильные экраны очень узкие, действия пользователей очень специфичны, разрешение, как ни странно, лучше разрешения обычного монитора, а трафик передаётся и обрабатывается значительно медленнее по сравнению с полноценным ПК.</p>
10
<p>Удивительно, но позаботившись сначала о "мобильном" пользователе мы решаем массу проблем.</p>
10
<p>Удивительно, но позаботившись сначала о "мобильном" пользователе мы решаем массу проблем.</p>
11
<h2>Какие же это проблемы?</h2>
11
<h2>Какие же это проблемы?</h2>
12
<p>- ускорение загрузки сайта; - выделение наиболее важного контента; - корректно и красивое отображение; - удобная навигация и то, что сейчас принято называть "UX".</p>
12
<p>- ускорение загрузки сайта; - выделение наиболее важного контента; - корректно и красивое отображение; - удобная навигация и то, что сейчас принято называть "UX".</p>
13
<p>С применением современных средств для вёрстки (<strong>less</strong>,<strong>sass</strong>,<strong>compass</strong>и пр.) верстать страницы по принципу mobile-first становится очень просто. Использование констант,<strong>mixin</strong>-ов и других плюшек современных<strong>CSS</strong>-препроцессоров помогут вам осознать всю мощь mobile-first подхода.</p>
13
<p>С применением современных средств для вёрстки (<strong>less</strong>,<strong>sass</strong>,<strong>compass</strong>и пр.) верстать страницы по принципу mobile-first становится очень просто. Использование констант,<strong>mixin</strong>-ов и других плюшек современных<strong>CSS</strong>-препроцессоров помогут вам осознать всю мощь mobile-first подхода.</p>
14
<p>Более того,<strong>responsive-страница</strong>, свёрстанная по mobile-frist, реально содержит меньше кода, чем аналогичная страница свёрстанная по<strong>desktop-first</strong>. И это не единственный профит, который вы получите, а ещё у вас будет:</p>
14
<p>Более того,<strong>responsive-страница</strong>, свёрстанная по mobile-frist, реально содержит меньше кода, чем аналогичная страница свёрстанная по<strong>desktop-first</strong>. И это не единственный профит, который вы получите, а ещё у вас будет:</p>
15
<p>- достаточно компактный код; - современный дизайн; - почти готовая вёрстка страницы для<strong>desktop</strong>; - оптимизированные изображения; - минимум головной боли; - довольные пользователи вашего сайта.</p>
15
<p>- достаточно компактный код; - современный дизайн; - почти готовая вёрстка страницы для<strong>desktop</strong>; - оптимизированные изображения; - минимум головной боли; - довольные пользователи вашего сайта.</p>
16
<p>Тем не менее, не всё так гладко:<strong>mobile-first</strong>вёрстка - достаточно сложный подход как технически, так и ментально. Но мы настоятельно рекомендуем попробовать его на практике.</p>
16
<p>Тем не менее, не всё так гладко:<strong>mobile-first</strong>вёрстка - достаточно сложный подход как технически, так и ментально. Но мы настоятельно рекомендуем попробовать его на практике.</p>
17
<p>*по данным WEB-Index УИ, Россия 0+</p>
17
<p>*по данным WEB-Index УИ, Россия 0+</p>
18
<p><em>Есть вопрос? Напишите в комментариях!</em></p>
18
<p><em>Есть вопрос? Напишите в комментариях!</em></p>
19
19