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


Дизайн сайта для мобильных устройств

Все больше и больше пользователей заходят на веб-сайты с мобильных телефонов. Компания Gfk опубликовала данные новых исследований: по статистике доля пользователей, которые используют мобильные устройства для поиска в интернете составляет 61%. Однако, дизайнеры часто совершают ошибки в проектировании макетов для мобильных телефонов. В этой статье мы поговорим об основных правилах дизайна сайта для мобильных устройств и приведем реальные примеры.

Правило 1. Адаптивность

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

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

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

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

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

Остальные правила относятся к проектированию адаптивной версии сайта.

Правило 2. Большие размеры

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

На примере - мобильная версия интернет-магазина «Озон». Кнопка зафиксирована внизу экрана, чтобы при прокрутке всегда была перед глазами. Выделена контрастным синим цветом для привлечения внимания. Достаточно крупная, для удобства при нажатии и при переходе в корзину. Также разработчики указали конкретное целевое действие: добавить в корзину товар определенной цены.

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

Рекомендации по размерам элементов для нажатия: минимальный размер 26 px. Компания Apple рекомендует использовать размеры 44x44 px.

Правило 3. Крупная типографика

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

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

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

Правило 4. Ничего лишнего

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

Десктопная версия

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

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

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

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

Правило 5. Контент в одной колонке

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

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

Правило 6. Нет поп-апам и виджетам

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

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

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

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

Правило 7. Доступные контактные данные

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

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

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

Пример 8. Социальные сети

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

Пример 9. Короткие формы

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

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

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

Вот как разработали форму для получения кредитной карты дизайнеры банка «Тинькофф»:

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

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

Правило 10. Пространство

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

Десктопная версия

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

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

Правило 11. Проектирование навигационных элементов

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

Самый распространенный прием - фиксированное меню. При скроллинге такое меню остается перед глазами и позволяет быстро переходить из раздела в раздел:

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

Правило 12. Целевая аудитория

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

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

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

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

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

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

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

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

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

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

Более 50% посетителей вашего сайта будут использовать свои мобильные телефоны для доступа к вашему сайту. Около 3% будут использовать планшеты.

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

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

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

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

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

Видеоурок

Подписаться на WPBeginner

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

1. Использование настройщика тем WordPress

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

Просто войдите в свою панель управления WordPress и перейдите на экран Внешний вид »Настроить .

Это откроет настройщик тем WordPress. В зависимости от того, какую тему вы используете, в левом меню вы можете увидеть немного разные параметры:

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

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

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

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

2. Использование режима устройства Google Chrome DevTools
В браузере

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

Просто откройте браузер Google Chrome на рабочем столе и перейдите на страницу, которую хотите проверить.

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

Затем вам нужно щелкнуть правой кнопкой мыши на странице и выбрать «Проверить».

С правой стороны откроется новая панель, например:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.

.

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

1

Выбор правильного подхода

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

  • Адаптивный: страница - URL, HTML, изображения, все остальное - остается прежней, но CSS дает разные правила в зависимости от ширины браузера.
  • RESS / Adaptive / Dynamic Serving: URL-адрес остается тем же, но сервер отправляет разные HTML и CSS в зависимости от того, какое устройство запрашивает страницу.
  • Отдельный мобильный сайт: обычно размещается на субдомене (например, m.domain.com ) или иногда в подпапке (например, www.domain.com/mobile ), но он также может использовать те же URL-адреса, что и рабочий стол site, и просто обслуживает разные HTML (так называемые динамические показы) для посетителей компьютеров и мобильных устройств в зависимости от пользовательского агента.
    Если мобильный сайт использует разные URL-адреса, они часто сохраняются параллельно со своими аналогами для настольных компьютеров (например, www.domain.com/first-page и m.domain.com/first-page ), что обеспечивает плавное перенаправление на основе пользовательского агента. Но поскольку это отдельный набор страниц, варианты безграничны. Вы можете выбрать совершенно другую структуру сайта, и в этом случае мобильные URL-адреса обязательно будут другими.

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

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

Примечание о функциональных телефонах:

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

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

Однако в этом документе мы не будем рассматривать дополнительные особенности телефонов.

