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

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

Примерно каждый 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 не влияет.

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

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

ГЛАВА 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-аналитике с мобильных устройств. Выделяйте плохие страницы и проверьте, где проблемы с отображением контента на мобилках.

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

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

Мобильная версия сайта или адаптивный дизайн: что выбрать?

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

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

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

Мобильная версия – это, по сути, полноценный отдельный сайт со своей версткой, разработанный под маленькие узкие экраны. Он имеет отдельную ссылку, чаще всего к адресу основного сайта добавляется буква m или слово mobile. Иногда мобильные версии значительно отличаются от десктопных по своей структуре, функционалу и контенту: в них оставляют то, что важно и нужно для пользователей смартфонов. Например, у пользователей m.vk.com слева нет блока с текстово-графическими баннерами.

… даже если открыть мобильную версию в браузере на компьютере

Плюсы

Мобильная версия – это самая старая технология, призванная облегчить жизнь пользователям мобильных устройств. Она появилась задолго до адаптивного дизайна, но до сих пор с ним конкурирует: Яндекс.Маркет, Tutu, Lamoda – эти и многие другие крупные бренды используют мобильные сайты с отдельным адресом.

Преимущества следующие:

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

Минусы

У мобильной версии есть и ряд недостатков:

1. Ресурс имеет два отдельных адреса – десктопный и мобильный. Это неудобно с точки зрения SEO. Оптимизировать мобильный сайт придется отдельно от основного, и это создаст лишние проблемы.
2. Наличие двух адресов может огорчить не только SEO-специалистов, но и рядовых пользователей, которые могут запутаться в ссылках.
3. У контент-менеджеров с мобильной версией тоже прибавится работы, ведь наполнять оба сайта придется по отдельности.
4. Разработка второго мобильного сайта обойдется дороже, чем создание адаптивной версии.

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

Можно взаимодействовать с пользователями ПК и мобильных устройств, используя один единственный сайт. Для этих целей придумана адаптивная верстка. У таких сайтов в коде указано, как отображать интерфейс под разные размеры экранов. Адаптацию используют многие крупные бренды – например, Aviasales, «MВидео».

Cybermarketing тоже использует адаптивный дизайн

Плюсы

Адаптивная верстка сейчас широко распространена и у нее много преимуществ:

1. Интерфейс не меняется кардинально. Пользователи, привыкшие взаимодействовать с сайтом с компьютера, без труда будут ориентироваться на нем и со смартфона – потому что этот тот же самый сайт. Все блоки и элементы подчиняются единой иерархии, вне зависимости от габаритов экрана.
2. Адрес будет один на все случаи жизни – и для пользователей с ПК, и для пользователей со смартфонами. Это удобнее для SEO-продвижения: у вас не будет проблем с дублирующимся контентом, дополнительными затратами на наполнение, оптимизацию.
3. Единый адрес также более удобен для ваших клиентов, не возникнет лишней путаницы и трудностей с запоминанием.
4. Цена – еще одно преимущество адаптивного дизайна. Вписать в код опции для разных размеров экранов обойдется гораздо дешевле, чем создавать отдельный сайт под мобильные устройства.

Минусы

К недостаткам адаптивной верстки можно отнести следующие характеристики:

1. Загружаться такой сайт будет дольше, чем отдельная мобильная версия. Если у пользователя слабенький интернет, а у вас много тяжелого контента на сайте, эта мелочь может стать вполне реальной проблемой.
2. У пользователя не будет выбора: если отображение на мобильном ему по какой-то причине не понравится, он никак не сможет переключиться на тот интерфейс, который знал и любил на мониторе ПК.
3. Уместить целый десктопный сайт на маленьком экране сложно, интерфейс будет перегруженным и непонятным. Для удобства пользователей некоторые ненужные элементы скрывают при отображении на мобильных устройствах, это прописывается в коде. Но такой контент снова делает загрузку медленнее, а еще может вызвать сложности для SEO.

Альтернатива — респонсивный дизайн

Не так давно популярность начала набирать еще одна технология – Responsive Design + Server Side (или RESS). В таком случае разрабатывается два независимых шаблона – для ПК и для смартфонов, и они показываются пользователю в зависимости от того, с какого устройства он зашел. При этом URL-адрес остается одним и тем же. У таких сайтов нет проблем с медленной загрузкой, а пользователь может переключаться между версиями.

Основной недостаток технологии RESS – сложная и дорогостоящая разработка. По этой причине используют такой дизайн крайне редко.

Kudago – пример сайта с RESS (у десктопной и мобильной версий разный код, но одинаковый URL)

Что выбрать?

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

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

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

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

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

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

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

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

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

Чтобы сайт выглядел красиво на разных устройствах, сделайте версии для телефона и планшета.

Для этого:

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

Выберите устройство, для которого делаете версию:

Дождитесь загрузки и нажмите на Выключено:

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

Изменения, которые отображаются во всех версиях:

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

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

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

• Перемещение элемента
• Изменение размера элемента

Скройте лишнее

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

Чтобы вернуть скрытый элемент на место, щелкните на нем в списке Скрытые пункты.

Запустите версию

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

Используйте Автокомпоновку

Если включить этот режим, компьютер сам расположит элементы сайта под экран, с которого открыт сайт. При включенной автокомпоновке вы не сможете редактировать сайт для любых экранов — режимы Широкий, Десктоп, Планшет, Смартфон будут недоступны.
Чтобы включить или выключить Автокомпоновку, нажмите на ее кнопку.

Узнайте, как настроить SEO для сайта на конструкторе и как управлять дизайном в наших статьях.

Помогла ли эта статья решить вашу проблему?

Ваш ответ поможет улучшить статьи в будущем.

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

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

Что такое мобильный сайт: понятие и характеристики

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

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

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

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

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

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

Рассмотрим популярные способы создания:

• адаптивный дизайн. Адрес сайта не изменяется, но CSS-файл адаптирует его под требования устройства. Обеспечивает корректную работу. Не требует переноса ресурса на отдельный поддомен. Выгоден с точки зрения продвижения;
• RESS. Технология комбинирует вывод разных HTML и CSS. Процессы происходят на одном URL, выполняется определение типа устройства. Обеспечивает высокую скорость загрузки страниц, хорошую индексацию, но требует привлечения специалиста, который интегрирует архитектуру RESS;
• отдельный ресурс. Самый простой путь, нуждается в отдельном URL-адресе, что может оказывать негативное влияние на продвижение. Достаточно удобный для пользователя. Последний в любое время может осуществить переход с альтернативной версии на десктоп.

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

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

