Сделать мобильную версию сайта: Делаем мобильнуб версию сайта

Содержание

Создать мобильную версию сайта онлайн, как сделать и посмотреть сайт для мобильных телефонов онлайн

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

О целесообразности и нецелесообразности использования онлайн конструкторов веб-ресурсов

Многие предприниматели в Челябинске, Москве, Екатеринбурге и других городах России, задумываясь о создании мобильной версии основного сайта своей компании, стремятся минимизировать временные и финансовые издержки. С этой целью нередко используются специальные онлайн конструкторы, выбор которых в условиях современного рынка очень широк. Некоторые из них являются платными, другие – бесплатными. Но, в любом случае, если хотите добиться успеха в своей сфере деятельности, от использования подобных конструкторов лучше отказаться.

Их основным преимуществом считается то, что вы можете создать мобильную версию сайта онлайн, не обладая никакими специальными знаниями и навыками в данной сфере. Не нужно разбираться в языках программирования, в настройках хостинга, в особенностях CMS, в веб-дизайне и других тонкостях. Можно, используя уже готовые шаблоны, просто «слепить» новую версию своего ресурса для мобильных телефонов, ни во что не внимания и не тратя лишних денег. Однако учтите, что на выходе вы получите продукт очень низкого качества.

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

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

Если хотите сделать мобильную версию сайта – сделайте правильно!

Если не знаете как сделать мобильную версию сайта онлайн и при этом чтобы хотите она была максимально качественной, лучше отдайте предпочтение автономному веб-редактору или обратитесь к услугам высококвалифицированных специалистов Интернет-агентства Dextra. Они смогут разработать такой веб-ресурс, который действительно станет полноценной аналоговой версией вашего основного проекта.

Работая в Челябинске, Москве, Екатеринбурге, наши профессионалы создают для клиентов оригинальные и прибыльные веб-сайты различной направленности. При этом мобильная версия ресурса, разработанная нами, будет выгодно отличаться от той, которую вы могли бы сделать самостоятельно, используя онлайн конструктор. Отдавая предпочтение именно нашим услугам, вы получите возможность:

  1. С легкостью управлять своим ресурсом, изменять, модернизировать, оптимизировать его;
  2. Избавиться от навязчивой рекламы и самостоятельно решать, какие баннеры или ссылки на другие сайты размещать на своих страницах;
  3. Получить версию проекта, которая будет максимально соответствовать основному ресурсу и полностью удовлетворять всем вашим требованиям;
  4. Получить оригинальный дизайн и удобную навигацию.

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

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

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

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

  1. Заголовки должны быть коротким. Неважно, идет ли речь о названии статьи или о товарной категории, например, — в любом случае, длина заголовка не должна превышать одной строки, чтобы он не сместил остальной контент.
  2. Позаботьтесь, чтобы кнопки, которые ваши потенциальные клиенты станут использовать при работе с сайтом, были достаточно большими. Ведь в противном случае человек испытает неудобство, просматривая сайт с телефона или смартфона с сенсорным экраном.
  3. Выберите размер шрифта 12 — 14 px. Если буквы будут меньше, это также создаст неудобства для посетителей. И вы сами в этом убедитесь, если решите посмотреть мобильную версию сайта онлайн, ознакомившись со спецификой подобных веб-проектов.
  4. Краткие подсказки и пояснения размещайте прямо в текстовом поле. Выделить их можно светло-серым шрифтом. Если же это невозможно, пояснения можно разместить и непосредственно над полем. Самое главное, чтобы оно постоянно было перед глазами пользователя.
  5. Откажитесь от всплывающих блоков, ссылок на карты Google, видеоролики с YouTube и т.д. Они только сделают мобильную версию более тяжелой и неудобной, но не принесут ни малейшей пользы.
  6. Вместо красочных спрайтовых иконок используйте иконки из шрифтовых наборов. Они универсальны и потому будут хорошо смотреться на экране устройств с различным разрешением.
  7. Позаботьтесь, чтобы сайт был удобным для пользователя – выведите на обозримое пространство только самые важные элементы и данные. Не пытайтесь вместить всю информацию в одну маленькую колонку – она не будет нормально восприниматься.
  8. Не забывайте об использовании API. Это поможет максимально адаптировать мобильную версию вашего веб-проекта к просмотру со смартфонов. А ведь именно они на сегодняшний день являются наиболее распространенными из всех электронных гаджетов.
  9. Обязательно предоставьте посетителям ссылку на свой основной ресурс. Пусть у них будет возможность получить больше информации о вашей компании, оценить все ваши особенности и преимущества. Кроме того, важно учитывать, что присутствие такой ссылки повышает доверие пользователей к тому или иному сайту.

Зачем нужна онлайн проверка мобильной версии сайта

Когда же все будет готово, целесообразной станет проверка мобильной версии сайта онлайн

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

Посмотреть мобильную версию сайта онлайн можно с помощью специальных ресурсов

Полноценные сервисы анализа мобильных сайтов позволяют не просто посмотреть на сайт, но дадут вам:

  • 10 способов проверки того, как ваш сайт будет выглядеть на экранах мобильных устройств. Посмотрев, вы сможете быть абсолютно уверенными, что все элементы верстки находятся точно на своих местах.
  • Возможность оценить ваш сайт на экранах iPhone 3G и 4G, IPod Touch. А также экранах мобильных телефонов HTC, LG, BlackBerry и Samsung.
  • Анализ влияния на производительность вашего веб-дизайна и тест производительности позволит посмотреть и сравнить скорость загрузки вашего сайта с лучшими сайтами в вашей отрасли.
  • Бесплатный отчет с персональными рекомендациями от Google.

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

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

как создать мобильную версию сайта

Нужен трафик?
Помогу найти точки роста в SEO.
Наладим стабильный трафик из поиска на Ваш сайт.
Напиши и получи бесплатный анализ.

Содержание:

Примерно каждый 4-й клиент, с которым я общаюсь, жалуется на то, что у него нет мобильной версии сайта, и все откладывает и откладывает ее реализацию.

А каждый 3-й имеет мобильную версию, которая отображается некорректно.

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

Почему мобильная версия сайта так важна?

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

Но на что это влияет?

Многие даже не задумываются, насколько это важно.

Использование смартфонов возрастает, и сайты испытывают прирост трафика именно с мобилок, а в процентном соотношении идет постепенное отвоевывание доли у десктопа:

Это подтверждают все мировые исследования.

Как видно из графика, мобильный трафик превысил компьютерный еще в 2013 году и растет большими темпами.

По данным сomScore мобильный трафик вырос на 36% в период с 2011 по 2014 гг., а компьютерный – только на 10%.

Трафик с мобилок растет, и это неоспоримый факт.

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

Например, на этом графике вы можете увидеть, что в США сайты преимущественно посещаются одновременно с разных платформ – мобилок и десктопов, а в Индии, например, есть ряд ресурсов, которые пользователи в основном посещают с мобильных устройств!

Это же коснулось рынка E-commerce – тенденция трафика сказывается и на количестве продаж, и на сумме сделок.

Сумма проданных товаров, покупки которых совершаются с мобильных устройств, уже перевалила за 2 триллиона долларов в год по всему миру, и тенденция говорит напрямую: в 2021 году более 72% продаж и сделок будет совершаться не с десктопа, а именно с мобилок!

Ранее я работал в розничной торговле.

У моих партнеров был прекрасный сайт по оптовой торговле мобильными аксессуарами – революционный по технологиям.

Они продвинули свой сайт в 2016 году, и он занимал ТОП-позиции по нужным ключевым словам.

Но недавно я решил проверить его позиции по SEO – и ужаснулся: у сайта было всего 170 ключей в ТОП-100 в Google!

Я подумал, как это возможно?

Решил проверить, вдруг сайт не работает.

Взял свой айфон, вбил URL и сразу все понял.

Оказалось – его вебмастер не реализовал мобильную версию.

И апдейт Google в июле 2018 года прилично «покосил» его позиции.

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

Если Ваша страница грузится долго на мобилке, пользователь ее покидает, не дожидаясь загрузки.

Как так вышло?

Как оказалось, эта проблема не нова.

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

Что это означает?

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

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

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

Но не стоит волноваться – Гэри Илш из Google подтвердил, что если пользователи будут просматривать Ваш контент во вкладках (то есть когда он создан для удобства, а не для SEO), он также будет участвовать в ранжировании сайта.

Когда я работал с нашим сайтом SEOquick, у нас была очень медленная мобильная версия сайта.

Согласно PageSpeed, скорость загрузки была почти 12 секунд!

И лишь после ее реализации и исправления органический трафик подскочил в разы!

Хотите, чтобы Ваша органика также начала активно расти?

Напишите мне, и я выясню ошибки Вашей мобильной версии и вышлю Вам список критичных ошибок на почту!

ГЛАВА 1:

Способы реализации мобильной версии

Вы думаете, что Ваш сайт и так хорошо отображается на мобилках.

Но все же существуют определенные стандарты, которые приемлемы для поисковиков.

И некоторые уже устарели.

А какая версия мобильной верстки у Вас?

Google предпочитает три способа реализации мобильной версии – адаптивный дизайн, динамический показ и наличие отдельной мобильной версии.

Разберем каждый из них и выберем оптимальные варианты для Вашего сайта.

Адаптивный дизайн

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

Google рекомендует реализовать именно этот вариант.

Как создать сайт на адаптивном дизайне?

