В поисках работы? Обучение на дому, свободный график. Хватит работать на дядю, РАБОТАЙТЕ НА СЕБЯ!      Узнать подробности
Авто заполняемый сайт    Авто заполняемый сайт




Home » Трафик и реклама » Мобильная версия веб-сайта: 3 вида + 7 характеристик свойства

Мобильная версия веб-сайта: 3 вида + 7 характеристик свойства


Logo


Здрасти!

О мобильности молвят все кому не лень: от маленьких рекламных агентств до гигантов типа Yandex’а и Гугла.

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

И сходу откроtv большенный секрет, опосля её внедрения, мы начали получать больше заказов. Всё. Остальное далее.

Для чего это необходимо

Можно по-разному мусолить тему необходимости адаптации веб-сайта под мобильные устройства. Но глобально есть две весомые предпосылки в пользу сотворения мобильной версии веб-сайта — пользовательская и техно.

Давайте остановимся подробнее на каждой. При всем этом, как обычно, кратко и по делу. Воду оставляем за бортом.

1. Удобство для юзеров

Аналитики из StatCounter первыми увидели, что толика мобильного трафика превысила долю рабочего стола: 51,3% против 48,7. Это означает, что в среднем хоть какой веб-сайт в вебе с телефона посещают почаще, чем с компа.

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

Статистика

С каждым годом отрыв вырастает все посильнее — к примеру, в 2018 году рост составил 20%. Причём, аналитики молвят, что это еще не предел.

Таковой расклад буквально должен вынудить Вас задуматься: как Ваш веб-сайт смотрится на дисплее телефонов.

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

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

2. Предпочтения поисковых машин

Google и Yandex топят за мобильные версии уже издавна. 1-ый для этого выпустил особый метод Mobile-first Index, по которому он оценивает удобство мобильного веб-сайта и зависимо от этого описывает его позицию в поиске.

У второго метод вышел позднее, но по значимости он приблизительно на том же уровне. Именуется — “Владивосток”.

Есть и косвенные предпосылки, которые влияют на ситуацию мобильной версии в поиске. Кроме иных причин, поисковики учитывают и поведенческие свойства. Это про то, как длительно Ваши гости проводят время на веб-сайте, сколько страничек они открывают, как интенсивно кликают по кнопочкам и переключателям.

Если юзер зайдет с телефона на обыденный десктопный веб-сайт, то длительно он там не пробудет. А означает и поведенческие свойства ухудшатся. Как следствие — Вы на крайних необитаемых страничках Yandex’а и Гугла по seo-продвижению.

Мы Вас еще не уверили? Тогда проверьте сами, нужна ли мобильная версия Для вас, а поточнее с каких устройств гости заходят на Ваш веб-сайт.

Мобильная версия веб-сайта: 3 вида + 7 характеристик свойстваСоздать это можно в Гугл Analytics в отчете “Аудитория -> Мобильные устройства -> Обзор”. Если у Вас Yandex.Метрика, тогда перейдите в “Отчеты -> Технологии -> Устройства”.

Аналитика

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

Принципиально. Таковая ситуация наблюдается не у всех. И в неких сферах внедрение мобильной версии запрещается, вроде бы это удивительно не звучало.Мобильная версия веб-сайта: 3 вида + 7 характеристик свойства

виды мобильных версий

Большая часть веб-сайтов и интернет-магазинов, которые Вы встречали, употребляют один из 3-х подходов: адаптивная верстка, отдельный мобильный веб-сайт, и динамический показ.

Как обычно, чтоб создать верный выбор, необходимо отталкиваться от собственных задач и способностей.

1. Адаптивная верстка

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

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

Основной плюс таковой адаптивности веб-сайта в том, что и мобильная, и десктопная версии — это один и этот же веб-сайт.

Мобильная версия веб-сайта: 3 вида + 7 характеристик свойстваА означает и любые конфигурации довольно внести один раз, опосля что адаптация веб-сайта для всех экранов произойдет автоматом. Это быть может добавление статьи, смена сортировки, новейший цвет клавиш. Остальные плюсы адаптива:

  • Недорого и просто — разрабатывается относительно стремительно и дешево, можно даже ввести адаптив в уже имеющийся веб-сайт;
  • Один адресок страничек — комфортно для юзеров и корректно с технической точки зрения (меньше мороки с поисковой оптимизацией);
  • Так советует Google. На страничке для разрабов есть официальная рекомендация употреблять конкретно адаптивную верстку. Определенных аргументов там нет, но это сам Google.