Но адаптивность имеет ряд минусов:

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

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

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

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

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

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

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

1. Автоматическое перенаправление, для чего нужно изменить настройки серверного редиректа.
2. Возможность в любой момент перейти на десктопную версию.
3. Корректно работающие инструменты коммуникации: крупные значки оформления заказа, кликабельные телефонные номера и адреса электронной почты.
4. Высокий уровень юзабилити: удобное меню, быстрая загрузка, навигация, другие функции.
5. Продуманный дизайн: крупный шрифт, отступы и другие.

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

Кому поручить создание сайта?

Подводим итоги

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

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

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

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

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

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

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

1. Конечно же, сайт при всех прочих условиях должен загружаться и работать максимально быстро. Чтобы случилось именно так, постарайтесь избегать больших списков и огромных блоков на мобильных страницах ресурса.
2. Идеальным будет использование всех картинок и фото на сайте уже в сжатом виде. Это значительно сократить время на загрузку как страниц, так и самого сайта.
3. Связи и покупки. Самые важные составляющие, которые должны функционировать на вашем ресурсе с максимальной четкостью. Желательно, чтобы использовалось при заполнении любых форм минимальное количество полей, чтобы не создавать пользователю неудобств и не увеличивать его время на оформление, например, заказа.
4. Удобная навигация. Очень рекомендуется, чтобы все содержимое сайта удобно размещалось на одной странице мобильной версии.

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

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

WordPress шаблоны

***
***
***
***
***
***

MotoCMS HTML

***
***
***

HTML дизайн

***

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

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

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

Оптимальным решением будет добавление в раздел CSS вашей темы такого текста:

#content{max-width: 1280 px;}

Помимо этого вам желательно изменить ширину страниц мобильной версии (за нее отвечает атрибут “width”). После того, как найдете его в разделе CSS, вам нужно будет заменит его значение на “100%”. Это позволит браузеру автоматически подгонять ваш сайт под любой экран. Но стоит отметить, что данный способ адаптации не является эффективным, потому как сайт будет грузиться долго. Основные цели мобильной версии это быстрая загрузка и предоставление удобства. Помимо этого такой вид адаптации не является быстрым. Вам придется искать нужные атрибуты, эксперементировать с их значениями, если будут возникать какие-либо дефекты и так далее.

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

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

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

3. Плагин WP Lightbox 2 поможет сделать всплывающие окна на мобильном сайте. Он начинает работать сразу же после активации. При желании можно изменить длительность показа. В целом, с настройкой проблем не должно возникнуть.

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

5. Если вы хотите создать готовый адаптивный сайт за считанные минуты, то вам стоит использовать плагин WP Touch. Он является достаточно популярным, потому как им пользуются более 5 миллионов вебмастеров. Этот плагин содержит базовые настройки (название, язык, регион) и одну тему. Если же вы хотите сделать более функциональную мобильную версию сайта для смартфонов, то вам стоит приобрести премиум версию WP Touch Pro. Здесь присутствует большое количество различных тем и дополнительных настроек, поэтому ваш сайт не будет однообразным.

6. WP Mobile Detector предназначен для определения устройства, с которого посетитель заходят на сайт. Он способен сделать распознавание около 5 тысяч различных устройств. Также плагин фиксирует статистику уникальных посещений, источников перехода и многое другое.

7. WordPress Mobile Pack это многофункциональный плагин. Благодаря нему вы сможете сделать настройку отображения различных кнопок бара (добавить в закладки и так далее), кнопок смены версии сайта с классической на мобильную и блоков с рекламой от Гугл или AdMob. Также он содержит мобильную версию панели управления сайтом. Это существенно повысит удобство, потому как в стандартной версии панели управления при работе на мобильных устройствах некоторые опции являются ограниченными в доступе.

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

9. Duda Mobile Website Builder поможет создать быстрый и привлекающий внимание сайт для мобильного устройства. Он отлично работает со всеми темами, которые предложены на официальном сайте движка вордпресс. Данный плагин используют создатели NY Times, Forbes и других популярных сайтов.

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

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

12. При использовании Wapple Architect Mobile вы получите адаптированную версию, которая будет иметь URL-адрес идентичный классической. То есть, не будет перенаправления на поддомен вида “m.сайт.com”. Это никаким образом не влияет на СЕО-показатели. Особенностью данного плагина является также возможность адаптации абсолютно любой темы под мобильные устройства (будь это даже тема с большим количеством различных виджетов). Благодаря этому, вам не придется тратить лишнее время на работу с дизайном.

Как осуществляется адаптация без использования плагинов?

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

Сервис dudamobile.com является достаточно популярным, потому как имеет широкий выбор опций. Однако, данный сервис является платным. Цена будет составлять 9 долларов США. Это достойная плата, учитывая что вам не придется использовать какие-либо плагины.

Для начала вам нужно здесь зарегистрироваться или пройти авторизацию через Фейсбук. После этого переходите в раздел “Дизайн” и кликаете по полю “Макет”. Перед вами откроются возможные варианты размещения навигации. Для выбора вам достаточно кликнуть по понравившемуся варианту. Чтобы настроить цветовые гаммы, вам нужно кликнуть на поле “Стиль”. Вы также можете загрузить свое фоновое изображение. Поле “Заголовок” отвечает за эмблему. Вы можете ее загрузить в виде картинки или же представить каким-либо текстом. В целом, процесс конструирования происходит в визуальном режиме. Вы “настраиваете”, а сервис формирует специальный код. Стоит сказать также, что есть и бесплатная версия. Но в таком случае на сайте будет автоматически отображаться реклама.

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

Проверка адаптации

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

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

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

Также вы можете воспользоваться сервисом Mobile Phone Emulator, который позволяет увидеть отображение вашей мобильной версии не только лишь на продукции Apple, но и на продукции компаний Samsung, HTC и BlackBerry.

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

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

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

Опубликовано 28.03.2015 17:10

Просмотров: 5413

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

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