Как говорит Google, у Вас есть два шага:

  1. Сначала пропишите тег meta name viewport.
  2. Затем изучите основы веб-дизайна в техподдержке.

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

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

Какие удобства у адаптивной мобильной версии сайта?

  • Контентом проще делиться – URL одинаковый и не требует настройки редиректов.
  • Google воспринимает контент на одной версии страниц (не нужно делать несколько версий контента) и индексирует страницы одинаково.
  • Создать адаптивную страницу проще, чем создавать множество ее версий (не так затратно для Вас).
  • Нет редиректов – это сказывается на скорости загрузки. Она может быть на порядок выше.
  • Нет проблем с работой сканирования поисковым роботом. Если бы на Вашем сайте были тысячи страниц, роботу пришлось бы в несколько раз дольше обходить каждую мобильную версию Вашего сайта.

В адаптации контента принимает участие код Javascript.

Сегодня существует два популярных способа реализации адаптивного дизайна через JS:

  • Адаптация при помощи JS. В данном случае (его рекомендует Google) используется единый код HTML, JS и CSS. Механизм отображения и работы сайта уже прописывается непосредственно в JS.
  • Комбинированный тип JS. В зависимости от использования разных устройств пользователю отправляется разный HTML-контент. JS определяет разрешение экрана и отправляет пользователям разные версии HTML-страницы. Для этих целей используется HTTP-заголовок Vary: User-agent.

Динамический показ

Этот вид мобильной версии работает немного иначе.

В данном случае пользователи, заходя на мобильную версию основного сайта, получают другой HTML-контент в зависимости от своего User-Agent.

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

Если коротко, он работает по следующему принципу:

  • Распознается параметр Vary от конкретного User-Agent. Как только он распознан, нужная версия HTML отправляется пользователю.
  • Для удобства загрузки используются куки (при повторном посещении страниц сразу грузится нужная версия).
  • Важно правильно распознавать нужные User-Agent для корректной загрузки.
  • Данный заголовок сканируется Googlebot и позволяет просканировать контент, который может быть показан.

Например, в этом скрине описан метод определения User-Agent и выбора HTML-контента, который нужно показать в зависимости от User-Agent.

Какие ошибки могут ждать вас?

  • Актуальный список User-Agent. Всегда нужно поддерживать список версий и актуализировать контент HTML.
  • Часто из-за ошибки отображения HTML-контента мобильная версия может быть выведена на десктоп, или планшетная версия – на мобилку.
  • Использование технологии маскировки.

Маскировка (или клоакинг) – это технология, когда пользователь видит один контент, а поисковый робот – другой.

На самом деле поисковый робот должен видеть тот же контент – вне зависимости, какой User-Agent дополнительно используется.

Если Вас уличат в клоакинге, это может стоить Вашему сайту позиций.

Мобильная версия сайта на разных URL

Наиболее старая версия мобильных версий сайта.

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

Мобильные версии традиционно располагали на поддоменах, и каждая страница находилась на разных версиях URL:

Стратегия по созданию такой мобильной версии сайта строится на следующих принципах:

  • На десктопной версии используйте атрибут Link с параметром rel=»alternate”, который будет указывать на аналогичную мобильную версию страницы.
  • На мобильной версии пропишите атрибут Link с параметром rel=»canonical», который будет указывать на соответствующую десктопную страницу.

Например, так выглядит фрагмент кода на десктопе:

Google поддерживает возможность указания кода Alternate непосредственно в файлах карты сайта sitemap.xml.

При этом для мобильной версии страницы код выглядит так:

И в карту сайта мобильные версии страниц не добавляются.

Что нужно учесть?

В первую очередь редиректы:

  • Вы должны реализовать редирект пользователя автоматически на нужную версию страницы.
  • Редирект можно прописать на уровне JS или в HTML.
  • Редирект с десктопной версии страницы А должен вести на такую же страницу А в мобильной версии (как указано в иллюстрации):

Почему такая технология устаревает?

Потому что по факту Вам нужно верстать обе версии сайта, проделывать работу редиректов – а они имеют обыкновение слетать.

Да и сайты устаревают, поэтому если Ваш сайт выглядит так, обновите его.

Мобильные страницы AMP

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

По факту они аналогичны предыдущей стратегии, но имеют ряд преимуществ.

  • AMP-страницы используются на уровне адаптивного дизайна и динамических мобильных версий.
  • AMP-страницы могут отображаться в расширенных результатах выдачи (в каруселях, карточках).
  • Такие страницы загружаются напрямую пользователю из кеша Google AMP. Страницы данного типа можно определить по характерному значку ⚡.

Google активно популяризирует AMP-контент, отдавая в мобильной выдаче предпочтение именно AMP-страницам.

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

Какой тип контента может выводиться и как?

  1. Материалы следующего формата: новостные статьи, записи в блоге, видеоматериалы. Если Вас интересует продвижение новостного сайта почитайте этот гайд.
  2. Рецепты.
  3. Меню ресторанов.

На примере – карусель для одного хоста по категории «Рецепты­».

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

Как реализовать AMP для своего сайта?

На ранжирование в Яндексе технология AMP не влияет.

У Яндекса реализован аналогичный функционал турбо-страниц.

Документацию по турбо-страницам можно изучить на сайте Вебмастера Яндекс.

Что есть у конкурента, а у тебя – еще нет? Правильно – трафик. SEOquick в помощь!

Привлечем тебе на сайт массу трафика через SEO.

Сделаем это исключительно белыми методами, без фильтров и санкций от Google и Яндекс.

Проведем глубокую оптимизацию: усилим контент, нарастим ссылки и репутацию. И всё получиться!

ГЛАВА 2:

Как проверить мобильную версию сайта

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

Но все ли из них являются информативными и достаточными?

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

Поэтому существует несколько сервисов, где Вы можете проверить мобильную версию своего сайта.

Search Console – Google Вебмастер

Всю информацию можно изучить в Вебмастере Google – просто вставьте в поисковую строку URL страницы и изучите ошибки (если они есть).

В нашем случае их нет.

Проверьте ошибки кода, а также отображение непосредственно в Вебмастере.

Также важно, как Ваша страница отображается на скриншоте.

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

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

Проверка мобильной версии сайта

Есть и более простые способы проверить, оптимизирована ли Ваша страница под мобилку.

Для этого необязательно иметь доступ к Вебмастеру.

Используйте бесплатную утилиту проверки мобильной версии сайта от Google.

Сервис простой и понятный.

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

Как мы видим, все ошибки просты и понятны, и Ваша задача – просто собрать их воедино и передать программисту (верстальщику) на исправление.

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

Проверка загрузки по мобильному трафику

Следует помнить, что мобильная версия должна быть не просто правильно сверстана.

Она также должна быть легковесной.

Мобильные устройства чаще всего потребляют контент по мобильному трафику – где обычно включено сжатие трафика и загрузка может проходить медленнее, чем в зоне WI-FI.

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

Проверить этот показатель поможет утилита TestMySite With Google (русская версия).

Утилита простая и понятная, работает в стиле минимализма и сканирует постранично.

То есть в ней нельзя проверить весь сайт – поэтому проверяйте каждую страничку отдельно.

На первом скрине можно узнать примерную скорость загрузки страницы через 3G-сеть и долю потерянных посетителей (данные берутся из общей статистики).

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

Очень полезно: если Ваши конкуренты грузятся долго, Вы можете быть в ТОПе и с 6-7 секундами, но иногда и 3 секунды – это мало.

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

Оценка может занять около минуты, отчетность визуализирована и может быть отправлена Вам на почту.

Google Pagespeed Insights

Последний сервис Google Pagespeed Insights, который скорее заточен под функцию проверки скорости сайта, все же может дать ответ по скорости загрузки и мобильной версии.

Из минусов – он учитывает загрузку Вашего сайта в режиме WI-FI, не дает никаких сравнительных анализов и обычно показывает случайные результаты.

С недавних пор его API перешло с 4-й версии на 5-ю, и он совместил функционал сервиса Lighthouse (который был доступен в Chrome по умолчанию по комбинации клавиш Shift+CTRL+I).

Поэтому теперь Lighthouse использовать отдельно нет смысла.

Работает он достаточно просто.

Исследование производится постранично – просто вставьте URL и дождитесь результата.

В итоговом окне выберите вкладку «Мобильные устройства» и изучите обнаруженные ошибки:

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

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

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

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

Эту ошибку подтвердил Джон Мюллер в своем твиттере:

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

I don’t know the details in this case, but generally speaking, these scores can change over time even without changes on your site, they’re not physical measurements. Use these tools to find ways to improve your site for users, don’t see them as the final goal.

— ? John ? (@JohnMu) 5 февраля 2019 г.

С сервисами по проверке мобильной версии у нас теперь проблем нет.

А какие же нас могут ждать ошибки?

ГЛАВА 3:

Технические ошибки в мобильной версии

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

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

Многие ошибки можно категоризировать по группам.

Закрыт доступ к JS/CSS/изображениям

Самой распространенной ошибкой может являться некорректная настройка файла Robots.txt.

Многие программисты могут по ошибке закрыть доступ к файлам стилей CSS, Javascript и изображениям Вашего сайта.

Это скажется на том, что робот GoogleBot сканирует Ваш сайт аналогично текущей версии Chrome – и тем самым увидит Вашу мобильную версию с ошибками.

Всегда проверяйте корректность настройки файла роботс.

Неподдерживаемые плагины

Мобильные устройства к 2019 году массово отказались от Flash.

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

И преуспел в продвижении более новой и революционной технологии – HTML5.

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