Мобильная версия веб-сайта: 3 вида + 7 характеристик свойстваМинусы адаптивной вёрстки также имеются. Хотя относительно остальных вариантов они достаточно неприметные. Но всё же, как уже произнес, они есть:

  • Веб-сайт с большенный функциональностью тяжело адаптировать под телефоны. Это будет либо неловко, либо придется пожертвовать некими способностями;
  • Неспешная загрузка. Помните мы гласили, что и для телефонов и для компов загружается один и этот же веб-сайт?
    Это и тяжёлые рисунки, и длинноватые менюшки, и весь остальной размер инфы. Чтоб решить делему, некие создатели употребляют сжатие страничек, да и они требуют доп запросов на сервер, а означает и времени;
  • Нереально переключиться на полную версию. Юзер не сумеет в случае что перейти на десктопный вариант, чтобы употреблять все способности, поэтому что веб-сайт сам решает, какую версию ему показать.

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

2. Отдельная мобильная версия

В этом случае у Вас будут два различных веб-сайта — у всякого собственный адресок, дизайн и способности. Это и есть ответ на вопросец: “Чем различается мобильная версия веб-сайта от адаптивной?”.

Мобильная версия веб-сайта: 3 вида + 7 характеристик свойстваВеб-сайт сам описывает размер экрана гостя и решает, что будет отображаться — мобильная версия веб-сайта либо десктопная. Почаще всего конкретно мобильная версия начинается в ссылке с буковкы m (в переводе как “мобильная”).

Отдельная мобильная версия

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

Мобильная версия веб-сайта: 3 вида + 7 характеристик свойстваМакет мобильной версии будет очень различаться от рабочего стола. У Вас буквально получится удержать растерянного гостя, который быстрее всего толкается в автобусе либо заглядывает в телефон, пока его не лицезреет начальник.

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

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

Мобильная версия веб-сайта: 3 вида + 7 характеристик свойстваСправедливости ради — у отдельной версии веб-сайта для мобильных устройств есть и недочеты:

  • Различные адреса веб-сайта у мобильных телефонов и рабочего стола. Это может сделать проблемы при SEO — поисковики лицезреют два различных веб-сайта с схожим содержимым. И снижают позиции за дублирование. Чтоб обойти делему, придется подключать доп ресурсы;
  • Неловко посиживать с планшета — на нем элементы расплываются по всему экрану. А для десктопной версии экран планшета окажется недостаточно огромным. Выходит, что гость попадает в тупик;
  • Обходится дороже. Хоть у мобильной версии и ограниченный функционал, но все равно, считайте, что это новейший веб-сайт, который необходимо создавать с нуля. Потому на разработку мобильной версии веб-сайта закладывайте бюджет заблаговременно;
  • Доп время на управление. Веб-сайтов-то два, поддерживать работу и смотреть за актуальностью необходимо и там, и здесь.

Мобильная версия веб-сайта: 3 вида + 7 характеристик свойстваВидите ли, хлопот много. Но почти все большие интернет-магазины выбирают конкретно этот метод, потому что каждое неверное действие может спугнуть клиента от совершения покупки.

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

3. Динамический показ (RESS)

И 3-ий метод — симбиоз 2-ух прошлых вариантов. Поначалу веб-сайт описывает устройство гостей и, зависимо от размера экрана, открывает десктопную, мобильную либо планшетную версию.

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

Мобильная версия веб-сайта: 3 вида + 7 характеристик свойстваОсновной недочет RESS — это длительно и недешево. Создать динамический показ — все равно, что с нуля сделать несколько различных веб-сайтов.

Ну и разработка не совершенна. RESS относительно юный инструмент, потому может случится такое, что устройство обусловится некорректно либо не обусловится совершенно.

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

Ещё есть такое понятие, как резиновая вёрстка. Некие считают, что это вариант мобильного веб-сайта, но это не так. 


Принципиально. Резиновая вёрстка — это только когда веб-сайт также аккуратненько отображается на телефоне, как и на пк. Причём, вполне без конфигураций.

КРИТЕРИИ ИДЕАЛЬНОСТИ

Мобильная версия веб-сайта: 3 вида + 7 характеристик свойстваМы уже гласили, что за компом юзер очень сосредоточен на том, что лицезреет на дисплее.

За его внимание фактически ничего не соперничает. Или дело посиделки за телефоном — параллельные задачки, дорога, оповещения, звонки, окружающие. Это и необходимо учесть сначала при разработке.

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

1. Большой черный текст на светлом фоне

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

2. Недлинные формы

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

3. Огромные кликабельные элементы

Мобильная версия веб-сайта: 3 вида + 7 характеристик свойстваГость не должен целиться и ловить клавиши и переключатели. Все интерактивные элементы лучше созодать большими — попытайтесь сами на их потыкать. Apple и Microsoft рекомендуют стремиться к размерам 44 на 44 пикселя. Малый порог — 24х24, но это в последнем случае.