Немного теории

Большинство современных сайтов работают  на основе той или иной системы управления контентом (Content management system — CMS) или по простому web движке. За внешний вид сайта в web движке, т.е. то каким его видят посетители ресурса отвечают так называемые шаблоны.
Шаблон — это, как правило, набор файлов определяющий внешний вид сайта. Для каждого движка используются свои шаблоны, но у всех них есть нечто общее — это файл(ы) с таблицами стилей CSS и файл(ы) отвечающие за разметку страницы, это может быть PHP, ASP и т.  д. Возможны и более экзотические варианты, но в любом случае на выходе web движка будет CSS и HTML и возможно что-то ещё. Ну да я отвлёкся.

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

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

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

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

По большому счёту такой шаблон представляет собой облегчённый вариант полного, отличающийся по дизайну, размерами и расположением элементов.
Такое упрощение прежде всего связано с тем, что разрешение экрана современных смартфонов начинается, как правило, с 800×480 точек при размере экрана порядка 4» дюйма.
Это значит, что примерно на этот размер и надо рассчитывать при разработке.

 

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

 

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

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

Настройка web движка

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

В моём случае я использую Joomla 2.5, для которой необходим специальный плагин. Для неё есть довольно много плагинов которые отличаются по своим возможностям. Ознакомиться и скачать их можно здесь:
http://extensions.joomla.org/category/mobile/mobile-display

Для примера я покажу настройку Mobile Detector от BlackRed Designs, он имеет минимум настроек, и всё что необходимо сделать после его установки это опубликовать его и выбрать шаблон который будет использоваться для отображения страниц на мобильных устройствах.

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

Создание шаблона

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

Метатеги и масштабирование

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

Этот мататег должен быть расположен в разделе head рядом с остальными метатегами и выглядеть примерно следующим образом:

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

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

Помните, в самом начале я писал о том чтобы рассмотреть тот или иной элемент на странице на не оптимизированных сайтах частенько приходиться пользоваться зумом, приближая и отдаляя отдельные участки страницы? Так вот, параметр  initial-scale=1.0 как раз устанавливает изначальное масштабирование страницы в 100%.
Если не указать мобильному устройству изначальный масштаб, то он может выставить его самостоятельно в зависимости от системы устройства, как то Android, iOS, Windows Phone, а также используемого браузера например Firefox, Chrome, Safari, Opera и т. д.
Лучше изначально избежать этого. Для кого же масштаб покажется не удобным смогут отмасштабировать его по собственному желанию, соответствующим жестом.

В большинстве случаев достаточно записи показанной мною выше, однако желающие более подробно ознакомиться с  viewport могут прочитать отличную статью по адресу:
http://frontender.com.ua/mobile-web/wtf-viewport/

Границы сайта

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

body     {
    margin-top: 20px;
    margin-left:100px;
    margin-right:100px;
    border: 1px solid #dfdfdf;
    }

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

body     {
    width:100%;
    }

Шапка

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

.header-search
     {
    text-align:right;
    float:right;
    }

На  уровень ниже и расположить по левому краю:

.header-search
    {
    margin-top:5px;
    text-align:left;
    }

Меню

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

.topmenu ul li
    {
    display: inline;
    }

.topmenu li a
     {
    display:block;
    float: left;
    }

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

. topmenu ul li {
    display: block;
    }

.topmenu li a {
    display:block;
    }

Шрифт

Как правило для полной версии сайта используется шрифт 12-13px:

p, li, dt, dd, legend    
    {
    font-size: 13px;
    }

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

p, li, dt, dd, legend    
    {
    font-size: 16px;
    }

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

h2    {
    font-size: 24px;
    }

h3    {
    font-size: 22px;
    font-weight: normal;
    }

h4    {
    font-size: 17px;
    margin-top: 5px;
    margin-bottom:0px;
    }

h5    {
    font-size: 16px;
    }

 

Изображения

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

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

img
    {
    max-width:100%;
    height:auto;
    }

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

Таблицы

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

table tr td
    {
    display:block;
    }

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

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

Проверка результата, тестирование

Очевидно, что в процессе разработки шаблона правильнее всего проверять как он выглядит непосредственно на телефоне. Желательно на нескольких разных, под управлением разных систем: Android, iOS, Windows Phone, а также на нескольких браузерах Firefox, Chrome, Safari, Opera и т. д. Только так можно быть полностью уверенным что всё выглядит так как задумано.

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

Для проверки в среде iOS, для iPhone и iPod, существует специальная среда разработки от Apple – Xcode. С её помощью можно эмулировать практически любое яблочное устройство.

К сожалению Xcode работает только под Mac OS, и практически единственным вариантом запуска её на PC является создание виртуальной машины.

Довольно интересным средством проверки является Firefox OS Simulator, который является дополнением к браузеру Firefox. Загрузить его можно по адресу:
https://addons.mozilla.org/En-us/firefox/addon/firefox-os-simulator/

По сути здесь эмулируется полноценное устройство под  Firefox OS.

Также в процессе разработки шаблона довольно полезно выдать свой обычный браузер за мобильный. Для FireFox это делается при помощи дополнения User Agent Switcher, установить  которое можно от сюда:
https://addons.mozilla.org/ru/firefox/addon/user-agent-switcher/

При этом вы получаете возможность использовать довольно мощные средства веб разработки встроенные в сам FireFox.

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

По мимо всего прочего поисковик Google тоже должен проверить ресурс на его «мобильность», ведь только в этом случае сайт получит преимущество перед другими. Проверить всё ли нравиться поисковику можно по адресу:
https://www.google.com/webmasters/tools/mobile-friendly/

Для полной уверенности что  Google всё устраивает желательно проверить все страницы сайта. Либо просмотреть пункт «Удобство просмотра на мобильных устройствах» в инструменте для web мастеров по адресу:
http://www. google.com/webmasters/

Заключение

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

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

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

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

По данным comScore,

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

Пользователи

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

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 шагов к планированию контента веб-сайта». Если раньше ваш сайт не был оптимизирован для мобильных устройств, скорее всего, он также нуждается в обновлении с точки зрения содержания и дизайна.

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

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

Тогда в мире было 7,2 миллиарда устройств, которые росли в пять раз быстрее, чем мы. С тех пор Mobilegeddon стал фактом, и Google изменил свой алгоритм в пользу мобильных веб-сайтов .

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

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