Не прописан viewport

Типичная ошибка, которая может повлечь некорректное отображение Вашего сайта.

Реализация адаптивной версии происходит при помощи метатега viewport.

Если Вы не прописали данное имя в метатегах, мобильная версия может вообще не отобразиться.

Неверно задана ширина отображаемой области device-width

Задайте ширину экрана согласно максимальному разрешению мобильного устройства.

Для этого определите переменную максимальной ширины.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width

Контент шире экрана

Четвертой ошибкой может быть неверное использование абсолютных значений размеров элементов.

Во всех прорисовках элементов старайтесь не использовать абсолютные значения ширины, а применяйте относительные значения в процентах (например width: 100% – ширина по всей области).

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

Также используйте CSS для корректного отображения текстов и стилей.

  • Применяйте медиазапросы для определения максимальных значений отображаемых элементов (min-width, max-width, min-height и max-height).
  • Применяйте различные стили CSS в зависимости от разрешения экрана и ориентации (портретной и десктопной).

Также применяйте для масштабирования контрольные точки.

Для масштабирования изображений используйте элемент <picture>.

При корректной настройке изображение будет масштабироваться вне зависимости от поворота экрана и его размера.

Как его настроить – можно изучить в разделе Техподдержки.

Слишком мелкий шрифт

Есть общепринятая норма у веб-дизайнеров и верстальщиков, которая гласит: оптимальная длина строки на мобильном устройстве – 70 символов (8–10 слов).

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

Например, в этом примере на мобильном устройстве для максимальной ширины экрана 575 пикселей мы задали ширину текстового блока 550 пикселей, чтобы он не был впритык к краям.

Интерактивные элементы слишком близко

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

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

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

Поэтому старайтесь выдерживать отступы вне зависимости от размеров самих иконок.

Между нажимаемыми элементами также старайтесь выдерживать минимальное расстояние.

Для удобства используют минимальный размер в 8 пикселей.

ВЫВОДЫ

Мобильная версия сайта – важный фактор ранжирования.

Алгоритм Mobile First прилично подпортил выдачу в Google большинства сайтов, а недавнее введение AMP-страниц изменило отображение мобильной выдачи в корне.

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

  • Используйте адаптивную верстку для реализации мобильной версии. Если у Вас ее еще нет, привлеките верстальщиков и программиста.
  • Если Ваша CMS устарела, рекомендуем присмотреться к более новым.
  • Не используйте технологию Flash на своем сайте.
  • Старайтесь меньше скрывать текстовые области от пользователя.
  • Не используйте технологию клоакинга. Вы рискуете потерять позиции своего сайта (отображая для гуглбота другой контент).
  • Используйте тег viewport для реализации отображения устройства на всех версиях мобильных гаджетов. Старайтесь придерживаться относительных размеров ширины областей.
  • Текстовые блоки старайтесь размечать по контрольным точкам чуть меньше ширины страницы. Оптимальная ширина строки для мобилок: 80 символов.
  • Старайтесь использовать отступы для кликабельных элементов страниц.
  • Старайтесь уйти от устаревших мобильных версий на отдельных URL.
  • Проверяйте наличие мобильной версии в индексе в Вебмастере Google. Изучайте ошибки, почему мобильные версии выводятся некорректно.
  • Для сканирования скорости загрузки в 3G и в WI-FI мобильных страниц, а также выявления ошибок в верстке Вам помогут три бесплатные утилиты от Google.
  • Обязательно уделяйте внимание показателю отказов в Google-аналитике с мобильных устройств. Выделяйте плохие страницы и проверьте, где проблемы с отображением контента на мобилках.

А какие способы реализации мобильной версии сайта используете Вы на своем сайте?

Делитесь в комментариях!

Bootstrap, плагин WPtouch, прочие решения

Несколько дней мы тестируем плагины и разные решения для мобильной версии сайтов.

Как и многие, я получил письмо такого содержания:

Сайт не оптимизирован для мобильных устройств… и дальше о том, что он будет хуже ранжироваться в мобильной выдаче.

Проблема есть, вот характерный пример:


Теряем многих посетителей, теряем доход. Ранее я уже добавил мобильные версии к ряду сайтов, теперь пришла пора решить вопрос с теми, что на WP. Итак, что предлагает Гугл.

WPtouch

Проверить, как видит гугл ваш сайт с точки зрения адаптации к мобильным устройствам : https://developers.google.com

Google предложил замечательный плагин WPtouch — прекрасное решение, прекрасное своими возможностями, настройками, наличием просто шикарной про-версии (100 баксов за установку на 5 сайтов), где ещё больше настроек и интеграции с iOS и Android.


Окрылённые, начинаем тестировать, ставим на один из хостингов, где живут скромные 3 сайта с общей посещаемостью что-то около 20k в сутки (вначале нужно протестировать, прежде чем ставить на жизненно важные ресурсы). Несколько настроек и мобильная версия в деле.

Минус — пришлось отключить кэширование для мобильных пользователей, поскольку иначе им подсовывалась обычная версия из кэша. Результатом стал рост нагрузки на сервер (график с бегета):


Попробовали разные варианты настроек. Результата нет. Надо организовывать кэширование другими средствами, Hyper Cache работает с мобильными шаблонами (можно поставить, чтоб для соответствующих юзеров был отдельный кэш, но Wptouch не создаёт отдельных шаблонов, которые можно предложить Hyper Cache).

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

Прочие плагины

Суть работы: проверяем не с мобильного ли зашёл посетитель и если «да», то грузим ему сайт в отдельном шаблоне. Можно сделать вручную, нам понадобится код для определения устройства пользователя, код смены шаблона и сам шаблон. Мобильные light шаблоны без плагина Mobius iPhonsta jQuery Mobile Carrington Mobile

WordPress Mobile Pack, WP Mobile Detector, WPSmart Mobile, WP Tap News Press, WPmob Lite, WordPress Mobile Edition, WordPress PDA/Iphone.

Мой выбор: MobilePress — весьма компактное решение, но вместе с тем простое и эффективное. Главное: есть возможность скопировать мобильные шаблоны в папку с другими шаблонами и настроить соответствующий путь в плагине. Это решает выше описанную проблему с кэшированием через Hyper Cache, однако взаимодействие плагинов не всегда без глюков, иногда вместо обычной версии страницы выдаёт мобильную.

Bootstrap

Следующим решением стал JS фреймворк Bootstrap.

О, это классная штука: несколько месяцев назад мы делали сервис, в котором основное количество пользователей работают с мобильников. Дизайн сделали на Bootstrap. Очень просто, очень доступно и эффективно.

