Контент шире экрана
Четвертой ошибкой может быть неверное использование абсолютных значений размеров элементов.
Во всех прорисовках элементов старайтесь не использовать абсолютные значения ширины, а применяйте относительные значения в процентах (например width: 100% – ширина по всей области).
Но некоторые элементы должны иметь статичные размеры, поэтому старайтесь избегать статичных элементов с большой величиной, иначе на небольших устройствах Вы рискуете «вылезать» за область экрана.
Также используйте CSS для корректного отображения текстов и стилей.
- Применяйте медиазапросы для определения максимальных значений отображаемых элементов (min-width, max-width, min-height и max-height).
- Применяйте различные стили CSS в зависимости от разрешения экрана и ориентации (портретной и десктопной).
Также применяйте для масштабирования контрольные точки.
Для масштабирования изображений используйте элемент <picture>.
При корректной настройке изображение будет масштабироваться вне зависимости от поворота экрана и его размера.
Как его настроить – можно изучить в разделе .
Функциональные возможности
Для начала работы необходимо ввести адрес сайта, для которого вам нужна мобильная версия. Дальше система на пару минут задумается, затем переведёт вас в редактор. Справа расположено окно предпросмотра в формате мобильного устройства, слева – категории опций для преобразования внешнего вида, посередине – выбор доступных вариантов и мелкие настройки.
Приятно то, что при первом же взгляде на редактор всё становится понятно. Хотя есть небольшой нюанс: сервис англоязычный, русский язык не завезли, увы и ах! Хорошая новость в простоте, распространённости используемых в менюшках слов – даже с лоу-левелом спикин-инглиша вы будете чувствовать себя уверенно. Так что в этой особенности сервиса большой проблемы не видим.
Итак, в сайдбаре расположены 3 пункта настроек, выражающие шаги, которые вам предстоит пройти для получения мобильной версии сайта:
1. Дизайн – опции для настройки внешнего вида сайта в виде подпунктов:
- Макет – выберите структуру страницы для подачи материалов. Доступно 5 вариантов. Здесь же можно задать стиль для блока меню.
- Стиль – выбор цветовой схемы главных элементов, фонового изображения и шрифтовых схем для кнопок, заголовков и ссылок/текста;
- Хедер – выбор типа шапки (текст или изображение), размера этой области, выравнивания, фона и возможности фиксированного перемещения блока хедера по мере прокрутки страниц.
2. Страницы – редактирование каждой статической страницы сайта. Здесь можно настроить SEO, выбрать индивидуальный шаблон, задать правила открытия, ссылку, добавить свой код и т. д.
Самое интересное в том, что вы можете добавить виджеты – различные типы контента и функциональности на страницу. Все они разделены на 3 категории: бизнес, дизайн, социальные. Всего здесь 40 виджетов. Среди них: обратный звонок, меню ресторана, галерея, 2 колонки, карта, купон, список, табы, код HTML, кнопка, абзац (текст), блоки лайков и «поделиться», RSS.
3. Предпросмотр и публикация – здесь находятся ссылки на полученный результат и сравнение с начальной версией, а также предложение оплаты тарифа для публикации мобильной версии вашего сайта.
Что вам даст использование этого сервиса? Давайте по порядку разберёмся. У вас есть сайт без мобильной версии. Вы заходите на DudaMobile, вводите ссылку, после чего система сканирует структуру вашего сайта и его материалы. Всё это конвертируется, подгоняется под мобильные разрешения на уровне кода. Вы получаете ваши страницы со всем содержимым, но они теперь хорошо вписываются в экраны мобильных гаджетов.
Далее при помощи правок дизайна и довольно большого набора виджетов вы можете довести внешний вид и функциональность сайта до желаемой кондиции. Виджеты можно вставлять в любое место страницы. То есть всё-таки строительство мобильного макета в DudaMobile включает классический инструментарий WYSIWYG-конструкторов, позволяя наращивать функционал. Каждый виджет имеет настройки, соответствующие контексту его назначения: например, внешний вид, фон, ссылки, названия полей, отступы, вставка кода и т. д. В общем, кастомизация встраиваемых элементов вполне приличная.
Также вы сможете настроить SEO-параметры мобильной версии отдельно от основной: добавить аналитику от Google, заполнить мета-теги, включить оповещения о сохранении файлов cookies, добавить свой код в
В итоге, мы получаем конвертер мобильных сайтов, совмещённый с функциональностью конструктора. Простой интерфейс, достаточный набор возможностей и хороший результат на выходе.
Слишком мелкий шрифт
Есть общепринятая норма у веб-дизайнеров и верстальщиков, которая гласит: оптимальная длина строки на мобильном устройстве – 70 символов (8–10 слов).
Поэтому следует устанавливать контрольные точки для текстовых блоков, которые содержат больше, чем 10 слов, и задавать для них приемлемую ширину.
Например, в этом примере на мобильном устройстве для максимальной ширины экрана 575 пикселей мы задали ширину текстового блока 550 пикселей, чтобы он не был впритык к краям.
Интерактивные элементы слишком близко
Такая ошибка может возникать, если Вы сверстали сложный дизайн, но не учли его масштабирование на мобильных устройствах.
Это приводит к тому, что кнопки, ссылки, списки или номера телефонов находятся слишком близко друг к другу и, чтобы на них нажать, приходится масштабировать область и нажимать на увеличенную версию сайта.
Элементы, которые требуют нажатия, должны иметь размер около 9 миллиметров, что при существующих плотностях точек примерно равно 48 пикселям.
Поэтому старайтесь выдерживать отступы вне зависимости от размеров самих иконок.
Между нажимаемыми элементами также старайтесь выдерживать минимальное расстояние.
Для удобства используют минимальный размер в 8 пикселей.
Почему мобильная версия сайта или адаптивный дизайн важны для бизнеса?
Дело в том, что с появлением смартфонов и планшетов всё больше покупателей ищет товары и услуги в интернете именно с помощью этих устройств, а не со стационарных компьютеров или ноутбуков. А всё потому, что это очень удобно
Где бы ни находился покупатель, он может осуществлять поиск прямо со своего мобильника, и не нужно включать компьютер.
Это здорово, но физический размер экрана носимого гаджета, будь то планшет или смартфон, довольно мал и поэтому сайт, который прекрасно смотрится на компьютере или ноутбуке, очень неудобен для просмотра на экране мобильного устройства.
Вот почему сейчас, как никогда, стало важно, подходит ли ваш сайт для использования на смартфонах, планшетах или фаблетах (фаблет – нечто среднее по габаритам, между смартфоном и планшетом)
Чек-лист требований
Ниже представлен чек-лист, который мы используем при проверке мобильной версии перед оптимизацией сайта.
1. Технические требования
-
Файл robots.txt не должен запрещать сканирование CSS и JavaScript, от которых зависит отображение сайта на мобильных устройствах.
-
-
Страницы сайта должны отправлять серверу ответ с HTTP-кодом 200 OK. В случае, если документ не найден, отдается HTTP-код 404 Not Found;
-
Обязательно должен быть указан тег viewport, позволяющий корректно отображать содержимое страницы;
-
Недопустимо использование Flash-элементов, так как данная технология не поддерживается большинством современных смартфонов;
-
Недопустимо применение Silverlight-плагинов и Applet;
-
Все интерактивные элементы должны быть выполнены при помощи технологии HTML5. Только в этом случае можно гарантировать их корректную работу;
-
Размер текста должен адаптироваться под экран мобильного устройства таким образом, чтобы его было комфортно читать. В первую очередь, это касается заголовков и подзаголовков;
- При наличии отдельной мобильной версии, пользователь должен перенаправляться на нее при помощи 302 редиректа. Именно 302-го, а не 301-го, так как использование последнего может привести к некорректной индексации.
2. Особенности использования
-
Интерактивные элементы не должны располагаться близко друг к другу. Минимальное допустимое расстояние — 27 пикселей.
-
Любой текстовой материал должен удобно читаться;
-
Если на сайте имеется возможность покупки или заказа товара, то должна быть возможность сделать это в один клик;
-
Номера телефонов должны быть кликабельны и написаны в корректном формате. То есть, звонок совершается простым нажатием на номер;
-
Меню сайта и ссылка на главную страницу должны находятся на первом экране;
-
Контент должен полностью помещаться на экране телефона и быть доступен без прокрутки или увеличения;
-
Не должно быть всплывающих окон или слоев. В том числе, это касается форм заказа звонка или online помощника;
-
Если на сайте имеется видео, должна быть возможность его просмотра в формате полного экрана;
-
Не должно оставаться пустых зон сверху, снизу или по бокам от отображаемого контента;
-
Не должно быть горизонтальной прокрутки;
- Часто используемые интерактивные элементы должны находиться в зоне .
Проверить корректность отображения мобильной версии можно при помощи официального инструмента от Google или от Яндекс
Обращаем внимание, что если в файле robots.txt запрещена индексация CSS таблиц отвечающих за отображение мобильной версии, проверка будет некорректной
Мобильное приложение: преимущества
Прочитав предыдущий раздел, можно задаться вопросом: «Для чего вообще нужна разработка приложений для мобильных устройств?» Создание мобильных приложений объясняется такими факторами:
1. Возможность взаимодействовать с пользователем, вести с ним диалог. Когда посетитель сайта уходит с вашей страницы, взаимодействие с ним прекращается: вы не имеете возможности продолжить с ним общение и что-то ему сообщить. Мобильные приложения для android и других операционных систем всегда установлены на устройстве пользователя, благодаря чему есть возможность для диалога (например, можно отправлять уведомления). То, насколько разным является взаимодействие с реальными и потенциальными клиентами, как раз и показывают термины «посетитель» и «пользователь».
2. Высокий уровень персонализации. Мобильное приложение для android и любой другой операционной системы получает много сведений о пользователе (геолокация, привычки и стиль поведения), благодаря чему можно предлагать пользователю только необходимые для него услуги и товары.
3. Возможность использования всех функций устройства. Любая ios разработка даёт возможность использовать многие функции мобильных устройств (GPS, компас, камера, гироскоп, акселерометр), список которых регулярно пополняется. Разработка приложений для android и прочих операционных систем позволяет пользователю при помощи телефонной камеры сканировать всю информацию с банковской карты, а не вводить эти сведения вручную. Также отпадает необходимость в поисках ближайшей торговой точки: на карте будет проложен самый короткий маршрут, а компас покажет, в каком направлении нужно перемещаться.
4. Возможность работы в оффлайне. Хотя для тех списков товаров и услуг, которые регулярно обновляются и проходят синхронизацию с удалёнными серверами, это условие не имеет значения, но многие разработки приложений для ios и других операционных систем предусматривают наличие функций, способных работать без подключения к Интернету.
5. Оригинальный дизайн. У мобильной операционной системы возможности для создания пользовательского интерфейса намного шире. Android и ios разработка может содержать различные навигационные решения, анимацию, плавные переходы – много ли существует таких сайтов?
6. Высокая скорость функционирования. При создании мобильных приложений используются все ресурсы системы, благодаря чему приложения функционируют намного быстрее мобильных сайтов (скорость их функционирования определяется скоростью работы браузеров).
7. Ежегодно всё больше пользователей мобильных устройств отдают предпочтение приложениям вместо браузеров. Этот факт также говорит о том, насколько востребованной является разработка приложений для ios и других операционных систем.
Даже учитывая столь обширный список преимуществ, нельзя однозначно рекомендовать разработку приложений для мобильных устройств. На выбор будут влиять многие факторы.
Какой должна быть мобильная версия сайта?
Мобильная версия сайта необходима не только для комфорта посетителей, увеличения продаж, но и для поисковой оптимизации, ведущей к увеличению трафика/конверсии при прочих равных
Да, Google и Yandex обращают пристальное внимание на наличие и качество мобильной версии сайта, учитывая эти факторы при ранжировании страниц. От себя поделимся полезными рекомендациями о том, как повысить эффективность мобильной версии сайта:
Должна быть достаточно заметная и удобная для нажатия кнопка заказа товара/услуги в 1 клик, желательно на первом же экране;
Ссылка на главную страницу должна быть на первом экране (обычно её зашивают в логотип с названием сайта), то же касается и корзины в случае с магазином – всегда должна быть на виду;
Меню сайта также размещено на первом экране (обычно в формате гамбургера);
Номера телефонов должны быть кликабельными и соответствовать формату набора региона, в котором продвигается сайт;
Все изображения должны быть адаптированы для показа на мобильных устройствах;
Нигде не должно быть горизонтальной прокрутки – только вертикальный скроллинг, по мере которого всё чётко видно;
Для поисковых систем желательно размещать мобильную версию на поддомене сайта со своим отдельным URL, то есть иметь 2 копии сайта для показа на разных устройствах;
Пользователи мобильных устройств должны автоматически перенаправляться на мобильную версию посредством настройки серверного редиректа;
Стилистика мобильной версии по общим очертаниям должна соответствовать десктопной;
В мобильной версии не должно быть назойливой рекламы на весь экран, окно онлайн-консультанта, виджеты обратного звонка, блоки социальных сетей на полэкрана, баннеры, всплывающие окна тоже ни к чему здесь: они утяжеляют страницу, перекрывают важный контент, отвлекая от него внимание посетителя;
Где-нибудь на виду должна быть кнопка перехода на десктопную версию сайта, причём при клике по ней не должны срабатывать перенаправления обратно на мобильную версию – необходимо разместить аналогичная кнопку обратного перехода в том же месте;
Не нужно делать слишком сложных и длинных форм для заполнения, поскольку печатать с мобильника далеко не всем удобно – чем проще, понятнее и короче будут формы для отправки данных, тем лучше;
Мелкий шрифт (меньше 16px), межстрочный интервал, отступы от полей, ссылки одна поверх другой – всё это физически мешает воспринимать контент (нагрузка на зрение, неудобные клики), превращает его в кашу и отпугивает посетителей.
Общий смысл в том, что весь контент на страницах мобильной версии должен внятно восприниматься без усилий. Чем ниже сопротивление, создаваемое страницей на пути к цели посетителя, тем выше конверсия. Важные элементы на самых видных местах, ничего лишнего нет, кликать по ссылкам удобно даже толстыми пальцами при плохом зрении, всё быстро загружается, видео и картинки корректно отображаются в разных разрешениях – вот что нужно вашим посетителям, поисковым системам и, в конечном счёте, лично вам для успеха проекта.
Всё это можно реализовать самыми разными способами. Проще всего использовать конструкторы сайтов, в которых уже всё продумано и происходит правильно по умолчанию в автоматическом режиме. Возможности DudaMobile тоже учитывают всё вышеуказанное и многое другое в своём инструментарии, позволяя из уже существующих сайтов создать их грамотные мобильные версии без технических знаний и заметных усилий. Так или иначе, каждый сайт должен быть адаптирован под мобильный сегмент – таковы современные требования пользователей и поисковых систем.
Динамический показ
Этот вид мобильной версии работает немного иначе.
В данном случае пользователи, заходя на мобильную версию основного сайта, получают другой HTML-контент в зависимости от своего User-Agent.
Если коротко, он работает по следующему принципу:
Распознается параметр Vary от конкретного User-Agent
Как только он распознан, нужная версия HTML отправляется пользователю.
Для удобства загрузки используются куки (при повторном посещении страниц сразу грузится нужная версия).
Важно правильно распознавать нужные User-Agent для корректной загрузки.
Данный заголовок сканируется Googlebot и позволяет просканировать контент, который может быть показан.. Например, в этом скрине описан метод определения User-Agent и выбора HTML-контента, который нужно показать в зависимости от User-Agent
Например, в этом скрине описан метод определения User-Agent и выбора HTML-контента, который нужно показать в зависимости от User-Agent.
Какие ошибки могут ждать вас?
- Актуальный список User-Agent. Всегда нужно поддерживать список версий и актуализировать контент HTML.
- Часто из-за ошибки отображения HTML-контента мобильная версия может быть выведена на десктоп, или планшетная версия – на мобилку.
- Использование технологии маскировки.
Маскировка (или клоакинг) – это технология, когда пользователь видит один контент, а поисковый робот – другой.
На самом деле поисковый робот должен видеть тот же контент – вне зависимости, какой User-Agent дополнительно используется.
Если Вас уличат в клоакинге, это может стоить Вашему сайту позиций.
Cloaking
Search Console – Google Вебмастер
Всю информацию можно изучить в Вебмастере Google – просто вставьте в поисковую строку URL страницы и изучите ошибки (если они есть).
В нашем случае их нет.
Проверьте ошибки кода, а также отображение непосредственно в Вебмастере.
Также важно, как Ваша страница отображается на скриншоте. Например, на нашей странице можно увидеть, что все элементы не выходят за рамки и не накладываются друг на друга
Например, на нашей странице можно увидеть, что все элементы не выходят за рамки и не накладываются друг на друга.
То есть для исправления мобильной версии непосредственно SEO-специалист Вам не нужен – необходимо лишь дать доступ на просмотр страниц Вашему программисту, чтобы он нашел ошибки в коде и закрыл их.
Выводы
Цена вопроса может показаться завышенной, но это не так. Дело в том, что сайты, которые до сих пор не имеют адаптивного дизайна или отдельной мобильной версии, скорее всего, довольно старые. Следовательно, посещаемость их может быть приличной со вполне сложившейся аудиторией, которой не совсем удобно пользоваться их возможностями с мобильных устройств. Вероятно, разработчик, который делал сайт, уже потерялся. Либо вы так и не созрели выделить деньги, научиться самостоятельно либо просто ленитесь оформить мобайл-френдли дизайн.
Можно было бы сравнить конвертер DudaMobile с конкурентами, вот только их не видно. Поэтому рекомендуем к использованию всем, кто продолжает терять клиентов с десктоп-онли сайтом! Пробуйте, в редактор пускают бесплатно – сразу оцените качество услуги, а дальше по желанию.
