[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"nav-categories":3,"article-mobilnaya-versiya-sayta-3-vida-7-pokazateley-kachestva":78},{"data":4},[5,53,65,72],{"name":6,"slug":7,"categories":8},"Продуктивность","productivity",[9,13,17,21,25,29,33,37,41,45,49],{"id":10,"title":11,"slug":12},8,"Саморазвитие","samorazvitie",{"id":14,"title":15,"slug":16},30,"Психология","psihologiya",{"id":18,"title":19,"slug":20},3,"Делаем карьеру","delaem-kareru",{"id":22,"title":23,"slug":24},10,"Советы","sovety",{"id":26,"title":27,"slug":28},11,"Для новичка","dlya-novichka",{"id":30,"title":31,"slug":32},25,"Контекстная реклама","kontekstnaya-reklama",{"id":34,"title":35,"slug":36},23,"Маркетинг","marketing073254",{"id":38,"title":39,"slug":40},7,"Социальные сети","socialnye-seti",{"id":42,"title":43,"slug":44},4,"Удалённая работа","udalennaya-rabota",{"id":46,"title":47,"slug":48},12,"Способы заработка","sposoby-zarabotka",{"id":50,"title":51,"slug":52},14,"Финансы","finansy",{"name":54,"slug":55,"categories":56},"Технологии","tech",[57,61],{"id":58,"title":59,"slug":60},15,"YouTube","youtube",{"id":62,"title":63,"slug":64},33,"Трафик","trafik",{"name":66,"slug":67,"categories":68},"Бизнес","business",[69],{"id":70,"title":66,"slug":71},5,"biznes",{"name":73,"slug":74,"categories":75},"Новости","news",[76],{"id":77,"title":73,"slug":74},9,{"post":79,"published_news":105,"popular_news":172,"categories":235},{"title":80,"description":81,"meta_title":80,"meta_description":81,"meta_keywords":82,"text":83,"slug":84,"created_at":85,"publish_at":86,"formatted_created_at":87,"category_id":34,"links":88,"view_type":93,"video_url":94,"views":95,"likes":96,"lang":97,"comments_count":96,"category":98},"Мобильная версия сайта: 3 вида + 7 показателей качества","О мобильности говорят все кому не лень: от небольших маркетинговых агентств до гигантов типа Яндекса и Гугла.","Мобильная версия сайта, маркетинг, веб-дизайн, дизайн сайта","\u003Cp>Здравствуйте!\u003C/p>\n\n\u003Cp>О мобильности говорят все кому не лень: от небольших маркетинговых агентств до гигантов типа Яндекса и Гугла.\u003C/p>\n\n\u003Cp>\u003Cpicture class=\"image-align-left\">\u003Csource srcset=\"https://cdn.quasa.io/photos/foto-16/kkkkkkk-11.webp\" type=\"image/webp\">\u003Cimg class=\"image-align-left\" height=\"96\" src=\"https://cdn.quasa.io/photos/foto-16/kkkkkkk-11.jpeg\" width=\"300\" / alt=\"Мобильная версия сайта: 3 вида + 7 показателей качества\" loading=\"lazy\">\u003C/picture>В этой статье мы расскажем, почему мобильная версия сайта вызывает такой ажиотаж, какие требования к ней предъявлять и нужно ли это лично Вам.\u003C/p>\n\n\u003Cp>И сразу откроtv большой секрет, после её внедрения, мы начали получать больше заказов. Всё. Остальное дальше.\u003C/p>\n\n\u003Ch4>Зачем это нужно\u003C/h4>\n\n\u003Cp>Можно по-разному мусолить тему необходимости адаптации сайта под мобильные устройства. Но глобально есть две веские причины в пользу создания мобильной версии сайта - пользовательская и техническая.\u003C/p>\n\n\u003Cp>Давайте остановимся подробнее на каждой. При этом, как обычно, коротко и по делу. Воду оставляем за бортом.\u003C/p>\n\n\u003Ch3>1. Удобство для пользователей\u003C/h3>\n\n\u003Cp>Аналитики из StatCounter первыми заметили, что доля мобильного трафика превысила долю десктопа: 51,3% против 48,7. Это значит, что в среднем любой сайт в интернете с телефона посещают чаще, чем с компьютера.\u003C/p>\n\n\u003Cp>\u003Cpicture class=\"image-align-left\">\u003Csource srcset=\"https://cdn.quasa.io/photos/foto-16/kkkkkkk-1.webp\" type=\"image/webp\">\u003Cimg class=\"image-align-left\" height=\"168\" src=\"https://cdn.quasa.io/photos/foto-16/kkkkkkk-1.jpg\" width=\"300\" / alt=\"Мобильная версия сайта: 3 вида + 7 показателей качества\" loading=\"lazy\">\u003C/picture>В России картина примерно такая же: доля смартфонов выше, чем доля компьютеров и других устройств. Об этом говорит исследование компании GfK Rus:\u003C/p>\n\n\u003Cp>Статистика\u003C/p>\n\n\u003Cp>С каждым годом отрыв растет все сильнее — например, в 2018 году рост составил 20%. Причём, аналитики говорят, что это еще не предел.\u003C/p>\n\n\u003Cp>Такой расклад точно должен заставить Вас задуматься: как же Ваш сайт смотрится на экране смартфонов.\u003C/p>\n\n\u003Cp>И скорее всего ответ - плохо. Когда открываешь обычный неадаптированный сайт с мобильника, просмотр превращается в квест - приходится масштабировать страницы, целиться в мелкие ссылки, ждать долгой загрузки.\u003C/p>\n\n\u003Cp>Добавьте к этому всему спешку и кучу отвлекающих факторов - за телефоном ведь не так же, как за компьютером, когда посетитель полностью сосредоточен на мониторе. Пользователи не будут долго искать нужный раздел и разбираться в интерфейсе - в соседней вкладке всегда открыт удобный сайт конкурента.\u003C/p>\n\n\u003Ch3>2. Предпочтения поисковых систем\u003C/h3>\n\n\u003Cp>Гугл и Яндекс топят за мобильные версии уже давно. Первый для этого выпустил специальный алгоритм Mobile-first Index, по которому он оценивает удобство мобильного сайта и в зависимости от этого определяет его позицию в поиске.\u003C/p>\n\n\u003Cp>У второго алгоритм вышел позже, но по важности он примерно на том же уровне. Называется - “Владивосток”.\u003C/p>\n\n\u003Cp>Есть и косвенные причины, которые влияют на ситуацию мобильной версии в поиске. Помимо прочих факторов, поисковики учитывают и поведенческие характеристики. Это про то, как долго Ваши посетители проводят время на сайте, сколько страниц они открывают, насколько активно кликают по кнопкам и переключателям.\u003C/p>\n\n\u003Cp>Если пользователь зайдет с мобильника на обычный десктопный сайт, то долго он там не пробудет. А значит и поведенческие характеристики ухудшатся. Как следствие - Вы на последних необитаемых страницах Яндекса и Гугла по \u003Ca href=\"https://quasa.io/ru/media/seo-prodvizhenie-lendinga\">seo-продвижению\u003C/a>.\u003C/p>\n\n\u003Cp>Мы Вас еще не убедили? Тогда проверьте сами, нужна ли мобильная версия Вам, а точнее с каких устройств посетители заходят на Ваш сайт.\u003C/p>\n\n\u003Cp>\u003Cpicture class=\"image-align-left\">\u003Csource srcset=\"https://cdn.quasa.io/photos/foto-16/kkkkkkk-2.webp\" type=\"image/webp\">\u003Cimg class=\"image-align-left\" height=\"146\" src=\"https://cdn.quasa.io/photos/foto-16/kkkkkkk-2.jpg\" width=\"300\" / alt=\"Мобильная версия сайта: 3 вида + 7 показателей качества\" loading=\"lazy\">\u003C/picture>Сделать это можно в Google Analytics в отчете “Аудитория -> Мобильные устройства -> Обзор”. Если у Вас \u003Ca href=\"https://quasa.io/ru/media/kak-pravilno-nastroit-yandeks-metriku-nastroyka-schetchika-dashborda-i-bazovyh-instrumentov\">Яндекс.Метрика\u003C/a>, тогда перейдите в “Отчеты -> Технологии -> Устройства”.\u003C/p>\n\n\u003Cp>Аналитика\u003C/p>\n\n\u003Cp>Если видите, что смартфонов больше 15%, то для Вас это тревожный звоночек и, поверьте, ничего не остаётся, как адаптировать сайт под мобильные устройства. Поэтому давайте разбираться, какие вообще есть способы это сделать.\u003C/p>\n\n\u003Cp>Важно. Такая ситуация наблюдается не у всех. И в некоторых сферах использование мобильной версии запрещается, как бы это странно не звучало.\u003Ca href=\"safari-reader://in-scale.ru/adv/ban88719/\" target=\"_blank\">\u003Cpicture>\u003Csource srcset=\"safari-reader://in-scale.ru/netcat_files/416/373/otlichiya-ot-konkurentov-pop-ap.webp\" type=\"image/webp\">\u003Cimg src=\"safari-reader://in-scale.ru/netcat_files/416/373/otlichiya-ot-konkurentov-pop-ap.jpg\" / alt=\"Мобильная версия сайта: 3 вида + 7 показателей качества\" loading=\"lazy\">\u003C/picture>\u003C/a>\u003C/p>\n\n\u003Ch4>виды мобильных версий\u003C/h4>\n\n\u003Cp>Большая часть сайтов и интернет-магазинов, которые Вы встречали, используют один из трех подходов: адаптивная верстка, отдельный мобильный сайт, и динамический показ.\u003C/p>\n\n\u003Cp>Как обычно, чтобы сделать правильный выбор, нужно отталкиваться от своих задач и возможностей.\u003C/p>\n\n\u003Ch3>1. Адаптивная верстка\u003C/h3>\n\n\u003Cp>Технически, это один сайт, но вот структура страниц подстраивается под размер устройства. В упрощенном варианте выглядит так: для компьютеров открываем все пункты меню и строим товары в три столбца.\u003C/p>\n\n\u003Cp>Для планшетов показываем только корзину, а товары размещаем в два столбика; у смартфонов - прячем все в кнопку меню для мобильной версии, товары располагаем по одному на каждую строку.\u003C/p>\n\n\u003Cp>Главный плюс такой адаптивности сайта в том, что и мобильная, и десктопная версии - это один и тот же сайт.\u003C/p>\n\n\u003Cp>\u003Cpicture class=\"image-align-right\">\u003Csource srcset=\"https://cdn.quasa.io/photos/foto-16/kkkkkkk-3.webp\" type=\"image/webp\">\u003Cimg class=\"image-align-right\" height=\"180\" src=\"https://cdn.quasa.io/photos/foto-16/kkkkkkk-3.jpg\" width=\"300\" / alt=\"Мобильная версия сайта: 3 вида + 7 показателей качества\" loading=\"lazy\">\u003C/picture>А значит и любые изменения достаточно внести один раз, после чего адаптация сайта для всех экранов произойдет автоматически. Это может быть добавление статьи, смена сортировки, новый цвет кнопок. Другие плюсы адаптива:\u003C/p>\n\n\u003Cul>\n\t\u003Cli>\u003Cstrong>Дешево и просто\u003C/strong> - разрабатывается относительно быстро и недорого, можно даже внедрить адаптив в уже существующий сайт;\u003C/li>\n\t\u003Cli>\u003Cstrong>Один адрес страниц\u003C/strong> - удобно для пользователей и корректно в техническом плане (меньше мороки с поисковой оптимизацией);\u003C/li>\n\t\u003Cli>\u003Cstrong>Так рекомендует Гугл\u003C/strong>. На странице для разработчиков есть официальная рекомендация использовать именно адаптивную верстку. Конкретных аргументов там нет, но это же сам Гугл.\u003C/li>\n\u003C/ul>\n\n\u003Cp>\u003Cpicture class=\"image-align-right\">\u003Csource srcset=\"https://cdn.quasa.io/photos/foto-1/0-fi-24.webp\" type=\"image/webp\">\u003Cimg class=\"image-align-right\" height=\"200\" src=\"https://cdn.quasa.io/photos/foto-1/0-fi-24.jpeg\" width=\"300\" / alt=\"Мобильная версия сайта: 3 вида + 7 показателей качества\" loading=\"lazy\">\u003C/picture>Минусы адаптивной вёрстки также имеются. Хотя относительно других вариантов они довольно незаметные. Но всё же, как уже сказал, они есть:\u003C/p>\n\n\u003Cul>\n\t\u003Cli>Сайт с большой функциональностью трудно адаптировать под мобильники. Это будет или неудобно, или придется пожертвовать некоторыми возможностями;\u003C/li>\n\t\u003Cli>Медленная загрузка. Помните мы говорили, что и для телефонов и для компьютеров загружается один и тот же сайт?\u003Cbr />\n\tЭто и тяжёлые картинки, и длинные менюшки, и весь остальной объем информации. Чтобы решить проблему, некоторые разработчики используют сжатие страниц, но и они требуют дополнительных запросов на сервер, а значит и времени;\u003C/li>\n\t\u003Cli>Невозможно переключиться на полную версию. Пользователь не сможет в случае чего перейти на десктопный вариант, чтоб использовать все возможности, потому что сайт сам решает, какую версию ему показать.\u003C/li>\n\u003C/ul>\n\n\u003Cp>Тем не менее, адаптивный дизайн - самый популярный вариант мобильной версии в интернете. Его используют многие движки, конструкторы и, впрочем, мы у себя на некоторых своих сайтах.\u003C/p>\n\n\u003Ch3>2. Отдельная мобильная версия\u003C/h3>\n\n\u003Cp>В этом случае у Вас будут два разных сайта - у каждого свой адрес, дизайн и возможности. Это и есть ответ на вопрос: “Чем отличается мобильная версия сайта от адаптивной?”.\u003C/p>\n\n\u003Cp>\u003Cpicture class=\"image-align-left\">\u003Csource srcset=\"https://cdn.quasa.io/photos/foto-16/kkkkkkk-4.webp\" type=\"image/webp\">\u003Cimg class=\"image-align-left\" height=\"108\" src=\"https://cdn.quasa.io/photos/foto-16/kkkkkkk-4.jpg\" width=\"300\" / alt=\"Мобильная версия сайта: 3 вида + 7 показателей качества\" loading=\"lazy\">\u003C/picture>Сайт сам определяет размер экрана посетителя и решает, что будет отображаться - мобильная версия сайта или десктопная. Чаще всего именно мобильная версия начинается в ссылке с буквы m (в переводе как “мобильная”).\u003C/p>\n\n\u003Cp>Отдельная мобильная версия\u003C/p>\n\n\u003Cp>Такой подход удобен тем, что Вы вообще не зависите от десктопной версии. Можно полностью сосредоточиться на удобстве мобильных пользователей, оставить только самые базовые функции и учесть все мелочи в \u003Ca href=\"https://quasa.io/ru/media/yuzabiliti-sayta-kak-ocenit\">юзабилити\u003C/a>.\u003C/p>\n\n\u003Cp>\u003Cpicture class=\"image-align-left\">\u003Csource srcset=\"https://cdn.quasa.io/photos/foto-1/00-au-10.webp\" type=\"image/webp\">\u003Cimg class=\"image-align-left\" height=\"200\" src=\"https://cdn.quasa.io/photos/foto-1/00-au-10.jpeg\" width=\"300\" / alt=\"Мобильная версия сайта: 3 вида + 7 показателей качества\" loading=\"lazy\">\u003C/picture>Макет мобильной версии будет сильно отличаться от десктопа. У Вас точно получится удержать рассеянного посетителя, который скорее всего толкается в автобусе или заглядывает в смартфон, пока его не видит начальник.\u003C/p>\n\n\u003Cp>Все кнопки и переключатели можно сделать громадными, чтобы на них наверняка попасть пальцем.\u003C/p>\n\n\u003Cp>Также есть и другие аргументы, чтобы создать мобильную версию сайта отдельно: быстрая скорость загрузки - в отдельной версии загружаются легкие картинки среднего качества и в целом страница обрезана до базовых элементов. И также есть возможность перейти на полную версию сайта, если посетитель решит, что мобильных функций ему недостаточно.\u003C/p>\n\n\u003Cp>\u003Cpicture class=\"image-align-right\">\u003Csource srcset=\"https://cdn.quasa.io/photos/foto-16/kkkkkkk-12.webp\" type=\"image/webp\">\u003Cimg class=\"image-align-right\" height=\"93\" src=\"https://cdn.quasa.io/photos/foto-16/kkkkkkk-12.png\" width=\"300\" / alt=\"Мобильная версия сайта: 3 вида + 7 показателей качества\" loading=\"lazy\">\u003C/picture>Справедливости ради - у отдельной версии сайта для мобильных устройств есть и недостатки:\u003C/p>\n\n\u003Cul>\n\t\u003Cli>Разные адреса сайта у мобильников и десктопа. Это может создать неприятности при SEO - поисковики видят два разных сайта с одинаковым содержимым. И понижают позиции за дублирование. Чтобы обойти проблему, придется подключать дополнительные ресурсы;\u003C/li>\n\t\u003Cli>Неудобно сидеть с планшета - на нем элементы расплываются по всему экрану. А для десктопной версии экран планшета окажется недостаточно большим. Получается, что посетитель попадает в тупик;\u003C/li>\n\t\u003Cli>Обходится дороже. Хоть у мобильной версии и ограниченный функционал, но все равно, считайте, что это новый сайт, который нужно создавать с нуля. Поэтому на разработку мобильной версии сайта закладывайте бюджет заранее;\u003C/li>\n\t\u003Cli>Дополнительное время на управление. Сайтов-то два, поддерживать работу и следить за актуальностью нужно и там, и тут.\u003C/li>\n\u003C/ul>\n\n\u003Cp>\u003Cpicture class=\"image-align-left\">\u003Csource srcset=\"https://cdn.quasa.io/photos/foto-16/kkkkkkk-5.webp\" type=\"image/webp\">\u003Cimg class=\"image-align-left\" height=\"158\" src=\"https://cdn.quasa.io/photos/foto-16/kkkkkkk-5.jpg\" width=\"300\" / alt=\"Мобильная версия сайта: 3 вида + 7 показателей качества\" loading=\"lazy\">\u003C/picture>Как видите, забот немало. Но многие крупные интернет-магазины выбирают именно этот способ, так как каждое неправильное действие может спугнуть клиента от совершения покупки.\u003C/p>\n\n\u003Cp>Если у Вас такие же “опасные” продажи, то значит и Вам нужно обратить внимание на развитие сайтов электронной торговли.\u003C/p>\n\n\u003Ch3>3. Динамический показ (RESS)\u003C/h3>\n\n\u003Cp>И третий способ - симбиоз двух предыдущих вариантов. Сначала сайт определяет устройство посетителей и, в зависимости от размера экрана, открывает десктопную, мобильную или планшетную версию.\u003C/p>\n\n\u003Cp>То есть грузится только тот вариант, который подходит для конкретного устройства. Компьютерам - большой и громоздкий, а смартфонам - ограниченный, но легкий. Подход сильно сокращает время открытия.\u003C/p>\n\n\u003Cp>\u003Cpicture class=\"image-align-left\">\u003Csource srcset=\"https://cdn.quasa.io/photos/foto-16/kkkkkkk-13.webp\" type=\"image/webp\">\u003Cimg class=\"image-align-left\" height=\"179\" src=\"https://cdn.quasa.io/photos/foto-16/kkkkkkk-13.jpeg\" width=\"300\" / alt=\"Мобильная версия сайта: 3 вида + 7 показателей качества\" loading=\"lazy\">\u003C/picture>Главный недостаток RESS - это долго и дорого. Разработать динамический показ - все равно, что с нуля создать несколько разных сайтов.\u003C/p>\n\n\u003Cp>Да и технология не совершенна. RESS относительно молодой инструмент, поэтому может случится такое, что устройство определится неправильно или не определится совсем.\u003C/p>\n\n\u003Cp>К видным деятелям, которые используют RESS, можно отнести Гугл. В целом же, как обратил внимание, технология не обжита, и если у Вас ограниченный бюджет или поджимает время, лучше не рисковать. А обратить внимание на два предыдущих варианта.\u003C/p>\n\n\u003Cp>Ещё есть такое понятие, как резиновая вёрстка. Некоторые считают, что это вариант мобильного сайта, но это не так. \u003C/p>\n\n\u003Cp>\u003Cem>Важно. \u003C/em>Резиновая вёрстка - это лишь когда сайт также аккуратно отображается на телефоне, как и на пк. Причём, полностью без изменений.\u003C/p>\n\n\u003Ch4>КРИТЕРИИ ИДЕАЛЬНОСТИ\u003C/h4>\n\n\u003Cp>\u003Cpicture class=\"image-align-left\">\u003Csource srcset=\"https://cdn.quasa.io/photos/foto-16/kkkkkkk-14.webp\" type=\"image/webp\">\u003Cimg class=\"image-align-left\" height=\"183\" src=\"https://cdn.quasa.io/photos/foto-16/kkkkkkk-14.jpeg\" width=\"275\" / alt=\"Мобильная версия сайта: 3 вида + 7 показателей качества\" loading=\"lazy\">\u003C/picture>Мы уже говорили, что за компьютером пользователь максимально сосредоточен на том, что видит на экране.\u003C/p>\n\n\u003Cp>За его внимание практически ничего не конкурирует. То ли дело посиделки за смартфоном - параллельные задачи, дорога, оповещения, звонки, окружающие. Это и нужно учитывать в первую очередь при разработке.\u003C/p>\n\n\u003Cp>Поэтому в независимости от того, какой подход Вы выбрали, нужно придерживаться определенных правил сайта для мобильных устройств. Вот самые важные из них:\u003C/p>\n\n\u003Cp>\u003Cstrong>1. Крупный темный текст на светлом фоне\u003C/strong>\u003C/p>\n\n\u003Cp>Все тексты лучше оформлять по классике - черный шрифт на белой подложке. Яндекс рекомендует использовать размер не менее 12 пикселей. Выбирайте шрифты без засечек - их легче читать в движении.\u003C/p>\n\n\u003Cp>\u003Cstrong>2. Короткие формы\u003C/strong>\u003C/p>\n\n\u003Cp>Оставить заявку, записаться на прием, оформить покупку - что бы пользователь не собирался вводить, нужно запрашивать минимум данных, которых достаточно для первого контакта. Длинные формы отпугивают в принципе, что уж говорить о мобильных посетителях. \u003C/p>\n\n\u003Cp>\u003Cstrong>3. Большие кликабельные элементы\u003C/strong>\u003C/p>\n\n\u003Cp>\u003Cpicture class=\"image-align-left\">\u003Csource srcset=\"https://cdn.quasa.io/photos/foto-16/kkkkkkk-17.webp\" type=\"image/webp\">\u003Cimg class=\"image-align-left\" height=\"178\" src=\"https://cdn.quasa.io/photos/foto-16/kkkkkkk-17.jpeg\" width=\"283\" / alt=\"Мобильная версия сайта: 3 вида + 7 показателей качества\" loading=\"lazy\">\u003C/picture>Посетитель не должен целиться и ловить кнопки и переключатели. Все интерактивные элементы лучше делать крупными - попробуйте сами на них потыкать. Apple и Microsoft советуют стремиться к размерам 44 на 44 пикселя. Минимальный порог - 24х24, но это в крайнем случае.\u003C/p>\n\n\u003Cp>4. \u003Cstrong>Скорость загрузки сайтов\u003C/strong>\u003C/p>\n\n\u003Cp>Тут конкретных стандартов нет, но всегда нужно стремиться к идеалу. Есть такая общая закономерность - каждая секунда, которая уходит на загрузку страницы, пропорционально снижает конверсию в продажи. \u003Cbr />\n\u003Cbr />\nПроверить мобильную версию сайта на скорость загрузки можно в специальных сервисах, о них немного ниже.\u003C/p>\n\n\u003Cp>\u003Cstrong>5. Заданный тип формы\u003C/strong>\u003C/p>\n\n\u003Cp>При составлении технического задания обязательно укажите, что при заполнении телефона должна выводиться только цифровая клавиатура. То же самое для паролей, электронной почты и других полей. Если разрабатываете сайт сами, то не поленитесь задать каждой форме соответствующий тип. \u003C/p>\n\n\u003Cp>\u003Cstrong>6. Кликабельные контакты\u003C/strong>\u003C/p>\n\n\u003Cp>\u003Cpicture class=\"image-align-left\">\u003Csource srcset=\"https://cdn.quasa.io/photos/foto-16/kkkkkkk-15.webp\" type=\"image/webp\">\u003Cimg class=\"image-align-left\" height=\"168\" src=\"https://cdn.quasa.io/photos/foto-16/kkkkkkk-15.jpeg\" width=\"299\" / alt=\"Мобильная версия сайта: 3 вида + 7 показателей качества\" loading=\"lazy\">\u003C/picture>Как и в случае с формами, у контактных данных тоже есть специальный тип ссылки. Нажимаем на телефон - открывается набор номера, на почту - почтовая программа. Пользователи обязательно будут по привычке тыкать по контактам.\u003C/p>\n\n\u003Cp>\u003Cstrong>7. Информация в один столбец\u003C/strong>\u003C/p>\n\n\u003Cp>Никаких горизонтальных скроллов и фотографий в несколько столбцов на одном экране. Даже у крутых флагманов для этого недостаточно большой экран. Текст в одну колонку удобнее читать, а на больших фотографиях можно будет разглядеть все детали.\u003C/p>\n\n\u003Cp>Лайфхак. Если Вам просто необходима полная информация о клиенте (для доставки, например), то разбейте процесс заполнения заявки на несколько шагов. \u003C/p>\n\n\u003Cp>\u003Cpicture class=\"image-align-left\">\u003Csource srcset=\"https://cdn.quasa.io/photos/foto-16/kkkkkkk-6.webp\" type=\"image/webp\">\u003Cimg class=\"image-align-left\" height=\"184\" src=\"https://cdn.quasa.io/photos/foto-16/kkkkkkk-6.jpg\" width=\"300\" / alt=\"Мобильная версия сайта: 3 вида + 7 показателей качества\" loading=\"lazy\">\u003C/picture>В первом шаге запросите имя и номер, а адрес и реквизиты - в следующих. Даже если пользователь поленится и не заполнит форму до конца, у Вас останутся контакты, чтобы дожать.\u003C/p>\n\n\u003Ch4>ПрОВЕРКА мобильностИ\u003C/h4>\n\n\u003Cp>Лучший эксперт, который скажет Вам, удобный ли у Вас сайт - это посетитель. Проведите небольшое тестирование своей мобильной версии по методу "Мысли в слух".\u003C/p>\n\n\u003Cp>Выберите из окружения того, кто лучше остальных подходит под описание Вашего потенциального покупателя: по возрасту, профессии, интересам. Попросите добровольца сделать заказ - пусть он пройдет полный путь покупателя. Только не мешайте и не поправляйте его.\u003C/p>\n\n\u003Cp>Пусть все будет максимально реалистично - Вы же не будете сидеть рядом с каждым посетители и объяснять, куда нажимать. Любые трудности и замешательства Ваш подопытный должен комментировать вслух.\u003C/p>\n\n\u003Cp>А Вы продолжайте играть в шпиона: анализируйте действия и молча делайте пометки в блокноте. Помочь можно лишь в крайнем случае, если доброволец попал совсем в тупиковую ситуацию.\u003C/p>\n\n\u003Ch3>1. Техническая проверка\u003C/h3>\n\n\u003Cp>Когда вы убедитесь, что все элементы на своих местах, а интерфейс понятный и предсказуемый, переходите к технической стороне. Пропустите сайт через разные сервисы, чтобы собрать ошибки и замечания. Сможете - исправите сами, нет - будете знать, что написать в ТЗ программисту.\u003C/p>\n\n\u003Cp>\u003Cstrong>1.1 Google Search Console\u003C/strong> - официальный сервис от Гугла. Он покажет, как выглядит сайт на среднестатистическом экране смартфона и даст рекомендации по улучшению.\u003C/p>\n\n\u003Cp>\u003Cpicture class=\"image-align-left\">\u003Csource srcset=\"https://cdn.quasa.io/photos/foto-16/kkkkkkk-7.webp\" type=\"image/webp\">\u003Cimg class=\"image-align-left\" height=\"227\" src=\"https://cdn.quasa.io/photos/foto-16/kkkkkkk-7.jpg\" width=\"300\" / alt=\"Мобильная версия сайта: 3 вида + 7 показателей качества\" loading=\"lazy\">\u003C/picture>Помните, мы говорили про алгоритм Mobile-first Index? Сервис как раз основан на его работе, поэтому не пренебрегайте этим пунктом.\u003C/p>\n\n\u003Cp>Google Search Console \u003C/p>\n\n\u003Cp>\u003Cstrong>2. Яндекс Вебмастер \u003C/strong>- аналогичный сервис от Яндекса. Прежде чем провериться здесь, нужно добавить сайт в панель Вебмастера и подтвердит на него права (загрузить небольшой выданный файлик).\u003C/p>\n\n\u003Cp>Только потом можно использовать сервис, перейдя в “Инструменты -> Проверка мобильных страниц”. Штука тоже полезная - с рекомендациями и комментариями.\u003C/p>\n\n\u003Cp>\u003Cpicture class=\"image-align-left\">\u003Csource srcset=\"https://cdn.quasa.io/photos/foto-16/kkkkkkk-8.webp\" type=\"image/webp\">\u003Cimg class=\"image-align-left\" height=\"226\" src=\"https://cdn.quasa.io/photos/foto-16/kkkkkkk-8.jpg\" width=\"300\" / alt=\"Мобильная версия сайта: 3 вида + 7 показателей качества\" loading=\"lazy\">\u003C/picture>Яндекс Вебмастер\u003C/p>\n\n\u003Cp>\u003Cstrong>3. Проверка от поиска Bing.\u003C/strong> \u003C/p>\n\n\u003Cp>Да-да, такой поисковик тоже есть.\u003C/p>\n\n\u003Cp>Пусть им пользуется очень мало людей, но сейчас Вам нужны не они.\u003C/p>\n\n\u003Cp>Сервис может увидеть ошибки, на которые предыдущие два не обратят внимание. Ну и, как говорится, хуже не будет.\u003C/p>\n\n\u003Cp>\u003Cpicture class=\"image-align-left\">\u003Csource srcset=\"https://cdn.quasa.io/photos/foto-16/kkkkkkk-9.webp\" type=\"image/webp\">\u003Cimg class=\"image-align-left\" height=\"220\" src=\"https://cdn.quasa.io/photos/foto-16/kkkkkkk-9.jpg\" width=\"300\" / alt=\"Мобильная версия сайта: 3 вида + 7 показателей качества\" loading=\"lazy\">\u003C/picture>Проверка от поиска Bing\u003C/p>\n\n\u003Ch3>2. Визуальная проверка\u003C/h3>\n\n\u003Cp>После технических проверок переходите к визуальным. Конечно, можно проверить сайт и со своего телефона, но у Ваших посетителей ведь разные устройства - от широкоэкранных флагманов до бюджетных смартфонов.\u003C/p>\n\n\u003Cp>\u003Cpicture class=\"image-align-right\">\u003Csource srcset=\"https://cdn.quasa.io/photos/foto-16/lllll-6.webp\" type=\"image/webp\">\u003Cimg class=\"image-align-right\" height=\"168\" src=\"https://cdn.quasa.io/photos/foto-16/lllll-6.jpeg\" width=\"300\" / alt=\"Мобильная версия сайта: 3 вида + 7 показателей качества\" loading=\"lazy\">\u003C/picture>Чтобы уследить за всеми, используйте сервисы для отображения сайта на разных экранах. Вот некоторые из них:\u003C/p>\n\n\u003Cp>\u003Cstrong>1. \u003Ca href=\"https://www.responsinator.com/\">responsinator.com\u003C/a>\u003C/strong> - показывает сразу все популярные устройства на одной странице. Всего в сервисе их десять: Pixel 2 (и в целом Андроиды), Айфоны и Айпады.\u003C/p>\n\n\u003Cp>\u003Cstrong>2. \u003Ca href=\"https://iloveadaptive.com/\">iloveadaptive.com\u003C/a>\u003C/strong> - можно выбрать, какие платформы отобразить сразу, не перемешивая разные устройства. Из дополнительных плюшек: в правом верхнем углу есть базовые показатели скорости загрузки страницы.\u003C/p>\n\n\u003Cp>\u003Cstrong>3. \u003Ca href=\"https://quirktools.com/screenfly/\">quirktools.com\u003C/a>\u003C/strong> - одновременно отображает только одно устройство, но зато какой выбор. Все экраны разбиты по группам: современные смартфоны, кнопочные телефоны, компьютеры и телевизоры.\u003C/p>\n\n\u003Cp>Сверху - удобная линейка с размером экрана в пикселях и дополнительные функции для поворота и скроллинга.\u003C/p>\n\n\u003Cp>quirktools.com\u003C/p>\n\n\u003Cp>\u003Cpicture class=\"image-align-left\">\u003Csource srcset=\"https://cdn.quasa.io/photos/foto-1/00op-5.webp\" type=\"image/webp\">\u003Cimg class=\"image-align-left\" height=\"190\" src=\"https://cdn.quasa.io/photos/foto-1/00op-5.jpeg\" width=\"300\" / alt=\"Мобильная версия сайта: 3 вида + 7 показателей качества\" loading=\"lazy\">\u003C/picture>В сервисах есть загвоздка - сколько бы Вы их не перепробовали, полноценного отображения они Вам не передадут. Из-за разных платформ, технологий и подходов к разработке, картина на сервисе и в реальном телефоне может отличаться - пикселем больше, пикселем меньше.\u003C/p>\n\n\u003Cp>В целом это не сильно сказывается на качестве мобильности, но лучше это иметь ввиду.\u003C/p>\n\n\u003Cp>Кстати. Узнать точно, с каким размером экрана к Вам заходят посетители можно в той же метрике. Статистика находится в “Стандартные отчеты -> Технологии -> Разрешения дисплея”.\u003C/p>\n\n\u003Ch4>Коротко о главном\u003C/h4>\n\n\u003Cp>Итак, если беретесь за мобильную версию, то сначала выберите подходящий способ, а потом проследите, чтобы разработчик не схалтурил.\u003C/p>\n\n\u003Cp>Но перед всем этим сделайте хороший \u003Ca href=\"https://quasa.io/ru/media/prototipirovanie-sayta\">прототип сайта\u003C/a>. Ведь одно дело чтобы всё хорошо отображалась, а другое дело чтобы всё продавалось. А для этого только технической части мало.\u003C/p>\n\n\u003Cp>И так же, очень жаль, что Вы задумались о мобильной версии только сейчас. Времена, когда говорили, что это очень актуально уже прошли, а мобильная революция - наступила. Сейчас адаптация сайта под смартфоны - функция по умолчанию. Наш Вам экспертный совет - отбросьте сомнения, и вперед за дело.\u003C/p>\n\n\u003Cp>До новых встреч!\u003C/p>","mobilnaya-versiya-sayta-3-vida-7-pokazateley-kachestva","2022-11-14T10:54:26.000000Z","2022-11-14T12:00:00.000000Z","14.11.2022",{"image":89,"image_webp":90,"thumb":91,"thumb_webp":92},"https://cdn.quasa.io/images/news/xrOw1L3lKM9rHTxHBrMS9NTkD6im8RQbXqCFzGgO.jpg","https://cdn.quasa.io/images/news/xrOw1L3lKM9rHTxHBrMS9NTkD6im8RQbXqCFzGgO.webp","https://cdn.quasa.io/thumbs/news-thumb/images/news/xrOw1L3lKM9rHTxHBrMS9NTkD6im8RQbXqCFzGgO.jpg","https://cdn.quasa.io/thumbs/news-thumb/images/news/xrOw1L3lKM9rHTxHBrMS9NTkD6im8RQbXqCFzGgO.webp","large",null,1706,0,"ru",{"id":34,"title":35,"slug":36,"meta_title":99,"meta_description":100,"meta_keywords":101,"show_on_homepage":102,"deleted_at":94,"created_at":103,"updated_at":104,"lang":97},"Маркетинг: SMM, SEO, личный бренд и продвижение | QUASA","Без маркетинга нет бизнеса. Маркетинговые исследования и основы от профессионалов QUASA MEDIA","Маркетинг, маркетолог, маркетинг для бизнеса, бизнес маркетинг, мобильный маркетинг, контент маркетинг",false,"2021-10-28T10:32:54.000000Z","2026-04-22T15:28:55.000000Z",[106,121,134,147,158],{"title":107,"description":108,"slug":109,"created_at":110,"publish_at":111,"formatted_created_at":112,"category":113,"links":114,"view_type":119,"video_url":94,"views":120,"likes":96,"lang":97,"comments_count":96,"is_pinned":102},"Vertu Alphafold за $6880: телефон, с которого CEO будут управлять компанией","Британский люксовый бренд Vertu, известный раньше золотыми айфонами и кожаными «кирпичами» для миллионеров, сделал новую дерзкую ставку.","vertu-alphafold-za-6880-telefon-s-kotorogo-ceo-budut-upravlyat-kompaniey","2026-05-28T13:18:38.000000Z","2026-05-30T06:11:00.000000Z","30.05.2026",{"title":66,"slug":71},{"image":115,"image_webp":116,"thumb":117,"thumb_webp":118},"https://cdn.quasa.io/images/news/dANXWsgGKgpfIFJihjCCb7xBiHadTYyk2RG09kM0.jpg","https://cdn.quasa.io/images/news/dANXWsgGKgpfIFJihjCCb7xBiHadTYyk2RG09kM0.webp","https://cdn.quasa.io/thumbs/news-thumb/images/news/dANXWsgGKgpfIFJihjCCb7xBiHadTYyk2RG09kM0.jpg","https://cdn.quasa.io/thumbs/news-thumb/images/news/dANXWsgGKgpfIFJihjCCb7xBiHadTYyk2RG09kM0.webp","small",16,{"title":122,"description":123,"slug":124,"created_at":125,"publish_at":126,"formatted_created_at":112,"category":127,"links":128,"view_type":93,"video_url":94,"views":133,"likes":96,"lang":97,"comments_count":96,"is_pinned":102},"Настройка адаптивного шаблона в конструкторе креативов Яндекс.Директ","В конструкторе креативов для медийных баннеров и графических объявлений в Яндекс.Директ есть адаптивный шаблон, который позволяет автоматически создавать баннеры под все доступные размеры блока.","nastroyka-adaptivnogo-shablona-v-konstruktore-kreativov-yandeks-direkt","2022-03-18T08:24:42.000000Z","2026-05-30T06:00:00.000000Z",{"title":31,"slug":32},{"image":129,"image_webp":130,"thumb":131,"thumb_webp":132},"https://cdn.quasa.io/images/news/wQH48p0C5lou1WYWNaNOiYCVPi23EViSFw2iHdsI.png","https://cdn.quasa.io/images/news/wQH48p0C5lou1WYWNaNOiYCVPi23EViSFw2iHdsI.webp","https://cdn.quasa.io/thumbs/news-thumb/images/news/wQH48p0C5lou1WYWNaNOiYCVPi23EViSFw2iHdsI.png","https://cdn.quasa.io/thumbs/news-thumb/images/news/wQH48p0C5lou1WYWNaNOiYCVPi23EViSFw2iHdsI.webp",2897,{"title":135,"description":136,"slug":137,"created_at":138,"publish_at":139,"formatted_created_at":112,"category":140,"links":141,"view_type":119,"video_url":94,"views":146,"likes":96,"lang":97,"comments_count":96,"is_pinned":102},"«Мы все видели, как оно ломается»: почему тренеры ИИ Tesla не доверяют Full Self-Driving","Tesla и Илон Маск уже много лет утверждают, что Full Self-Driving (FSD) в 10 раз безопаснее обычного водителя-человека. Но сотрудники, которые день за днём обучают эту систему, видят совсем другую картину — и она далека от идеальной.","my-vse-videli-kak-ono-lomaetsya-pochemu-trenery-ii-tesla-ne-doveryayut-full-self-driving","2026-05-28T12:28:48.000000Z","2026-05-30T03:19:00.000000Z",{"title":66,"slug":71},{"image":142,"image_webp":143,"thumb":144,"thumb_webp":145},"https://cdn.quasa.io/images/news/sFKd9kP6taayh8DLh0yHBgnn9ddQNGU9EIoAyImm.jpg","https://cdn.quasa.io/images/news/sFKd9kP6taayh8DLh0yHBgnn9ddQNGU9EIoAyImm.webp","https://cdn.quasa.io/thumbs/news-thumb/images/news/sFKd9kP6taayh8DLh0yHBgnn9ddQNGU9EIoAyImm.jpg","https://cdn.quasa.io/thumbs/news-thumb/images/news/sFKd9kP6taayh8DLh0yHBgnn9ddQNGU9EIoAyImm.webp",36,{"title":148,"description":149,"slug":150,"created_at":151,"publish_at":152,"formatted_created_at":112,"category":153,"links":154,"view_type":93,"video_url":94,"views":157,"likes":96,"lang":97,"comments_count":96,"is_pinned":102},"8 быстрых ссылок и расширенный формат объявлений в Яндекс.Директ","К текстово-графическим объявлениям в Яндекс.Директ можно добавить не четыре, а сразу восемь быстрых ссылок с описаниями.","8-bystryh-ssylok-i-rasshirennyy-format-obyavleniy-v-yandeks-direkt","2022-03-18T08:30:12.000000Z","2026-05-30T03:00:00.000000Z",{"title":31,"slug":32},{"image":155,"image_webp":94,"thumb":156,"thumb_webp":156},"https://cdn.quasa.io/images/news/OKhxqRSKJsyyiuVT4oUtLq0Tux0kSyqT4YeP8CIS.webp","https://cdn.quasa.io/thumbs/news-thumb/images/news/OKhxqRSKJsyyiuVT4oUtLq0Tux0kSyqT4YeP8CIS.webp",2074,{"title":159,"description":160,"slug":161,"created_at":162,"publish_at":163,"formatted_created_at":164,"category":165,"links":166,"view_type":119,"video_url":94,"views":171,"likes":96,"lang":97,"comments_count":96,"is_pinned":102},"Triomics привлекла $22 млн: специализированный ИИ, который освобождает онкологов от тысяч страниц медицинских карт","riomics выбрала самый сложный и эмоционально тяжёлый участок медицины — онкологию. И этот фокус принёс результат: компания закрыла Series B на $22 миллиона.","triomics-privlekla-22-mln-specializirovannyy-ii-kotoryy-osvobozhdaet-onkologov-ot-tysyach-stranic-medicinskih-kart","2026-05-28T12:04:23.000000Z","2026-05-29T13:21:00.000000Z","29.05.2026",{"title":66,"slug":71},{"image":167,"image_webp":168,"thumb":169,"thumb_webp":170},"https://cdn.quasa.io/images/news/DvT2x2INPRsp2M7pfBS0ZI911Qn6cKtmXp4oLaSV.jpg","https://cdn.quasa.io/images/news/DvT2x2INPRsp2M7pfBS0ZI911Qn6cKtmXp4oLaSV.webp","https://cdn.quasa.io/thumbs/news-thumb/images/news/DvT2x2INPRsp2M7pfBS0ZI911Qn6cKtmXp4oLaSV.jpg","https://cdn.quasa.io/thumbs/news-thumb/images/news/DvT2x2INPRsp2M7pfBS0ZI911Qn6cKtmXp4oLaSV.webp",108,[173,186,198,211,223],{"title":174,"description":175,"slug":176,"created_at":177,"publish_at":178,"formatted_created_at":179,"category":180,"links":181,"view_type":119,"video_url":94,"views":184,"likes":185,"lang":97,"comments_count":96,"is_pinned":102},"Что такое темперамент человека и чем он отличается от характера","Сегодня мы с вами погрузимся в мир практической психологии и рассмотрим, что такое темперамент. Мы уверены, что вы не раз слышали это понятие, но, возможно, не до конца понимали его суть. Узнаем историю понятия и кратко разберем 4 типа темперамента.","chto-takoe-temperament-cheloveka-i-chem-on-otlichaetsya-ot-haraktera","2021-08-31T00:10:00.000000Z","2025-12-18T12:45:00.000000Z","18.12.2025",{"title":11,"slug":12},{"image":182,"image_webp":94,"thumb":183,"thumb_webp":183},"https://cdn.quasa.io/images/news/JhE5h2bmD07cu9sGu3ke0OOXoEws9FJd4YhdYd9t.webp","https://cdn.quasa.io/thumbs/news-thumb/images/news/JhE5h2bmD07cu9sGu3ke0OOXoEws9FJd4YhdYd9t.webp",1663136,35,{"title":187,"description":188,"slug":189,"created_at":190,"publish_at":191,"formatted_created_at":179,"category":192,"links":193,"view_type":119,"video_url":94,"views":196,"likes":197,"lang":97,"comments_count":96,"is_pinned":102},"Отрицательные качества человека: список с пояснениями + примеры для резюме","Вы узнаете, что писать в резюме, если работодатель просит перечислить свои слабые стороны, и можно ли недостатки превратить в преимущества.","otricatelnye-kachestva-cheloveka-spisok-s-poyasneniyami-primery-dlya-rezyume","2021-08-26T11:43:39.000000Z","2025-12-18T12:47:00.000000Z",{"title":11,"slug":12},{"image":194,"image_webp":94,"thumb":195,"thumb_webp":195},"https://cdn.quasa.io/images/news/QM5IJhVcPXs56iLQEVfEipRGMjoDZKwx5yOI9baM.webp","https://cdn.quasa.io/thumbs/news-thumb/images/news/QM5IJhVcPXs56iLQEVfEipRGMjoDZKwx5yOI9baM.webp",615103,117,{"title":199,"description":200,"slug":201,"created_at":202,"publish_at":203,"formatted_created_at":204,"category":205,"links":206,"view_type":119,"video_url":94,"views":209,"likes":210,"lang":97,"comments_count":96,"is_pinned":102},"Положительные качества человека: список достоинств для жизни, отношений и работы","Качества личности – это набор устойчивых психических состояний, с помощью которых человек взаимодействует с социумом, влияет на него и ведет активную деятельность.","polozhitelnye-kachestva-cheloveka-spisok-dostoinstv-dlya-zhizni-otnosheniy-i-raboty","2021-08-25T22:16:19.000000Z","2026-04-15T09:30:00.000000Z","15.04.2026",{"title":11,"slug":12},{"image":207,"image_webp":94,"thumb":208,"thumb_webp":208},"https://cdn.quasa.io/images/news/GjO9AIKY0GptNr5rAcfA4QMPIJKlFxaJ8Yy9gCDb.webp","https://cdn.quasa.io/thumbs/news-thumb/images/news/GjO9AIKY0GptNr5rAcfA4QMPIJKlFxaJ8Yy9gCDb.webp",611885,171,{"title":212,"description":213,"slug":214,"created_at":215,"publish_at":216,"formatted_created_at":179,"category":217,"links":218,"view_type":119,"video_url":94,"views":221,"likes":222,"lang":97,"comments_count":18,"is_pinned":102},"Интересные темы для разговоров с кем угодно и где угодно","Рекомендации для интересного общения. Темы, на которые можно поговорить.","interesnye-temy-dlya-razgovorov-s-kem-ugodno-i-gde-ugodno","2021-06-06T20:04:50.000000Z","2025-12-18T13:02:00.000000Z",{"title":23,"slug":24},{"image":219,"image_webp":94,"thumb":220,"thumb_webp":220},"https://cdn.quasa.io/images/news/0MQot5gzrfi2JKDfW9BmQBR954aYKcAmIa5LRojN.webp","https://cdn.quasa.io/thumbs/news-thumb/images/news/0MQot5gzrfi2JKDfW9BmQBR954aYKcAmIa5LRojN.webp",464073,84,{"title":224,"description":225,"slug":226,"created_at":227,"publish_at":228,"formatted_created_at":179,"category":229,"links":230,"view_type":119,"video_url":94,"views":233,"likes":234,"lang":97,"comments_count":96,"is_pinned":102},"Типы личности в психологии: 6 самых распространенных классификаций","Если простыми словами, то личность – это человек, обладающий набором индивидуальных характеристик и являющийся субъектом социальных отношений.","tipy-lichnosti-v-psihologii-6-samyh-rasprostranennyh-klassifikaciy","2021-10-11T22:27:07.000000Z","2025-12-18T08:25:00.000000Z",{"title":11,"slug":12},{"image":231,"image_webp":94,"thumb":232,"thumb_webp":232},"https://cdn.quasa.io/images/news/svg5pgcLVwCHibSqq7mqRS5kUkiogG2IpLBDDoi5.webp","https://cdn.quasa.io/thumbs/news-thumb/images/news/svg5pgcLVwCHibSqq7mqRS5kUkiogG2IpLBDDoi5.webp",302055,47,[236,237,238,239,240,241,242,243,244,245,246,247,248,249,250],{"title":63,"slug":64},{"title":15,"slug":16},{"title":31,"slug":32},{"title":35,"slug":36},{"title":59,"slug":60},{"title":51,"slug":52},{"title":47,"slug":48},{"title":27,"slug":28},{"title":23,"slug":24},{"title":73,"slug":74},{"title":11,"slug":12},{"title":39,"slug":40},{"title":66,"slug":71},{"title":43,"slug":44},{"title":19,"slug":20}]