Теория web-дизайна и web-технологий

Применение принципа Mobile First как актуальный метод оптимизации сайтов

Сегодня, цифровые, мобильные и социальные медиа являются неотъемлемой частью повседневной жизни людей. При этом, если еще несколько лет назад, количество пользователей, выходящих в сеть Интернет при помощи персональных компьютеров и ноутбуков, значительно преобладало над пользователями мобильных устройств, то на сегодняшний день данная тенденция не сохранилась. Данное утверждение основывается на исследованиях различных аналитических платформ, занимающихся анализом веб-трафика. Например, специалисты аналитической платформы Statcounter сообщают о преобладании в Интернете пользователей смартфонов — по данным Statcounter, их количество составляет 52,03% от всех пользователей Интернета, в то время как на компьютеры и планшеты приходится по 45,32% и 2,65% соответственно [1]. В ежегодном аналитическом отчете компаний We Are Social и Hootsuite предоставлены следующие данные: количество пользователей мобильного интернета с 2014 по 2019 год увеличилось на 17,1% (с 33,0% до 50,1%) от числа всехх пользователей сети Интернет [2]. Несмотря на то, что в последние годы рост несколько замедлился, прогнозируется его дальнейшее продолжение.

Такое развитие событий привело к тому, что еще в 2015 году компания Google выпустила обновление своего «mobile-friendly» алгоритма, благодаря которому мобильные и отзывчивые веб-сайты получили приоритет в рейтингах для улучшения качества пользовательского опыта (User Experience), а с июля 2019 г. индексирование с приоритетом мобильного контента стало включаться по умолчанию для всех новых веб-сайтов (т.е. веб-сайтов, опубликованных недавно или ранее не представленных в индексе Google) [5]. Важно также отметить, что по данным SEO-Auditor, в России на сегодняшний день больше половины поисковых запросов осуществляется при помощи «Google» — 54,24%, в то время как «Яндексом» пользуются только 42,27% посетителей [1]. По этой причине веб-разработчику всегда необходимо учитывать алгоритмы Google для получения наибольшей эффективности от созданного веб-сайта. Поэтому при разработке сайтов лучше обращаться в профессиональные студии, которые могут создать сайт любой сложности и адаптивный под различные устройства. Например, в студии asdisweb.ru можно заказать не только сам сайт, но и его поисковое продвижение, контекстную рекламу и другие услуги.

Говоря о «mobile-friendly» веб-сайтах, можно отметить два подхода к их разработке: «Desktop First» и «Mobile First». Их принципиальное отличие заключается в последовательности конструирования веб-сайта. При реализации принципа «Desktop First» сначала разрабатывается веб-сайт для десктоп-устройств, после чего адаптируется под мобильные системы. Преимущества такого подхода:

низкая стоимость и высокая скорость изготовления — для разработки такого веб-сайта не обязательно нанимать высококвалифицированного специалиста, кроме того, в сети Интернет есть множество готовых шаблонов, на основе которых можно создать свой веб-сайт;
возможность создавать уникальные и креативные desktop версии веб-сайтов — большое количество рабочего пространство дает широкую волю воображению: использование различных анимаций, нестандартно расставленные блоки с контентом и т.д.

Недостатки принципа «Desktop First»:

поисковые системы перестают ориентироваться на веб-сайты, разработанные по этой технологии;
переход к мобильной версии веб-сайта может проходить достаточно проблематично, т.к. задача в данном случае заключается в качественном отображении большого количества информации desktop-версии веб-сайта в условиях маленького пространства мобильных устройств;
повышенный уровень отказов мобильных устройств — в случае, если веб-сайт перегружен контентом.

Принцип «Mobile First» реализуется наоборот: сначала веб-сайт создается под смартфоны, а затем дорабатывается под настольные компьютеры. Если при подходе от десктопной к мобильной версии веб-сайта (в случае «Desktop First»), в большинстве случаев, разработчик вынужден отказаться от части контента, то при доработке веб-сайтов «Mobile First» до десктоп-версии пространство больших экранов, наоборот, дает возможность показать больше контента.

Одно из основных преимуществ «Mobile First» — высокая скорость загрузки данных, в том числе на мобильных устройствах. Увеличение показателей достигается за счет того, что сначала грузится основная версия, которая всегда совместима с любыми платформами. Далее, дополнительно, в зависимости от платформы или браузера, подгружаются новые опции и стили. Таким образом, версия всегда отображается корректно [3]. Нельзя не отметить и другие достоинства данного подхода:

разработка несложных и понятных интерфейсов: т.к. экраны смартфонов имеют небольшой размер, интерфейс веб-сайта не должен содержать лишних деталей;
легкое восприятие веб-сайта — обуславливается отсутствием перегруженности информацией;
именно качественно проработанная мобильная версия может показать пользователю, что веб-сайт не шаблонный;
как уже отмечалось ранее, поисковые системы отдают приоритет именно таким веб-сайтам;
перспектива на будущее: увеличение количества пользователей мобильного Интернета неизбежно, а значит веб-сайт, разработанный по принципу «Mobile First» будет становиться все актуальнее.

Несмотря на большое количество достоинств, данный подход имеет некоторые недостатки — это повышенная стоимость проекта и увеличенное время изготовления, в сравнении с «Desktop First». Если при втором подходе, Вы имеете возможность адаптировать свой веб-сайт под мобильные устройства без особых проблем (пусть и в ущерб скорости загрузки), то для перехода с мобильной версии на десктоп-устройство понадобится больше ресурсов.

Стратегия «Mobile First» строится на таких процессах, как «Graceful Degradation» («изящная» или «постепенная» деградация) и «Progressive Enhancement» («постепенное улучшение»).

Graceful Degradation определяет необходимость той или иной функции веб-сайта для различных типов устройств и размеров экрана. Разрабатывается тот вариант, который полностью обеспечит работу веб-сайта от настольного компьютера до смартфона. Можно сказать, что Graceful

Degradation служит для удаления определенных функций, элементов дизайна и контента по мере того, как размер экрана становится меньше.

Progressive Enhancement работает в тандеме с Graceful Degradation. Работа начинается с самых минимальных функциональных возможностей, дизайна и контента для малых размеров экрана. Сначала проектируется мобильная версия, а затем происходит улучшение дизайна и функциональности по мере изменения размера экрана и появления новых блоков контента.

Важно отметить, что Progressive Enhancement не является тем же самым, что отзывчивый дизайн. Разработка веб-сайта с отзывчивым дизайном строится на использовании медиа-запросов для определенных устройств и размеров экрана. Progressive Enhancement работает вместе с отзывчивым дизайном.

В современном мире, в связи с широким распространением смартфонов, стратегии веб-дизайна «Mobile First» по праву уделяется большое количество внимания, ведь именно такой подход позволяет в первую очередь сфокусироваться на потребностях мобильных пользователей: разработчик всегда будет учитывать специфику отображения веб-сайтов на мобильных устройствах (использование кнопок вместо гиперссылок, отсутствие длинных цепочек навигации и т.д.), благодаря чему пользователи смогут получать положительный опыт от пребывания на веб-сайте. В конечном итоге, лучшим выбором является разработка веб-сайта для устройств, используемых большинством людей вместо того, чтобы концентрироваться на системах, которые постепенно остаются позади. Сегодня, даже компания Google ясно дала понять, что мобильные веб-сайты имеют приоритет и в ближайшем будущем это останется неизменным.