Наверняка каждый не раз сталкивался с тем, как иногда важно быстро найти с мобильного телефона удобный и понятный сайт с нужной информацией. Именно поэтому некоторое время назад мы начали отмечать в мобильной выдаче страницы, оптимизированные для мобильных устройств, меткой «Мобильная версия», а также отдавать им предпочтение при ранжировании.
На основе наиболее частых вопросов ко мне я составил вот такие рекомендации для тех, кто только адаптирует сайт под мобильные устройства, и для тех, кто уже является гуру в этой области.
1. Какие бывают мобильные сайты
Обычно сайты представляют для мобильных устройств одним из трех способов:
- сайты с мобильной версией на поддомене (отдельная версия сайта, написанная специально для мобильных устройств, например: m.site.ru);
- сайты с адаптивной версткой (верстка, которая адаптируется под устройство, на котором открывается сайт);
- сайты с динамической версткой (сервер вашего сайта отдает для разных устройств разный размер страниц).
Поисковые роботы с одинаковым приоритетом воспринимают перечисленные выше типы адаптации, поэтому выбор полностью за вами. Но стоит обратить внимание на несколько нюансов.
Во-первых
, я бы не рекомендовал создавать мобильную версию сайта в отдельной папке (директории), так как робот может некорректно её воспринять.
Во-вторых
, если вы остановились на варианте с поддоменом, выбирайте простое и понятное для пользователей доменное имя с явным указанием на мобильный сайт. Например, m.site.com , а в случае наличия регионального поддомена - m.novosib.site.com. Такая прямая зависимость поможет пользователям и поисковым системам связать основную и мобильную версию вашего сайта.
В-третьих
, при перенаправлении пользователей на мобильную версию важно, чтобы с десктопной версии страницы стоял редирект только на соответствующую страницу мобильной версии, а не на весь сайт.
2. Несколько слов о создании сайта.
Для создания мобильной версии существует множество плагинов и сервисов, также многие конструкторы сразу предоставляют возможность сделать мобильный сайт. Но одной технологией мобилопригодный сайт часто не создать - важен и контент. При работе над содержимым мобильной версии сайта стоит размещать ту информацию, которая будет полезна именно для пользователей мобильного интернета. Она может немного отличаться или не полностью дублировать тексты полной версии - это нормально. Главное, чтобы идея и содержание страницы оставались прежними.
Совет. После создания мобильной версии откройте её с нескольких мобильных устройств и проверьте, удобно ли с ней работать. Обратите внимание, что у немалой части пользователей смартфоны с небольшим разрешением экрана, поэтому необходимо учесть и их интересы и сделать сайт комфортным для просмотра с большинства устройств.
3. Как проверить сайт на мобилопригодность
Для проверки сайта вы можете воспользоваться инструментом в бета версии сервиса Яндекс.Вебмастер «Проверка мобильных страниц».
Самыми распространенными ошибками, которые позволяет выявить инструмент в Яндекс.Вебмастере , являются наличие горизонтальной прокрутки, много мелкого текста, отсутствие или неверное расположение мета-тега «viewport», а также наличие невоспроизводимого видео.
4. Что делать, если обнаружены ошибки
Хочу поподробнее остановиться на тех замечаниях, которые вы можете увидеть в сервисе Яндекс.Вебмастер :
Горизонтальная прокрутка
Горизонтальная прокрутка
Горизонтальная прокрутка
Горизонтальная прокрутка
Горизонтальная прокрутка
Если при проверке сайта в выявлена горизонтальная прокрутка, возможно, ширина его страниц больше среднего. Как правило, большинство пользователей использует смартфоны c разрешением 320 px, вы можете ориентироваться на эту величину. Заметьте, некоторые браузеры могут автоматически сжимать страницу под размеры мобильного устройства, поэтому вы можете и не обнаружить прокрутки при просмотре сайта, чего может не произойти у посетителя вашего сайта, и он увидит полосу прокрутки. Вместе с этим следует проверить отступы, встроенные картинки и логотипы – возможно, именно из-за них меняется итоговая ширина той или иной страницы.
Много мелкого текста
Если на сайте обнаружено много мелкого текста, то это также может быть следствием большой ширины страницы. Даже если шрифт на вашем сайте составляет 12 px, а ширина страницы равна, к примеру, 720 px, то браузер, сжимая страницу до среднего значения, скорее всего, уменьшит его почти в 2 раза.
В данной ситуации необходимо либо увеличивать размер шрифта таким образом, чтобы после масштабирования он оставался читаемым, либо менять ширину страницы, приводя её к рекомендуемой.
Отсутствие мета-тега «viewport»
Не меньшее внимание стоит уделять мета-тегу «viewport», который необходим для того, чтобы браузер мобильного устройства знал, что на сайте есть адаптивная верстка. Если выявлено, что на вашем сайте отсутствует данный мета-тег, проверьте, что он расположен именно в контейнере , что соответствует стандарту HTML. Кроме того, мы советуем устанавливать динамическую область просмотра в зависимости от ширины экрана устройства:
Тогда вам не нужно будет устанавливать фиксированную величину и удастся избежать горизонтальной прокрутки.
Наличие Flash-элементов
Если на вашем сайте размещены видеоролики, убедитесь, что они корректно воспроизводятся с мобильных устройств и имеют формат HTML5. К сожалению, форматы Flash, Silverlight и Applet большинство мобильных браузеров не воспринимает, поэтому старайтесь не использовать их.
Мне бы также хотелось рассказать вам подробнее об индексировании мобильной версии сайта на поддомене, но это будет немного позже, ждите новой записи. Чтобы не пропустить пост, вы можете подписаться с помощью кнопки «Подписка» вверху страницы.
Надеюсь, я смог прояснить ситуацию по ряду вопросов о мобильной версии сайта. Создавайте и пользуйтесь с удовольствием!
Рассказываем, чем различаются популярные конструкторы мобильных сайтов и какие бизнес-задачи помогают решить.
Доля посещений сайтов и продаж с мобильных устройств значительно выросла за последний год и продолжает расти. Значит, если у вас есть свой сайт без адаптивной вёрстки, пришло время задуматься о создании удобной мобильной версии. Нужно позаботиться о том, чтобы ваш ресурс стал доступен и удобен пользователям смартфонов и планшетов.
Сделать мобильную версию сайта можно самостоятельно и без лишних затрат (а зачастую и вовсе бесплатно). Для этого есть множество онлайн-конструкторов. Сегодня мы посмотрим, что предлагают самые популярные из них своим пользователям.
1. MoActionМы уже рассказывали, как сделать мобильную версию сайта с помощью . Процесс максимально простой, с ним справится даже неподготовленный пользователь, далёкий от вёрстки и программирования.
Главное достоинство MoAction - возможность работы с каталогами товаров. По сути, это самая сложная часть создания мобильной версии. Если у вас на сайте десятки и сотни товаров, заносить данные вручную вам вряд ли захочется. умеет импортировать существующий каталог в форматах «Яндекс.Маркета» (YML). Вам останется только указать период обновления, например раз в час или раз в день.
Кроме того, MoAction - единственный из представленных сервисов - позволяет создавать многоуровневые структуры и управлять списками товаров в несколько кликов.
Этот сервис предлагает самое большое количество шаблонов - 113. Все они разбиты по категориям для разных сфер бизнеса. Чем больше шаблонов, тем больше вероятность, что вы сможете найти подходящий именно вам.
Если при создании сайта вы столкнётесь с какой-то проблемой, которую не получится решить самостоятельно, вы всегда сможете обратиться за помощью: позвонить специалисту, написать в онлайн-чат или отправить email.
2. GoMobi
GoMobi позволяет создать мобильную версию полностью автоматически, указав только адрес вашего сайта. Также можно использовать готовый шаблон. Правда, при выборе первого варианта редактирования шаблона всё равно не избежать: многое придётся переделывать и добавлять вручную.
Интерфейс на первый взгляд кажется немного перегруженным, но в целом с ним можно работать. К тому же есть версия сайта на русском.
Но есть и ощутимые минусы. Нельзя изменять структуру шаблона, а в каждом отдельном блоке можно редактировать только текстовые поля. Кроме того, GoMobi не подойдёт владельцам интернет-магазинов. Формально в конструкторе есть карточки товаров, но каждый отдельный предмет нужно добавлять вручную со ссылкой на основной сайт: туда будут направляться желающие совершить покупку.
3. DudaMobile
DudaMobile так же, как и GoMobi, предлагает своим пользователям автоматически конвертировать веб-сайт или создать мобильную версию на основе готового шаблона. И автоматическая версия у DudaMobile генерируется намного лучше.
Интерфейс минималистичный, простой и в целом приятный. Шаблонов не очень много, но все они выполнены качественно. Для каждого блока есть расширенные настройки.
4. Onbile
Onbile - очень простой конструктор. В нём немного функций для редактирования структуры и содержания блоков, поэтому вы сможете создавать только небольшие сайты: визитку или промостраницу.
Шаблонов на выбор тоже немного: всего 15, но для каждого предусмотрено ещё 2–3 вариации с незначительными отличиями дизайна, структуры и цвета.
Для создания интернет-магазина на основе этого конструктора нужно оплатить специальный пакет Ecommerce. Но даже в платной версии вы сможете сделать только одноуровневый каталог: каждый товар можно отнести лишь к одному разделу. Все товары придётся заносить вручную, так как не предусмотрена функция импорта существующего каталога.
Сайт создавали разработчики из Испании, поэтому нет поддержки русского языка. Но если вы хорошо владеете английским, испанским, немецким, французским или португальским, то сможете разобраться в интерфейсе конструктора с помощью системы онлайн-подсказок.
5. Prosto.mobi
У Prosto.mobi самый лаконичный дизайн. Сервис, судя по всему, ещё молодой, поэтому на данный момент функциональность редактора достаточно ограниченная: в платной версии на выбор предлагается всего 13 блоков. Например, блок с контактными данными, блок со ссылками на социальные сети, блок с фотографией. Этого мало, чтобы собрать оригинальный сайт.
Шаблонов тоже всего 15. Но в отличие от Onbile, у которого это действительно уникальные по структуре и дизайну мобильные версии, относящиеся к 15 различным отраслям бизнеса, у Prosto.mobi это один шаблон в 15 цветовых решениях.
Функций конструктора хватит только для создания максимально простого сайта. Например, страницы-визитки.
Не существует идеальной платформы, которая умеет всё и сразу: у каждого конструктора есть свои сильные и слабые стороны. Сначала вы должны решить, какие задачи должен выполнять ваш мобильный сайт и каким он должен быть. Отталкиваясь от этой информации, вы сможете объективно подойти к выбору конструктора и остановиться на лучшем варианте.
Дизайн сайтаДля изменения структуры вашего сайта в конструкторе есть раздел «Дизайн». В нем вы можете менять внешний вид вашего сайта, цветовую гамму, ширину сайта, настраивать боковые панели, добавлять или изменять границы элементов, а также создавать шаблоны внешнего вида или использовать существующие. Подробная информация о смене шаблона сайта, его импорте и экспорте содержится в статье .
В разделе «Дизайн» вам также доступны следующие подразделы:
Разметка
Разметка вашего сайта может состоять из следующих элементов:
Верхний колонтитул. Это самая верхняя область сайта, где обычно находятся изображение баннера и логотип компании. С верхним колонтитулом можно выполнить следующие действия:
- переместить изображение баннера и логотип в любое место на странице;
- уменьшить высоту верхнего колонтитула до 25 пикселей, удалив из него все элементы;
- растянуть фон или колонтитул на всю ширину экрана;
Содержимое (текст) . Это основная область страницы, где находится большая часть содержимого. С этой областью вы можете выполнить следующие действия:
- изменить ее высоту;
- разбить её на несколько колонок. Для этого перетащите новые модули к левой или правой границе основного содержимого и вставьте их;
- изменить расположение колонок, переместив их содержимое влево или вправо;
Боковые панели. Это столбцы, в которые можно поместить все виды модулей: как сквозные, так и страничные. С боковыми панелями можно выполнить следующие действия:
- добавить одну боковую панель и поместить её слева или справа от основного содержимого;
- добавить две боковые панели. Они будут размещены слева и справа от основного содержимого;
- изменить высоту и ширину боковых панелей;
- переместить боковые панели вверх страницы и расположить их слева или справа от верхнего колонтитула;
- поменять боковые панели местами;
Нижний колонтитул. Это самая нижняя часть страницы, где обычно размещают название компании, контактную или правовую информацию. С нижним колонтитулом можно выполнить следующие действия:
- уменьшить его высоту до 25 пикселей, удалив из него все элементы;
- растянуть фон или колонтитул на всю ширину экрана.
Перейдите на вкладку «Дизайн» > «Разметка», затем выполните следующие действия:
выберите расположение боковых панелей:
- чтобы перенести боковую панель на другую сторону сайта или поменять местами две боковые панели, нажмите Поменять местами ;
- чтобы переместить боковые панели вверх страницы, щёлкните по ним в схематической модели сайта;
задайте размер элементов страницы:
чтобы задать общую ширину страниц, в разделе Ширина сайта выберите один из следующих вариантов:
- фиксированная: размер сайта не будет зависеть от размера окна браузера. В этом случае вам нужно указать желаемую ширину сайта в пикселях;
- тянущаяся: размер сайта будет меняться в зависимости от текущего размера окна браузера. В этом случае укажите ширину вашего сайта в процентах от размера окна браузера;
чтобы сделать ширину верхнего колонтитула, нижнего колонтитула и основного блока с содержимым равной ширине страницы, щёлкните по соответствующим элементам в схематической модели сайта;
в разделе Минимальная высота укажите высоту основного блока с содержимым и каждой из боковых панелей. Это значение показывает высоту элементов вашего сайта без содержимого. Когда вы добавите содержимое в боковые панели и центральную часть, они растянутся по высоте, чтобы уместить содержимое;
чтобы обеспечить вертикальное выравнивание боковых панелей и области с основным содержимым, поставьте галочку Растянуть боковые панели и область с содержимым до нижнего колонтитула ;
если у вас есть боковые панели, в разделе Ширина укажите ширину каждой из них. Размер центральной части страницы будет определён автоматически;
в разделе Размер полей укажите размер вертикальных и горизонтальных полей. Поле — это пространство между границами соседних элементов;
Чтобы выбрать основную цветовую схему сайта:
Основная цветовая схема (или набор стилей) вашего сайта состоит из четырёх цветов. Каждый цвет используется сразу для нескольких элементов сайта. Цвета отдельных элементов можно настроить дополнительно.
Чтобы выбрать цвета и фоновые изображения для отдельных элементов сайта:
- чтобы сделать однотонный фон, оставьте выбранным вариант Сплошной цвет и выберите нужный цвет из цветовой схемы или с помощью палитры;
- чтобы сделать фон с плавным переходом цветов, выберите вариант Градиент и выберите базовый цвет, а также подходящее направление перехода;
- чтобы использовать в качестве фона узор, выберите вариант Узор и выберите базовый цвет и один из стандартных узоров или нажмите Загрузить , чтобы добавить собственный узор. Укажите, нужно ли его замостить, обрезать или уменьшить/увеличить и где его следует разместить;
- чтобы использовать в качестве фона изображение, выберите вариант Изображение и выберите один из предложенных фонов или нажмите Загрузить , чтобы добавить собственное изображение. Укажите, нужно ли его замостить, обрезать или уменьшить/увеличить и где его следует разместить;
если элемент содержит текст, настройте цвет шрифта, указав нужное шестнадцатеричное значение или с помощью палитры;
Если после этого вы выберете другую цветовую гамму на вкладке Схема , изменения, внесенные на вкладке Цвета , будут отменены.
Чтобы выбрать шрифты заголовков и основного текста:
для заголовков также можно выбрать стиль. Вы можете использовать жирный шрифт (кнопка B ) и курсив (кнопка I );
Настройки в этом разделе носят общий характер. Вы всегда можете изменить шрифт отдельных элементов непосредственно на странице.
В конструкторе сайтов Parallels Web Presence Builder отсутствует функционал по добавлению и установке сторонних шрифтов. В качестве решения рекомендуем добавить необходимые шрифты с помощью кода HTML, созданного самостоятельно или найденного на тематических форумах. Для этого переместите модуль Текст и графика на страницу сайта и в меню данного модуля нажмите кнопку html .
Чтобы выбрать форму углов (прямые или закругленные) для элементов сайта:
выполните любое из следующих действий:
- чтобы закруглить углы, поставьте соответствующие галочки;
- чтобы сделать углы прямыми, уберите соответствующие галочки;
Границы
Чтобы выбрать границы элементов сайта:
выберите элементы, которые будут иметь границы.
Вы можете выбрать только один тип внутренних границ для всех элементов сайта, но вы можете указать, какие элементы будут иметь границы, а какие нет.
Вы можете загрузить в редактор документы, изображения и другие виды файлов на вкладке Документы и затем размещать ссылки на них на страницах вашего сайта.
Чтобы загрузить файл:
Теперь, если вы хотите, чтобы посетители могли скачать этот файл, вставьте ссылку на него на любой странице.
Чтобы удалить загруженный файл:
Как разместить favicon (значок) сайта?Значок сайта — небольшое изображение, которое показывается в адресной строке браузера при посещении сайта, а также рядом с названием сайта в списке закладок. Значок сайта можно создать с помощью любого из многочисленных онлайн-приложений и затем загрузить его по данной инструкции. Этот значок будет виден всем посетителям вашего сайта.
Чтобы загрузить favicon:
Если при добавлении значка сайта возникает ошибка, проверьте, чтобы иконка сайта была в формате.ico (переконвертировать изображение в.ico можно на сайте favicon.ru) и чтобы файл назывался favicon.ico.
Чтобы удалить favicon:
Как добавить теги в раздел «head»
Как сделать мобильную версию сайтаДля включения автоматической оптимизации сайта под мобильные устройства перейдите в конструкторе на вкладку «Настройки» в раздел «Другие» и поставьте галочку напротив пункта «Оптимизировать сайт для мобильных устройств». Теперь при открытии сайта через мобильное устройство, Presence Builder автоматически подстроит его внешний вид, структуру и элементы навигации под экран небольшого размера. Также появятся кнопки для переключения между мобильной и полной версиями сайта.
Для отключения автоматической оптимизации и открытия полной версии сайта по умолчанию независимо от используемого устройства уберите галочку напротив пункта «Оптимизировать сайт для мобильных устройств»:
Для проверки отображения сайта на мобильном устройстве нажмите на стрелку выпадающего списка рядом с кнопкой «Опубликовать» и выберите пункт «Мобильная версия»:
В режиме просмотра мобильной версии сайта можно выбрать одно из популярных устройств, которое будет эмулировано, нажав на выпадающий список «Устройство» и выбрав нужный из представленных вариантов. Также есть возможность переключения ориентации выбранного мобильного устройства между портретной и альбомной при помощи кнопки «Повернуть»:
Стоит учесть, что, хотя при просмотре мобильной версии защищенные паролем страницы показываются без ввода логина и пароля, в реальности для их просмотра нужно будет указать соответствующие атрибуты доступа.
Оптимизация структуры и содержимого сайтаДля обеспечения наилучшего внешнего вида сайта при его открытии через мобильные устройства следует соблюдать некоторые рекомендации:
- модули поиска и меню располагать в верхней части страницы или верхнем колонтитуле;
- не использовать в качестве баннера изображения большого размера;
- размещать основное содержимое страницы под шапкой или максимально близко к ней;
- отказаться от использования боковых панелей;
- логически структурировать содержимое страниц и использовать отчетливые заголовки;
- не использовать изображения и таблицы большой ширины;
- отказаться от использования изображений в качестве фона;
- отказаться от фиксированной ширины контейнеров для содержимого сайта;
- не использовать визуальные эффекты (границы, углы, тени);
- по возможности размещать весь контент при помощи модулей Текст и графика ;
- не использовать страницы второго и третьего уровня;
- добавлять изображения как можно меньшего размера.
Чтобы добавить новую страницу на свой сайт:
Создание/правка мета-тегов Description и Keywords на продвигаемых страницахОписание и ключевые слова страницы (Description и Keywords) необходимо добавлять для каждой страницы отдельно.
Для этого откройте меню «Страницы», пункт «Изменить описание и ключевые слова страницы»:
Если вносить изменения в «Описание веб-сайта» (Description) и «Ключевые слова» (Keywords) для всего сайта в разделе «Настройки»(!hand) > «Общие», они будут прописаны только для вновь созданных страниц.
Данный функционал в конструкторе не предусмотрен. При необходимости добавления на сайте постраничной навигации создать ее можно вручную в модуле «Текст и графика„с помощью ссылок.
Удаление страницыЧтобы удалить страницу:
Как изменить язык меню конструктора WPB?Чтобы изменить язык интерфейса конструктора сайтов, необходимо сменить язык в панели управления:
Смена языка меню конструктора WPB возможна в случае заказа хостинга сайтов с конструктором Web Presence Builder. При заказе отдельной услуги конструктора сайтов данная возможность не предоставляется.
Как поменять язык сайтаИзменить язык сайта можно в разделе Настройки
, на вкладке Языки
. Это повлияет на локализацию определенных элементов сайта, относящихся к сторонним компонентам, таким как Поиск Google. Выбор языка с написанием справа налево также переключит ваш сайт в режим письма справа налево:
К сожалению, в конструкторе данный функционал не предусмотрен.
Создать версию сайта на другом языке вы можете вручную на (например, en.mydomain.com), а на основном сайте (mydomain.com) разместить на нее ссылку.
Основной сайт:
Создание ссылки:
Сайт на другом языке:
Если вы находитесь в Европейском союзе, ваш сайт должен предупреждать посетителей о том, что на нём используются дополнительные файлы cookie, и запрашивать согласие на их использование.
Файлы cookie — это небольшие файлы, сохраняемые веб-сервером на компьютерах посетителей. Они могут использоваться для разных целей: от запоминания личных настроек до наблюдения за поведением пользователей для повышения эффективности контекстной рекламы.
Дополнительные файлы cookie — это файлы, наличие которых не обязательно для нормальной работы сайта. Например, сюда относятся cookie-файлы сервисов статистики и контекстной рекламы, таких как Google Analytics и Google AdSense.
Ваш сайт с большой вероятностью использует дополнительные файлы cookie, если на нем есть следующие функции:
Если вы включите уведомление о дополнительных файлах cookie, вашим посетителям нужно будет подтвердить своё согласие с вашей политикой:
После этого уведомление закроется. Вместо уведомления в углу страницы появится значок, и посетитель сможет продолжить просмотр вашего сайта. Если посетитель откажется, он будет перенаправлен на сайт google.com.
Как включить уведомление о файлах cookie?Для этого:
Ошибка при добавлении существующего магазина Ecwid в конструктор WPBДобавляя существующий магазин Ecwid в конструктор Web Presence Builder, при вводе ID магазина вы можете получить сообщение вида:
«Указанный код магазина не подходит, так как зарегистрирован напрямую через Ecwid или через Parallels Presence Builder другого провайдера» .
Решить данную проблему можно 2 способами:
1 вариантВы можете установить магазин посредством добавления модуля «Скрипт» и вставкой в него следующего кода:
xProductBrowser("categoriesPerRow=3","views=grid(3,3) list(10) table(20)","categoryView=grid","searchView=list","style=");
Идентификатор 1234567 вам необходимо заменить на ID вашего магазина на Ecwid.
Результат работы кода можно увидеть только на опубликованном сайте.
2 вариантТакже вы можете перенести товары из одного магазина в другой посредством экспорта и импорта всех товаров в CSV-файл следующим образом:
Узнать более подробную информацию про импорт товаров в Ecwid, а также ознакомиться с устранением возможных неисправностей при импорте вы можете
Стационарные ПК уже давно не являются единственным источником информации. Находясь в движении пользователь также стремиться быть в курсе всего необходимого, что может предложить глобальная сеть интернет. Текущая ситуация такова, что актуальность мобильных версий ресурса становится неоспоримой. За последнее десятилетие мобильные гаджеты перешли из категории «предметов роскоши» в категорию «предметов обязательной необходимости». Коммерческие ресурсы для сохранения уровня конверсии должны чутко реагировать на такие изменения. Мобильная версия сайта стала неотделимой частью ЛЮБОЙ интернет платформы реализующей товары или услуги.
Статистика неумолима, она сообщает, что за октябрь-ноябрь 2016-ого года доля посещений Интернета посредством мобильных гаджетов составила значительную цифру – 51%. То есть, более половины всего трафика – это трафик, генерируемый с мобильных устройств: смартфонов, планшетов, телефонов.
Интересное замечание — в России например статистика больше направлена в пользу десктопа. Причина — самый популярный поисковик в РФ — Яндекс — имеет самую низкую долю мобильных пользователей.
Но тенденция к росту доли мобильного трафика есть и у Яндекса, значит скоро мы будем стоять на пороге “мобилизации сайтов” — верстальщикам будет хватать работы…
Более того, 80% процентов людей, которые в принципе посещают Интернет, являются владельцами смартфонов. Даже клиенты, которые посещают проект при помощи стационарного компьютера, в следующий раз могут сделать это с телефона. И остаться недовольными.
Проблема заключается в том, что дисплей гаджета, даже самого передового, довольно мал, по сравнению с монитором стационарного компьютера или ноутбука. И он не может вместить такой же объем визуальной информации.
В результате, дизайн и текст, модули и блоки – все отображается некорректно. Теряется вся суть дизайна, нарушается юзабилити (удобство), пропадает маркетинговый акцент, невозможно грамотно донести до клиента УТП (уникальное торговое предложение). Сайт просто не выполняет свои функции.
Решением этой проблемы выступает снабжение ресурса мобильной версией. К сожалению, даже крупные коммерческие проекты не всегда это понимают и продолжают терять колоссальное количество трафика, а соответственно, и прибыли.
Итак, мобильная версия сайта зачастую повторяет содержание и структуру основной платформы, но бывает и отлична от него. В любом случае — это полноценный проект с оптимизацией контента и проработкой юзабилити, призванный вместить в небольшое пространство дисплея всю необходимую информацию.
Проанализируйте Вашу целевую аудиторию (ЦА)
Прежде чем перейти к вопросу создания корректной мобильной версии сайта, необходимо тщательно изучить собственную аудиторию. Создание мобильной структуры – это комплексный подход, в котором необходимо учесть множество факторов влияющих на успешную оценку пользователями. Поэтому, нужно знать все аспекты Вашей ЦА. Статистика сообщает, что чем ниже возрастная категория аудитории, тем более вероятен тот факт, что посещение ресурса будет происходить ТОЛЬКО с мобильной версии.
Анализ должен включать такие аспекты, как географическую принадлежность, поведенческий фактор, возраст, гендерные признаки, уровень достатка, актуальность покупок через Интернет для пользователя.
Типы мобильных версий сайта
Итак, оптимизация мобильной версии сайта возможна посредством следующих вариантов:
1. Создание отдельной версии сайта с собственным URL. Фактически – это поддомен ресурса, который является полноценным двойником основного сайта. Правда, зачастую с сильно сокращенным функционалом. Такое решение обладает несколькими плюсами: возможность коррекции контента на каждом сайте отдельно, идеальное отображение и отсутствие необходимости в компромиссном дизайне. Однако, для пользователя такой вариант не самый удобный. Ему придется запоминать отдельный адрес, что может привести к путанице. Для владельца проекта есть и свои недостатки – необходимость отдельного администрирования нового сайта, финансовые затраты. Да и ввиду совершенствования CSS, отдельная мобильная версия становится все менее продуктивной;
2. Самый простой способ адаптации к мобильным гаджетам – снабжение ресурса внешними плагинами. Плагин — это программный модуль, которые расширяет возможности движка сайта. Решение дешевое и удобное, но нефункциональное. Даже лучшие плагины все равно содержат массу ошибок, всплывает некорректное отображение страниц. Примером может быть плагин WP Mobile Edition для WordPress CMS, соответственно. Решение не подходит для компаний с серьезным каналом трафика;
3. Разработка мобильного приложения. Это весьма удобное решение для пользователя. Приложение разрабатывается под конкретное ПО (IOS, Android). В результате, пользователь работает с наиболее привычным для себя функционалом. Правда, для этого необходимо само приложение скачать. А убедить пользователя в том, что необходимость посещения данного ресурса для него настолько важна, что он должен установить внешнее ПО (программное обеспечение) – задача сложная. Поэтому, зачастую такое решение используется, как дополнительная мера при уже существующей полноценной мобильной версии сайта;
4. Адаптивный дизайн. Если задуматься, для чего нужна мобильная версия сайта в принципе, то легко прийти к выводу, что это упрощение в первую очередь для клиентов обладающих ПК и смартфоном ОДНОВРЕМЕННО. Поэтому, если пользователь посещает ресурс с разных устройств в разное время, адаптивный дизайн – лучший выбор. Это более трудоемкое решение. Но оно позволяет создать ресурс, который автоматически подгоняет визуальную картинку под любую ширину экрана, и пользователь всегда видит корректное отображение информации.
Как настроить мобильную версию сайта
Стоит понимать, что просто перевода существующего ресурса на адаптивный дизайн или создание отдельного сайта – недостаточно. Мобильная версия предполагает качественное изменение всей структуры ресурса, оптимизации контента, модулей, юзабилити и так далее.
Оптимизируйте размеры текстов на ресурсе
Существует множество противоречивых мнений об объемах текста, особенно это актуально для посадочных страниц. Текущий средний объем зачастую упирается в значение: 2000 слов. Однако, является ли он оптимальным?
Во-первых, тематика страницы имеет огромное значение. Если тема статьи предполагает пространственные рассуждения, то крупный объем текста имеет право на жизнь. Но если пользователь приходит за четким ответом, то он не будет благодарен сайту, который заставляет его читать множество ненужной информации.
Во-вторых, современная статистика указывает на то, что лаконичные тексты обладают более высокими показателями конверсии. Для пользователей с мобильных устройств посадочные страницы (лендинги) на 2000 слов – это слишком крупный размер текста. Поэтому, стоит его сокращать, искать золотую середину между посетителями с ПК и смартфонов. Рекомендуется уменьшение текстов на лендингах до 1000 слов. И соответственно, стоит сделать все страницы сайта более лаконичными. При этом, подобное решение может предполагать полной пересмотр всего семантического ядра.
Это энергоемкая работа, но необходимость ее не вызывает сомнений. Девиз: «делай проще» — это современный тренд, который очень распространен среди самых передовых пользователей смартфонов. Естественно, не стоит сокращать основные тезисы текстов на сайте, лишь корректировать их, создавая более емкие и небольшие версии. Это касается сайтов предлагающих свои товары или услуги, а вот например новостные сайты должны вмещать более емкие тексты.
Конкретизируйте заголовки
Тенденция ClickBait заголовков уходит в прошлое. Расплывчатые и развернутые заголовки, которые представляют собой вопрос без ответа, оборванную фразу – все это теряет свою результативность. Короткие заголовки, которые сразу четко конкретизируют информацию в статье – это то, что ищут пользователи сейчас.
Заголовок обязан быть максимально релевантным (соответствующим) самой странице. В противном случае, пользователь почувствует себя обманутым и вряд ли превратится в довольного клиента.
Проработайте структуру текста
Специфика просмотра страницы с мобильных устройств такова, что она предполагает огромное значение структуры текста. Создавайте максимальное количество «зацепок для глаз». Разбивайте каждый отдельный тезис на более мелкие, выносите цельные мысли в новый абзац. Чаще прибегайте к маркированным спискам, вынесенным в рамку высказываниям.
Это очень важно, поскольку мобильный пользователь хочет четко видеть основные тезисы, которые ему предлагает текст! Особенности мобильной версии сайта предполагают специфическое форматирование и структурирование, которое полностью избавляется от «полотен текста». Посмотрите на структуру одного из текстов сайта компании «Seoquick».
Проверьте скорость загрузки страницы
Скорость, с которой загружается страница на мобильном телефоне обычно отличает от того же показателя на ПК. Более скромные системные параметры гаджета, проблемный мобильный интернет – все это оказывает влияние. Поэтому, постарайтесь ускорить загрузку страницы на мобильной версии ресурса. Используйте для этого сжатие файлов. В первую очередь, обратите внимание на такие сервисы как:
HTML compressor, который корректирует размеры скриптов и самого кода на странице;
. JavaScript compressor, сжимающий скрипты Java;
. CSS compressor, соответственно, работающий с таблицами стилей.
Не забудьте воспользоваться сервисами, которые сжимают изображения. Зачастую, именно изображения создают ту самую энергоемкость, которая препятствует быстрой загрузке Вашей страницы.
Не пренебрегайте обычными методами, такими как работы с самим кэшем браузера. Кэш браузера — сохраненная копия виртуальной страницы, которую пользователь уже посещал. Постоянно тестируйте скорость загрузки ресурса посредством специальных сервисов. Неплохо смотрится в этой роли PageSpeed Insights или .
Оптимизируйте дизайн
Речь не об адаптации дизайна, а о его упрощении. Требования к мобильной версии сайта, в первую очередь, как раз и заключаются в простоте и лаконичности. Громоздкие элементы, которые служат лишь для визуальной составляющей: тени, градиенты – затрудняют загрузку и в принципе уже выходят из моды. Достигнуть того же эффекта можно посредством банальной игры с цветом.
Современный тренд диктует принципы минимализма, простоты линий и строгую геометрию форм. Вычурность и яркость будут восприняты негативно. Кроме того, сократите или протестируйте все всплывающие окна. Часть из них может неправильно работать на тех или иных мобильных платформах. Что опять же, вызовет недовольство пользователя. Хороший пример минимализма в дизайне ресурса:
Сократите количество плагинов
Современные возможности HTML5 позволяют при правильной работе найти подходящую замену практически любому плагину. При этом, не потеряв ни грани визуальной привлекательности Вашего ресурса. Проблема плагинов в том, что они:
Увеличивают вес страницы, а мы помним, насколько важна быстрая загрузка для мобильной версии сайта;
. Могут отображаться неправильно на мобильной платформе или в мобильном браузере (это зависит от самого плагина);
. Понижают страницы в релевантности (так как из-за увеличения веса страницы снижается ее уровень юзабилити).
В идеале, ресурс должен отказать от плагинов в принципе. Если это не приведет к потере функциональности или аспектов дизайна. Это планка, к которой ресурс должен стремиться.
Повышайте уровень юзабилити сайта
Разбирая вопрос, как сделать мобильную версию сайта, в первую очередь стоит помнить о том, что курсора у смартфонов нет. Соответственно, точечно кликнуть на какой-то объект затруднительно. Особенно если он маленького размера. А если пользователю приходится менять масштаб для клика – Вы что-то делаете не так. Создавайте элементы для клика достаточного размера, не группируйте их. И сократите дистанцию пользователя на ресурсе до любого раздела. Переход куда-либо в два клика, вместо одного – это уже серьезная ошибка.
То же самое касается формы регистрации на ресурсе, сделайте ее максимально простой. Сократите элементы, добавьте возможность регистрации посредством аккаунта в социальных сетях. И снабдите ресурс кнопками самых распространенных социальных сетей, разумеется.
Подводя итог
Одним из главных критериев качественной мобильной версии сайта является ее трендовая актуальность. Необходимо держать руку на пульсе, оперативно реагировать на любые изменения тренда. Ведь, оптимизация мобильной версии во многом – это погоня за удобством для пользователей смартфонов. А они обычно как раз и являются самыми прогрессивными клиентами, которые весьма скептически относятся к ресурсам, проявляющим признаки любой устарелости.
Сергей Арсентьев
Создание мобильной версии сайта на WordPress за 10 минутGoogle на днях объявил о приоритете в ранжировании сайтов, которые имеют мобильную версию. Это может значить лишь одно: наступление эпохи мобильных устройств состоялось. И поэтому каждый уважающий себя сайт или блог на WordPress теперь просто обязан иметь мобильную версию.
Мобильную версию сайта многие владельцы сайтов (да и я сам, чего уж греха таить) просто не находили времени и особых причин делать.
Однако все изменилось с тех пор, как Google всерьез взялся на поддержку мобильных устройств. Долгое время Google "пугал" своих вебмастеров примерно следующими сообщениями:
Мы проверили 27 стр. Вашего сайта и обнаружили, что 100% из них неудобно просматривать на мобильных устройствах. Из-за ошибок на этих 27 стр. у пользователей складывается плохое впечатление о ресурсе. Эти страницы не считаются оптимизированными для мобильных устройств с точки зрения Поиска Google, и они будут отображаться и ранжироваться в результатах поиска на смартфонах соответствующим образом.
Количество проверенных страниц и процент несоответствий мог отличаться, но суть была такой: Google предупреждал, что с сайтом по его мнению что-то не так.
И вот сейчас представители корпорации официально объявили о приоритетной поддержке с 21 апреля 2015 года тех проектов, которые будут иметь мобильную версию сайта. Что это значит? Да то, что сайт без мобильной версии будет ранжироваться хуже, чем сайт, позаботившийся о пользователях телефонов и планшетов.
Результат проверки должен быть вот таким:
По аналогии проверяйте мобильную версию сайта в панели вебмастера Яндекс: https://webmaster.yandex.ru/site/
Результаты проверки должны быть все зелененькими, без красных замечаний.
У меня кстати один сайт клиента по SEO в инструменте Google проверку проходил, а в Яндексе - нет! Так что обязательно проверяйте и там, и там.
И если у вас страница не оптимизирована под мобильные устройства в одном или нескольких поисковиках, то самое время сделать это прямо сейчас.
Важно! У вас может быть уже создана мобильная версия, да только Google и Яндекс может это не понять, так как вы ему запретили индексацию служебных папок в файле Robots.txt.
Мобильные устройства стали уже нормой: кто-то выходит в сети через телефон, кто-то с планшета или нетбука. Поэтому игнорировать таких посетителей больше недопустимо.
Так, по крайней мере считает Google и Яндекс, а это значит, что мобильная версия становится стандартом. Но это еще далеко не все плюшки, которые вы получите от использования "маленькой" версии сайта или блога.
Вот примерный список преимуществ, которые получает сайт с мобильной версией:
- приоритет в Google и Яндексе (да, да, Яндекс теперь тоже анализируется мобильную версию в новом интерфейсе панели Вебмастера, апдейт от Яндекса, скорее всего, не за горами)
- улучшение поведенческих факторов: ведь посетителям комфортнее работать с мобильного устройства на сайте, который имеет мобильную версию, поэтому они на таких сайтах проводят больше времени, открывают больше страниц и легче получают информацию, уменьшая показатели отказов и улучшая поведенческие факторы, которые дополнительно влияют на положение в поиске.
- скорость загрузки: в мобильной версии, как правило, отброшены лишние второстепенные детали, чтобы сайт грузился максимально быстро - это также улучшает поведенческие факторы и статистику сайта.
- повышение конверсий: на удобном сайте люди быстрее и стабильнее добираются до нужных целей (положить товар в корзину, оформить подписку, стать зарегистрированным участником, прочитать запись в блоге, кликнуть на рекламу и так далее).
- солидность: корпоративные сайты, имеющие мобильную версию придают их компаниям небольшой дополнительный положительный имидж.
- отношение пользователей: пользователи быстрее привыкают к хорошему, поэтому блоги и сайты, имеющие мобильную версию, имеют больше шансов получить постоянную лояльную аудиторию, чем их менее развитые конкуренты.
Таким образом, список преимуществ достаточно большой, чтобы не откладывая ни минуты установить мобильную версию сайта.
Но как это сделать?
Неужели придется верстать все заново и платить за это тысячи рублей? Если ваш сайт сделан на WordPress CMS, то все можно сделать быстро и бесплатно.
Помните я как-то писал, какую ? Если вы следовали этой рекомендации или же сами сделали правильный выбор и остановились на WordPress, то благодаря развитому сообществу можно воспользоваться бесплатной версией отличного плагина, который мгновенно и автоматически создаст мобильную версию для вашего сайта.
Что вам нужно теперь сделать:
После установки вам станет доступны настройки плагина в левом меню. Там есть такие пункты: базовые настройки, темы и расширения, параметры темы и меню. Рассмотрим все подробнее.
Базовые настройкиНазвание и автор сайта
Что будет написано вверху вашего сайта в мобильной версии. Рекомендую использовать что-то короткое, буквально на 20 знаков, так как примерно это количество умещается целиком. Галочку " " можно снять.
Определение региона.
Русский в большинстве случаев подойдет.
Начальная страница.
Можете вручную задать отдельную главную страницу для мобильных устройств (например, меньшую по объему или с другим текстом). Очень удобно, но я оставил все по умолчанию.
Остальные параметры трогать большого смысла не вижу, тем более что самые интересные из них доступны только в полной платной версии плагина.
Параметры темы: "Общие"В бесплатной версии мобильного плагина будет доступна только одна тема оформления, поэтому сразу переходите к ее параметрам, которые имеют несколько вкладок.
Вкладка "Общие" позволяет задавать такие параметры как:
Блог.
Количество записей в списке блога. Тут же можно исключать рубрики и теги (то есть выводить не все записи в мобильной версии). Я вывожу всё, это по-моему логично.
Эскизы записей я поставил такой: Все (блог, отдельный, страницы, поиск и архив).
В этом случае у меня для каждого поста подтянулись миниатюры в кружочках - красиво.
Вот смотрите, в первом случае - с эскизами, во втором - без.
Мне больше понравилось с эскизами, тем более, что места они занимают немного.
Показать категории записей и теги - Да.
Показать дату публикации - Да.
Показать автора записи - Нет
(мне кажется излишним)
Показывать кружочки с комментариями на публикациях - Да
Показывать поиск в колонтитуле - Да
.
Страницы
У меня комментарии на страницах не выводятся, поэтому выводить не
Поддержка пользовательских записей
Я включил поддержку всех типов, какие только у меня были:
Включить wpcf7_contact_form (плагин формы обратной связи)
Включить dilemma (голосование да/нет)
Включить social-locker ()
Включить wysijap (плагин для электронной подписки)
Форма регистрации
Так как на моем блоге нет возможности регистрации, то не включал.
Готовый слайдер
В своей теме не нашел, где они могут показываться эти слайдеры. Но на всякий случай включил, пусть будет.
Вот где нужно тщательно покопаться. Здесь оформляется внешний вид мобильной версии сайта.
Цвета сайта
Именно здесь настраиваются цвета мобильной версии сайта, поэтому рекомендую
Эмблема сайта
Это логотип. Если установить логотип сайта, то он будет показываться вместо названия. Так как это название, я уже писал выше, короткое, то мне больше понравилось использовать лого.
Примечание темы.
Просто произвольный код, который будет отображаться под кнопками переключения с мобильной версии на обычную. Зависит от вашей фантазии. Я пока не задействовал это поле.
Оформление
Выберите шрифты, которые вам больше нравятся. Я поставил "Шрифты браузера". По идее должно быстрее грузиться.
Общий доступ.
Установите галочки "Показать ссылки для обмена" и "Показывать совместные ссылки на страницах", это позволит показывать в мобильной версии внутри поста ссылки на соцсети Facebook, Twitter, Google+ и отправить ссылку на пост по емейл. Это удобно и красиво.
Социальные ссылки примечания
Введите ссылки на ваши социальные контакты, группы и RSS. Тогда внизу всех мобильных страниц появятся симпотичные круглые значки, по которым можно будет активировать те или иные соцсервисы.
Это кнопка для iPhone или Android, которая будет использоваться, если пользователи сохранят ссылку на ваш сайт себе на мобильное устройство.
Я взял за основу PSD-макет иконки iPhone и быстро создал себе нужную кнопку в Photoshop.
Если вы пока не дружите с этим редактором, то можете бесплатно создать иконку для Apple вот в этом сервисе .
МенюЭтот важнейший пункт позволяет настроить вывод меню, которое осуществляется при помощи правой пиктограмки.
Тут все просто: вы можете выбрать или уже предустановленные иконки (проще всего) или загрузить свои иконки на прозрачном фоне и добавить уже их.
Важно! В момент добавления никакого уведомления об успешной загрузке не происходит, поэтому просто грузите сколько нужно, а потом переходите в Menu Icons и выбирайте набор значков "Пользовательские значки" - там будут загруженные ранее иконки.
Вот посмотрите, как у меня получилось настроить:
Кстати, предустановленные значки в комплекте плагина отлично подобраны и подойдут большинству проектов.
А знаете ли вы, что можете проверить получившуюся версию сайта для мобильных устройств на iPhone5 без самого телефона? Для этого можно просто воспользоваться сервисом "Эмулятором iPhone", например iphone5simulator.com
Выводы и итогиТаким образом, можно буквально за несколько минут и главное, бесплатно создать на сайте или блоге под WordPress мобильную версию сайта.
Это огромное конкурентное преимущество перед многими прочими CMS, которые еще не имеют таких простых и удобных плагинов и в которых для создания версии под мобильные устройства нужно привлекать верстальщика, а такое удовольствие редко стоит дешевле 100$.
Судя по заявлениям представителей Google, с 21 апреля 2015 применение мобильной версии станет фактически стандартом для успешного продвижения проекта в сети. Поэтому рекомендую не откладывая сделать себе мобильную версию, тем более, что это занимает всего несколько минут (я дольше писал это пост, чем настраивал плагин).
Яндекс с августа 2016 года теперь тоже определяет мобильную версию в панели вебмастера, очевидно, что этот поисковик также будет отдавать приоритет в поиске для сайтов, имеющих мобильную версию.
Обзор Samsung Galaxy A7 (2017): не боится воды и экономии Стоит ли покупать samsung a7
Делаем бэкап прошивки на андроиде
Как настроить файл подкачки?
Установка режима совместимости в Windows
Резервное копирование и восстановление драйверов Windows