В этот раз стояла задача сделать новую адаптивную тему под WordPress на основе Bootstrap. С помощью примеров (http://getbootstrap.com/getting-started/#examples) сделать простенький wp шаблон можно за час или и того меньше.


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

Мой вердикт: замечательное решение, особенно для простых wp-шаблонов, однако, если у вас тема со множеством составляющих, сложным дизайном, разными типами постов и т.д., то на переработку уйдёт не мало времени. Обязательно изучите этот фреймворк, с ним очень приятно работать.

Мобильная версия на поддомене

Библиотеки для определения мобильного браузера: http://detectmobilebrowsers.com
  1. На поддомене делаем копию сайта с упрощённым дизайном, увеличенным шрифтом.
  2. В основном сайте делаем проверку на браузер пользователя и,если это мобильный браузер, то делаем редирект на мобильную версию сайта.

Сервисы

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

  • http://www.dudamobile.com
  • http://www.mobilizetoday.ru

Адаптивный дизайн

Для реализации адаптивного дизайна обычно используются CSS3 Media Queries. Пользователь будет видеть разную картинку в зависимости от разрешения экрана:

Суть: В CSS файл сразу прописываем все данные для нескольких вариантов разрешения монитора.

@media screen and (max-width: 1280px) {
div.example {width: 1100px;}
}
@media screen and (max-width: 1024px) {
div.example {width: 980px;}
}

Указывать атрибут media

<link rel="stylesheet" href="site.css" media="screen" />
<link rel="stylesheet"href="mobile.css" media="handheld"/>

screen — обычный монитор, handheld — мобильное устройство.

Вариант, найденный на Хабре:

<link rel= «stylesheet» href=»handheld.css» media=»handheld,only screen and (max-device-width:480px)»/>

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

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

Итог: Bootstrap, прочие адаптивные решения, из плагинов — MobilePress.

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

Автор поста: Alex Hodinar
Частный инвестор с 2006 года (акции, недвижимость). Владелец бизнеса, специалист по интернет маркетингу.

что это и как её сделать, отличие с адаптивной версткой

Мобильная версия сайта уже давно не дань моде, а необходимость. По данным Mediascope, в 2020 году в России каждый день мобильным интернетом пользовались в среднем 65,2% населения. Это значит, что для полноценного взаимодействия с пользователями ваш сайт должен корректно работать на всех мобильных девайсах. В этой статье мы расскажем о том, как сделать мобильную версию сайта, как оценить её качество и какие ошибки при адаптации сайта допускают многие разработчики.

Что такое мобильная версия сайта и зачем она нужна?

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

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

Мобильные версии сайтов также любимы поисковиками. У Google и Яндекса есть специальные алгоритмы, которые оценивают удобство мобильных сайтов. В зависимости от результата они могут повысить или понизить их позицию в поисковой выдаче.

Если пользователь мобильного попадёт на неадаптивный сайт, скорее всего, он сразу же его закроет. Это также повлияет на ранжирование в поисковиках.

Мобильная аудитория интернета

Из отчёта Digital 2020 видно, что в 2019 году больше половины времени, проведённого в интернете, люди провели с мобильных устройств.

Среди всех интернет запросов 53,3% приходится на мобильные устройства. Это на 8,6% больше, чем в прошлом году. ПК всё ещё играют большую роль в трафике, но их значимость постепенно снижается.

А что в России?

По данным Mediascope, в 2020 году мобильным интернетом хотя бы раз пользовались 70,8% человек. При этом среди населения до 44 лет проникновение интернета уже больше 90%.

А теперь о покупках в интернете. По данным Pwc, пандемия в 2020 только увеличила популярность мобильных устройств. До коронавируса 24% пользователей делали покупки с помощью мобильных. Сейчас цифра увеличилась до 39%. А если прибавить сюда данные по планшетам, получится, что мобильные устройства в два раза опережают ПК.

Мобильная версия сайта VS Адаптивная вёрстка

Адаптировать сайт под мобильные устройства можно двумя способами.

Мобильная версия — это, по сути, отдельный сайт. Он специально разработан под формат мобильных устройств и содержит только минимум необходимой информации. Так как сайт размещается на отдельном поддомене, ссылка будет выглядеть как m.name.ru или mobile.name.ru.

Мобильную версию сайта из-за высокой стоимости обычно могут себе позволить только крупные компании. Например, мобильные версии есть у Вконтакте и Youtube.

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

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

Давайте зафиксируем плюсы и минусы каждого способа.

Какую версию выбрать? Зависит от ваших приоритетов.

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

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

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

Как узнать адаптирован ли ваш сайт под мобильные устройства?

У Яндекса и Google есть собственные сервисы, которые позволяют проверить адаптивность сайтов:

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

Как перевести свой сайт на мобильную версию?

Самостоятельная разработка сайта. Этот способ даст возможность сделать на сайте любые необходимые функции и создать свой дизайн. В этом главное отличие такого способа от CMS или конструкторов. Но разработка мобильной версии сайта с нуля достаточно дорогое удовольствие. Поэтому такой вариант подходит только для крупного проекта с большим бюджетом.

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

Популярные CMS системы:

  • WordPress
  • 1С-Битрикс
  • Joomla

Конструкторы сайтов. Если вам не по карману полноценная разработка сайта, конструкторы вроде Tilda или Wix — ваш вариант. Эти сервисы сделаны для непрофессионалов, поэтому разобраться в них под силу всем. Однако есть и минусы. Конструкторы могут не иметь всех необходимых вам функций. Базовый дизайн у таких сайтов тоже типовой. Но если вы готовы потратить время на то, чтобы разобраться в коде, можно разработать более индивидуализированный вариант. Такие конструкторы автоматически адаптируют сайты для мобильных телефонов и планшетов.

Как протестировать готовый мобильный сайт?

Оцениваем скорость загрузки

PageSpeed Insights от Google оценивает, как быстро загружаются сайты на мобильных устройствах и ПК. Результат показывается в баллах от 0 до 100, где 100 — идеально быстрая загрузка.

Сервис не только оценивает скорость загрузки страницы, но и даёт рекомендации, как исправить ситуацию и сделать сайт быстрее.

Также скорость сайта можно проверить с помощью сервиса WebPageTest. Он показывает более расширенную информацию, часть из которой может быть понятна только программистам. Несмотря на то что сервис бесплатный, его функционал позволяет выставить даже нужную нам скорость мобильного интернета. Так можно проверить, как долго ваш сайт будет загружаться у человека, который решит посмотреть его из вагона метро.

Проверяем на отсутствие ошибок

Бесплатный сервис от PR-CY показывает базовую информацию о мобилопригодности сайта. Оценивается размер шрифтов, наличие плагинов и так далее.

Подобный сервис, о котором мы уже сегодня говорили, есть у Яндекса.

Проверяем сайт вручную

Лучше всего проверять сайт на реальных мобильных устройствах. Обычно этим занимаются тестировщики. Но если вы делаете сайт сами, попробуйте открыть его со своего телефона, попросите коллег с другими устройствами проверить правильность отображения всех элементов. Поставьте себя на место пользователя: как выглядит сайт на мобильном устройстве? Насколько удобно прокручивать страницу? Достаточно ли большой шрифт?

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

На что обратить внимание при проверке сайта? Рассказываем ниже.

Чек-лист качества мобильной версии сайта

А теперь посмотрим, как должен выглядеть хороший, адаптированный под мобильные устройства сайт. Для примера возьмём сайт нашего агентства.

➔    В меню можно перейти с главного экрана

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

➔    На сайте есть только вертикальная прокрутка

Горизонтальная прокрутка очень затрудняет чтение текста, поэтому от неё точно нужно отказываться.

➔    Текст написан достаточно крупным шрифтом

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

➔    Контент можно увеличивать

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

➔    Сайт вписывается в размеры экрана

Текст не должен быть расположен впритык к краям экрана. Всегда должно оставаться свободное место.

➔    Кнопки удобны для касания пальцев

Кнопки на сайте должны быть достаточно большие, чтобы их было удобно нажимать.

➔    Отсутствуют длинные формы для заполнения

В форме обратной связи должно быть не больше 4-5 вопросов. Например, на нашем сайте мы просим посетителей заполнить 4 поля: имя, e-mail, телефон и ссылку на их сайт. Если форма открывается в отдельном окне, она не должна закрывать собой весь остальной контент.

➔    Номер телефона кликабелен

Пользователь должен иметь возможность связаться с вами как можно проще. Если номер будет добавлен в виде картинки, на него нельзя будет кликнуть и сразу перейти к звонку. Вводить номер руками не слишком удобно.

➔    Видео контент корректно воспроизводится

На сайте не должно быть никаких Flash-элементов, а видео должно открываться на весь экран.

Топ 7 ошибок в мобильных версиях сайтов

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

1. Сложный интерфейс

В полной версии сайта позволительно занять часть экрана описанием вашей компании. Но если эта информация останется и в мобильной версии, пользователю придётся долго листать экран вниз, пока он не доберётся до нужной кнопки. Также в мобильной или адаптивной версии есть смысл отказаться от большого многоуровнего меню. Оставьте только то, без чего пользователю не обойтись. Лучше всего, если меню влезает в один экран и его не надо пролистывать. Также важно предусмотреть возможность быстрого возврата на главный экран.

2. Слишком маленькие кнопки

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

3. Контент, который нельзя воспроизвести

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

4. Большое количество текста на странице

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

5. Невозможность перейти к полной версии

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

6. Нечитабельный шрифт

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

7. Долгая загрузка

Скорость загрузки влияет не только на опыт использования сайта, но и на место в поисковой выдаче. Сайт может долго загружаться из-за:

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

В заключение

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

Поэтому мобильная версия сайта — необходимость для любого бизнеса.

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

Хотите узнать, как сделать так, чтобы сайт был не только удобным для пользователей, но и приносил прибыль? Читайте нашу статью “14 шагов к созданию сайта, который получит трафик”.

Лучшие мобильные версии сайтов в 2021 году

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

Мобильная версия и адаптивная верстка — в чем разница

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

Какой вариант выбрать? Простые «легкие» сайты обычно ограничиваются адаптивной версткой. Если на сайте множество разделов меню, страниц, разнообразных функций — лучше создать мобильную версию. О них и поговорим.

Присоединяйтесь к нашему Telegram-каналу!

  • Теперь Вы можете читать последние новости из мира интернет-маркетинга в мессенджере Telegram на своём мобильном телефоне.
  • Для этого вам необходимо подписаться на наш канал.

Какой должна быть мобильная версия сайта

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

  • Вместо полноценного меню — меню-гамбургер, которое разворачивается нажатием на него. Оно должно быть сквозным: отображаться с любой страницы сайта.
  • Вместо словесного написания — иконки, понятные пользователям.
  • Все самое важное, что вы хотите показать посетителю, выносится на главную страницу. У пользователя нет времени изучать сайт и его разделы — может, он вообще между делом зашел. Дайте ему с порога хлеб-соль и тапочки.
  • Минимум деталей и дополнительной информации — в мобильной версии это можно опустить.
  • Вместо многочисленных полей в формах заказа (представьте, как сложно набирать в них текст с клавиатуры смартфона!) — одно-два необходимых поля. Имени, телефона или почты вполне достаточно.
  • Кнопка главной страницы, она же «Домой» или просто название сайта в шапке, тоже должна присутствовать на каждой странице.
  • Крупный шрифт, чтобы пользователь не увеличивал текст каждый раз и не бежал за очками.
  • Крупные кнопки и достаточное количество воздуха между элементами сайта, чтобы пользователь не промахнулся и нажал, куда надо.
  • Возможность увеличивать текст, изображение, любой фрагмент сайта.
  • Если поп-апы, виджеты и прочие всплывающие окна — то не на весь экран. Это раздражает!

Ниже мы приведем реальные примеры этих принципов. Остальные требования не отличаются от десктопных версий:

  • Лаконичный дизайн.
  • Удобная навигация по разделам.
  • Дружелюбный и понятный интерфейс.
  • Проработанный UX, или пользовательский опыт.
  • Высокая скорость загрузки.
  • И самое главное — удобство для пользователя.

Читайте также:

16 действенных способов увеличить трафик сайта

Мобильные версии сайтов: примеры 2021

И вот тут-то начинается самое интересное! Мы хотели собрать примеры лучших мобильных версий и найти необычные, запоминающиеся сайты, оригинальные решения. Но внезапно выяснилось, что оригинальничать в 2021 году никто и не хочет. Мобильные версии сайтов интернет-магазинов, агрегаторов и маркетплейсов, банков, кафе, медиа, развлекательных порталов, автосалонов, госструктур похожи, как братья-близнецы. Убедитесь сами.

YouTube

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

Теперь откроем отдельное видео:

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

Wildberries

Похожая картина, правда? На главной видим меню-гамбургер, строку поиска, иконки авторизации и, конечно, корзины — маркетплейс же. Далее идут баннеры с акциями, как и в десктопной версии , и хиты продаж

Откроем карточку товара:

Видим фото товара, которые можно проскроллить вправо, цену, информацию о доставке и две кнопки СТА: «В корзину» и «Купить сейчас»

Nike

Многие восхищаются сайтом Nike: он простой, понятный и приятный для восприятия глаза.

Ничего лишнего, как и должно быть на мобильной версии

Первый экран карточки товара — просто произведение искусства:

Стильно, лаконично, просто

М.Видео

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

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

Открываем карточку:

Здесь намного больше информации, чем у Wildberries. Нижнее меню также отображается на каждой странице

Корзину, кстати, можно отображать и другой иконкой:

Главное, что визуальный посыл понятен пользователю

А иконки можно подписывать:

Следите только, чтобы текст и изображения не накладывались друг на друга

Читайте также:

Продвижение интернет-магазина: пошаговый план работы, советы и рекомендации по нишам

Booking.com

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

Выберем первый попавшийся отель:

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

Сбербанк

Название, меню, отделения и банкоматы выделены особняком — видимо, это популярные разделы. Кнопка «Позвонить» рабочая: перекидывает в соответствующий раздел смартфона. Ниже баннер с самой актуальной на данный момент информацией

Откроем меню:

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

Lexus

Все сделано по канонам мобильной верстки, картинка на главной движется и привлекает внимание. Но возникают вопросы к иконкам меню

Мне лично непонятны последние две иконки. Четвертая слева — написать сообщение? Нет, это контакты. А вот пятая с тем же визуальным посылом — написать — на самом деле ответы на вопросы и обратная связь.

Зато есть классная фишка: раздел, который в данный момент просматривает пользователь, выделяется белым. Удобно!

Читайте также:

Внутренняя оптимизация сайтов

Т—Ж

Помимо привычного меню, иконок поиска и авторизации, видим важные разделы «Учебник» и «Сообщество». Они вынесены отдельно и в десктопной версии

Ой! Появилось всплывающее окно:

Все нормально: форма подписки не закрывает весь экран и легко закрывается. В окне мы видим всего два поля: для введения почты или телефона и кнопку «Войти». И, что еще легче, возможность войти через соцсети

Lenta.ru

В Ленте.ру все еще лаконичнее. Но нет поиска, что достаточно неудобно

Зато есть своя фишка — лента добра:

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

РЖД

Признаться, я боялась увидеть кривую мобильную версию. И на то есть причины: в статье, как увеличить конверсию сайта, я рассматривала пример старого сайта РЖД как… кхм, не очень удобного. Но все у РЖД хорошо!

Все просто: очки — версия для слабовидящих, выбор языка, поиск и меню. Удобные поля ввода пунктов назначения и календарь для выбора дат

Но есть и ложка дегтя: зачем-то предлагается перейти на старую версию сайта, а там…

О, мои глаза!

Почта России

Можно сколько ругать «Почту России», но мобильная версия у них соответствует современным критериям:

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

С разделами тоже все в порядке:

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

ЛитРес

В заключение приведу антипример, которым стал, увы, любимый многими интернет-магазин «ЛитРес»:

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

Сравните с десктопной версией:

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

Мобильные версии сайтов 2021: тенденции и выводы

  1. Абсолютное большинство мобильных версий сайтов созданы по правилам, о которых я писала в начале статьи. Ушли те времена, когда чем необычнее — тем лучше. Сейчас акцент делается не на оригинальность, а на удобство для пользователя.
  2. UX, юзабилити и интерфейс — эта троица еще долго будет держать позиции в разработке сайтов. UX, или пользовательский опыт — как раз то, к чему пользователь уже привык. А привык он, чтобы корзина была в правом верхнем углу и изображалась соответствующей иконкой. Если соригинальничать и сделать иконку в виде лукошка с грибами — не факт, что люди это оценят. Если задвинуть корзину в футер — вы лишитесь конверсий и прибыли, потому что никто не будет листать сайт до конца. Закрыть его при первой же сложности намного проще.
  3. Привычное рождает единообразное: мобильные версии сайтов становятся все более унифицированными. Возможно, это ждет и десктопные версии, но там больше простора для творческой мысли, уникального дизайна и проч. А в мобильных версиях не разгуляешься: гамбургер, поиск, корзина, значок авторизации — вот основные элементы, от которых никуда не денешься. Или денешься, но пользователь не поймет.
  4. Мораль: не стоит изобретать велосипед, когда уже придуманы простые и понятные вашим клиентам решения. Когда мы в «Кокосе» создаем сайты, мы думаем не о том, чтобы выделиться, а чтобы сайты приносили деньги их владельцам. И знаем, как это сделать.

Как редактировать мобильную версию сайта?

Вы можете прямо в конструкторе настроить внешний вид сайта на различных устройствах. Настройки адаптивности позволяют настроить отображение сайта на компьютерах, планшетах и телефонах. С помощью этих настроек можно:

  • Настраивать фон отдельно для каждой версии сайта.
  • Скрывать отдельные блоки и виджеты.
  • В версии сайта для планшета можно выбрать размещение виджетов в одну или две колонки.
  • Настраивать размер текста и межстрочного интервала.
  • Настраивать дизайн корзины в модуле интернет-магазина.

Настройки для виджетов

Скрытие виджетов

Скрывать отдельные виджеты можно только на планшетной и телефонной версиях сайта. В режимах редактирования для этих устройств, при наведении на виджеты вы можете их скрыть, нажав на соответствующую иконку:

Примечание:

На служебных страницах скрывать виджеты нельзя, возможно изменять только фон блока.

Виджеты в две колонки

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

Важно:

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

Примечание:

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

Плавающие виджеты: «Заказать звонок», «Поделиться в соцсетях», «LiveChat», «Jivosite», «AddThis»

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

Настройка размера текста и межстрочного интервала

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

Примечание:

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

Настройка дизайна корзины в модуле интернет-магазина

Вы можете выбрать вариант отображения корзины в планшетной и мобильной версии. Для этого в разделе «Адаптивная версия сайта», выберите «Телефон» или «Планшет» и, нажав на корзину, настройте отображение.

Настройка высоты виджета «Пробел»

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

Как скрыть блок

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

Например, если скрыть шапку на компьютерной версии сайта, то она будет отображаться только на планшете и телефоне. Вернуть отображение блока на устройстве можно кнопкой «Показать»

Примечание:

При отключенной опции «Показывать скрытые блоки в конструкторе» — блоки отображаться не будут.

Настройки фона блоков

При смене фона блока (цвет, изображение, карта) в компьютерной версии сайта, фон изменится во всех режимах. Если фон блока был изменен на планшете или телефоне — изменения будут применены только на этом устройстве.

Таким образом, можно облегчить мобильную версию сайта, отключив изображение в фоне блока.

Примечание:

Кнопка «Сбросить настройки» позволяет отменить все изменения фона блока на устройствах и устанавливает фон компьютерной версии.

 

 

Настройка расположения виджетов в мобильной версии

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

Разберем на примере блока, в котором преимущества отеля сформированы при помощи комбинации виджета «Иконка» и «Текст».

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

Чтобы виджеты шли в нужном вам порядке в мобильной версии, необходимо «привязать» их друг к другу в конструкторе. Для этого потяните виджет в направлении другого виджета, за которым он должен следовать в мобильной версии, до тех пор пока синяя полоса не окажется только под вторым виджетом. В нашем примере необходимо потянуть «Текст» в направлении «Иконки».

После «привязки» всех виджетов «Текст» ко всем соответствующим «Иконкам» в мобильной версии они будут идти друг за другом в связке «Иконка» + «Текст».

Помогла ли вам статья?

Статья оказалась полезной для 53 человек

Как сделать мобильную версию сайта: несколько рекомендаций

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

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

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

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

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

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

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

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

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

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

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

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

Как просматривать мобильную версию веб-сайта в Chrome

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

Однако разработчики должны помнить, что в первом квартале 2021 года 54,8% глобального трафика веб-сайтов приходилось на мобильные устройства.В результате им необходимо убедиться, что веб-сайты хорошо оптимизированы для работы в мобильных браузерах. Chrome, бесспорно, является ведущим мобильным браузером с текущей долей рынка 64,06% по всему миру. Следовательно, тестирование мобильных версий веб-сайтов в Chrome имеет решающее значение.

Источник

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

Зачем тестировать мобильную версию сайта в реальных браузерах Chrome?

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

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

Гораздо проще и эффективнее просматривать и тестировать веб-сайты в реальных браузерах Chrome. Это не только гарантирует 100% точные результаты, но и сокращает число шагов в процессе тестирования. Ни один веб-сайт не может быть выпущен без тестирования в реальных браузерах и устройствах. Поэтому лучше всего полностью отказаться от эмуляторов и симуляторов, а просто тестировать на реальном облаке устройств.

Теперь давайте рассмотрим 2 метода просмотра мобильных версий веб-сайтов в Chrome.

Использование имитации устройства в Chrome DevTools для мобильного просмотра

Пользователи могут просматривать мобильную версию веб-сайта с помощью Chrome Devtools.

Обратите внимание, что это не совсем надежный метод, поскольку для выполнения работы он использует симулятор, а не реальное устройство и браузеры. Следовательно, он не может воспроизвести все реальные пользовательские условия, а это означает, что любые тесты, выполняемые этим методом, будут безрезультатными.Для 100% точных результатов используйте второй способ — с помощью реальных браузеров.

Ниже перечислены шаги для просмотра мобильной версии веб-сайта в Chrome:

  1. Откройте DevTools, нажав F12.
  2. Нажмите на «Панель инструментов переключения устройств» . (Значок становится синим, когда режим устройства включен)
  3. Выберите устройство, которое вы хотите имитировать, из списка устройств iOS и Android.
  4. После выбора нужного устройства отображается мобильное представление веб-сайта.

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

Облако реальных устройств BrowserStack для тестирования в реальном времени

Идеальный способ протестировать веб-сайт — протестировать его на реальном устройстве. Это помогает разработчикам отслеживать веб-сайты в мобильных браузерах, установленных на реальных устройствах Android и iOS. Таким образом, QA могут оценить, как веб-сайт работает на нескольких мобильных устройствах и в реальных браузерах.

Облако реальных устройств BrowserStack предоставляет более 3000 реальных устройств и браузеров для тестирования.

Вот краткое руководство о том, как приступить к просмотру мобильной версии веб-сайта в Chrome:

  1. Зарегистрируйтесь для получения бесплатной учетной записи BrowserStack.
  2. Перейдите к BrowserStack Live.
  3. Когда панель управления откроется, вы сможете выбирать из тысяч комбинаций браузер-устройство.
  4. Выберите комбинацию устройство-браузер, на которой вы хотите протестировать.В этом примере это будет браузер Chrome, работающий на Samsung Galaxy S10.
  5. После выбора устройства и браузера будет инициирован новый тестовый сеанс на выбранном программно-аппаратном обеспечении.
  6. Перейдите на веб-сайт, который вы хотите просмотреть на мобильном устройстве, и проверьте, как он отображается.

Кроме того, несколько основных моментов реального облака устройств BrowserStack:

  1. Установка и загрузка не требуются
  2. Последние устройства Android от Samsung, Oneplus, Google и Motorola
  3. Последние устройства Apple, такие как iPhone X, iPhone 11 Pro
  4. Несколько версий ведущих браузеров, таких как Chrome, Firefox, Safari, Opera, установленных на реальных устройствах

QA могут тестировать на любом реальном мобильном устройстве Android или iOS прямо из своего браузера.Им не нужно скачивать никаких браузеров или эмуляторов. Чтобы открыть мобильную версию веб-сайта в Chrome, QA может просто войти в систему, выбрать комбинацию устройство-браузер-ОС и начать тестирование. Изображение ниже является точным представлением сеанса живого тестирования (тестирование браузера Chrome на Samsung S10+) в BrowserStack.

Просмотр мобильной версии на веб-сайте на реальном устройстве

BrowserStack также предоставляет следующие функции:

  1. Предварительный доступ к DevTools, который позволяет проверять веб-элементы на странице
  2. Тестирование геолокации Jira, Trello и Slack
  3. Тестирование таких функций, как масштабирование и поворот устройства

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

Сделайте свой веб-сайт удобным для мобильных устройств прямо сейчас; 3 пути

Примечание редактора: эта статья была первоначально опубликована в Web Marketing Today. В 2012 году компания «Practical Ecommerce» приобрела «Web Marketing Today». В 2016 году мы объединили два сайта, оставив «Practical Ecommerce» в качестве преемника.

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

По данным comScore,

Мобильные устройства превышают использование Интернета на настольных компьютерах.

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

21 апреля 2015 г. компания Google объявила, что начнет использовать мобильные сайты в качестве сигнала ранжирования.Это означает, что если веб-сайт не оптимизирован для мобильных устройств, он скоро увидит снижение рейтинга поисковых систем.

Если вы не уверены, подходит ли ваш сайт для мобильных устройств, в статье «SEO: мобильные веб-сайты больше не являются обязательными» показано, как проверить его на соответствие новым критериям Google.

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

1.Создайте мобильную версию вашего текущего сайта

Самый быстрый способ сделать ваш сайт удобным для мобильных устройств — это создать мобильную версию вашего сайта для ПК с помощью платформы конверсии, такой как bMobilized или Duda Mobile.

Создайте мобильную версию сайта с помощью таких платформ, как Duda Mobile.

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

2. Используйте мобильные плагины на популярных платформах CMS

Самые популярные системы управления контентом веб-сайтов — WordPress, Joomla или Drupal — имеют дополнительные решения, позволяющие сделать ваш сайт удобным для мобильных устройств без необходимости использования двух отдельных версий. Некоторые из них включают дополнительные способы настройки мобильного взаимодействия, чтобы не только предоставлять контент, но и включать другие функции, которые лучше всего использовать на мобильных устройствах.

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

WPtouch — это плагин для сайтов WordPress, которые хотят добавить настраиваемый мобильный опыт.

Мобильные плагины Joomla . Responsivizer и JoomlaShine содержат простые способы добавления мобильных функций на ваш сайт. Это может быть необходимо только в том случае, если вы используете более старую версию Joomla, например 2.5 или ниже. Joomla 3.x поставляется с поддержкой мобильных веб-сайтов.

Мобильные плагины Drupal . Drupal предлагает два модуля — ThemeKey и MobileTheme — которые определяют, находится ли пользователь на мобильном устройстве, и автоматически переключают тему сайта на более удобную для мобильных устройств. Оба предоставляют простые в использовании интерфейсы после их установки.

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

3. Используйте адаптивный дизайн, ориентированный на мобильные устройства

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

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

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

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

Пример веб-сайта с адаптивным дизайном.

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

Что бы вы ни делали, делайте это сейчас

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

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

Как создать мобильную версию сайта WordPress — Хостинг

Как создать мобильную версию сайта WordPress

Признайтесь: иметь красивую и полностью функционирующую мобильную версию вашего веб-сайта WordPress просто необходимо, учитывая, что значительный объем интернет-серфинга происходит с мобильных устройств.Создать мобильный веб-сайт с WordPress на Namecheap легко, независимо от того, подписаны ли вы на Shared Hosting или EasyWP WordPress Hosting.

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

В этой статье мы рассмотрим несколько способов сделать ваш сайт WordPress мобильным:

Создание сайтов с адаптивным дизайном: Один и тот же контент и URL-адрес загружаются на каждое устройство, но CSS используется для изменения отображения страницы в соответствии с разрешением экрана мобильного устройства.

Сайты динамического обслуживания: Загружается один URL-адрес, но используется разное содержимое и CSS в зависимости от используемого устройства.

Создание отдельных URL-адресов для настольных компьютеров и мобильных устройств: Загружаются разные URL-адреса и, следовательно, веб-сайты, например.г., nctest.info и m.nctest.info

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

Адаптивный веб-дизайн

Адаптивный веб-дизайн использует CSS3 Media Queries . Media Queries — это модуль CSS3, позволяющий рендерингу контента адаптироваться к таким условиям, как разрешение экрана, ширина и высота, ориентация.

Обычно файл, который вам нужно отредактировать, имеет стиль .CSS . Он находится в каталоге /wp-content/themes/имя_темы/.

Медиа-запрос CSS3 обычно выглядит так:

@media только экран и (макс. ширина: 480 пикселей) {
}

Это условный код, который указывает браузеру настроить все параметры стиля, если размер экрана меньше или равен 480 пикселей.

Для большей детализации вы можете добавить интервалы минимальной и максимальной ширины для разных устройств:

Только экран @media и (минимальная ширина: 768 пикселей) и (максимальная ширина: 959 пикселей) {
}

Все дальнейшие настройки стиля должны быть добавлены между {…} кронштейны.

В качестве примера возьмем стандартную тему Twenty Ten, которая по умолчанию не отвечает.
Первый код устанавливает размер основного фрейма темы в 550 пикселей:

#access .menu-header, div.menu, #colophon, #branding, #main, #wrapper, #site-title {
 width:550px;
}