Дополнительная литература по оптимизации функциональных телефонов
Базовый вариант: используйте CMS, которая сделает это за вас

Если у вас небольшой бюджет или ограниченные ресурсы, вы можете изучить возможность использования удобной системы управления контентом (CMS), такой как Wordpress. Адаптивный дизайн, вероятно, ваш лучший вариант здесь, поскольку существует множество готовых адаптивных CMS, а адаптивный дизайн требует наименьшего объема создания контента.

Вот некоторые из наших рекомендаций по созданию хороших адаптивных тем Wordpress и других сервисов CMS. Есть много других вариантов.

Темы Wordpress:
  • Elegant Themes содержит несколько адаптивных тем по цене ~ 69 долларов в год. Они предоставляют обновления и полную поддержку. Вы можете продлевать его ежегодно.
  • PressCoders: мы рекомендуем тему Designfolio, которую вы можете скачать бесплатно (с некоторыми ограничениями) или приобрести полную лицензию за 79 долларов.Платная версия включает полную поддержку.
  • WooThemes - отличные темы Wordpress премиум-класса. Некоторые из них бесплатны, большинство стоят от 80 до 140 долларов, все они готовы к работе с мобильными устройствами и легко настраиваются.
  • Адаптивная тема от CyberChimps - отличный вариант, особенно для базового сайта, такого как личный сайт или блог. И это бесплатно.
Или для пользователей, не использующих Wordpress:
  • SquareSpace, вероятно, является одним из лучших мобильных дизайнерских решений WYSIWYG (What You See Is What You Get) на данный момент по цене от 8 долларов в месяц (за самую базовую услугу).
  • Wix - еще одна услуга WYSIWYG по очень разумной цене - около 17 долларов в месяц.

Но если вы готовы и можете сделать это самостоятельно, приступим!

2

Разработка мобильной версии вашего сайта

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

Организация контента
  • Рекомендуется: Mobile First

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

  • Разработка мобильного сайта Второй

    Если разработка Mobile First недоступна, ваша задача будет более сложной, но не невыполнимой.

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

    • Вы можете собирать пользовательские данные с помощью стандартных инструментов веб-аналитики, настраиваемых инструментов, таких как CrazyEgg, и тестирования UX.Задавать вопросы:
      1. Какой контент важен для посетителей?
      2. Что игнорируется?
      3. Каков типичный путь посетителей?
    • Посмотрите и внутренне. Если вам нужна реклама для поддержки вашего сайта, вы, очевидно, не собираетесь удалять их только потому, что выяснили, что они были проигнорированы в ваших пользовательских тестах. С другой стороны, если ваш сайт в основном работает по подпискам, но включает в себя рекламу для немного большей прибыли, вы можете удалить ее из мобильной версии сайта, чтобы ускорить время загрузки страницы и оптимизировать взаимодействие с пользователем.
    • Запустите тесты скорости, чтобы определить элементы, загрузка которых требует времени. Узнай:
      1. Важны ли они для содержания страницы?
      2. Можно ли их свернуть?

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

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

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

      [мобильный сайт Amazon]

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

      [мобильный сайт Nordstrom]

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