4. Скорость загрузки веб-сайтов

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

Проверить мобильную версию веб-сайта на скорость загрузки можно в особых сервисах, о их мало ниже.

5. Данный тип формы

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

6. Кликабельные контакты

Мобильная версия веб-сайта: 3 вида + 7 характеристик свойстваКак и в случае с формами, у контактных данных тоже есть особый тип ссылки. Жмем на телефон — раскрывается набор номера, на почту — почтовая программка. Юзеры непременно будут по привычке тыкать по контактам.

7. Информация в один столбец

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

Лайфхак. Если Для вас просто нужна полная информация о клиенте (для доставки, к примеру), то разбейте процесс наполнения заявки на пару шажков. 

Мобильная версия веб-сайта: 3 вида + 7 характеристик свойстваВ первом шаге запросите имя и номер, а адресок и реквизиты — в последующих. Даже если юзер поленится и не заполнит форму до конца, у Вас останутся контакты, чтоб дожать.

ПрОВЕРКА мобильностИ

Наилучший эксперт, который произнесет Для вас, удачный ли у Вас веб-сайт — это гость. Проведите маленькое тестирование собственной мобильной версии по способу «Мысли в слух».

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

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

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

1. Техно проверка

Когда вы удостоверьтесь, что все элементы на собственных местах, а интерфейс понятный и прогнозируемый, перебегайте к технической стороне. Пропустите веб-сайт через различные сервисы, чтоб собрать ошибки и замечания. Можете — исправите сами, нет — будете знать, что написать в ТЗ программеру.

1.1 Гугл Search Console — официальный сервис от Гугла. Он покажет, как смотрится веб-сайт на среднестатистическом экране телефона и даст советы по улучшению.

Мобильная версия веб-сайта: 3 вида + 7 характеристик свойстваПомните, мы гласили про метод Mobile-first Index? Сервис как раз основан на его работе, потому не третируйте сиим пт.

Гугл Search Console 

2. Yandex Веб-мастер — аналогичный сервис от Yandex’а. До этого чем провериться тут, необходимо добавить веб-сайт в панель Веб-мастера и подтвердит на него права (загрузить маленькой выданный файлик).

Лишь позже можно употреблять сервис, перейдя в “Инструменты -> Проверка мобильных страничек”. Штука тоже нужная — с советами и комментами.

Мобильная версия веб-сайта: 3 вида + 7 характеристик свойстваYandex Веб-мастер

3. Проверка от поиска Bing. Да-да, таковой поисковик тоже есть. Пусть им пользуется весьма не много людей, но на данный момент Для вас необходимы не они. Сервис может узреть ошибки, на которые прошлые два не направят внимание. Ну и, как говорится, ужаснее не будет.

Мобильная версия веб-сайта: 3 вида + 7 характеристик свойстваПроверка от поиска Bing

2. Зрительная проверка

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

Мобильная версия веб-сайта: 3 вида + 7 характеристик свойстваЧтоб уследить за всеми, используйте сервисы для отображения веб-сайта на различных экранах. Вот некие из их:

1. responsinator.com — указывает сходу все пользующиеся популярностью устройства на одной страничке. Всего в сервисе их 10: Pixel 2 (и в целом Дроиды), Айфоны и Айпады.

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

3. quirktools.com — сразу показывает лишь одно устройство, но зато какой выбор. Все экраны разбиты по группам: современные телефоны, кнопочные телефоны, компы и телеки.

Сверху — комфортная линейка с размером экрана в пикселях и доп функции для поворота и скроллинга.

quirktools.com

Мобильная версия веб-сайта: 3 вида + 7 характеристик свойстваВ сервисах есть загвоздка — сколько бы Вы их не перепробовали, настоящего отображения они Для вас не передадут. Из-за различных платформ, технологий и подходов к разработке, картина на сервисе и в настоящем телефоне может различаться — пикселем больше, пикселем меньше.

В целом это не очень сказывается на качестве мобильности, но лучше это иметь ввиду.

К слову. Выяснить буквально, с каким размером экрана к Для вас заходят гости можно в той же метрике. Статистика находится в “Обычные отчеты -> Технологии -> Разрешения монитора”.

Кратко о главном

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

Но перед всем сиим сделайте неплохой макет веб-сайта. Ведь одно дело чтоб всё отлично отображалась, а другое дело чтоб всё продавалось. А для этого лишь технической части не много.

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


monik24.com - Топ рейтинг сайтов

Авто заполняемый сайт    Авто заполняемый сайт


Top