Сравните, как в этом случае сайт будет выглядеть на мобильном устройстве:

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

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

Следует использовать следующий код (например, для изображения заголовка):

#branding img {
display:none;
}

Если вы хотите изменить размер элемента (например, изображение заголовка), используйте

#брендинг img {
ширина: 100%
}

ПРИМЕЧАНИЕ: Редактирование стиля.css также требует знаний в области веб-разработки. Не забудьте сделать резервную копию вашего файла перед его изменением.

После того, как все части вашего веб-сайта будут настроены соответствующим образом, он должен хорошо выглядеть на мобильных устройствах:

         

Большинство тем WordPress создаются адаптивными — при установке новой темы вы можете дополнительно проверить ее внешний вид на мобильных устройствах.

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

   1. Войдите в панель администратора WordPress ( yourdomain.com/wp-admin ), перейдите в меню Внешний вид и нажмите Темы .
   2. Нажмите Добавить новый :

   3. Нажмите Фильтр функций и установите флажок Адаптивный макет . При необходимости отметьте другие параметры, чтобы найти нужную тему.
   4. Нажмите Применить фильтры :

Через несколько секунд вы увидите список тем, соответствующих заданным вами функциям поиска.

Динамическое обслуживание веб-сайтов

Кроме того, вы можете настроить различные CSS и содержимое, которые будут загружаться в зависимости от типа устройства. Этого можно добиться с помощью плагинов WordPress . Большинство из них имеют ряд базовых настроек, доступных бесплатно.