Обеспокоенность универсальным мобильным дизайном
  • Навигация на маленьком экране

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

    nytimes.com
    modcloth.com
    facebook.com
  • Размер смартфона отличается

    Большинство смартфонов имеют размер от 320 до 400 пикселей (в пикселях CSS, что важно для дизайна), хотя старые iPhone имеют ширину всего 240 пикселей.Если их перевернуть на бок, они могут быть до 640 пикселей в поперечнике. Планшеты имеют размер от 480 до 800 пикселей, когда их держат как книгу, но они, скорее всего, будут держаться как телевизор, так что их максимальное разрешение составляет 1280 пикселей.


    Это дает вам довольно большой разброс для дизайна: от 320 до 1280 пикселей. Вместо того, чтобы обслуживать каждого , выясните, какие размеры экрана люди обычно используют на вашем сайте. Если вы используете программное обеспечение для аналитики, такое как Google Analytics, вы сможете легко найти эти данные (в GA они находятся в отчете для мобильных устройств).Это снимок экрана из отчета "Мобильные устройства> Устройства" с дополнительным параметром "Разрешение экрана":

    .

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

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

  • Дизайн для Touch

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

    1. Оставьте достаточно места для пальца: Пальцы не так точны, как мыши. Пальцы закрывают то, что они нажимают, вы не можете указать, что они наводят курсор на нужную опцию до того, как коснутся, и они касаются большей части экрана, чем мышь.Убедитесь, что у вас всегда есть пространство размером не менее 28 x 28 пикселей вокруг ссылок на вашем сайте для неуклюжих пальцев.
    2. Оставить отзыв при прикосновении к экрану: Из-за медленного или прерванного подключения многим вашим посетителям придется подождать некоторое время, чтобы перейти на следующую страницу, когда они нажимают на ссылку или кнопку. Сообщите им, что телефон записал, что они нажимали кнопку, показывая отступ кнопки или выделяя связанное поле. В противном случае ваши посетители будут яростно нажимать на свои экраны и могут оказаться не в том месте.
    3. Используйте кнопки: Кнопки четко определяют, где пользователи могут или не могут щелкнуть, чтобы активировать ссылку. Поскольку, в отличие от дисплея рабочего стола, вы не можете использовать какие-либо сигналы, чтобы сообщить им, что их мышь находится над правой областью, более важно определить пространство, по которому можно нажимать.
    4. Редизайн раскрывающихся меню: Они по-прежнему работают на мобильных устройствах и могут быть отличным способом скрыть информацию до тех пор, пока она не будет запрошена, но они часто открываются только при наведении на них курсора мыши.Раскрывающиеся меню для мобильных устройств должны активироваться одним касанием, а в меню должно быть четко видно разделение опций. BridgestoneTire.com делает это хорошо:
    5. Свернуть ввод текста: Ввод на мобильном телефоне выполняется медленнее и требует экранной клавиатуры, что делает видимый экран вдвое меньше. Исключите ввод, который не является абсолютно необходимым. Разбивайте формы на несколько страниц, которые занимают только половину экрана, с помощью четкой кнопки «Далее», чтобы посетителям не приходилось прокручивать.
    6. Используйте специальные функции для мобильных устройств: Разница между основными сайтами и сайтами для мобильных устройств добавляет возможности: например, вы можете сделать все свои телефонные номера интерактивными для звонков и превратить свой адрес в ссылку для навигации.
Дополнительная литература

Разработка адаптивных сайтов

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

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

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

Изменение размера веб-сайтов - пример

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

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

Уменьшение содержания (все элементы)

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

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

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

Реорганизация содержания (текст на баннере)

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

Реорганизация содержимого (левая навигация)

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

Удаление содержимого (правая навигация)

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

Если ответ отрицательный, вы можете настроить его на display: none, если ширина экрана слишком мала для его размещения.

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

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

Перемещение содержимого в макет с одним столбцом

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

  1. Перегруппируйте содержимое в один столбец: Если разделенный контент на основном сайте все еще легко перетекает от одного фрагмента к другому, просто сложите его в правильном порядке, используя визуальные подсказки, чтобы показать читателю, где начинается и заканчивается один фрагмент. Для страниц с особенно насыщенным контентом рекомендуется включить навигацию вверху, которая позволит посетителям переходить к наиболее интересной части.
  2. Скрыть содержимое при загрузке: Подумайте об использовании интерактивного макета «аккордеон», который скрывает часть содержимого при загрузке под заголовками, напоминая кнопки. Например, вот как мы показываем наше расписание конференции через мобильный телефон. Посетители могут нажать, чтобы развернуть разделы для просмотра более подробной информации:

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

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

Дополнительная литература

Разработка отдельного мобильного сайта или сайта с динамическим обслуживанием

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

Включает большую часть контента с основного веб-сайта

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

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

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

Примечание о планшетах:

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

Подробнее - Войдите или зарегистрируйтесь - это бесплатно!

Понравилось то, что вы прочитали?
Зарегистрируйтесь сейчас бесплатно, чтобы прочитать оставшиеся главы:

  1. Рекомендации по разработке
  2. Техническая поисковая оптимизация
  3. Настройка и использование Analytics
  4. Будущее мобильного Интернета
.

Мобильная версия сайта

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

