статьи

базово про mobile first

в 2016 году число пользователей, заходящих в интернет с мобильных устройств, впервые превысило количество юзеров стационарных компьютеров и ноутбуков.

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

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

mobile first – это про легкость и удобство использования, в первую очередь. предполагается, что контент должен загружаться максимально быстро за счет оптимизации объема элементов сайта.

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

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

давайте разберем, по каким признакам google понимает, что тот или иной сайт заслуживает быть на первых местах в поиске?

основополагающий критерий в этом вопросе — скорость загрузки сайта. благодаря уменьшению объема изображений и прочих тяжелых элементов в десктопной версии и достигается та самая высокая скорость загрузки. это маст-хэв подхода mobile first.

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

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

крайне важно, чтобы все кликабельные элементы работали исправно, а кнопки были сделаны с помощью css, без использования кнопок-изображений или плашек. этим часто грешат разного рода «креативщики» на «высоко-конверсионных» лендингах, которые делают кнопки с градиентами. увы, но в 2021 году google такое не приветствует. да и с точки зрения дизайна – это такое-себе решение.

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

объемные части текста принято прятать под кнопку «показать еще», чтобы не удлинять длину страницы и не возвращаться к нашему первому пункту про общую скорость загрузки сайта.

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

смотря на эти рекомендации, кто-то может подумать, что mobile first – это про усложнение процессов и про дополнительную работу над сайтом, ведь дизайнеры привыкли воспринимать мобильную версию, как нечто побочное после десктопной. это абсолютное заблуждение, ведь если немного перестроить технические и творческие процессы в голове под нужды рынка, то на выходе можно получить сайт, который органически будет приносить не только высокие позиции в google, но и хорошую прибыль. а это, как известно, первостепенная цель в создании любых digital-продуктов.