В качестве примера мы будем использовать один из самых популярных плагинов для создания мобильных блогов — WPtouch Mobile Plugin.

Во-первых, вам необходимо установить и активировать его в панели администратора.

После этого вы должны выбрать тему для своей мобильной версии веб-сайта — перейдите в меню WPtouch , нажмите Темы и расширения (1). Выберите нужную тему и нажмите Настройка (2):
 

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

Вот как выглядит меню плагина WPtouch Mobile:

После завершения всех настроек сохраните изменения и проверьте, как веб-сайт отображается на рабочем столе и мобильном устройстве:

 

Создание отдельных URL-адресов для рабочего стола и мобильные устройства

Последний способ является наиболее трудоемким, так как вам потребуется:

1.Создайте соответствующий субдомен для вашей мобильной версии, например m.nctest.info .
2. Разработайте или скопируйте содержимое сайта в созданный путь к каталогу поддомена.
3. Установите и настройте подключаемый модуль мобильной переадресации.

ПРИМЕЧАНИЕ. Если вы выберете этот вариант, имейте в виду, что две версии вашего веб-сайта не будут автоматически синхронизированы, поскольку технически это разные установки. Любые изменения, которые вы сделаете, должны быть реплицированы для другой версии.

После создания субдомена и настройки веб-сайта установите плагин в главной панели администратора веб-сайта.