в мобильной версии отсутствует эффект параллакса.
смотрите видео:
https://radikal.ru/video/MM6MVJ9KBMi

  • Этот ответ был изменен 9 месяцев, 1 неделя назад пользователем Nata_Nata.
  • Этот ответ был изменен 9 месяцев, 1 неделя назад пользователем Nata_Nata.
Модератор Джеймс Хафф

(@macmanx)

Волонтер-модератор

Мне кажется, ваш сайт работает нормально.

Во-первых, убедитесь, что в вашем браузере установлена ​​последняя версия: https://browsehappy.com/

Если это не так, попробуйте обновить браузер или переключиться на другой браузер.

Если это так, выполните следующие действия:

1. Попробуйте очистить кеш браузера и очистить файлы cookie.

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

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

Вы заходили на сайт с телефона?

Модератор Джеймс Хафф

(@macmanx)

Волонтер-модератор

Да, Safari на iOS 13.2.3.

Я захожу на сайт с трех разных телефонов и в 3 браузерах.Везде проблемы с фоновой картинкой.
Эффекта параллакса нет, фон перемещается вместе с текстом (в iphone)
Никакого фонового изображения (на android).

Фото с компьютера:
https://a.radikal.ru/a23/1912/84/0289ae8ded07.png

Экран телефона Видео:
https://radikal.ru/video/xBZgLaZaHvb

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

.

Как сделать ваш сайт мобильным? (5 шагов)

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

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

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

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

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

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

Готовы сделать свой сайт мобильным?

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

  • Мобильные экраны довольно маленькие
  • Сотовые телефоны обычно имеют более медленные процессоры по сравнению с ПК
  • Мобильные соединения обычно имеют меньшую пропускную способность и меньшую скорость загрузки
  • Народ тыкает пальцами в тачскрин
  • Люди используют мобильные устройства в дороге

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

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

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

3. Используйте передовые методы мобильной поисковой оптимизации.
Чтобы сделать мобильную поисковую оптимизацию эффективной, убедитесь, что ваш веб-сайт соответствует критериям мобильной оптимизации Google, таким как использование удобочитаемого текста, отказ от программного обеспечения, не распространенного на мобильных устройствах (например, Flash) и т. Д.

4. Избегайте распространенных ошибок мобильной оптимизации
Не блокируйте JavaScript, CSS или файлы изображений; Избегайте размещения невоспроизводимого контента, исправления нерелевантных перекрестных ссылок и т. д.

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

Давайте подробно рассмотрим шаги.

1. Проверьте свой сайт на удобство использования для мобильных устройств

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

Перейдите в Google Analytics> Аудитория> Мобильные> Обзор / Устройства и просмотрите разбивку посетителей по устройствам: мобильные, настольные и планшеты. Вы можете еще больше разбить это значение, чтобы увидеть такие показатели, как показатель отказов, продолжительность посещения и коэффициент конверсии цели с помощью определенных устройств (iPhone, телефоны Samsung, iPad и т. Д.).

Затем проверьте свой сайт с помощью Google Mobile Friendly Test. Там вы можете получить один из двух следующих результатов:

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

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

Кроме того, вы можете проверить мобильность вашего сайта (и страниц) с помощью веб-сайта Auditor.Запустите инструмент, введите URL-адрес, который вы хотите проверить, проверьте Структура сайта> Аудит сайта> Кодировка и технические факторы .

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

2. Выберите удобное для мобильных устройств решение

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

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

Адаптивный веб-дизайн (рекомендовано Google)

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

Отдельный сайт для мобильных пользователей

Мобильное приложение

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

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

Плюсы

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

Минусы

  • Адаптивный дизайн немного ограничен в количестве способов, которыми он может «реагировать» на пользователей. Поскольку вы обслуживаете только одну часть контента, вы можете создать интерфейс, который отображает информацию только для одного типа намерений пользователя.
  • Реализация адаптивного веб-дизайна означает серьезную переработку макета и структуры сайта, что может быть неприемлемо для некоторых владельцев веб-сайтов.
2. Динамическое обслуживание

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

Плюсы

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

Минусы

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

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

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

