исправить ошибки мобильной верстки на что влияет

Пять наиболее распространённых ошибок адаптивного дизайна

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

Обратимся к мировой статистике:

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

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

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

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

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

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

Как свидетельствуют результаты исследования, проведенного Strangeloop, ели сайт на мобильном гаджете будет загружаться дольше 3 секунд, его покинут 57% пользователей.

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

В адаптивной версии элементы навигации должны быть крупными!

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

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

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

Этот подход весьма разумный, но многие понимают его неправильно. «Mobile first» вовсе не означает, что сперва нужно проектировать дизайн для мобильной версии. Его суть – начинать проектирование сайта, как обычно, с декстопа, одновременно продумывая вид версии для гаджетов. А именно, какой вид будет у кнопок, чем заменить анимацию, как сдвигать блоки.

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

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

Источник

Исправить ошибки мобильной верстки на что влияет

Число пользователей мобильного интернета растет.

Datareportal.com в январе 2019 года опубликовал статистику: 109,6 миллионов пользователей в России выходят в сеть через мобильный интернет:

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

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

Google в отличие от Яндекса не разделяет поисковую выдачу на обычную и мобильную. В Google действует алгоритм Mobile-Index First. Google при формировании выдачи отдает предпочтение сайтам с мобильной адаптацией.

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

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

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

Перечислим основные принципы:

1. Удобство и простота сайта.

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

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

2. Единообразие дизайна для всех устройств

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

Адаптивный дизайн – это конфигурация, в которой сервер отправляет одинаковый HTML-код на любые устройства, а размеры элементов страницы корректируются с помощью CSS(таблицы стилей страниц сайта).

Алгоритмы Google автоматически распознают такую конфигурацию, если все агенты пользователя робота Googlebot могут сканировать страницу и ее ресурсы (CSS, JavaScript и изображения).

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

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

1. Необходимо подтвердить право собственности как на обычную, так и на мобильную версию сайта в Google Search Console. Так вы сможете получать уведомления и данные по обеим версиям сайта;

2. Необходимо проверить атрибуты hreflang* для каждой версии сайта. Атрибуты hreflang в URL должны указывать на версии, предназначенные для соответствующих типов устройств;

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

1. Мобильная и полная версии сайта должны содержать одинаковый контент.

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

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

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

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

Заголовки (title) и описания (description) должны совпадать.

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

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

которые вам необходимо осуществить для правильной индексации сайта в поисковой выдаче Google:

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

Ошибка: некорректное отображение страниц — блокировка JavaScript, CSS и графических файлов

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

Если на вашем сайте в файле robots.txt закрыт доступ к JavaScript, CSS и графическим файлам, то данные не будут проиндексированы поисковой системой. От этого позиций вашего сайта в выдаче будут низкими.

Для проверки доступности следует воспользоваться инструментом проверки URL в Google Search Console — с его помощью вы сможете найти и исправить ошибки индексирования сайта.

Ошибка воспроизведения контента

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

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

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

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

Список типичных ошибок переадресации:

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

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

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

Источник

ТОП-5 ошибок мобильной адаптации сайтов

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

Мобильная адаптация: отслеживаем пользовательский опыт

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

1. Неудачное использование контейнеров

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

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

Решений этой проблемы может быть несколько:

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

2. Блоки с прокруткой

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

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

3. Несворачиваемое меню

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

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

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

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

4. События при наведении курсора

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

5. Мелкий шрифт и маленькие активные элементы

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

Размер шрифта — новый фактор ранжирования Яндекс

Яндекс рекомендует шрифт не менее 12px для мобильных версий сайта.

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

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

Выводы

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

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

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

ТОП-5 ошибок мобильной адаптации сайтов : 2 комментария

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

2. Динамика вообще зло, если с сайтом нельзя работать без javascript это плохо. Лучше всего реализовать простейший анкор-переход. Например, иконка меню в шапке перекидывает вниз страницы, где есть статичное меню и кнопка «вверх».

4. К сожалению невозможно учесть все аспекты адаптации… тут надо копать глубже, ведь адаптируется не только каркас, но и контент. А в плане 12px, советую попробовать мой одноимённый букмарклет — наглядно показывает проблемыне элементы, взять можно тут: chuvyr.ru/p/bookmarklet.html

Константин, спасибо за Ваши рекомендации! Оставайтесь с нами)

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

Для отправки комментария вам необходимо авторизоваться.

Источник

5 ошибок в мобильной версии сайта, которые лишают вас заказов

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

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

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

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

Большинство актуальных шаблонов для распространенных CMS (1С-Bitrix, WordPress, CS-Cart и т.д.), а также конструкторы сайтов содержат в себе адаптивную версию сайта по умолчанию. Такая версия не всегда хорошо проработана с точки зрения дизайна, но в целом удобна для пользователей и выдерживает критику.

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

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

Сделать это можно следующими способами:

Долгая загрузка страниц

Тише едешь – дальше будешь в результатах поисковой выдачи и без заказов.

Результат теста сайта amazon.com с помощью сервиса Google PageSpeed Insights

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

По данным исследования компании Unbounce, время загрузки сайта более 3 секунд снижает вероятность покупки у 45,4% пользователей и снижает вероятность повторного посещения сайта у 36,8%. Несколько лишних секунд при загрузке сайта могут лишить половины потенциальных продаж.

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

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

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

Скажи мне, как с тобой можно связаться, и я скажу, кто ты.

Кнопка обратной связи от сервиса Jivosite

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

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

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

Длинные или перегруженные формы заявок

У меня к вам всего несколько вопросов, несколько десятков вопросов.

Пример формы обратной связи из блога Яндекса для вебмастеров

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

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

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

Примеры малополезной и лишней информации в формах заявок:

1. Форма заказа обратного звонка (ненужное зачеркнуто):

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

2. Форма заказа товара / услуги без возможности оплатить online (ненужное зачеркнуто)

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

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

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

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

Наличие капчи

Капча на сайте – горе в семье.

Пример капчи, найденный на pikabu.ru

Что хуже: получить несколько спам-обращений или недополучить заявку потенциального клиента?

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

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

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

Конверсия при использовании капчи падает в среднем на 3,2% (и это еще по «бородатым» данным исследования MOZ).

А вы готовы лишиться части заказов и подарить их конкурентам? Нет? Тогда убирайте капчу и будьте проще (с точки зрения оформления заказа).

Итого

Конкурент без мобильной/адаптивной версии сайта – хороший конкурент.

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

Источник