В качестве примера мы будем использовать плагин Mobile Site Redirect.

   1. Перейдите к меню «Настройки» и нажмите «Перенаправление с мобильного сайта».
   2. Вставьте мобильный URL, который вы хотели бы иметь. При необходимости проверьте дополнительные параметры.
   3. Нажмите Обновить настройки :


ПРИМЕЧАНИЕ: Мы не предоставляем услуги по отладке кода и разработке веб-сайтов.Эта статья предоставлена ​​исключительно для вашего удобства. Если у вас возникнут проблемы с мобильной версией вашего веб-сайта, мы рекомендуем вам обратиться на форумы поддержки или связаться с разработчиком веб-сайта.

Вот оно!

Независимо от того, запускаете ли вы новый сайт или хотите перенести его на новый хостинг, EasyWP от Namecheap — это быстрое и надежное решение для хостинга WordPress. Обязательно ознакомьтесь со всеми функциями и преимуществами.

Как просмотреть мобильную версию веб-сайта: всего за 3 клика

Не знаете, как просмотреть мобильную версию веб-сайта?

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

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

В этом посте мы поделимся четырьмя простыми способами предварительного просмотра мобильной версии веб-сайта:

  • Первые два метода будут работать с любым типом веб-сайта, будь то ваш веб-сайт или чужой сайт, и независимо от того, создан ли он с помощью WordPress, Shopify, Wix, Squarespace или чего-либо еще.
  • Последние два метода относятся к WordPress и показывают, как просматривать мобильную версию вашего сайта WordPress. Они будут работать только в том случае, если вы являетесь владельцем сайта.

Как просмотреть мобильную версию веб-сайта из браузера

Независимо от того, являетесь ли вы владельцем веб-сайта, есть два простых способа просмотреть мобильную версию любого веб-сайта в Интернете:

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

Давайте рассмотрим оба метода. Затем, позже, мы также покажем вам, как просмотреть мобильную версию веб-сайта, который вы создаете самостоятельно (на WordPress).

Используйте инструменты разработчика вашего веб-браузера

Большинство браузеров, таких как Google Chrome, Safari, Firefox, Microsoft и Brave, предлагают инструменты для разработчиков, которые позволяют изучить веб-сайт, в том числе посмотреть, как он выглядит на разных устройствах.

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

В этих примерах мы предполагаем, что вы используете Chrome (или любой браузер на основе Chromium, например Brave). Однако большинство других веб-браузеров предлагают аналогичные функции, хотя интерфейс будет другим.

Чтобы начать, щелкните правой кнопкой мыши интерфейс вашего веб-сайта и выберите Inspect из меню:

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

Вам не нужно беспокоиться о кодировании, так как основная цель — перейти на просмотр мобильной версии сайта. Найдите маленькую кнопку Toggle Device Toolbar (она выглядит как значок телефона и планшета) и щелкните ее, чтобы активировать мобильное представление.

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

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

Например, вы можете выбрать iPad Pro, и он мгновенно изменит размеры дисплея в соответствии с размерами iPad Pro.

Или вы можете выбрать Pixel 2 XL меньшего размера.

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

Используйте онлайн-тестер или эмулятор

Эмуляторы

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

ResponsivePX.com — хороший вариант, но вы можете найти множество других с помощью быстрого онлайн-поиска.

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

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

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

Как просмотреть мобильную версию вашего веб-сайта WordPress

Если вы работаете над собственным сайтом WordPress, WordPress также предоставляет некоторые встроенные параметры, которые помогут вам увидеть, как ваш сайт будет выглядеть на мобильных устройствах.

Когда вы работаете в редакторе WordPress, вы можете быстро увидеть, как ваш контент будет выглядеть на разных устройствах.Вы также можете сделать то же самое во время настройки темы в настройщике WordPress.

Давайте рассмотрим эти методы…

Просмотр мобильной версии через предварительный просмотр страницы или редактора сообщений

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

Начнем с домашней страницы. Вот как следующий веб-сайт выглядит с рабочего стола:

Вы можете просматривать отдельные страницы и публикации на мобильных устройствах, перейдя на вкладки Posts или Pages на панели управления WordPress.

Для ранее созданных сообщений и страниц перейдите на Все сообщения или Все страницы .

Начнем со страницы; точнее, Домашняя страница. Выберите нужную страницу.

Каждая страница и запись в бэкенде WordPress предлагает ссылку для предварительного просмотра в правом верхнем углу. Нажмите эту кнопку «Предварительный просмотр», чтобы открыть раскрывающееся меню со следующими параметрами:

.

По умолчанию WordPress показывает версию для рабочего стола.

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

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

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

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

Сообщения ничем не отличаются при использовании этого метода. Они просто расположены в отдельном разделе WordPress (Сообщения → Все сообщения).

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

Как обычно, перейдите в «Предварительный просмотр», затем нажмите «Планшет» или «Мобильный».

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

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

Просмотр мобильной версии веб-сайта в настройщике WordPress

Настройщик WordPress не только предоставляет отличные способы редактирования вашей темы WordPress, но и имеет визуальный предварительный просмотр вашего сайта по мере внесения изменений.

К счастью, настройщик WordPress не ограничивает вас только предварительным просмотром на рабочем столе.Фактически, все ваши правки можно выполнить, глядя на экран мобильного телефона или планшета.

Чтобы это произошло, перейдите в Внешний вид → Настроить , чтобы запустить Настройщик.

По умолчанию Настройщик выглядит так. Он находится в стандартном представлении «Рабочий стол» с настройками для настройки слева и предварительным просмотром сайта справа.

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

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

Кнопка Mobile View уменьшает этот интерфейс, приближая вас к стандартному размеру окна мобильного смартфона.

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

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

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

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

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

Легко просматривать мобильную версию сайта

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

Самый гибкий вариант — использовать инструменты разработчика вашего браузера. Это сработает несмотря ни на что. Пока вы можете открыть настольную версию веб-сайта, вы можете просмотреть мобильную версию с помощью инструментов разработчика.

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

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

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

Остались вопросы, как посмотреть мобильную версию сайта? Дайте нам знать об этом в комментариях!

Бесплатная направляющая

5 основных советов по ускорению


вашего сайта WordPress
Сократите время загрузки даже на 50-80%

просто следуя простым советам.

Советы и рекомендации по созданию мобильного веб-сайта вашей мечты

(Последнее обновление: 13 января 2021 г.)

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

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

До сих пор.

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

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

Люди неизбежно начали делать покупки в Интернете со своих смартфонов.В наши дни более 40% потребителей регулярно покупают что-то таким образом.

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

Что означает адаптивность при создании веб-сайтов для мобильных устройств?

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

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

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

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

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

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

