Адаптация сайта под мобильные
Откройте свой сайт на мобильном и попробуйте оставить заказ или найти подробности об услуге. Если все прошло гладко, поздравляю – вашим сайтом можно гордиться пользоваться с мобильника. Если же пришлось прищуриваться, чтобы прочитать мелкий текст, или тыкать пальцем несколько раз, пытаясь попасть в нужную кнопку – значит, нужны доработки.
Хьюстон, у нас проблема
Самый простой способ проверить адаптацию сайта под мобильные устройства – открыть его на этих самых мобильных (смартфон, планшет). Явные признаки проблем:
Сайт или какие-то его части (картинки, таблицы) не помещаются целиком в экран:
Всё слишком мелкое, не получается с первого раза попасть пальцем в кнопку или ссылку:
Приходится прокручивать несколько экранов шапки (или фильтров), чтобы добраться до контента:
Всплывающие баннеры (более 50% экрана), либо слишком много рекламы:
Если смартфона под рукой нет или он не подключен к сети, можно воспользоваться онлайн-сервисами с обычного компьютера:
1.
Mobile Friendly от Google: https://search.google.com/test/mobile-friendly
Вбиваем адрес сайта, жмем «Проверить», видим результат:
2. Проверка мобильных страниц от Яндекса: https://webmaster.yandex.ru/site/tools/mobile-friendly/ (если ваш сайт уже добавлен в Яндекс.Вебмастер)
Выбираем адрес сайта, жмем «Проверить», видим результат:
3. Проверка в браузере в Инструментах разработчика
Открываем сайт в браузере и в меню (браузера) ищем пункт «Дополнительные инструменты» – «Инструменты разработчика». Либо жмем на клавиатуре F12. Если не сработало F12, жмем сочетание клавиш CTRL + Shift + I. Справа или внизу браузера нам откроется Панель разработчика, на ней жмем на иконку переключения на мобильные устройства и выбираем модель смартфона, на которой хотим проверить сайт:
Ключ на старт
Итак, проблема выявлена, теперь нужно определиться, каким мы хотим видеть свой сайт на мобильных устройствах.
Для разработки макета сайта для мобильных можно обратиться:
– К профессиональным дизайнерам. С ними сразу оговорите, для каких размеров экрана вам нужны макеты (например, 320 пикселей в ширину для смартфонов и 768 пикселей в ширину для планшетов) и для каких разделов сайта (например, главная страница, типовая внутренняя страница, список статей в блоге и статья блога). Что еще стоит проверять, принимая макет от дизайнера, читайте в статье.
– Сразу к верстальщикам. Некоторые верстальщики сами решают, куда и какие блоки сайта смещать, чтобы контент помещался в экран мобильника. Будьте готовы к тому, что результат может вас удивить – как приятно, так и не очень. Поэтому перед заказом попросите показать вам примеры работ, чтобы убедиться, что этот верстальщик адаптирует сайты адекватно.
– К собственным изобразительным способностям. Если у вас есть понимание, что вы хотите получить в итоге, и эта итоговая версия не требует отдельного дизайна (использует текущие решения), то вы можете на словах и стрелочках расписать ТЗ для верстальщика в том же ворде.
Поехали!
Приступаем к адаптации сайта под мобильные.
Шаг 1. Указываем тег Viewport
Нам нужно сообщить браузеру, что контент нашего сайта будет подстраиваться под ширину устройства (обычного компьютера, планшета или смартфона) и должен показываться в оригинальном масштабе. Для этого добавляем мета-тег viewport в секцию <head> в коде сайта (можно поставить перед тегом title):
<meta name=»viewport» content=»width=device-width, initial-scale=1″>
<title>Автосервис Mr Red: ремонт и обслуживание автомобилей в Красноярске</title>
Здесь:
width=device-width – говорит браузеру, что ширина его окна должна быть равна ширине устройства,
initial-scale=1 – сайт нужно показать в обычном масштабе (без увеличения или уменьшения).
Если не указать тег viewport, то браузер будет по умолчанию считать ширину контента равной стандартной ширине для десктопа (1024 пикселя) – и на телефоне с шириной 340 пикселей ваш сайт будет уменьшен в 3 раза.
Поэтому чтобы адаптивная верстка сработала, обязательно прописываем viewport с device-width.
Шаг 2. Обновляем стили сайта
Берем макеты сайта для мобильных устройств и добавляем в стили сайта дополнительные правила для отображения блоков на разной ширине экрана:
/*
… стандартные правила CSS …
например, выводим карточки товаров по 4 в ряд
*/
@media (max-width:768px) {
/*
… правила для планшетов …
выводим карточки товаров по 2 в ряд
*/
}
@media (max-width:320px) {
/*
… правила для смартфонов …
выводим карточки товаров по 1 в ряд
*/
}
Теперь браузер будет смотреть на ширину устройства и применять дополнительно нужный блок правил для отображения сайта.
Что чаще всего делают дополнительные стили:
– Уменьшают число блоков в одном ряду. Например, на обычном компьютере выводится 4 блока в ряд (карточки товаров).
Очевидно, что на экране телефона 4 карточки просто не поместятся в 1 ряд, так что здесь будем показывать по одной карточке.
– Скрывают какие-то блоки (совсем или под ссылку «Развернуть»). Например, у товара внушительное описание, которое на компьютере занимает почти целый экран. На телефоне такое описание может занять до 10 экранов. Их придется долго и нудно пролистывать, чтобы добраться до отзывов о товаре. Чтобы не нагружать пользователя, покажем на мобильных первый абзац описания, а остальной текст спрячем под ссылку «Показать все». Кто захочет прочитать полное описание, развернет его, в то время как все остальные будут избавлены от долгого пролистывания.
– Изменяют размеры элементов. Уменьшают обычно картинки, отступы между блоками текста и слишком крупные заголовки. В то же время стоит, наоборот, увеличить мелкий текст (иначе его будет невозможно прочитать на телефоне), размеры кнопок (чтобы можно было попасть в них пальцем, и не только детским) и отступы между интерактивными элементами (чтобы не промахиваться между рядом стоящими ссылками или чекбоксами).
– Добавляют горизонтальную прокрутку таблицам. Если в таблице много столбцов, то она не поместится на экране телефона. В таком случае стоит добавить правила, чтобы эти таблицы можно было прокручивать вправо-влево на узких экранах.
Шаг 3. Дорабатываем дизайн сайта
Для некоторых элементов сайта понадобится более серьезная проработка для показа на мобильных. Как правило, это шапка сайта, меню и фильтры в каталоге товаров.
– Шапка сайта и меню. Если просто переместить все строчки в шапке сайта друг под друга (чтобы поместилось в ширину), то на телефоне такая шапка займет весь экран. Переходя по страницам сайта, человек будет вынужден раз за разом пролистывать экран с этой шапкой. Добавьте сюда 5-6 пунктов меню – и пользователь никогда не долистает до контента.
Поэтому на мобильных нужно сократить число элементов в шапке (например, убрать кнопку заказа обратного звонка и форму для поиска), а меню спрятать под иконку «гамбургера».
Тогда шапка сайта будет занимать максимум четверть экрана телефона.
– Фильтры. В большинстве случаев фильтр по каталогу товаров располагают в левой части страницы. То есть в коде сайта сначала идет фильтр, а потом список товаров. Из-за этого на мобильных устройствах блок со списком товаров «переезжает» под блок с фильтром – и пользователь сайта рискует вообще не понять, что список товаров на этой странице есть (если фильтров много). Решается проблема просто – скрываем фильтр на мобильных под кнопку «Фильтр». Нажав ее, пользователь развернет необходимые фильтры. А по умолчанию список товаров будет виден сразу в первом экране.
Шаг 4. Сокращаем количество рекламы и всплывающих окон
Если у вас на сайте есть рекламные блоки, посмотрите, не стоит ли их чуть «подрезать», чтобы не занимать все место на отнюдь не бесконечных экранах смартфонов. Не обязательно убирать всю рекламу, достаточно будет лишь сократить ее количество. Например, оставить один баннер вместо четырех.
Аналогично и для всплывающих окон. Если спустя какое-то время после загрузки сайта «всплывает» окно с подпиской, спецпредложением и т.п. и при этом занимает более 50% экрана – либо уменьшите это окно до четверти экрана, либо вообще откажитесь от него. Во-первых, на телефонах такие окна раздражают пользователей гораздо сильнее, чем на обычных компьютерах. Во-вторых, поисковые системы могут понижать позиции сайтов с «назойливой» рекламой.
Шаг 5. Сокращаем количество контента
Если на сайте есть контент, который вы полностью скрываете от мобильных пользователей (не под кнопки «Подробнее», «Фильтр» и прочие, а совсем скрываете), то нет смысла вообще загружать этот контент на мобильное устройство – это дополнительный «вес» страницы, и он будет увеличивать драгоценное время загрузки сайта.
Пример: в статье на Хабре, открываемой с обычного компьютера, комментарии к статье загружаются сразу же в конце страницы – https://habr.com/company/mosigra/blog/427133/. А если открыть эту статью с мобильного, то страница будет содержать только текст статьи, без комментариев (и они не скрыты, они просто не выводятся для мобильных устройств).
Под текстом статьи стоит кнопка «Комментарии», и по ней уже можно попасть на отдельную страницу с комментариями к статье. Конкретно для Хабра, где статьи часто и весьма охотно комментируют, это может экономить 3-5 секунд от загрузки страницы.
Для разграничения контента программист может как написать свой модуль, так и воспользоваться одним из готовых решений по определению типа устройства (например, MobileDetect). Во многие CMS такая функция уже встроена по умолчанию (например, wp_is_mobile в WordPress).
Шаг 6. Проверяем все страницы
Если на сайте до 200 страниц – лучше действительно отсмотреть их все. Потому что 20 карточек товаров могут отображаться нормально, а в описание 21-й кто-нибудь вставил видеоролик и прописал у него строго ширину в 900 пикселей – и вот этот ролик уже не помещается в экран мобильного.
Впрочем, если у вас тысячи страниц, то отсматривать каждую – не такая уж полезная трата времени. Тогда стоит проверить только важные страницы (продающие страницы, страницы с высоким трафиком и т.
п.), и по 10-20 страниц в каждом разделе сайта (в каталоге товаров, в списке статей и т.д.).
Итог
Для сайта быть адаптивным под разные устройства – как для человека соблюдать правила этикета. Конечно, вы можете не говорить «здравствуйте» и «до свидания», «пожалуйста» и «спасибо», но тогда не обижайтесь, если желающих находиться рядом с вами будет становиться все меньше и меньше. Так же и с сайтом – если вы не уважаете своих пользователей и не готовы предоставить им удобный сайт на любых устройствах, не обижайтесь, если они тихо и спокойно уйдут к конкурентам.
Если стремление адаптировать свой сайт к мобильным есть, а умения нет – обращайтесь к нам, поможем с адаптивностью.
После настройки сайта под мобильные устройства не забудьте про техническую оптимизацию – для мобильных есть свои дополнительные нюансы, подробности расписали в этой статье.
Как правильно создать мобильную версию сайта
41564
| How-to | – Читать 10 минут |
Прочитать позже
Инструкцию одобрил
Tech Head of SEO в TRINET.
Group
Рамазан Миндубаев
Адаптация сайта под смартфоны и планшеты необходима, поскольку больше 48% пользователей (по данным Яндекс.Радара) пользуются интернетом именно с мобильных устройств. Для поисковых систем адаптивность сайта — один из важных факторов ранжирования.
Особенности адаптации сайта под мобильные устройства
Оптимизация сайта для мобильных устройств позволяет корректно отображать ресурс на различных разрешениях планшетов или смартфонов. Сайт необходимо адаптировать по следующим причинам:
- Согласно исследованиям, большинство посетителей заходят на сайты с мобильных устройств. В 2018 году их количество составило 52%.
- Удобство использования проекта на мобильных гаджетах повышает лояльность аудитории и уменьшает количество отказов.
- Адаптивная версия увеличивает количество потенциальных клиентов и повышает продажи.
- Для поисковых систем адаптивность к мобильным устройствам — один из факторов ранжирования.
Адаптивная/мобильная версия должна обладать следующими свойствами:
- удобство всех элементов навигации, чтобы посетители могли на них с легкостью нажимать вне зависимости от разрешения устройства;
- использование только вертикальной прокрутки, простая опция поиска, меню перехода на главную страницу;
- отдельная карта сайта (в случае реализации мобильной версии), содержащая все те же страницы, что и основной сайт;
- удобство при заполнении форм и простота совершения всех конверсионных действий;
- структурированность текста для быстрого восприятия — наличие заголовков, разделов, маркированных списков и визуального контента;
- высокая скорость загрузки мобильных страниц. Проверить скорость можно посредством Google PageSpeed Insights;
- отсутствие элементов, работающих на Flash-технологии, всплывающих окон и рекламы;
- адаптивность размера изображений и видеоматериалов — в случае с видео поддерживается YouTube;
- разметка телефонного номера <a href=»tel:+**********»>8 (***)***-**-**</a>, функция удобного набора номера с сайта при клике на контактный номер телефона;
- чтение текста на любом элементе без затруднений.
Варианты оптимизации под мобильные устройства
1. Адаптивный дизайн — оптимальное решение для небольших ресурсов, таких как лендинги, сайты-визитки, блоги, сайты услуг.
2. Отдельная мобильная версия на субдомене — наиболее трудоемкий вариант, подходящий для крупных порталов, социальных сетей и интернет-магазинов с широким ассортиментом. Или конструкторы мобильной версии ресурсов.
Рассмотрим эти варианты подробнее.
Адаптивный дизайн
Благодаря адаптивному дизайну ресурс будет удобен для использования на всех устройствах, сохраняя при этом сходный внешний вид с основной версией. Google рекомендует использовать именно такой вариант для адаптации проекта под переносные устройства.
Элементы ресурса при этом будут сдвигаться по вертикали в зависимости от разрешения девайса.
Некоторые крупные элементы сайта при адаптивном дизайне необходимо скрывать для мобильных устройств или же заменять их на более компактные.
Десктопный вариант:
Мобильный вариант:
Для настройки подойдут CSS-фреймворки — например, bootstrap, в котором можно оптимизировать сайт для мобильных устройств либо использовать медиа-запросы (CSS3 Media Queries).
Рассмотрим детальнее Bootstrap:
В данный популярный инструмент включены следующие компоненты:
- HTML и CSS-шаблоны;
- сетка;
- типографика;
- блоки навигации;
- веб-формы;
- кнопки;
- JavaScript-расширения.
При оптимизации сайта под телефон важно придерживаться инструкций Bootstrap. Краткий алгоритм действий:
- Подключим к проекту файлы CSS, а также при необходимости — jQuery и JavaScript.
- Проверим ресурс на соответствие последним стандартам веб-разработки: должен использоваться HTML5 и метатег viewport, предназначенный для контроля размера окна просмотра и масштаба страницы.
- При сложностях с такими программами как, например, Google Maps, нужно переопределить box-sizing: border-box для необходимого виджета.
- В код нужно добавить предопределенные классы Bootstrap Grid или использовать препроцессоры Sass для создания собственной разметки.
Конструктор мобильной версии сайта
Подобных сервисов — десятки. В данной статье мы рассмотрим Wirenode — простой в использовании конструктор мобильных сайтов, бесплатный для персонального использования. Позволяет создать мобильную версию блога на отдельном домене, при условии, что на ресурсе есть RSS-лента.
Тарифы Wirenode предусматривают бесплатное использование для создания одного сайта:
Пройдем регистрацию в сервисе:
После заполнения полей, выбора типа аккаунта и введения капчи нажмем «Create my account».
Инструмент предлагает создать новый моб. сайт при наличии на нем RSS-ленты. После ввода URL-адреса ресурса нажмем «Mobilize Blog»:
После этого укажем домен и перейдем к редактированию:
В сервисе доступен предварительный просмотр мобильного сайта:
Можно выбрать одну из трех моделей телефонов:
После редактирования в десктопный вариант нужно добавить виджет, информирующий о том, что доступна мобильная версия, которая находится на другом домене:
Мобильная версия для ресурсов WordPress
При оптимизации сайта для мобильных устройств в WordPress самым простым решением будет изменение темы на адаптивную либо установка плагина для мобильной версии. При использовании темы с адаптивным дизайном ресурс выглядит таким образом в полной версии:
А так — в мобильной:
В адаптивном варианте изображение меняет размер с учетом ширины экрана смартфона, меню открывается с помощью клика на значок в виде трех горизонтальных линий, блоки, расположенные в правой части десктопной версии, переносятся вниз.
Чтобы выбрать тему с адаптивным дизайном для собственного проекта, перейдем в подраздел «Темы» раздела «Внешний вид» и нажмем «Добавить новую»:
В фильтрах характеристик выберем «Адаптивный дизайн» и нажмем «Применить фильтр»:
Получим список тем с адаптивным дизайном, среди которых можно выбрать наиболее подходящую для собственного проекта:
Также для WordPress можно использовать следующие плагины:
1. AMP для WP — Ускоренные мобильные страницы
Google Accelerated Mobile Pages (AMP) — библиотека с открытым программным кодом, помогающая создавать быстро загружающиеся упрощенные версии страниц сайта, которые хорошо выглядят на смартфонах.
Принцип работы строится на том, что создается дубликат ресурса с использованием AMP HTML. При этом отключаются скрипты, которые замедляют скорость загрузки сайта, после чего средствами Google страницы сайта обрабатываются для наиболее быстрой загрузки.
Установим и активируем плагин, затем перейдем к его настройке — для этого зайдем в подраздел «Settings» раздела «AMP». Загрузим логотип и сохраним изменения, нажав «Save changes»:
Затем перейдем в раздел «Design» для работы над внешним видом мобильной версии:
Выберем тему оформления:
После выбора темы можно изменить цвета и шрифты в разделе «Global», настроить хэдер и футер, например, добавить кнопку звонка во вкладке «Header». В разделе «Social» можно добавить кнопки социальных сетей.
После завершения настройки активируем в разделе «Advance Settings» перенаправление на AMP-версию сайта для мобильных устройств:
После этого ресурс на портативных устройствах будет выглядеть таким образом:
2. WPtouch
Также в WordPress можно использовать плагин WPtouch. Перейдем в раздел «Плагины», выберем «Добавить новый», найдем WPtouch с помощью поиска и нажмем «Установить»:
После этого активируем плагин и перейдем к его настройке:
В плагине можно настроить тему:
Здесь можно отрегулировать цветовую схему сайта, добавить при необходимости иконку.
Доступен предварительный просмотр внесенных изменений в эмуляторе мобильного телефона:
После внесения изменений на реальном смартфоне сайт выглядит так:
В подвале отображаются кнопки переключения мобильной и компьютерной версий:
Помимо указанных, можно использовать следующие плагины:
- PageBuilder — конструктор для создания адаптивного дизайна:
- Mobile Smart — определяет, с какого устройства зашел посетитель, и показывает десктопную либо мобильную версию ресурса:
- WP Mobile Edition — позволяет создавать мобильную версию на субдомене:
Мобильная версия проекта на субдомене
В соответствие с рекомендациями поисковых систем, мобильную версию рекомендуется создавать на поддомене. При этом обычно используется единая база данных для родительского домена и субдомена. Посетитель автоматически перенаправляется на субдомен, если он зашел на ресурс с портативного устройства.
Мобильная версия имеет облегченный вес и упрощенный дизайн, однако на ней должны быть доступны все страницы, которые есть на основной версии. Также в мобильной версии должна быть возможность перейти на основную версию.
Согласно рекомендациям Google, чтобы поисковики не считали контент на мобильной версии дублированным, необходимо в код каждой страницы полной версии добавить:
<link rel="alternate" href="http://m.domen.ru/страница/" >
При этом в коде мобильной страницы устанавливается ссылка на каноническую версию:
<link rel="canonical" href="http://domen.ru/страница/" >
Полная версия интернет-магазина:
Адаптированный сайт на субдомене мобильной версии:
Проверка отображения ресурса на разных девайсах
Чтобы проверить, как выглядит сайт при различных разрешениях экрана, воспользуемся онлайн-инструментами, к примеру, Screenfly:
Инструмент позволяет выбрать нужный тип устройства — компьютер, планшет, смартфон или телевизор, а также указать разрешение его экрана:
Сайт, рассматриваемый в данном примере, не адаптирован под мобильные устройства:
Заключение
Адаптировать ресурс под портативные девайсы можно используя различные инструменты.
Подходящий вариант подбирают в зависимости от специфики проекта:
- Для большинства сайтов оптимально подойдет адаптивный дизайн, достаточно простой в реализации, однако требующий базовых знаний верстки мобильных сайтов.
- Можно использовать конструкторы мобильных сайтов, но в большинстве вариантов они будут платными, либо обладать определенными ограничениями.
- Для сайтов на WordPress проще всего получить адаптивную версию с помощью готовых шаблонов, либо плагинов.
- На крупных порталах часто используют поддомен для отдельной мобильной версии проекта.
«Список задач» — готовый to-do лист, который поможет вести учет
о выполнении работ по конкретному проекту. Инструмент содержит готовые шаблоны с обширным списком параметров по развитию проекта, к которым также можно добавлять собственные пункты.
| Начать работу со «Списком задач» |
Serpstat — набор инструментов для поискового маркетинга!
Находите ключевые фразы и площадки для обратных ссылок, анализируйте SEO-стратегии конкурентов, ежедневно отслеживайте позиции в выдаче, исправляйте SEO-ошибки и управляйте SEO-командами.
Набор инструментов для экономии времени на выполнение SEO-задач.
Получить бесплатный доступ на 7 дней
Мнение авторов гостевого поста может не совпадать с позицией редакции и специалистов компании Serpstat.
Оцените статью по 5-бальной шкале
4 из 5 на основе 10 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.
Рекомендуемые статьи
How-to
Анастасия Сотула
Как узнать ключевые слова конкурентов для Google
How-to
Анастасия Сотула
Как продвигать Landing page
How-to
Анастасия Сотула
▷ Какие страницы закрыть от индексации: запрет индексации отдельных страниц и сайта полностью
Кейсы, лайфхаки, исследования и полезные статьи
Не успеваешь следить за новостями? Не беда! Наш любимый редактор подберет материалы, которые точно помогут в работе.
Только полезные статьи, реальные кейсы и новости Serpstat раз в неделю. Присоединяйся к уютному комьюнити 🙂
Нажимая кнопку, ты соглашаешься с нашей политикой конфиденциальности.
Поделитесь статьей с вашими друзьями
Вы уверены?
Спасибо, мы сохранили ваши новые настройки рассылок.
Сообщить об ошибке
Отменить
Как сделать сайт удобным для мобильных устройств
Содержание
Мобильные телефоны стали неотъемлемой частью нашей жизни. В отчете Statista указано, что по состоянию на 2022 год в мире насчитывалось 90 005 6,64 млрд 90 006 пользователей смартфонов, а к 2026 году их число вырастет до 90 005 7,5 млрд 90 006 . Во втором квартале 2022 года на мобильные платформы приходится 59% всего веб-трафика, что составляет более половины мирового веб-трафика. Учитывая такое значительное использование мобильных устройств, дизайнеры и разработчики должны сосредоточиться на обеспечении безупречного UX веб-сайта на мобильных устройствах.
Следовательно, владельцы веб-сайтов должны задать себе следующие вопросы:
- Как сделать сайт удобным для мобильных устройств?
- Как обеспечить кроссбраузерность сайта?
- Как оптимизировать мобильный сайт для максимальной конверсии?
Эта статья отвечает на эти ключевые вопросы, описывая эффективные методы разработки веб-страниц, удобных для мобильных устройств. Имейте в виду, что каждое мобильное устройство имеет уникальный размер экрана и разрешение. Веб-сайт должен быть полностью адаптивным и совместимым с разными браузерами, чтобы обеспечить оптимальные возможности просмотра на нескольких устройствах. Это подводит нас к первому способу сделать веб-сайт удобным для мобильных устройств.
1. Внедрение адаптивного макета
Адаптивный макет позволяет веб-сайту масштабироваться в соответствии с устройством, используемым для его просмотра. Это позволяет веб-сайту адаптироваться к разным размерам экрана без каких-либо проблем с рендерингом.
Адаптивный веб-дизайн хорошо работает как для мобильных, так и для настольных платформ, поскольку веб-сайт соответствующим образом меняет свой внешний вид.
Наличие веб-сайта, адаптированного для мобильных устройств, повышает ценность веб-сайта для SEO, поскольку Google предпочитает индексировать и ранжировать веб-сайты, оптимизированные для мобильных устройств. Включение адаптивного макета помогает веб-сайтам занимать более высокие позиции в поиске Google.
Нужно проверить адаптацию сайта к мобильным устройствам?
- При разработке веб-сайта, удобного для мобильных устройств, попробуйте выполнить быстрый тест с помощью BrowserStack Responsive.
- Просто введите URL-адрес веб-сайта, и инструмент немедленно отобразит веб-сайт на ряде реальных устройств, таких как Samsung Note 10, iPhone X, iPad Pro и т. д.
- Тестировщики могут увидеть, как веб-сайт выглядит на разных устройствах, и начать соответствующую оптимизацию, чтобы сделать сайт удобным для мобильных устройств.
Средство проверки отзывчивости запускает адаптивные тесты на реальных комбинациях устройства и браузера. В результате пользователи получают точные результаты тестирования. Таким образом, обеспечивая инклюзивный опыт.
Попробуйте адаптивное тестирование BrowserStack
2. Оптимизируйте скорость веб-сайта
Скорость играет решающую роль в создании первого впечатления о любом веб-сайте. 47% посетителей покидают веб-сайт, если загрузка занимает более 2 секунд, тогда как даже 1-секундная задержка отклика страницы может снизить коэффициент конверсии на 7% .
Google считает высокую скорость положительным фактором ранжирования, поэтому веб-разработчики должны принять все необходимые меры для увеличения скорости сайта.
Чтобы оценить время загрузки веб-сайта, запустите тест скорости веб-сайта в BrowserStack SpeedLab. Введите URL-адрес и нажмите «Пуск». Этот бесплатный инструмент проверяет скорость веб-сайта на нескольких реальных комбинациях браузер-устройство и отображает оценку из 100 как для мобильных, так и для настольных платформ.
Вы получаете не только отчеты, но и полезную информацию, которая поможет сделать веб-сайт удобным для мобильных устройств.
Проверьте скорость вашего веб-сайта
3. Незаметная реализация всплывающих окон
Пользователям не очень приятно сталкиваться с внезапными всплывающими окнами при просмотре веб-контента, особенно для мобильных пользователей. Иногда метка X (чтобы закрыть всплывающее окно) даже не видна должным образом, что еще больше раздражает пользователей. Разработчики и дизайнеры должны убедиться, что если им нужно отображать рекламу, они делают это незаметно.
Нерелевантная реализация всплывающих окон — одна из самых распространенных ошибок веб-дизайна, которая превращает ваших потенциальных клиентов в разгневанных клиентов, тем самым снижая ваши шансы на мобильную конверсию. Несколько приемов тонкой реализации всплывающих окон:
- Реализуйте всплывающее окно только тогда, когда читатель прокручивает 70–80% веб-страницы вниз.
- Сочетайте дизайн всплывающих окон с дизайном, оптимизированным для мобильных устройств.
- Разработайте кнопки призыва к действию во всплывающем окне, чтобы они были четкими и действенными.
4. Включение метатега области просмотра
Включение метатега позволяет разработчикам управлять шириной и масштабированием области просмотра, чтобы размер веб-сайта был правильным на всех устройствах. Метатег viewport указывает браузеру изменить ширину веб-страницы в соответствии с размером экрана устройства, на котором она просматривается.
Используйте приведенный ниже фрагмент кода для определения метаэлемента на каждой веб-странице:
5. Наведите порядок в своем веб-дизайне
Веб-разработчики должны убедиться, что они не загромождают веб-сайт, предоставляя все функции на одной странице. Это создает путаницу, затрудняя пользователям навигацию по странице со слишком большим количеством элементов.
Предлагайте только самые важные функции заранее, поскольку именно их будут активно искать пользователи. Для беспрепятственного взаимодействия с пользователем отдайте предпочтение аккуратному минималистичному дизайну, который делает навигацию интуитивно понятной.
- Разработчики могут включить на веб-сайт один из основных элементов современного веб-дизайна — кнопку «Гамбургер».
- Мобильные пользователи могут открывать все меню одним щелчком мыши, если это реализовано.
- Это упрощает навигацию и повышает визуальную привлекательность.
Профессиональный совет: После этого рассмотрите возможность повторного запуска адаптивного теста, чтобы убедиться, что упрощенный дизайн веб-сайта делает его удобным для мобильных устройств.
6. Всегда тестируйте веб-сайт на реальных мобильных устройствах
Эффективный способ убедиться, что ваш веб-сайт обеспечивает оптимальное взаимодействие с пользователем, — это протестировать его на реальных мобильных устройствах.
- Тестирование на реальных устройствах позволяет обнаруживать и устранять любые проблемы или несоответствия, с которыми пользователь может столкнуться в реальных пользовательских условиях.
- Запустите каждый пользовательский сценарий на как можно большем количестве реальных комбинаций браузер-устройство-ОС, чтобы клиенты могли легко и эффективно работать в Интернете независимо от своего мобильного устройства.
Тестирование веб-сайтов на реальных устройствах iOS и Android может оказаться сложной задачей без доступа к комплексной тестовой инфраструктуре. В настоящее время не каждая организация может иметь мобильную испытательную лабораторию, поскольку это требует значительных инвестиций. Использование реального облака устройств часто является лучшей альтернативой, поскольку оно не требует обслуживания.
BrowserStack также включает функции для мобильных устройств, такие как тестирование геолокации, push-уведомления, имитация сети, тестирование местоположения и т.
д.
Попробуйте протестировать на реальных устройствах бесплатно
7. Внимательно обновляйте контент
Пока вы экспериментируете с мобильным веб-дизайном и CRO-контентом, весь веб-сайт может пострадать. Поскольку подход к дизайну, ориентированному на мобильные устройства, имеет приоритет, крайне важно создавать и обновлять мобильный контент вашего веб-сайта с точным подходом. Убедитесь, что контент читается на экранах мобильных устройств и хорошо ориентирован.
- Менеджеры по продуктам должны учитывать ограничения по размеру на небольших экранах, чтобы гарантировать, что на видном месте отображаются только важные элементы контента, и при необходимости проводится A/B-тестирование.
- Разработчики могут избежать этого, выбрав визуальное сравнительное тестирование, которое предотвратит появление ошибок веб-дизайна в рабочей среде.
8. Не используйте Flash
Flash замедляет работу вашего веб-сайта, влияет на поисковую оптимизацию и нарушает работу пользователей.
Flash может увеличить время загрузки страницы, а иногда он полностью несовместим с мобильными устройствами. Вместо этого рекомендуется использовать HTML5 и CSS, чтобы сделать ваш сайт более отзывчивым и удобным для мобильных устройств.
9. Сделать веб-сайт совместимым с обеими ориентациями
В отличие от настольных компьютеров, на которых контент отображается только в ландшафтном режиме, мобильные телефоны отображают экран как в альбомной, так и в портретной ориентации. Следовательно, вы должны убедиться, что веб-сайт загружается и работает нормально как в альбомном, так и в портретном режимах, без искажений пользовательского интерфейса, сбоев или растяжений. Вы можете проверить это, протестировав сайт в обоих режимах на реальных устройствах.
Протестируйте свой веб-сайт на реальных мобильных устройствах
В заключение
Разработка веб-сайта, оптимизированного для мобильных устройств, важна, но в то же время оптимизированный для мобильных устройств веб-сайт должен в достаточной степени обеспечивать безупречный пользовательский опыт на любом сочетании устройства, браузера и ОС.
Мобильные устройства значительно изменили то, как люди ежедневно используют Интернет. Эта тенденция будет усиливаться, и с каждым годом все больше людей продолжают выходить в Интернет в основном через мобильные устройства. Кроме того, поскольку ведущие поисковые системы, такие как Google, постоянно стремятся сделать Интернет ориентированным на мобильные устройства поисковым ландшафтом, наличие веб-сайта, удобного для мобильных устройств, должно предшествовать разработчикам и тестировщикам.
Адаптация устройства — Дорожная карта веб-приложений для мобильных устройств
Декабрь 2018 г.
Мобильные устройства не только сильно отличаются от традиционных компьютеров, но и имеют множество различий между собой по размеру экрана, разрешению, типу клавиатура, возможности записи мультимедиа и т. д. Пользовательский интерфейс должен быть адаптирован к устройству пользователя, чтобы обеспечить хорошее взаимодействие с пользователем и, учитывая неоднородность устройств, доступных на рынке, статическую адаптацию, когда ограниченное количество пользовательских интерфейсов, которые соответствуют основным классы устройств поддерживаются отдельно, что нецелесообразно.
Вместо этого веб-разработчикам необходимо создать адаптивных макетов , где пользовательский интерфейс автоматически подстраивается под устройство пользователя.
Хорошо развернутые технологии
CSS Media Queries определяет механизм, который позволяет адаптировать макет и поведение веб-страницы на основе некоторых характеристик устройства, в первую очередь на основе разрешения экрана.
Относительные области просмотра CSS-единицы vw , vh , vmin и vmax представляют процент от текущих размеров области просмотра и позволяют разработчикам создавать макеты, которые автоматически адаптируются к изменениям размеров области просмотра.
Группа сообщества адаптивных изображений (RICG) разработала расширение для HTML, известное как элемент picture , которое позволяет авторам определять, какое изображение загружать, в зависимости от возможностей устройства и/или других функций мультимедиа.
В качестве дополнительного подхода атрибут srcset , указанный WHATWG, а также опубликованный как расширение HTML, позволяет веб-разработчикам определять различные соотношения пикселей устройства для изображения, позволяя браузеру выбирать наилучший выбор для плотности пикселей. экрана.
SVG, который позволяет определять изображения, которые можно масштабировать вверх и вниз без потери качества, является еще одним важным инструментом для разработки веб-приложений, которые адаптируются к разрешению базового устройства.
| Feature | Specification / Group | Maturity | Current implementationsSelect browsers…
|
|---|---|---|---|
| CSS-based adaptation | Media Queries CSS Working Group | Shipped:  Источник: можно использовать. Доставка в Samsung Internet (мобильный). Источник: можно использовать. Поставляется в браузере UC (мобильный). Источник: можно использовать. | |
| длина окна просмотра в процентах в модуле значений и единиц CSS уровня 3 Рабочая группа CSS | Поставляется: | ||
| Адаптивные изображения | элемент изображения в HTML 5. 2 Рабочая группа веб-платформы | Поставляется:  Source: Can I use.»> Поставляется в Opera (настольный компьютер). Источник: можно использовать. Отправляется в браузере QQ (мобильный). Источник: можно использовать. Доставка в Samsung Internet (мобильный). Источник: можно использовать. Поставляется в браузере UC (мобильный). Источник: можно использовать. Экспериментальный: | |
| Атрибут srcset в HTML 5.2 Рабочая группа веб-платформы | Поставляется:  Source: Can I use.»> Отправляется в браузере QQ (мобильный). Источник: можно использовать. Доставка в Samsung Internet (мобильный). Источник: можно использовать. Поставляется в браузере UC (мобильный). Источник: можно использовать. | ||
| Масштабируемая векторная графика (SVG) 1.1 (Второе издание) Рабочая группа SVG | Поставляется: |
Source: Chrome Platform Status.»> Поставляется в Chrome (для настольных ПК, мобильных устройств). Источник: Статус платформы Chrome. 
«> Поставляется в Firefox (настольный, мобильный). Источник: можно использовать. Поставляется в Safari (настольный, мобильный). Источник: можно использовать. Отправка в браузере Baidu (мобильная версия). Источник: можно использовать. Поставляется в Opera (настольный компьютер). Источник: можно использовать. Отправляется в браузере QQ (мобильный). Источник: можно использовать. Отправлено в Samsung Internet (мобильный). Источник: можно использовать. Поставляется в браузере UC (мобильный). Источник: можно использовать. Разрабатываемые технологии
CSS Device Adaptation определяет набор директив CSS для определения размера, на котором должен основываться этот макет, относительно размера базового устройства, указывая, что было реализовано с помощью элемента , поэтому далеко.
Медиа-запросы уровня 4 добавляет доступность и тип указывающего устройства, а также возможность наведения курсора на элементы в список возможностей, которые можно использовать для адаптации макета и поведения веб-страницы. Более того, Media Queries Level 5 позволяет разработчикам задавать медиа-запросы, которые реагируют на окружающее освещение и переменные, определяемые сценарием, что упрощает выполнение более сложных правил адаптации в общей логике приложения.
Обычный подход к адаптации контента на мобильных устройствах заключается в том, чтобы сервер сразу доставлял контент, который подходит для устройства пользователя. Этот подход позволяет избежать отправки клиенту содержимого, которое ему не нужно, сохраняя пропускную способность сети, а также позволяет избежать выполнения логики адаптации на самом клиенте, сохраняя ЦП и память. Адаптация на стороне сервера раньше полагалась на то, что анализирует строку User-Agent и сопоставляет ее с базой данных устройств для извлечения соответствующих возможностей.
Этот механизм подвержен ошибкам и требует постоянного обслуживания базы данных устройств. Благодаря механизму HTTP Client Hints, разработанному рабочей группой IETF HTTP, клиенты и серверы теперь могут согласиться на обмен соответствующими возможностями для эффективной адаптации контента. Рабочая группа Web Performance начала работу над спецификацией памяти устройства, которая расширяет эти подсказки, чтобы отображать память, доступную на устройстве. Спецификация также определяет API для предоставления этой информации веб-приложению, работающему на клиенте.
API захвата мультимедиа и потоковой передачи предоставляет некоторую конкретную информацию о возможностях камеры и микрофонов, чтобы можно было использовать преимущества большого разнообразия устройств захвата мультимедиа, имеющихся на мобильных телефонах.
| Функция | Спецификация/Группа | Зрелость | Текущие реализацииВыберите браузеры…
|
|---|---|---|---|
| CSS-based adaptation | CSS Device Adaptation Module Level 1 CSS Working Group | Отправлено: Экспериментальный: | |
| Медиа-запросы уровня 4 Рабочая группа CSS | Поставляется: | ||
| Медиа-запросы Уровень 5 Рабочая группа CSS | На рассмотрении: | ||
| Адаптация на стороне сервера | Память устройства 1 W3C | Поставляется: мобильная версия sktop | |
| Возможности захвата мультимедиа | Возможности источника в захвате мультимедиа и потоках Рабочая группа WebRTC | Поставляется в Microsoft Edgede: | 8).
Source: Chrome Platform Status.»> Отправлено в Opera (настольный компьютер). Источник: Статус платформы Chrome. Доставка в Samsung Internet (мобильный). Источник: Данные о совместимости браузера MDN. 
Feature is behind a flag. Source: Can I use.»> Экспериментальный в браузере QQ (мобильный). Особенность находится за флагом. Источник: можно использовать. 
Support may be partial. Source: Can I use.»> Поставляется в Safari (настольный, мобильный). Поддержка может быть частичной. Источник: можно использовать. Отправка в браузере Baidu (мобильная версия). Поддержка может быть частичной. Источник: можно использовать. Поставляется в Opera (настольный компьютер). Поддержка может быть частичной. Источник: можно использовать. Доставка в Samsung Internet (мобильный). Поддержка может быть частичной. Источник: можно использовать. Поставляется в браузере UC (мобильный). Поддержка может быть частичной. Источник: можно использовать. 
Support may be partial. Source: Microsoft Edge Platform Status.»> На рассмотрении в Microsoft Edge (настольный компьютер). Поддержка может быть частичной. Источник: статус платформы Microsoft Edge. 
Источник: Статус платформы Chrome. Поставляется в Safari (настольный, мобильный). Источник: Статус платформы Chrome. Поставляется в Opera (настольный компьютер). Источник: Данные о совместимости браузера MDN. Поставляется в браузере UC (мобильный). Источник: можно использовать. 
Экспериментальный в браузере QQ (мобильный). Функция требует использования префикса. Источник: можно использовать. Разведочные работы
Для создания сложных адаптивных приложений, которые адаптируются к широкому спектру устройств и контекстов, разработчикам обычно требуется некоторый контроль над макетом отдельного компонента относительно размера его контейнера. Медиа-запросы позволяют разработчикам настраивать макет компонента только относительно размера области просмотра.
Запросы Element (также известные как Запросы контейнера ) исследует метод управления стилем на основе размера содержащего элемента.
Настройка размера текста для мобильных устройств CSS позволяет адаптировать текст к увеличенным частям страницы.
Большинство мобильных устройств имеют экранную клавиатуру для пользовательского ввода. Они также обычно позволяют пользователю увеличивать масштаб страницы. Обе эти функции сохраняют область просмотра макета (то, что веб-страница использует при компоновке своего пользовательского интерфейса), чтобы не загромождать экран позиция: фиксированные элементов. Visual Viewport API предоставляет разработчикам способ запрашивать и взаимодействовать со свойствами визуального окна просмотра (поле на странице, которое пользователь может видеть в данный момент), а также получать уведомления об изменении этих свойств.
| Функция | Спецификация/группа | Цели реализацииВыбор браузеров…
|
|---|---|---|
| CSS-based adaptation | Element Queries Web Platform Incubator Community Group | |
| CSS Mobile Модуль регулировки размера текста, уровень 1 Рабочая группа CSS | Поставляется: Экспериментальный: | |
| Адаптация на основе JS | Visual Viewport API Группа сообщества инкубатора веб-платформы | Поставляется: На рассмотрении: |
Source: Chrome Platform Status.»> Поставляется в Chrome (для настольных компьютеров, мобильных устройств). Источник: Статус платформы Chrome. Поставляется в Microsoft Edge (настольный компьютер). Источник: Статус платформы Chrome. Поставляется в Firefox (настольный компьютер). Источник: Статус платформы Chrome. Поставляется в Safari (настольный компьютер). Источник: Статус платформы Chrome. Поставляется в Opera (настольный компьютер). Источник: можно использовать. Доставка в Samsung Internet (мобильный). Источник: можно использовать. 
Source: Can I use.»> Поставляется в браузере UC (мобильный). Источник: можно использовать. 
Источник: Данные о совместимости браузера MDN. 