Итак, приступим.

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

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

Веб-сайт

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

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

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

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

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

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

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

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

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

Проверить, оптимизирован ли ваш вид для мобильных устройств, очень просто — у Google есть удобный для мобильных устройств тестер веб-сайтов под названием Webmaster Tool , чтобы делать именно это, и он доступен прямо здесь, .

Все, что вам нужно сделать, это вставить URL-адрес вашей веб-страницы и нажать кнопку АНАЛИЗ.

Затем тест Google проанализирует ваш веб-сайт и покажет результат.

Анализ вашей веб-страницы может занять некоторое время…

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

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

Удобство мобильных устройств стоит проблем?

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

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

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

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

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

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

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

1) Используйте медиа-запросы

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

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

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

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

Убедитесь, что вы действительно просматриваете список или у вас есть какая-то текущая подписка, по которой вы получаете информацию.

2) Используйте фреймворки, такие как Bootstrap

Существует множество фреймворков, которые можно использовать бесплатно, например Foundation 3 или Skeleton.Одним из наиболее популярных фреймворков является Bootstrap от Twitter.

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

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

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

3) Не отключайте кнопку отправки

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

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

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

4) Используйте адаптивную тему на CMS

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

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

Современная тема от Somothemes

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

5) Процент использования

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

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

6) Сосредоточьтесь на простом дизайне

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

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

7) Убедитесь, что вы не заблокировали JavaScript, CSS или файлы изображений

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

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

8) Оптимизировать размер изображения

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

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

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

9) Не используйте Flash

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

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

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

10) Используйте стандартные шрифты

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

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

Заключительный совет

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

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

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

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

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

Этот пост был первоначально написан Чжи Юань и опубликован 12 августа 2015 г. Последний раз он был обновлен 2 июня 2019 г.

Обновлено: 2 марта 2021 г.

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

Как я могу просмотреть мобильную версию веб-страницы в Google Chrome для ПК?

Как просмотреть мобильную версию веб-страницы в Google Chrome для ПК? — Суперпользователь

Сеть обмена стеков

Сеть Stack Exchange состоит из 176 сообществ вопросов и ответов, включая Stack Overflow, крупнейшее и пользующееся наибольшим доверием онлайн-сообщество, где разработчики могут учиться, делиться своими знаниями и строить свою карьеру.

Посетить Stack Exchange

2. 0
3. +0
6. Авторизоваться Подписаться

Super User — это сайт вопросов и ответов для компьютерных энтузиастов и опытных пользователей.Регистрация займет всего минуту.

Зарегистрируйтесь, чтобы присоединиться к этому сообществу

Кто угодно может задать вопрос

Кто угодно может ответить

Лучшие ответы голосуются и поднимаются наверх

Спросил 3 года, 9 месяцев назад

Просмотрено 371k раз

Я хочу протестировать мобильную версию веб-сайта с помощью Google Chrome для ПК.

Обычно я могу загружать мобильные сайты с помощью префикса m. перед URL-адресом, но при попытке загрузить m.superuser.com или m.github.com выдает ошибку « Сайт не может быть достигнут ».

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

ремонтник1234

25.5k5757 золотых знаков6767 серебряных знаков103103 бронзовых знака

задан 31 мая ’17 в 21: 432017-05-31 21:43

Стевойяк

10.4k2828 золотых знаков8181 серебряный знак129129 бронзовых знаков

3

Вы можете использовать инструменты разработчика Google Chrome, чтобы запросить мобильную версию веб-сайта:

---

1. Откройте инструменты разработчика Chrome с помощью F12 .

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

3. (Необязательно) Выберите мобильное устройство, которое вы хотите смоделировать, с помощью « Viewport controls ».

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

Источники

Создан 31 мая.

Стевойяк

10.4k2828 золотых знаков8181 серебряный знак129129 бронзовых знаков

2 Очень активный вопрос . Заработайте 10 репутации, чтобы ответить на этот вопрос. Требование репутации помогает защитить этот вопрос от спама и отсутствия ответов. Суперпользователь лучше всего работает с включенным JavaScript

Ваша конфиденциальность

Нажимая «Принять все файлы cookie», вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в ​​отношении файлов cookie.

Принимать все файлы cookie Настроить параметры

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

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

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

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

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

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

• Адаптивный: страница — URL, HTML, изображения, все остальное — остается прежней, но CSS дает разные правила в зависимости от ширины браузера.
• RESS / Adaptive / Dynamic Serving: URL-адрес остается тем же, но сервер отправляет разные HTML и CSS в зависимости от того, какое устройство запрашивает страницу.
• Отдельный мобильный сайт: обычно размещается на субдомене (например, m.domain.com ) или иногда в подпапке (например, www.domain.com/mobile ), но он также может использовать те же URL-адреса, что и настольный сайт, и просто обслуживает разные 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 невозможна, ваша задача будет более сложной, но не невыполнимой.

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

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

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

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

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

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

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

Навигация на маленьком экране

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

Размеры смартфонов

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

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

.

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

Дизайн для сенсорного управления У

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

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

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

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

Создание адаптивных сайтов

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

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

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

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

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

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

Усадка содержимого (все элементы)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. Рекомендации по разработке

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

