Там мы разобрали, зачем нужен адаптивный дизайн, какие от него плюсы. Как следует из статьи, адаптивный дизайн нужен, и нужен всем. Сегодня же мы рассмотрим, что лучше для сайта: адаптивный дизайн или отдельная мобильная версия.
Мобильная версия
Мобильная версия сайта — это отдельная его версия, предназначенная для смартфонов и планшетов. Как правило, имеет дизайн, оптимизированный под мобильные устройства, чтобы контент подавался в удобочитаемом виде и загрузка происходила почти мгновенно. Обычно выносится на поддомен в виде m.site.ru или mobile.site.ru.
Преимущества
Удобство
Пользователям не надо скролить вперед-назад и по диагонали в поисках нужного контента , увеличивать-уменьшать для того, чтобы прочитать нужный текст. Весь сайт подается в одной колонке, которую нужно прокручивать сверху вниз. Весь контент, как правило, структурирован и разбит на логические блоки.
Скорость загрузки
Как правило, дизайн мобильной версии очень упрощен, а код и скрипты минимизированы, благодаря чему достигается очень быстрая загрузка сайта на мобильных устройствах.
Правки по сайту
Мобильная версия по факту является отдельным сайтом, а значит внести правки не представляет труда. Не надо заботиться и переживать, как сделать, чтобы изменения коснулись только мобильной версии и не затронули десктопную.
Переход на основную версию
В большинстве случаев пользователь сможет без проблем перейти на основную версию сайта, если ему надо будет воспользоваться функционалом, недоступным в мобильной версии.
Недостатки
Дублирование
Дублирование контента на разных поддоменах негативно сказывается на поисковом продвижении. Как правило, созданием мобильной версии занимаются программисты, а продвижением - SEO-специалисты. И даже если на тестовом варианте учтены все пожелания SEO-специалистов, не факт, что на боевой вариант они перекочуют в исходном виде. Часто при переносе что-то меняется, что-то добавляется. В итоге можем получить проблемы с ранжированием из-за дублей в мобильной версии.
Обновление
Весь контент, добавленный на основной сайт, придется дублировать и на мобильной версии. А если сайт, например, является новостным порталом и обновляется ежедневно, это может стать вполне затратным процессом.
Ограничение функционала
В мобильной версии зачастую не переносятся тяжелые решения функциональности. Обычно перед созданием мобильного сайта анализируются запросы и поведение пользователей с мобильных устройств и на основании этих данных дается лишь то, что и правда важно для мобильных посетителей.
Мобильная версия себя хорошо зарекомендовала и до сих пор часто используется веб-мастерами. То же самое можно отнести и к мобильным приложениям. Но это уже очень затратно, и обычный среднестатистический сайт не может позволить себе разработку мобильных приложений.
Адаптивная верстка
Адаптивно сверстанный сайт одинаково удобно отображается как на десктопе, так и на мобильных устройствах.
Преимущества
Удобство реализации
Как правило, при адаптивной верстке ширина экрана подгоняется под нужный размер дисплея. Все это можно реализовать посредством HTML и CSS. А современные CMS и фреймворки позволяют сделать это буквально в пару кликов. Да и современные шаблоны уже сразу предоставляют адаптивный дизайн. Остается только его установить? и за пару минут у вас адаптивный дизайн, который удобен для любой аудитории.
SEO
Если в мобильной версии мы сталкиваемся с дублированием контента на разных поддоменах, то здесь подобной проблемы нет. У страницы будет один адрес (URL)? и при изменении разрешения экрана либо устройства у нас не будет ломаться дизайн или нас не будут перенаправлять на мобильную версию. Этот вариант лучше решает проблему дублирования контента, нежели атрибуты rel="canonical" или запреты в robots.txt на мобильной версии.
Недостатки
Тяжеловесность
Обычно при адаптивности оставляют весь функционал, доступный пользователям. А значит мобильные посетители могут столкнуться с нагромождением скриптов и большим количеством информации, которую будет сложно сразу охватить на небольшом дисплее смартфона. Если для десктопа нормально иметь размер в 200-250 Кб, то мобильная обычно занимает менее 50 Кб.
Цели посещения
Зачастую пользователи заходят на сайт, чтобы узнать контактные данные, схему проезда, наличие филиалов и т.д. И на некоторых сайтах им придется перейти по нескольким тяжелым страницам, чтобы достичь своей цели.
Нет выбора
На мобильной версии, если программист криво наверстал блок и скрыл телефоны за логотипом, вы всегда можете переключиться в десктопную версию и хоть с масштабированием, но посмотреть контактные данные. Если же программист накосячит при адаптивной верстке, то вам придется постараться, чтобы узнать то, что вы хотите, да и не каждый это сможет. Поэтому адаптивный дизайн надо изначально очень хорошо и грамотно верстать, а потом так же грамотно тестировать.
Итог: адаптивная верстка или мобильная версия?
Нет здесь единого правильного ответа. Под каждые задачи выбирается оптимальный вариант. И адаптивный дизайн, который идеально подходит для одного сайта, в другом случае вызовет лишь проблемы, связанные с удобством пользования сайтом. Крупным игрокам и громоздким сайтам, возможно, вообще проще сделать мобильное приложение, в котором будет только нужный для пользователей функционал .
Наше мнение, что если у вас только информационный сайт, то отлично подойдет адаптивный дизайн. Так как сжимать текст и картинки куда проще, чем решать, как же переверстать огромный калькулятор на сайте без потери юзабилити.
А вот если у вас на сайте присутствует личный кабинет с огромным функционалом или его сайт будет тяжело перенести на адаптивный дизайн, то проще сделать мобильную версию, где удобно расположить все инструменты для пользователей.
Ну, а если у вас еще нет сайта, и вы только задумываетесь над его созданием, то лучше сразу закладывать адаптивный дизайн в разработку.
С началом эры бума мобильных устройств разработчики оказались перед выбором: оставлять ли мобильные версии своих сайтов наряду с «полноценными», или сайты должны стать адаптивными и самостоятельно подстраиваться под разные размеры экранов?
На текущий момент при построении мобильных версий сайтов существуют 3 основных способа их построения:
- Адаптивный дизайн;
- Отдельная мобильная версия сайта;
- RESS (Responsive Design + Server Side).
Адаптивный дизайн
Для реализации адаптивного дизайна обычно используются CSS3 Media Queries. В зависимости от размера экрана, пользователь будет видеть разную картинку:@media screen and (max-width: 1600px) { div.for-example {width: 1500px;} } @media screen and (max-width: 1280px) { div.for-example {width: 1100px;} } @media screen and (max-width: 1024px) { div.for-example {width: 980px;} }
Преимущества адаптивного дизайна
- Удобство разработки - при адаптивной верстке вся структура сайта автоматически подстраивается под различную ширину экрана. Для того, что бы получить рабочий продукт не нужно писать все с нуля - достаточно лишь подправить CSS и HTML… С учетом наличия фреймворков, подобных Bootstrap подобная разработка не является очень сложной при стандартной реализации. К тому же, поддержка такого продукта будет относительно простой задачей.
- Один URL - избавляет нас от ненужных редиректов, и надобности пользователю запоминать адрес мобильной версии (пусть даже это просто приставка m.). Так же наличие единого адреса позитивно скажется на продвижении сайта, поскольку поисковикам будет «удобнее» работать.
Недостатки адаптивного дизайна
- Разные задачи -
типовые задачи «мобильных» пользователей крупных сайтов обычно отличаются от задач пользователей ПК. Если вы являетесь клиентом банка, то, скорее всего, в мобильной версии сайта вас будет интересовать очень ограниченный спектр информации - адреса ближайших отделений, банкоматов и т.д.
В целом, при адаптивной верстке самый распространенный подход - делать копию обычного сайта, реализовать в верстке под телефоны потребности всех групп целевой аудитории. Но тогда о юзабилити можно забыть. Нужные пяти процентам посетителей второстепенные разделы создадут неудобства для основной массы клиентов.
«вес» сайтов остается серьезным препятствием для пользователей мобильных телефонов. Это означает, что некоторые типичные для десктопных сайтов активные элементы, в том числе embedded-карты, ролики, кредитные калькуляторы и меню с анимацией на мобильных сайтах должны быть заменены на более легкие альтернативы. Может ли адаптивный дизайн дать нам такую возможность? В популярной реализации пользователь с маленьким экраном должен загрузить страницу целиком, чтобы увидеть лишь ее часть. Например, если десктопная версия верстки главной весит 200 Кб, а мобильная - еще 50 Кб, для просмотра придется скачать 250 Кб. Конечно, можно использовать сжатие кода страницы, но лишние запросы к серверу все равно будут идти.
- Безысходность - Одно из неоспоримых преимуществ мобильной версии: если не нравится, ее можно отключить, перейти на обычный домен. Сайты с адаптивным дизайном не дают этого простого, но важного выбора. Если адаптированная верстка неудобна, забагована или если она скрывает важный элемент навигации, пишите пропало: вы ничего не можете сделать, чтобы увидеть его снова. Придется бежать искать десктоп или сайт конкурента. Можно придумать «костыли» для обхода этого ограничения (использовать cookie и подключать разные таблицы стилей). Но такой подход усложняет разработку.
Отдельная мобильная версия сайта
Чтобы сделать сайт удобным для мобильных пользователей часто создают так же отдельные версии сайтов - специально ориентированные на пользователя со смартфоном/планшетом. Наиболее распространена практика - перенаправление мобильных пользователей на специальный поддомен (m.example.com, mobile.example.com и т.д.). Наверное, в 99% случаев, мобильная версия представляет собой урезанную основную версию - лишь с тем функционалом, который, по мнению разработчиков, будет необходим и полезен пользователям мобильных устройств и планшетов.Преимущества мобильной версии
- Легкость в изменениях - поскольку сайт существует, де-факто, отдельно от основной версии, вносить в него правки, связанные только с мобильной версией значительно проще, поскольку мобильная версия чаще всего не предоставляет избыточного, ненужного функционала.
- Удобство для пользователя - мобильная версия обычно сильно упрощена по сравнению с десктопной версией, поэтому пользователю не нужно будет далеко ходить за нужной ему информацией.
- Быстрота - из-за того же упрощения сайта, мобильная версия грузится быстрее. Это существенно для пользователей, которые все ещё ходят через GPRS или слабый 3G.
- Выбор- чаще всего, в мобильной версии есть возможность перейти на основную версию сайта.
Недостатки мобильной версии
- Несколько адресов -
- Неудобство для пользователя - для десктопной и мобильной версии разные адреса. Для одних это может оказаться плюсов, для других же - крайне раздражительным фактором, когда для того, что бы удобно посмотреть сайт, нужно запоминать ещё один адрес. Так же есть проблемы и с поисковиками: во избежание дублированного контента SEO-специалистам нужно использовать мета-теги rel=«alternative» и rel=«canonical». Кроме того, когда пользователь мобильного поиска Google кликнет по ссылке в результатах, он попадет на десктопную версию или перенаправлен на мобильную. Но если мобильная версия этой страницы не существует, он получит сообщение об ошибке.
- Ограниченность - создание отдельного мобильного сайта означает избавление от части содержания и функциональности. Кроме того, у вас может быть два различных набора контента, который может негативно сказаться на общей информационной картине.
В целом, создание мобильных версий сайтов оправдывает себя достаточно хорошо, в частности, для крупных проектов. Как пример - Amazon использует у себя специальную, мобильную версию сайта.
RESS
Сам Google, хоть и поддерживает использование веб-мастерами адаптивного дизайна, однако в своих продуктах использует иную систему. Если зайти, к примеру, на главную страницу под разными User-Agent-ами, то можно увидеть различный HTML для различных устройств. RESS - Responsive Design + Server Side. Пример реализации, набросанный «на коленке»:$DS = DIRECTORY_SEPARATOR; require_once(dirname(__FILE__) . $DS . "libraries" . $DS . "browser.php"); $device = BBrowser::detectDevice(); if($device == DEVICE_TYPE_MPHONE){ $tmpl = "template.m.php"; } else if($device == DEVICE_TYPE_TABLET){ $tmpl = "template.t.php";} else{ $tmpl = "template.php"; } include(dirname(__FILE__) . $DS . "templates" . $DS . $tmpl);
Плюсы RESS
Фактически, метод может включать в себя преимущества как и отдельной мобильной, так и адаптивной версии сайтов, в зависимости от реализации. Из того, что будет новым:- Минимизация трафика - Ненужные JavaScript могут быть удалены из HTML, который освобождает CPU, память и кэш на мобильном устройстве. Так же может быть специально оптимизирована html и css.
- Возможно использовать таргетирование - например, для Android-устройств предлагать скачать приложение с GooglePlay, а для Apple – с iTunes. Для каждого устройства можно сделать свою вёрстку.
Минусы RESS
- Сложность в разработке - подобный метод потребует соответствующей настройки сервера и труда большего количества программистов. Так же необходимо будет делать несколько различных вариантов верстки.
- Механизм определения устройств - к сожалению, даже в наше время ещё не доведен до совершенство. Истории с тем, как чей-то редкий телефон не определился как мобильное устройство, всплывают довольно часто.
В целом же, RESS - самый лучший из трех предложенных вариантов, однако требует намного больших трудозатрат при разработке.
Резюме
На мой личный взгляд - идеального варианта, который бы стоило использовать всем, нет. Лучший вариант для меня - это RESS. Однако, это один из редких вариантов, поскольку требует больших усилий для реализации. В целом же все 3 варианта имеют свои плюсы и минусы, причем в зависимости от сути и направленности сайта.О мобильности говорят все, кому не лень: от небольших маркетинговых агентств до гигантов типа Яндекса и Гугла.
В этой статье мы расскажем, почему мобильная версия сайта вызывает такой ажиотаж, какие требования к ней предъявлять и нужно ли это лично Вам.
И сразу открою большой секрет, после её внедрения, мы начали получать больше заказов. Всё. Остальное дальше.
Зачем? Зачем? Зачем?
Можно по-разному мусолить тему необходимости адаптации сайта под мобильные устройства.
Но глобально есть две веские причины в пользу создания мобильной версии сайта – пользовательская и техническая.
Давайте остановимся подробнее на каждой. При этом, как обычно, коротко и по делу. Воду оставляем за воротами.
Удобство для пользователей
В 2016 году аналитики из StatCounter первыми заметили, что доля мобильного трафика превысила долю десктопа: 51,3% против 48,7.
Это значит, что в среднем любой сайт в интернете с телефона посещают чаще, чем с компьютера.
В России картина примерно такая же: доля смартфонов выше, чем доля компьютеров и других устройств. Об этом говорит исследование компании GfK Rus:
Статистика
С каждым годом отрыв растет все сильнее - например, в 2018 году рост составил 20%. Причём, аналитики говорят, что это еще не предел.
Такой расклад точно должен заставить Вас задуматься: как же Ваш сайт смотрится на экране смартфонов.
И скорее всего ответ – плохо. Когда открываешь обычный неадаптированный сайт с мобильника, просмотр превращается в квест – приходится масштабировать страницы, целиться в мелкие ссылки, ждать долгой загрузки.
Добавьте к этому всему спешку и кучу отвлекающих факторов – за телефоном ведь не так же, как за компьютером, когда посетитель полностью сосредоточен на мониторе.
Пользователи не будут долго искать нужный раздел и разбираться в интерфейсе – в соседней вкладке всегда открыт удобный сайт конкурента.
Предпочтения поисковых систем
Гугл и Яндекс топят за мобильные версии уже давно. Первый для этого выпустил специальный алгоритм Mobile-first Index, по которому он оценивает удобство мобильного сайта и в зависимости от этого определяет его позицию в поиске.
У второго алгоритм вышел позже, но по важности он примерно на том же уровне. Называется – “Владивосток”.
Есть и косвенные причины, которые влияют на ситуацию мобильной версии в поиске. Помимо прочих факторов, поисковики учитывают и поведенческие характеристики.
Это про то, как долго Ваши посетители проводят время на сайте, сколько страниц они открывают, насколько активно кликают по кнопкам и переключателям.
Если пользователь зайдет с мобильника на обычный десктопный сайт, то долго он там не пробудет.
А значит и поведенческие характеристики ухудшатся. Как следствие – Вы на последних необитаемых страницах Яндекса и Гугла по .
Мы Вас еще не убедили? Тогда проверьте сами нужна ли мобильная версия Вам, а точнее с каких устройств посетители заходят на Ваш сайт.
Сделать это можно в Google Analytics в отчете “Аудитория -> Мобильные устройства -> Обзор”. Если у Вас , тогда перейдите в “Отчеты -> Технологии -> Устройства”.
Аналитика
Если видите, что смартфонов больше 15%, то для Вас это тревожный звоночек – оптимизировать сайт под мобильные Вам просто необходимо. Поэтому, давайте разбираться, какие вообще есть способы это сделать.
Важно. Такая ситуация наблюдается не у всех. И в некоторых сферах использование мобильной версии запрещается, как бы это странно не звучало.
виды мобильных версий
Большая часть сайтов и интернет-магазинов, которые Вы встречали, используют один из трех подходов: адаптивная верстка, отдельный мобильный сайт, и динамический показ.
Как обычно, чтобы сделать правильный выбор, нужно отталкиваться от своих задач и возможностей.
1. Адаптивная верстка
Технически, это один сайт, но вот структура страниц подстраивается под размер устройства.
В упрощенном варианте выглядит так: для компьютеров открываем все пункты меню и строим товары в три столбца.
Для планшетов показываем только корзину, а товары размещаем в два столбика; у смартфонов – прячем все в кнопку меню, товары располагаем по одному на каждую строку.
Адаптивная верстка
Главный плюс такой адаптивности сайта в том, что и мобильная, и десктопная версии – это один и тот же сайт.
А значит и любые изменения достаточно внести один раз, после чего адаптация сайта для всех экранов произойдет автоматически.
Это может быть добавление статьи, смена сортировки, новый цвет кнопок. Другие плюсы адаптива:
- Дешево и просто – разрабатывается относительно быстро и недорого, можно даже внедрить адаптив в уже существующий сайт;
- Один адрес страниц – удобно для пользователей и корректно в техническом плане (меньше мороки с поисковой оптимизацией);
- Так рекомендует Гугл. На странице для разработчиков есть официальная рекомендация использовать именно адаптивную верстку. Конкретных аргументов там нет, но это же сам Гугл.
Минусы адаптивной вёрстки также имеются. Хотя относительно других вариантов они довольно незаметные. Но всё же, как уже сказал, они есть:
- Сайт с большой функциональностью трудно адаптировать под мобильники. Это будет или неудобно, или придется пожертвовать некоторыми возможностями;
- Медленная загрузка. Помните мы говорили, что и для телефонов и для компьютеров загружается один и тот же сайт?
Это и тяжёлые картинки, и длинные менюшки, и весь остальной объем информации. Чтобы решить проблему, некоторые разработчики используют сжатие страниц, но и они требуют дополнительных запросов на сервер, а значит и времени;
- Невозможно переключиться на полную версию. Пользователь не сможет в случае чего перейти на десктопный вариант, чтоб использовать все возможности, потому что сайт сам решает, какую версию ему показать.
Тем не менее, адаптивный дизайн – самый популярный вариант мобильной версии в интернете.
Его используют многие движки, конструкторы и впрочем мы у себя на некоторых .
2. Отдельная мобильная версия
В этом случае у Вас будут два разных сайта – у каждого свой адрес, дизайн и возможности. Это и есть ответ на вопрос: “Чем отличается мобильная версия сайта от адаптивной?”.
Сайт сам определяет размер экрана посетителя и решает, что будет отображаться – мобильная версия сайта или десктопная.
Чаще всего именно мобильная версия начинается в ссылке с буквы m (в переводе как “мобильная”).
Отдельная мобильная версия
Такой подход удобен тем, что Вы вообще не зависите от десктопной версии. Можно полностью сосредоточиться на удобстве мобильных пользователей, оставить только самые базовые функции и учесть все мелочи в юзабилити.
Макет мобильной версии будет сильно отличаться от десктопа. У Вас точно получится удержать рассеянного посетителя, который скорее всего толкается в автобусе или заглядывает в смартфон, пока его не видит начальник.
Все кнопки и переключатели можно сделать громадными, чтобы на них наверняка попасть пальцем.
Также есть и другие аргументы, чтобы создать мобильную версию сайта отдельно: быстрая скорость загрузки – в отдельной версии загружаются легкие картинки среднего качества и в целом страница обрезана до базовых элементов.
И также есть возможность перейти на полную версию сайта, если посетитель решит, что мобильных функций ему недостаточно.
Справедливости ради – у отдельной версии сайта для мобильных устройств есть и недостатки:
- Разные адреса сайта у мобильников и десктопа. Это может создать неприятности при SEO – поисковики видят два разных сайта с одинаковым содержимым.
И понижают позиции за дублирование. Чтобы обойти проблему, придется подключать дополнительные ресурсы;
- Неудобно сидеть с планшета – на нем элементы расплываются по всему экрану.
А для десктопной версии экран планшета окажется недостаточно большим. Получается, что посетитель попадает в тупик;
- Обходится дороже. Хоть у мобильной версии и ограниченный функционал, но все равно, считайте, что это новый сайт, который нужно создавать с нуля.
Поэтому на разработку мобильной версии сайта закладывайте бюджет заранее;
- Дополнительное время на управление. Сайтов-то два, поддерживать работу и следить за актуальностью нужно и там, и тут.
Как видите, забот немало. Но многие крупные интернет-магазины выбирают именно этот способ, так как каждое неправильное действие может спугнуть клиента от совершения покупки.
Если у Вас такие же “опасные” продажи, то значит и Вам нужно обратить внимание на развитие сайтов электронной торговли.
Сайт интернет-магазина
3. Динамический показ (RESS)
И третий способ – симбиоз двух предыдущих вариантов. Сначала сайт определяет устройство посетителей и, в зависимости от размера экрана, открывает десктопную, мобильную или планшетную версию.
То есть грузится только тот вариант, который подходит для конкретного устройства. Компьютерам – большой и громоздкий, а смартфонам – ограниченный, но легкий. Подход сильно сокращает время открытия.
Главный недостаток RESS – это долго и дорого. Разработать динамический показ – все равно, что с нуля создать несколько разных сайтов.
Да и технология не совершенна. RESS относительно молодой инструмент, поэтому может случится такое, что устройство определится неправильно или не определится совсем.
К видным деятелям, которые используют RESS, можно отнести Гугл. В целом же, как обратил внимание, технология не обжита, и если у Вас ограниченный бюджет или поджимает время, лучше не рисковать. А обратить внимание на два предыдущих варианта.
Ещё есть такое понятие, как резиновая вёрстка. Некоторые считают, что это вариант мобильного сайта, но это не так.
Важно. Резиновая вёрстка – это лишь когда сайт также аккуратно отображается на телефоне, как и на пк. Причём, полностью без изменений.
КРИТЕРИИ ИДЕАЛЬНОСТИ
Мы уже говорили, что за компьютером пользователь максимально сосредоточен на том, что видит на экране.
За его внимание практически ничего не конкурирует. То ли дело посиделки за смартфоном – параллельные задачи, дорога, оповещения, звонки, окружающие. Это и нужно учитывать в первую очередь при разработке.
Поэтому в независимости от того, какой подход Вы выбрали, нужно придерживаться определенных правил сайта для мобильных устройств. Вот самые важные из них:
- Крупный темный текст на светлом фоне. Все тексты лучше оформлять по классике – черный шрифт на белой подложке.
- Короткие формы.
Оставить заявку, записаться на прием, оформить покупку – что бы пользователь не собирался вводить, нужно запрашивать минимум данных, которых достаточно для первого контакта.
Длинные формы отпугивают в принципе, что уж говорить о мобильных посетителях.
- Большие кликабельные элементы.
Посетитель не должен целиться и ловить кнопки и переключатели. Все интерактивные элементы лучше делать крупными – попробуйте сами на них потыкать.
Apple и Microsoft советуют стремиться к размерам 44 на 44 пикселя. Минимальный порог – 24х24, но это в крайнем случае.
- Скорость загрузки сайтов.
Тут конкретных стандартов нет, но всегда нужно стремиться к идеалу.
Есть такая общая закономерность – каждая секунда, которая уходит на загрузку страницы, пропорционально снижает конверсию в продажи.
Проверить мобильную версию сайта на скорость загрузки можно в специальных сервисах, о них немного ниже.
- Заданный тип формы.
При составлении технического задания обязательно укажите, что при заполнении телефона должна выводиться только цифровая клавиатура.
То же самое для паролей, электронной почты и других полей. Если разрабатываете сайт сами, то не поленитесь задать каждой форме соответствующий тип.
- Кликабельные контакты.
Как и в случае с формами, у контактных данных тоже есть специальный тип ссылки.
Нажимаем на телефон – открывается набор номера, на почту – почтовая программа. Пользователи обязательно будут по привычке тыкать по контактам.
- Информация в один столбец.
Никаких горизонтальных скроллов и фотографий в несколько столбцов на одном экране.
Даже у крутых флагманов для этого недостаточно большой экран. Текст в одну колонку удобнее читать, а на больших фотографиях можно будет разглядеть все детали.
Лайфхак. Если Вам просто необходима полная информация о клиенте (для доставки, например), то разбейте процесс заполнения заявки на несколько шагов.
В первом шаге запросите имя и номер, а адрес и реквизиты – в следующих. Даже если пользователь поленится и не заполнит форму до конца, у Вас останутся контакты, чтобы дожать.
Форма захвата
ПрОВЕРКА мобильностИ
Лучший эксперт, который скажет Вам, удобный ли у Вас сайт – это посетитель. Проведите небольшое тестирование своей мобильной версии по методу “Мысли в слух”.
Выберите из окружения того, кто лучше остальных подходит под описание Вашего потенциального покупателя: по возрасту, профессии, интересам.
Попросите добровольца сделать заказ – пусть он пройдет полный путь покупателя. Только не мешайте и не поправляйте его.
Пусть все будет максимально реалистично – Вы же не будете сидеть рядом с каждым посетители и объяснять, куда нажимать.
Любые трудности и замешательства Ваш подопытный должен комментировать вслух.
А Вы продолжайте играть в шпиона: анализируйте действия и молча делайте пометки в блокноте. Помочь можно лишь в крайнем случае, если доброволец попал совсем в тупиковую ситуацию.
Техническая проверка
Когда вы убедитесь, что все элементы на своих местах, а интерфейс понятный и предсказуемый, переходите к технической стороне.
Пропустите сайт через разные сервисы, чтобы собрать ошибки и замечания. Сможете – исправите сами, нет – будете знать, что написать в ТЗ программисту.
Google Search Console – официальный сервис от Гугла. Он покажет, как выглядит сайт на среднестатистическом экране смартфона и даст рекомендации по улучшению.
Помните, мы говорили про алгоритм Mobile-first Index? Сервис как раз основан на его работе, поэтому не пренебрегайте этим пунктом.
Google Search Console
Яндекс Вебмастер – аналогичный сервис от Яндекса. Прежде чем провериться здесь, нужно добавить сайт в панель Вебмастера и подтвердит на него права (загрузить небольшой выданный файлик).
Только потом можно использовать сервис, перейдя в “Инструменты -> Проверка мобильных страниц”. Штука тоже полезная – с рекомендациями и комментариями.
Яндекс Вебмастер
Проверка от поиска Bing. Да-да, такой поисковик тоже есть. Пусть им пользуется очень мало людей, но сейчас Вам нужны не они.
Сервис может увидеть ошибки, на которые предыдущие два не обратят внимание. Ну и, как говорится, хуже не будет.
Проверка от поиска Bing
Визуальная проверка
После технических проверок переходите к визуальным. Конечно, можно проверить сайт и со своего телефона, но у Ваших посетителей ведь разные устройства – от широкоэкранных флагманов до бюджетных смартфонов.
Чтобы уследить за всеми, используйте сервисы для отображения сайта на разных экранах. Вот некоторые из них:
responsinator.com – показывает сразу все популярные устройства на одной странице. Всего в сервисе их десять: Pixel 2 (и в целом Андроиды), Айфоны и Айпады.
responsinator.com
iloveadaptive.com – можно выбрать, какие платформы отобразить сразу, не перемешивая разные устройства.
Из дополнительных плюшек: в правом верхнем углу есть базовые показатели скорости загрузки страницы.
iloveadaptive.com
quirktools.com – одновременно отображает только одно устройство, но зато какой выбор. Все экраны разбиты по группам: современные смартфоны, кнопочные телефоны, компьютеры и телевизоры.
Сверху – удобная линейка с размером экрана в пикселях и дополнительные функции для поворота и скроллинга.
quirktools.com
В сервисах есть загвоздка – сколько бы Вы их не перепробовали, полноценного отображения они Вам не передадут.
Из-за разных платформ, технологий и подходов к разработке, картина на сервисе и в реальном телефоне может отличаться – пикселем больше, пикселем меньше.
В целом это не сильно сказывается на качестве мобильности, но лучше это иметь ввиду.
Кстати. Узнать точно, с каким размером экрана к Вам заходят посетители можно в той же метрике. Статистика находится в “Стандартные отчеты -> Технологии -> Разрешения дисплея”.
Коротко о главном
Итак, если беретесь за мобильную версию, то сначала выберите подходящий способ, а потом проследите, чтобы разработчик не схалтурил.
Но перед всем этим сделайте хороший . Ведь одно дело чтобы всё хорошо отображалась, а другое дело чтобы всё продавалось. А для этого только технической части мало.
И так же, очень жаль, что Вы задумались о мобильной версии только сейчас. Времена, когда говорили, что это очень актуально уже прошли, а мобильная революция – наступила.
Сейчас адаптация сайта под смартфоны – функция по умолчанию. Наш Вам экспертный совет – отбросьте сомнения, и вперед за дело.
Многие компании сталкиваются с выбором, что лучше сделать в дополнение к уже работающему сайту: мобильное приложение или мобильную/адаптивную версию сайта. SMS Aero собрал несколько аргументов в пользу и против этих вариантов.
Яндекс в своем вебинаре показал различия в мобильном трафике между приложениями и сайтами:
Несмотря на то, что показатели Mobile Web не так привлекательны, как у Mobile App, не каждой компании нужно срочно искать разработчика на Android и iOS.
Мобильное приложение делать не обязательно, если:
- нужно увеличить охват и привлечь новый трафик
- у вас еще нет базы клиентов
- через сайт нельзя купить товар, но можно заказать консультацию (аудит фирмы, сложные сельскохозяйственные товары и т.п.)
- клиент будет пользоваться вашим товаром/услугой реже 1 раза в месяц
- у вас нет ресурсов на постоянное обновление приложения и продвижение в топ
- вы готовы предоставлять свой товар/услугу через сервисы-агрегаторы (например, Delivery club для доставки еды)
Специалисты из Яндекса в своем вебинаре сказали, что для поисковиков принципиальной разницы между мобильной версией сайта и адаптивной версткой нет – вы можете выбрать тот вариант, который вам удобнее.
Мобильные приложения стоит разрабатывать, если:
- вы хотите работать с лояльностью уже существующего клиента (как минимум, знакомого с брендом)
- вы предоставляете услугу, которую можно заказать без дополнительных звонков и обсуждения условий покупки (заказ еды, такси, запись на прием, бронирование отелей и т.д.)
- процесс взаимодействия с товаром долгий (обучение иностранным языкам, спорт, советы и т.д.)
- вы хотите попасть в каталог по сферам деятельности для привлечения новых клиентов (сервисы доставки еды)
- нужен высокий уровень персонализации, постоянный контакт с клиентом или работа с специфическими функциями (камера, геолокация и др.)
- вы хотите собрать подробную информацию о вашем клиенте
У подавляющего большинства известных компаний есть мобильные приложения: даже у Caterpiller (производитель сложной техники) есть собственная игра на Android. Ключевым моментом здесь является то, что разработка и поддержка приложения не ударит по их бюджету, но повысит лояльность клиентов.
Небольшим компаниям сначала нужно привлечь клиентов – создать базу контактов, а уже потом работать с лояльностью.
Мобильные приложения - это тренд, но они не гарантируют увеличение продаж и рост числа клиентов. Если вы еще сомневаетесь, нужно ли вам приложение, следуйте алгоритму от SMS Aero :
- Изучите аудиторию и выясните, пользуются ли они приложениями (как? какими именно?)
- Определите, какую пользу ваше приложение принесет пользователям и какой доход – вам
- Составьте ТЗ
- Узнайте, сколько будет стоить разработка (обычно разработка приложения на 1 ОС стоит от 100 тысяч рублей в зависимости от сложности, но есть и более дешевые конструкторы с тестовым периодом)
- Добавьте к получившейся сумме затраты на продвижение
- Посчитайте, сопоставимы ли затраты на приложение с доходом, который вы получите от него
Как зарегистрировать новую страницу в одноклассниках Одноклассники создать новую страницу зарегистрироваться сейчас
Обзор и тестирование флагманского смартфона LG G3 Аппаратная платформа и производительность
Приложения webos 2.0 lg. Приложения LG Smart TV. Установка плагина на телевизор
Все смайлы Emoji коды, символы, значения Смайлики эмодзи цифры
Инструкция по активации социальной карты учащегося на портале госуслуг