Другие аспекты дизайна мобильного веб-сайта

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

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

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

  • Быстрая загрузка страниц. Ваш веб-сайт должен быть свежим и отзывчивым, а время загрузки должно быть минимальным или нулевым.Это возможно несколькими способами: от создания адаптивного сайта до создания отдельной мобильной версии вашего сайта, которая загружается при обнаружении мобильного устройства.
  • Изменение размера изображений. Уменьшение масштаба веб-сайтов, интенсивно использующих изображения, — еще один способ сократить время загрузки, особенно если содержимое имеет высокое разрешение. Подумайте об общем влиянии, которого вы пытаетесь достичь с помощью изображений и графики на своем веб-сайте, а затем уменьшите масштаб и соответствующим образом измените размер содержимого.
  • Простые навигационные меню. Строка меню гамбургера, о которой мы упоминали ранее, является обязательной для большинства мобильных веб-сайтов из-за четкого и компактного визуального оформления.
  • Простая контактная информация: в 2018 году никто не захочет переходить на страницу контактов, написанную мелким шрифтом или в едва читаемой цветовой гамме. Пользователям нужна сокращенная контактная информация, к которой можно получить динамический доступ через гиперссылки или другие доступные механизмы. Контактные формы также хороши, если они адаптированы для мобильных устройств и их легко заполнять и использовать.
  • Важная информация вверху: чтобы создать мобильный веб-сайт, вы должны думать как мобильный пользователь. Мы вернемся к этому чуть позже, но помните, что для того, чтобы понять, как ваш веб-сайт будет выглядеть для мобильного пользователя, вам нужно будет просматривать его через мобильное устройство.
  • Большой текст, большие кнопки: это важный элемент, который необходимо учитывать. Если вы передаете информацию с помощью текста или вам требуются действия пользователя с помощью кнопок веб-сайта, вам необходимо убедиться, что все детали видны и читаемы.
  • Отслеживайте свою мобильную статистику. Два слова: Google Analytics. Используя эти инструменты, вы сможете отслеживать, контролировать и расшифровывать ценную статистику и информацию о вашем мобильном веб-сайте, ваших мобильных пользователях и о том, как используется дизайн вашего веб-сайта.
    Это может дать ценную информацию о том, как ваши пользователи взаимодействуют с вашим веб-сайтом, а также легко определить проблемные области, чтобы вы могли исправить их как можно быстрее.
  • Попрощайтесь с flash: Flash — это плагин для браузера, который раньше давал веб-сайтам возможность воспроизводить видео, аудио и запускать приложения. Apple не согласилась с Adobe, создателями Flash, и отказалась от его поддержки. Вскоре после этого этому примеру последовал Android, и Flash также больше не работает на этой платформе.
    Это означает, что огромный сегмент посетителей вашего веб-сайта не будет иметь возможности просматривать созданный вами Flash-контент, поэтому лучше вообще отказаться от него и создавать свои веб-сайты в HTML 5.HTML 5 отлично справляется с видео и аудио и является стандартом, который используют большинство новых владельцев веб-сайтов. Вы можете найти различия между Flash и HTML 5 здесь.

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

  • Забыть провести тестирование с нескольких мобильных устройств: это большая проблема для людей, у которых есть только одно мобильное устройство для тестирования.Главное, что нужно помнить, это то, что никогда нельзя с уверенностью предполагать, что только потому, что ваш сайт хорошо выглядит на одном устройстве, это будет иметь место для всех устройств. Попробуйте как можно больше различных устройств, как Android, так и iOS, планшет и телефон.
  • Расстояние прокрутки не должно быть слишком большим: помните, что доступ к веб-странице, которую вы предлагаете своим посетителям, будет осуществляться с помощью навигационной системы, а это означает, что пользователи, скорее всего, будут использовать свои большие или указательные пальцы для ориентироваться.
    Вы не хотите, чтобы расстояние, которое им нужно преодолеть, чтобы прочитать весь ваш контент, было слишком большим, поэтому подумайте о минимизации вертикального и горизонтального расстояний.
  • Отбросьте детали: Люди, которые просматривают Интернет с настольного компьютера или ноутбука, обычно могут позволить себе роскошь просматривать ваш веб-сайт на большом дисплее с высоким разрешением. Мобильным пользователям предоставляется лишь часть этой визуальной недвижимости, а это означает, что сложные детали будут потеряны для них.
    Удалите детали и замените их чистыми и свежими меню и абзацами. Чем проще ваш сайт для навигации, тем больше вероятность того, что ваши пользователи будут оставаться на вашем сайте.
  • Обрезка текста. Помните, что мобильные пользователи имеют дело с гораздо меньшим экраном, поэтому текст должен быть кратким и лаконичным. Пользователи с большей вероятностью будут следовать коротким текстовым подсказкам, чем длинным, поэтому для повышения эффективности ваш мобильный сайт должен быть оптимизирован и урезан.
  • Распределите сенсорные области: Любой, кто использовал смартфон для навигации по веб-сайту, знает, как неприятно пытаться коснуться кнопки, которая находится слишком близко к другой, что иногда приводит к тому, что нажимается не та кнопка.Убедитесь, что при разработке своей страницы вы знаете, как макеты кнопок будут выглядеть на мобильном устройстве.
  • Запретить всплывающие окна: если вам нужно что-то подобное в рамках рекламной акции или кампании, рассмотрите альтернативу для ваших мобильных пользователей. Средний пользователь мобильного интернета с гораздо большей вероятностью закроет вкладки своего браузера, если столкнется с таким раздражением, которое приведет к потере потенциального клиента или продаже.

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

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

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

Рекомендации Google

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

Если у вас есть веб-сайт, который разделен на веб-сайты для мобильных устройств и настольных компьютеров, вам необходимо понять, является ли он веб-сайтом с динамическим обслуживанием или имеет отдельные URL-адреса, например m.youraddress.com. Эти рекомендации помогут вам максимально увеличить шансы на то, что ваш веб-сайт появится в большем количестве результатов поиска.

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

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

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

Заключение

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

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

Оптимизация вашего веб-сайта для мобильных устройств

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

  1. На панели управления вашей учетной записью нажмите Редактировать свой веб-сайт.
  2. В редакторе щелкните значок Mobile Editor , расположенный в правом верхнем углу, чтобы войти в редактор мобильного веб-сайта.
  3. Нажмите, чтобы выбрать, а затем перетащите и измените размер содержимого на странице по желанию.
    • Примечание : у вас будет ограниченная возможность вносить изменения в элементы на вашей странице в представлении мобильного редактора.Чтобы внести изменения, не представленные в мобильном представлении, вам нужно будет вернуться к представлению на рабочем столе, чтобы использовать полный редактор.

Скрытый контент

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

  1. Чтобы скрыть элемент, выберите этот элемент и щелкните значок Скрыть .
  2. Чтобы отобразить элемент, щелкните вкладку Скрытый , а затем щелкните значок Видимость рядом с элементом, который вы хотите вернуть на страницу, или перетащите элемент непосредственно из раздела Скрытые в нужное место. появиться на странице.
    • Примечание : вы не сможете добавлять новый контент на страницу из мобильного редактора. Если вы решите добавить новый элемент на сайт, вы можете вернуться к представлению «Рабочий стол», чтобы сделать это.
  3. При первом доступе к мобильному редактору или после внесения значительных изменений нажатие кнопки Изменить порядок макета приведет к принудительному отображению на странице всех скрытых элементов.
    • Примечание : это изменит порядок всего содержимого на странице, включая то, что вы уже потратили на редактирование, поэтому будьте осторожны при использовании этой опции.

Фон мобильного просмотра

Вы можете установить специальный фон для мобильных устройств на своей странице на вкладке Настройки .

  1. Щелкните вкладку Настройки , расположенную на левой боковой панели.
  2. Нажмите, чтобы выбрать параметр Стили , а затем установите желаемый цвет фона и изображение.

Включите просмотр мобильного устройства

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

  1. Щелкните вкладку Настройки , расположенную на левой боковой панели.
  2. Нажмите кнопку Display Mobile View , чтобы включить или выключить его по желанию.

Меню навигации

Меню в вашем мобильном представлении будет отображаться в так называемом представлении Гамбургер-меню . Это представлено в виде небольшого квадрата с 3 линиями, похожего на гамбургер 🙂 Довольно стандартный способ отображения меню в мобильном пространстве.При нажатии будет представлена ​​панель со всеми страницами ссылок вашего сайта, которую затем можно будет использовать для соответствующей навигации.

Не можете найти то, что ищете? Вы можете написать по адресу [email protected] для получения дополнительной поддержки.

Зачем нужна мобильная версия вашего сайта?

До популярности таких смартфонов, как iPhone или Android, еще можно было выходить в Интернет на телефоне. Опыт обычно был не очень хорошим из-за более низкой скорости передачи данных, плохого программного обеспечения браузера и того факта, что большинство веб-сайтов не были оптимизированы для просмотра на мобильных устройствах.В те дни оптимизация вашего веб-сайта для мобильных устройств означала уменьшение размеров файлов изображений, использование макетов на основе CSS вместо макетов на основе таблиц, отсутствие Flash и, в основном, любые другие действия, чтобы уменьшить объем загружаемых данных.

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

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

Современные мобильные устройства в основном сенсорные.По сравнению с настольными компьютерами и ноутбуками у них маленькие экраны с ограниченным разрешением экрана. Вы когда-нибудь посещали веб-сайт, не оптимизированный для мобильных устройств, на своем смартфоне и пытались нажать на ссылку, но вам было очень трудно, потому что ссылка слишком маленькая или слишком близка к другим ссылкам? Я знаю, что у меня есть. Наличие мобильной версии веб-сайта решило бы эту проблему за счет использования другого макета, созданного специально для мобильных устройств, таких как смартфоны. Вот несколько основных советов о том, как запустить мобильную версию вашего веб-сайта:

  • Максимально используйте CSS вместо файлов изображений (например,грамм. градиентные заливки, тени, закругленные прямоугольники и т. д.). Использование слишком большого количества изображений замедлит загрузку веб-сайта. Данные CSS намного меньше по размеру файла, чем данные файла изображения.
  • Используйте гибкий макет. Не все смартфоны или мобильные устройства имеют одинаковое разрешение экрана. Сохраняя гибкость макета, веб-сайт может растягиваться и расширяться по мере необходимости.
  • Используйте более крупные размеры шрифта, которые легко увидеть и прочитать на маленьком экране.
  • Графические кнопки вместо текстовых ссылок, потому что их легче «пощупать».
  • Без Flash.Вместо этого используйте HTML5 и/или Javascript/jQuery.
  • Упрощенная навигация с меньшим количеством опций

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

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

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

Leave a Reply