1. Прерывистое соединение: Предположим, что у посетителей будет нестабильное соединение, и ваш сайт будет максимально легко загружаться. Сжимайте изображения и код, буферизуйте видео и — если ваша страница особенно длинная — загружайте изображения дальше вниз по странице асинхронно с помощью JavaScript, чтобы страница могла отображаться как можно быстрее, даже если некоторые элементы занимают немного больше времени.У Google есть удобный инструмент, который даст вам конкретные предложения по ускорению загрузки страницы.
2. Различные устройства и / или веб-браузеры: Протестируйте свой сайт на разных устройствах и в разных браузерах. То, что выглядит идеально пропорционально на iPhone, может выглядеть странно сжатым набок на более широком Samsung Galaxy. Некоторые справочные таблицы, показывающие разрешения экранов для различных мобильных устройств, см. В разделе «Дополнительная литература».
3. Межплатформенные проблемы: Синхронизация информации о клиентах на разных платформах.Покупатель, вошедший в систему, должен иметь возможность положить что-нибудь в свою корзину на мобильном веб-сайте, а затем проверить товар на настольном ПК. (Реализация этого будет зависеть от того, как настроена внутренняя часть платформы вашего веб-сайта.)
4. Избегайте неподдерживаемого веб-содержимого: В частности: Flash. Flash поддерживается большинством браузеров для настольных компьютеров (за исключением IE 10 в Metro в Windows 8) и в некоторой степени работает в браузерах Android, но телефоны Windows и iPhone вообще не могут запускать его. В идеале HTML5 должен быть хорошей заменой.Вы также можете использовать подход, называемый прогрессивным улучшением, создавая сайт, который может хорошо отображаться во всех браузерах, а затем добавлять эффекты Flash и другие более сложные технические уровни для браузеров, которые могут их использовать.
5. Разработка для сенсорного экрана: На сенсорном экране вы не можете использовать раскрывающиеся списки, которые работают только тогда, когда посетитель наводит курсор мыши на навигацию, и вы не можете поместить единственное описание ссылок или изображений в ‘alt’ текст.

Построение по размеру экрана

Когда вы начинаете превращать свои проекты в реальные сайты, вы хотите убедиться, что они подходят для наиболее часто используемых устройств.Этот график от StatCounter показывает 14 самых высоких разрешений экрана мобильных устройств в 2012 году (по всему миру):

[ Источник: http://gs.statcounter.com/#mobile_resolution-ww-monthly-201410-201412-bar ]

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

На основе выборки данных мобильного трафика наших клиентов, вот пример того, как может выглядеть этот список:

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

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

1. i-Skool
2. CSS3HTML5Help.com

Изображения

Изображения, как правило, являются самыми большими файлами, которые браузер должен загрузить для отображения страницы (если у вас нет чрезмерного кода). Убедитесь, что вы максимально сжали все изображения, которые размещаете на своем мобильном сайте.Существует ряд бесплатных инструментов для сжатия изображений. Мы рекомендуем smush.it.

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

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

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

Разработка адаптивного дизайна

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

Изменить CSS по ширине экрана с помощью медиа-запросов

Благодаря введению медиа-запросов W3C в CSS3, вы можете применять стили в зависимости от ширины экрана с помощью следующего кода:

@media screen
and (min-width: XXXpx)
and (max-width: XXXpx)
and (Ориентация: альбомная / портретная)
[элементы, которым вы хотите следовать этому стилю ] {
* / Добавьте сюда свои стили * /
}

Измените «XXX» буквально на любую ширину, к которой вы хотите применить этот стиль.«Минимальная ширина» и «максимальная ширина» относятся к области отображения, то есть к ширине браузера. Вы также можете увидеть рекомендуемые значения «min-device-width» и «max-device-width» в Интернете, но они относятся к ширине фактического экрана устройства. Их лучше всего использовать для определения типа устройства, т. Е. Мобильного телефона или планшета.

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

@media screen
and (min-width: 500px)
.bannertext {
float: right;
}

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

Область просмотра

Медиа-запросы будут работать при условии, что мобильный браузер загружает сайт, как если бы это было очень маленькое окно на экране рабочего стола.Но многие мобильные браузеры стараются уместить всю веб-страницу на экране телефона, предполагая, что посетители предпочли бы видеть всю страницу целиком и увеличивать масштаб в той части, которая им больше всего интересна. Чтобы адаптивный дизайн работал в Safari iPhone и / или Firefox, Android или Opera любого телефона, поместите это в заголовок:

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

@ -o-viewport {
width: device - ширина;
}

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

Иногда есть другие соображения, связанные с телефонами с высокой плотностью пикселей. Кроме того, вы также можете установить уровень масштабирования по умолчанию / max-min и / или настроить ширину страницы по умолчанию, которую вы хотите отображать. Это введение в мета-область просмотра и область просмотра обсуждает все эти вопросы и предоставляет дополнительные ресурсы. На странице Google Set the Viewport представлены простые и понятные шаги.

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

Уменьшить весь сайт

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

1. Уменьшить размер изображения : изображения занимают больше полосы пропускания, чем любой другой элемент веб-страницы. Всегда сжимайте изображения и следуйте инструкциям Smashing Magazine, чтобы найти лучший способ выбрать решение для адаптивных изображений.
2. Объедините CSS и JavaScript: Обычно новый файл JavaScript или CSS создают по элементам; например, у вас может быть файл CSS, который форматирует заголовок, а другой — для фона / общего стиля всех страниц. И то, и другое применимо к одним и тем же страницам, поэтому эффективнее объединить их в один файл «все».
3. Минимизация CSS и JavaScript: Помимо объединения файлов, сжимайте их, удаляя все разрывы строк и интервалы, чтобы еще больше ускорить время загрузки.Вы можете сделать это вручную или использовать любой из имеющихся инструментов.
4. Ограничение использования библиотеки: Может быть одна или две команды, которые вы хотели бы использовать из данной библиотеки JavaScript; но стоит ли при этом загружать всю библиотеку? Будьте осторожны с тем, какие библиотеки вы загружаете и сколько на самом деле их используете. Возможно, будет эффективнее обойтись без него.

Разработка отдельных мобильных сайтов

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

Динамическое обслуживание контента по одному URL-адресу

• Обнаружение пользовательского агента Убедитесь, что сканеры мобильной поисковой системы могут найти ваш сайт, и что вы можете правильно определить пользовательские агенты. Не размещайте контент специально для Googlebot-Mobile — это похоже на маскировку.Пользовательский агент Googlebot-Mobile имитирует iPhone, поэтому, если на вашем сайте реализовано обычное обнаружение смартфонов, все будет в порядке. Вы можете реализовать это с помощью серверного языка (например, PHP).
• Используйте заголовок Vary-HTTP, чтобы указать роботам Googlebot и Googlebot-Mobile, что мобильному агенту пользователя предоставляется другая версия (чтобы не выглядело так, будто вы выполняете маскировку). Код выглядит так:

GET / page-1 HTTP / 1.1
Хост: www.example.com
User-Agent: Mozilla / 5.0 (Linux; Android 4.0.4; Galaxy Nexus Build / IMM76B) AppleWebKit / 535.19 (KHTML, например, Gecko) Chrome / 18.0.1025.133 Mobile Safari / 535.19
(… остальные заголовки HTTP-запросов…)

HTTP / 1.1 200 OK
Content-Type: text / html
Vary: User-Agent
Content-Length: 5710
(… остальные заголовки HTTP-ответа…)

Рекомендации по разработке сайтов, использующих разные URL-адреса

Обнаружение пользовательских агентов

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

Использование перенаправления

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

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

Несколько советов по правильной настройке переадресации

• По возможности используйте перенаправление 301 или 302 на стороне сервера, а не Javascript. Перенаправления Javascript вызовут задержки и увеличат время загрузки.
• Перенаправлять посетителей с мобильных устройств, переходящих на страницу для ПК, на соответствующую страницу мобильной версии ИЛИ перенаправлять посетителей с мобильных устройств, переходящих на страницу для мобильных устройств, на версию для ПК. (Это может измениться, если ваши мобильные и настольные версии сильно отличаются.См. Выше.)
• Включите опцию переопределения перенаправления (например, «Просмотреть настольную версию») и убедитесь, что настройки пользователя запоминаются (для этого вы можете использовать файлы cookie, но убедитесь, что срок их действия не истекает слишком быстро).

Карта сайта для мобильных XML

Чтобы помочь поисковым системам найти и понять ваш мобильный сайт, стандартная передовая практика — создать карту сайта в формате XML для всех ваших мобильных URL и отправить ее в Google и Bing через соответствующие интерфейсы Инструментов для веб-мастеров.Google дает здесь пример того, как это должно выглядеть. Убедитесь, что карта сайта обновляется автоматически, когда вы добавляете новые страницы на свой мобильный сайт. Простой способ создать карту сайта — просто использовать Google Sitemap Generator (в настоящее время находится в стадии бета-тестирования). Этот инструмент также автоматически обнаруживает обновления.

The Rel = «Canonical» Tag

Когда вы создаете отдельный мобильный сайт, вы технически создаете дублирующиеся страницы. Чтобы избежать проблем с дублированием контента, примите во внимание, что мобильная и десктопная версии веб-страниц имеют (почти) дублированный контент с помощью мобильной версии тега rel = «canonical».Это будет означать, что в результатах поиска будет отображаться только «каноническая» версия страницы, но перенаправления вашего пользовательского агента будут направлять мобильных посетителей туда, куда им нужно.

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

Так как мобильная страница будет указывать сканерам поисковых систем индексировать только версию страницы для настольных компьютеров, версия для настольных ПК должна объяснять назначение мобильного сайта с помощью тега rel = «alternate»:

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

Межканальная / платформенная интеграция

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

Прогрессивное улучшение для отдельного мобильного сайта аналогично концепции «сначала мобильные» для адаптивного дизайна. Вы начинаете с самого простого ограниченного браузера / устройства и семантического HTML, а затем наращиваете его слоями. Например, вы можете создать ядро ​​сайта в стандартном HTML, но добавить дополнительные элементы HTML5 для браузеров, которые его поддерживают. Эта статья из журнала Smashing Magazine проведет вас через этот процесс. Однако, прежде чем инвестировать в новые технологии, проверьте свою аналитику, чтобы убедиться, что ваши посетители используют устройства, которые могут интерпретировать ваш дополнительный код.

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

Синхронизация между устройствами

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

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

Размер экрана и использование «области просмотра»

Если вы создадите свой мобильный сайт с шириной 320 пикселей, а кто-то будет заходить на сайт с телефона только 240 пикселей в ширину, он увидит только 75% ширины страницы.К счастью, тег области просмотра позволяет вам указать всем устройствам изменить размер страницы в соответствии с шириной браузера.

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

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

Однако при изменении размера страницы размер содержимого на странице также изменится, если вы не отключите свойство CSS регулировки размера текста:

HTML {-webkit-text-size-adjust: none; регулировка размера текста: нет; }

Использование этого кода гарантирует, что размер текста останется неизменным независимо от ориентации устройства. Этот метатег поддерживается в iOS, Android и других распространенных браузерах смартфонов.Совсем недавно он был включен в объявление CSS @viewport, но этот параметр еще не получил широкой поддержки в большинстве браузеров.

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

Примечание о тестировании

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

• Проверить элемент в Chrome: щелкните изображение телефона в правом верхнем углу панели элементов проверки, чтобы запустить его.
• Ответчик: отзывчивый тестер, который позволяет быстро увидеть, как ваш веб-сайт будет выглядеть на некоторых из самых популярных мобильных устройств. Также позволяет тестировать локальный URL (а не только онлайн-страницы). Попробуйте букмарклет!
• Эмулятор мобильного телефона: мобильный эмулятор, который позволяет тестировать отображение веб-сайтов на определенных телефонах. Немного больше функциональности, учитывая большинство настроек устройства, включая пользовательские агенты, поведение и функции. Подходит для Android, Apple iOS, Windows и Blackberry.
• Screenqueri.es: мобильный эмулятор, который позволяет вам самостоятельно устанавливать размер в пикселях, перетаскивая границы. Вы также можете протестировать на конкретном устройстве.

Пара дополнительных ресурсов

4. Техническая поисковая оптимизация

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

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

• Локальный поиск: 4 из 5 потребителей, имеющих доступ в Интернет, ищут информацию о местных компаниях. 88% используют свои смартфоны и 84% используют ПК или планшет. Совершенно верно: локальный поиск почти так же важен на ПК и планшетах, как и на мобильных устройствах. Создавайте страницы с локальной информацией, которая работает как для мобильных, так и для настольных сайтов .
• Разметка структурированных данных: если у вас есть определенные типы контента, такие как обзоры, адреса, рецепты или встроенные видео, и Google, и Bing позволяют идентифицировать его с помощью специальных тегов HTML и могут использовать эту информацию для отображения дополнительных данных, называемых расширенными сниппеты на страницах результатов поиска.Schema.org дает вам правильную разметку для обеих поисковых систем.

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

SEO для адаптивного дизайна

Сайт с адаптивным дизайном — это точно такой же сайт для пользователей компьютеров и мобильных устройств с точки зрения поисковой системы (поскольку единственное, что изменяется, — это CSS, и Google уделяет этому минимальное внимание). Если вы оптимизировали свой сайт для настольных компьютеров для поисковых систем, вам не нужно ничего делать дополнительно для мобильной версии.Все, что вам нужно сделать, это убедиться, что сайт для ПК правильно оптимизирован.

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

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

SEO для отдельного мобильного сайта

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

Отдельный мобильный сайт с одинаковыми URL (динамически обслуживаемый)

Адаптивный или динамически обслуживаемый сайт сохраняет те же URL-адреса, что и настольная версия, но допускает изменение базового HTML-кода.Хотя основные принципы SEO такие же, как и для адаптивного сайта, есть несколько дополнительных вещей, которые вы можете сделать, чтобы убедиться, что поисковые системы понимают, что вы делаете:

Как избежать маскировки

Поисковые системы могут наказывать сайты, которые кажутся маскировочными (т. Е. Отображают различный контент для пользователей и сканеров поисковых систем). Это не должно быть проблемой в случае динамически обслуживаемого сайта, потому что мобильный сканер будет видеть то, что видят мобильные пользователи, а поисковый робот будет видеть то, что видят пользователи настольных компьютеров.Однако, чтобы прояснить, что именно вы делаете, вам следует использовать заголовок Vary-HTTP (пример этого см. В разделе «Разработка для динамического обслуживания» в разделе «Разработка»).

Использование этого заголовка дает два дополнительных преимущества:

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

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

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

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

Мобильные заголовки страниц / метаописания

Помимо использования разных ключевых слов в мета-заголовках и описаниях, вы также можете рассмотреть возможность сокращения этих элементов. Из-за меньшего размера экрана отображается меньше символов. Храните теги заголовков в пределах 40-60 символов, а метаописания — в пределах 90 символов.

Отдельный мобильный сайт с разными URL-адресами

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

Создайте параллельную структуру URL:

Если вы не создали свой сайт для мобильных устройств с содержанием, сильно отличающимся от содержимого сайта для обычных компьютеров, структура URL-адресов вашего сайта для мобильных устройств должна как можно точнее отражать релевантные страницы сайта для обычных компьютеров. Таким образом, www.example.com/funny-story должно стать m.example.com/funny-story , а не m.example.com/psq234 .

Мета-информация и ключевые слова

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

Дублированный контент

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

Агент пользователя перенаправляет

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

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

• Используйте перенаправление 301 или 302. 301 и 302 работают одинаково, но передают разные сообщения поисковым роботам. Обычно 301 рекомендуется для целей SEO, но для перенаправления пользовательского агента rel = ”alternate” переопределяет значение перенаправления, поэтому в этом случае вы можете использовать любой вариант.
• Не перенаправлять все страницы рабочего стола на главную страницу для мобильных устройств; вместо этого направьте их на мобильную страницу, релевантную исходной. Если у вас нет соответствующей мобильной страницы и создание ее не представляется возможным, вам следует создать страницу, поясняющую, что мобильная версия недоступна, и предлагающая возможность просмотра настольной версии нужной страницы и / или альтернативного варианта. страницы на мобильном сайте. Эта страница может быть в мобильном поддомене / папке или может быть страницей на вашем настольном сайте.Сохранение его на своем настольном сайте позволит избежать двойного перенаправления (с настольного URL-адреса на мобильный URL-адрес обратно в настольную версию). Кроме того, вы можете пропустить перенаправление для этого URL-адреса, и посетитель перейдет на настольную версию страницы.
• Не забудьте включить ссылку «просмотреть версию для ПК» на своем мобильном сайте (и наоборот). Используйте файлы cookie, чтобы гарантировать, что, если пользователь нажмет на эту опцию, обнаружение пользовательского агента будет отменено, и они не будут перенаправлены снова (если только они не решат переключиться обратно с помощью опции «просмотреть мобильную версию»).
• В настоящее время рекомендуется направлять пользователей планшетов на сайт для настольных компьютеров, а не на сайт для мобильных устройств. Шаблоны просмотра на планшетах обычно больше напоминают шаблоны просмотра на настольных компьютерах, чем на мобильных устройствах. Однако это может измениться, поскольку размеры планшетов станут более разнообразными. Вы также можете рассмотреть возможность создания отдельного сайта для планшетов (например, t.example.com), но вам следует делать это только в том случае, если версия сайта для настольных компьютеров создает значительные проблемы с просмотром страниц для посетителей планшетов. Наличие трех сайтов создаст гораздо больше работы, чем два.

Карта сайта для мобильных XML

Google и Bing будут индексировать и замечать обновления вашего сайта быстрее, если у вас есть надежная карта сайта, а инструменты для веб-мастеров обеих поисковых систем сообщат вам, сколько URL-адресов в вашей XML-карте сайта находится в их индексах. Мобильные сайты получают меньше трафика и сканируются другим роботом Googlebot, поэтому особенно важно выделять эти данные для своего мобильного сайта. Это также помогает поисковым системам понять, что ваш мобильный сайт — это мобильный сайт, а не просто дублированный контент.«Загрузите» свою отдельную карту сайта в формате XML, разместив ее на своем сайте и добавив URL-адрес в Bing и Google Webmaster Tools.

Файл Robots.txt

Убедитесь, что вы не блокируете «Smartphone-Googlebot» для настольной версии в robots.txt и не блокируете обычный Googlebot для мобильной версии. Рекомендации Bing по этой проблеме неясны, поэтому мы рекомендуем придерживаться той же практики и предоставить сканерам Bing полный доступ к обеим версиям.

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

5.Настройка и использование Google Analytics

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

Аналитика для сайтов с одним URL (адаптивные и динамически обслуживаемые)

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

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

Важные показатели

Когда у вас есть данные, вам следует сосредоточиться на:

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

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

Аналитика для отдельных мобильных сайтов с разными URL-адресами

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

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

Вы должны отслеживать свой мобильный сайт на том же веб-ресурсе (т.д., используя тот же номер учетной записи UA-XXXXX-Y), что и на вашем настольном сайте. Для этого требуется простая настройка кода в обеих версиях, чтобы указать GA, что ваш сайт m.domain.com является поддоменом вашего основного сайта. Вам также следует настроить специальный профиль исключительно для трафика на m.domain.com.

Дополнительные советы по настройке отдельного отслеживания мобильных сайтов с помощью Google Analytics

1. Следует ли мне использовать специальную версию, отличную от Javascript?
   Обычно вы можете игнорировать специальную опцию «отслеживание мобильного сайта».

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

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

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

   Вы должны отслеживать свой мобильный сайт на том же веб-ресурсе (т. Е. Используя тот же номер учетной записи UA-XXXXX-Y), что и ваш компьютер. сайт. Для этого требуется простая настройка кода в обеих версиях, чтобы указать GA, что ваш сайт m.domain.com является поддоменом вашего основного сайта. Вам также следует настроить специальный профиль исключительно для трафика на m.domain.com.
   

3. Важные метрики: они будут примерно такими же, как для сайта с одним URL.

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

6. Будущее мобильного Интернета

Куда мы идем отсюда?

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

Используете устройства как взаимозаменяемые?

По мере роста рынка смартфонов и планшетов они все больше используются как ПК (и наоборот). Уилл Кричлоу отметил, что по мере того, как мобильные устройства становятся все более похожими на ПК (быстрее, лучше при просмотре и проще покупать), ПК становятся все более похожими на мобильные устройства (с такими функциями, как Touch, App Store и InstantOn):

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

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

Многоэкранный просмотр

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

Работа между устройствами

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

[ Источник данных и изображения: http://www.google.com/think/research-studies/the-new-multi-screen-world-study.html ]

Одновременное использование

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

[ Источник данных и изображения: http://www.google.com/think/research-studies/the-new-multi-screen-world-study.html ]

Синхронизация между устройствами

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

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

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

Контент везде

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

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

В декабре 2012 года Сара Вахтер-Ботчер опубликовала книгу под названием Content Everywhere: Strategy and Structure for Future-Ready Content, в которой она изложила план создания контента, который можно было бы «Создавать один раз, публиковать везде» (COPE).Он лег в основу теории, лежащей в основе концепции «контент повсюду», и является фантастической отправной точкой для всех, кто хотел бы реализовать эти идеи в своей контент-стратегии.

API реального мира

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

То, к чему мы можем начать с этим типом доступности данных, — это разработка «реальных API-интерфейсов», а именно базы данных, к которой программа может получить доступ и использовать свои данные в связи с автономным взаимодействием. Базовым примером реального API может быть Twilio, который, помимо прочего, позволяет отправлять текстовые сообщения, когда кто-то звонит по номеру на вашем веб-сайте.Другим примером может быть новая функция Universal Analytics в Google Analytics, которая позволяет отслеживать офлайн-взаимодействия клиента с вашей компанией (например, кассу с картой лояльности) и связывать их с онлайн-взаимодействиями того же человека (например, посещение Ваш сайт). Возможности для использования такого рода данных вне Интернета очень интересны.

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

Заключение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. Используйте передовой опыт мобильной поисковой оптимизации.
Чтобы сделать мобильное SEO эффективным, убедитесь, что ваш веб-сайт соответствует критериям 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, чтобы страница соответствовала ширине экрана в аппаратно-независимых пикселях. .

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

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

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

Нравится пост? Есть еще кое-что.

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

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

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

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

Использовать

альтернативных тегов изображений

Многие люди, использующие мобильные устройства для просмотра веб-страниц, заблокировали бы изображения, чтобы снизить потребление трафика и увеличить скорость загрузки.Следовательно, использование тегов 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), этого часто более чем достаточно, чтобы получить представление о позиции вашего сайта в органических поисковых результатах поиска для мобильных устройств.Перейдите к Preferred Search Engines и добавьте мобильные поисковые системы, в которых вы хотите отслеживать рейтинг своего сайта.

Сканирование как мобильный робот 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.

Перед вами

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

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

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

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

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

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

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

• Мобильная революция все еще продолжается . В настоящее время мобильные устройства являются ведущей платформой, не уступающей настольным компьютерам или превосходящей их.Google сообщает, что «глобальное использование мобильного интернета сейчас составляет 76 процентов».
• Мобильные сайты облегчают большинство онлайн-исследований. Современные мобильные покупатели одержимы исследованиями и хотят копать глубже, когда ищут товары и услуги. Это особенно актуально, когда онлайн-покупатели больше знакомы с мобильным сайтом или если им нужно перейти непосредственно к источнику.
• Мобильные сайты могут укрепить или разрушить ваш бренд. Это еще одно интересное открытие, подтвержденное данными Google.Когда речь заходит об ожиданиях от мобильного сайта, на карту поставлено доверие к бренду. Если загрузка вашего мобильного сайта занимает слишком много времени, возможно, вы только что потеряли потенциального клиента.

Проверьте ваш сайт на готовность.

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

В качестве альтернативы у Google есть еще один инструмент, Mobile-Friendly Test, который показывает, «насколько легко посетитель может использовать вашу страницу на мобильном устройстве».

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

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

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

• Канонический AMP. Все страницы вашего сайта созданы в AMP HTML, а мобильная версия такая же, как и десктопный сайт.
• Отдельные URL-адреса . У каждого URL-адреса рабочего стола есть родственный URL-адрес, сайт с m-точками, который обслуживает оптимизированный для мобильных устройств контент. Поскольку Google предпочитает мобильный URL для индексации, следуйте этим инструкциям, чтобы подготовиться.
• Динамическая раздача. Этот подход сохраняет тот же URL, но изменяет HTML. Он использует пользовательские агенты для определения того, какое устройство используется, и динамически переключает соответствующий вид.
• AMP и без AMP. При таком подходе пользователь видит два разных URL-адреса. Google отдает предпочтение мобильной версии URL без AMP для индексации. Если ваша мобильная версия без AMP использует динамический показ или отдельные URL-адреса, изучите эти рекомендации, чтобы исправить это.
• Только настольный компьютер. Если у вашего сайта только настольная версия, никаких изменений не будет. Мобильная версия будет копировать настольную версию.
• Адаптивный веб-дизайн. Это наиболее рекомендуемый метод дизайна веб-сайтов, потому что он не создает две копии одного сайта — есть только один веб-сайт. Посетители в Интернете видят только один URL-адрес, и веб-сайт адаптируется по мере перехода пользователя между устройствами и размерами экрана.

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

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

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

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

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

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

Поделиться этим изображением на своем веб-сайте