Мобильный веб: распространенные ошибки

Mobile first» — это важная фраза, когда речь заходит о современном веб-дизайне. Все больше и больше людей используют свои смартфоны или планшеты в дополнение к классическим настольным компьютерам для серфинга на ходу. Даже домашний серфинг все чаще осуществляется не вставая с дивана с помощью мобильного устройства. Наличие мобильного сайта важно для успешного веб-проекта, но наличие сайта, оптимизированного для мобильных устройств, не означает, что он автоматически обеспечивает хороший пользовательский опыт или оптимизирован для поисковых систем. Мы представляем наиболее распространенные ошибки и объясняем, как их избежать.

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

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

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

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

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

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

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

Признак ‘width=device-width’ сигнализирует о том, что ширина отображения должна быть адаптирована к устройству. Атрибут ‘initial-scale=1’ имеет соотношение 1:1 между CSS и независимыми от устройства пикселями и гарантирует, что масштаб не изменится при наклоне устройства.

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

75% от основного размера шрифта соответствует 12 пикселям CSS. CSS-класс ‘large’ соответствует 125% от основного размера шрифта или 20 CSS-пикселям. Несмотря на определение относительных размеров шрифтов, не стоит перегружать макет сайта слишком большим количеством шрифтов и слишком большим количеством размеров шрифтов. Это быстро перегружает страницу и делает навигацию неоправданно сложной. Вы должны стараться максимально упростить работу пользователей в мобильной сети.

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

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

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

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

Нет ничего более раздражающего, чем смотреть на пустую страницу, ожидая, пока она загрузится. Время загрузки известно как «убийца конверсии». По данным Kissmetrics, 40% людей покидают сайт, загрузка которого занимает более 3 секунд, а 1-секундная задержка отклика страницы может привести к снижению конверсии на 7%. Пользователи в целом становятся все более нетерпеливыми. Длительное время загрузки является проблемой не только для интернет-магазинов, любой сайт, который вы решили посетить, может быть прерван, например, при потере сигнала в метро или в пустыне. К распространенным ошибкам, связанным с производительностью, относятся:

• Несжатые изображения и/или слишком большие размеры изображений
• Слишком большое количество изображений и других мультимедийных элементов
• Неправильный код HTML и CSS
• Слишком много JavaScript
• Несжатый исходный код 
• Слишком большое количество HTTP-запросов
• Перенаправления
• Отсутствующее кэширование браузера
• Медленные серверы

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

• Сжимайте изображения: в нашем руководстве мы объяснили, насколько важно сжатие. Например, вы можете использовать бесплатные инструменты или специальные приложения на базе браузера. Вы подбираете подходящий размер изображения с помощью тега ‘picture tag’ и @media. Форматы файлов таковы: JPEG, GIF и PNG. Также вместо изображений можно использовать чистый CSS, шрифты IconFonts или SVG.

• Очищайте и сжимайте код HTML, CSS и JavaScript: для этого существуют специальные инструменты. Но даже такие простые действия, как удаление ненужных пробелов и перемещение файлов JavaScript в конец тела, могут сотворить чудеса. Здесь мы представляем инструменты и советы для CSS.

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

• Сократите количество HTTP-запросов за счет объединения ресурсов.

• Улучшите производительность системы управления контентом (CMS).

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

• Ускоренные мобильные страницы (AMP) также могут обеспечить более высокую производительность.

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

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

Во многих случаях пользователи видят интерстициалы перед нужным им контентом. Они могут убрать их, но иногда бывает трудно найти «x», поскольку он специально сделан маленьким или скрыт, чтобы пользователь не мог так просто закрыть рекламу. Лучше позаботиться о том, чтобы интерстиции не заполняли весь экран и оставляли контент свободным для чтения. Помимо ухудшения пользовательского восприятия, интерстициалы, заполненные изображениями, могут привести к проблемам с индексацией, по мнению Google. Именно по этой причине с января 2017 года сайты с интерстициалами, заполненными изображениями, постоянно подвергаются штрафным санкциям за снижение рейтинга. Google объявил об этом летом 2016 года в своем блоге. Следующий скриншот мобильного экрана базы данных фильмов и сериалов IMDb показывает, как не надо делать:

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

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

Вы можете использовать Google Search Console для изучения вашего сайта с помощью функции «Fetch as Google», чтобы увидеть, как он просматривается и отображается Googlebot. Вы также можете использовать этот инструмент для изучения robots-txt и посмотреть, какие элементы могут быть заблокированы.

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

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

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

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

• Не отзывчивость
• Пробелы в безопасности
• Flash Player должен быть установлен отдельно, чтобы иметь возможность воспроизводить контент.

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

Веб-сайт wechoosethemoon.org предлагает множество дополнительных возможностей: посетители могут вспоминать о высадке на Луну и следить за ней в цифровом формате. Сайт был запущен в 2009 году к 40^40-й годовщине высадки на Луну и полностью основан на Flash. Если вы посетите сайт через мобильный браузер и у вас не установлен Flash Player, вы увидите только вышеуказанную страницу, на которой вас попросят установить Flash Player 10. Пользователь не сможет продолжить работу без Flash, что может сильно расстроить.

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

Вы также можете использовать перенаправления, которые работают только для определенных устройств или выбранных мобильных операционных систем: проверьте, работают ли ваши перенаправления также для всех популярных систем (Android, iOS, Windows), и соответствующим образом настройте конфигурации вашего сервера. Вы также можете использовать Google Search Console, чтобы помочь вам выявить неправильную маршрутизацию.

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