Плюсы

  • Гибкость.Мобильные пользователи обычно хотят определенные типы контента, такие как местонахождение компании, часы работы, направления и т. Д. С помощью отдельного мобильного сайта легко сделать свои веб-страницы, разработанные специально для мобильных пользователей, то есть наполнить их существенно информация, отличная от той, которую мы ожидаем увидеть на сайте для настольных компьютеров.
  • Аналитика. С точки зрения маркетинга проще направить мобильный трафик в отдельную воронку продаж. Итак, мобильный сайт предоставляет вам всю необходимую аналитику для мобильной кампании.

Минусы

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

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

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

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

Плюсы

  • Абсолютный победитель в удобстве использования мобильных устройств: мобильные приложения работают лучше, чем мобильные сайты или даже веб-сайты для настольных компьютеров (по словам Якоба Нильсена).
  • Отлично подходит для брендинга. Когда ваша компания предлагает приложение, разработанное специально для мобильных пользователей, это означает, что вы серьезно относитесь к репутации своей компании и готовы сделать все возможное, чтобы охватить мобильную аудиторию.

Минусы

  • Дорогостоящее решение. Вы могли заметить, что мобильные приложения (или даже несколько решений для разных платформ) разрабатывают в основном крупные бренды.
  • Требуются дополнительные усилия со стороны пользователя. Совсем другое дело - заставить людей установить / использовать ваше мобильное приложение. Скорее всего, это будут делать только ваши лояльные клиенты или те, кто находится довольно далеко в своем цикле покупки.
Совет: существует технология Progressive Web App (PWA), которая создает гибридный интерфейс, похожий на приложение.Когда сайт открывается в браузере настольного компьютера, он выглядит как обычный сайт, а на экране мобильного устройства создается впечатление приложения. Технология PWA позволяет быстрее загружать сайт за счет кеширования. Причем пользователю не нужно скачивать его из магазина приложений - достаточно согласиться с сайта, чтобы добавить значок приложения на рабочий стол. Такие гиганты, как Uber, Twitter, Alibaba использовали PWA и не пожалели об этом.

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

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

Код в HTML5

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

Убедитесь, что ваша страница загружается быстро

Скорость - решающий фактор, потому что мобильные пользователи не любят терять время. Последние обновления Google Core Web Vitals позволяют оценить работоспособность сайта, и одним из основных показателей является скорость загрузки веб-сайта. Если ваш сайт не загружается в течение 2,5 секунд, его нужно улучшить.

Вы можете найти множество бесплатных инструментов для измерения пользовательского опыта, например, Chrome User Experience Report, Lighthouse и т. Д.Например, чтобы проверить скорость вашего сайта с помощью Page Speed ​​Insights, просто введите URL-адрес и посмотрите, соответствует ли ваш сайт оценке Core Web Vitals. Инструмент предоставляет обзор диагностики и рекомендации по улучшению.

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

Совет: чтобы страницы загружались быстрее на мобильных устройствах, Google поддерживает платформу AMP (Accelerated Mobile Pages). Этот проект с открытым исходным кодом направлен на улучшение взаимодействия с мобильными пользователями. Он удаляет сжатую HTML-копию веб-сайта, кэширует ее в облаке и мгновенно выполняет предварительный рендеринг для пользователей. Главный аргумент против технологии заключается в том, что пользователи остаются в Google, а не переходят на сайт издателя.И по-прежнему требуется соответствие определенным критериям и некоторый код для создания страниц AMP. Этот проект лучше подходит для средств массовой информации, которые в значительной степени полагаются на то, чтобы сообщать свои новости как можно скорее. Вы можете узнать больше о страницах AMP в нашем блоге здесь.
Не делайте свои страницы тяжелыми

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

Совет: Google предоставляет решение Web Light. Он работает путем перекодирования существующих страниц для мобильных клиентов с медленным подключением. Как утверждает Google, в четыре раза более быстрая загрузка и 80% уменьшение байтов на страницу обеспечивают 50% рост трафика от клиентов с медленным соединением.
Выделение кнопок навигации

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

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

Сделайте так, чтобы содержимое страницы соответствовало экрану

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

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

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

Сделайте текст читабельным без увеличения

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

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

Старайтесь не втискивать слишком много сенсорных элементов в одностраничный сегмент или делать их слишком маленькими.Google рекомендует минимальный размер целевой точки касания примерно 7 мм или 48 пикселей CSS на сайте с правильно настроенным мобильным окном просмотра.

Совет: для тех, кто использует WordPress, Joomla и т. Д.
Если вы используете готовую CMS на своем сайте (в отличие от написания кода вручную с нуля), вот несколько рекомендаций по мобильной оптимизации для сайтов, работающих на WordPress, Joomla, Drupal, Blogger, vBulletin, Tumblr, DataLife Engine, Magento, Prestashop, Bitrix и Google Sites. Вкратце, вам нужно убедиться, что ваша тема обновлена ​​и поддерживает адаптивный дизайн; вы можете найти такую ​​информацию в документации по теме.
Используйте теги alt для изображений

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

Сделать поиск по сайту доступным

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

Предоставить ссылки для перехода

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

Создание кнопки интерактивного вызова

Почему бы не приклеить кнопку Click-to-Call где-нибудь на своей мобильной странице. Ведь на телефоне его все-таки будут смотреть! Как показывают исследования, такая кнопка способна резко увеличить конверсию.

Включить автоматический вход

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

4. Избегайте этих ошибок мобильной оптимизации

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

Не блокировать JavaScript, CSS или файлы изображений

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

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

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

Не использовать рамки
Фреймы

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

Правильно настройте переадресацию

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

Остерегайтесь мобильных устройств 404

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

Проверить на нерелевантные перекрестные ссылки

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

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

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

Не заставляйте всплывающие окна портить пользовательский опыт

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

Не заставляйте пользователей агрессивно скачивать ваше приложение

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

Не забудьте добавить мобильные URL-адреса в файл Sitemap

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

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

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

5. Используйте мобильные инструменты SEO, чтобы повысить свой рейтинг в Google Mobile

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

Основы мобильной поисковой оптимизации

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

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

Возможно, вам следует использовать для своего мобильного сайта / приложения ключевые слова, немного отличающиеся от тех, которые вы используете для своего сайта для настольных компьютеров? Зайдите в Планировщик ключевых слов Google и выберите Mobile Trends , чтобы узнать:

Используйте Rank Tracker, чтобы найти мобильные ключевые слова с высоким рейтингом.Создайте проект и добавьте целевой URL. Выберите Keyword Research> Ranking Keywords> Search as Google Mobile .

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

Знаете ли вы, что Rank Tracker может отслеживать органический рейтинг вашего сайта в основных мобильных поисковых системах? Поскольку большая часть активности мобильного поиска в любом случае происходит в Google (да, даже на iOS), этого часто более чем достаточно, чтобы получить представление о позиции вашего сайта в органических поисковых результатах поиска для мобильных устройств.Перейдите к Предпочитаемые поисковые системы и добавьте мобильные поисковые системы, в которых вы хотите отслеживать рейтинг своего сайта.

Сканирование как мобильный робот Googlebot

Вы можете видеть свой веб-сайт так, как его сканирует мобильный робот Googlebot. Перейдите в Website Auditor> Preferences> Crawler settings> Следуйте инструкциям robot.txt для Googlebot-Mobile .

Основы ASO (оптимизация магазина приложений)

В 2018 году люди скачивали приложения 194 миллиарда раз, и более половины этих загрузок приходилось на поиск в магазинах приложений.Так что оптимизация для более высоких позиций в Google Play и iOS App Store - отличная идея.

Факторы ранжирования оптимизации магазина приложений
  • Ключевые слова в заголовке приложения (вот хороший инструмент, который извлекает предложения ключевых слов в App Store из автозаполнения)
  • Ключевые слова в описании приложения
  • Использование красивой иконки (для увеличения загрузок, которая поможет ASO)
  • Используйте правильный тип и категорию
  • Стремитесь к более высоким рейтингам и лучшим отзывам
  • Попробуйте получить больше загрузок
  • Совет
  • Pro: используйте плагины Google+ на странице своего приложения, так как +1 помогает вам занять место в Google Play.
Трекеры рейтинга в магазине приложений

Используйте инструменты, чтобы проверить место вашего приложения среди приложений Android или iOS, например SensorTower или SearchMan.

Перед вами

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

.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий