Для того чтобы определить, что лучше — адаптивный дизайн или мобильная версия сайта, сначала следует понять, для чего всё это необходимо.
По данным comscore.com, процент пользователей, просматривающих сайты с мобильных устройств, с каждым годом становится все больше:
Активная абонентская база мобильной передачи данных, мир, млн человек, 2007–2015 гг.
В связи с этим были разработаны новые алгоритмы для поисковых систем, а также введены дополнительные факторы ранжирования: теперь в поисковой выдаче учитывается то, насколько сайт является mobile-friendly (удобным для просмотра на мобильных устройствах). В Google алгоритм Mobile friendly был запущен 21 апреля 2015 года, в Яндексе — «Владивосток» 2 февраля 2016 года.
Десктопная версия сайта и адаптированная версия под мобильные устройства
Как поисковики определяют, комфортна ли страница сайта для просмотра с мобильных устройств:
на страницах должен быть контент, который не требует горизонтального скроллинга или масштабирования для просмотра;
на сайте не должно быть элементов, которые не работают на многих мобильных устройствах — Flash, Java-апплетов и Silverlight-плагинов;
тексты на страницах должны быть доступны для чтения без масштабирования;
ссылки должны быть на достаточном расстоянии друг от друга, чтобы на них можно было легко нажать.
Что самое главное, поисковики оценивают веб-сайты однозначно — либо mobile-friendly, либо нет.
С помощью инструмента Google PageSpeed Insights (https://developers.google.com/speed/pagespeed/) можно определить, насколько быстро загружаются страницы сайта, а также их удобство использования. Оценка PageSpeed может составлять от 0 до 100 баллов по показателям «Скорость загрузки страниц» и «Удобство для пользователей», например:
Результаты от 85 баллов и выше считаются хорошими.
Если страница сайта не удовлетворяет требованиям сервиса, выдается отчет в виде рекомендаций по устранению проблем, например:
Каждая рекомендация имеет индикатор приоритета, соответствующий ее важности:
Данный сервис можно использовать для начальной диагностики и выявления проблем на веб-сайте.
В каких случаях необходимо разрабатывать мобильную или адаптивную версию для сайтов?
Чтобы понять, стоит ли адаптировать сайт для «мобильной» аудитории, необходимо проанализировать его в системах веб-аналитики (Яндекс. Метрике или Google Analytics) по посещаемости в разрезе устройств, с которых пользователи заходят на сайт. В случае если более 15% аудитории используют смартфоны или планшеты, рекомендуется разработать адаптивную верстку или мобильную версию. Здесь важно учитывать и трафик сайта. Например, для сайтов с большим количеством посетителей (от 1 000 000 и выше) данная планка снижается, так как нельзя пренебрегать таким большим сегментом трафика сайта.
Мобильная версия сайта
Мобильная версия — отдельная версия или отдельный шаблон, адаптированный под отображение на мобильных устройствах. На ней могут отображаться не все блоки, которые есть на основной версии сайта.
«Особая примета» мобильной версии: при переходе на нее в адресной строке браузера меняется URL — к нему добавляется префикс «m.», например: m.example.ru.
Вид на мониторе компьютера и на мобильном устройстве: мобильная версия отличается от основной
Пример сайта с адаптированной мобильной версией: http://www.
lamoda.ru/ (m.lamoda.ru).
Основные преимущества мобильной версии сайта
Малый вес и, как следствие, высокая скорость загрузки. Это существенно для пользователей, у которых низкая скорость доступа в интернет (GPRS или слабый 3G).
Наличие у пользователя выбора, какую именно версию просматривать (мобильную или основную).
Соответствие требованиям поисковых систем к удобству просмотра сайта на мобильных устройствах.
Недостатки мобильной версии
Если необходимо внести изменения на сайт, их придется вносить и на обычную версию сайта, и на мобильную, т. е. объем работ увеличивается в 2 раза.
При ее разработке зачастую приходится отказываться от части контента.
Так как мобильная и основная версия сайта находятся на разных доменах, она не улучшает поведенческие факторы основного домена, т. е. это будет минусом для SEO-оптимизации.
Адаптивная верстка для мобильных устройств
Адаптивная версия сайта — это специальный дизайн веб-страниц, при котором элементы сайта меняют свой размер и расположение при разных разрешениях дисплея. Сайт автоматически адаптируется под размеры устройства, на котором он открыт, будь то монитор ПК, смартфон или планшет. Благодаря такому типу верстки сайт будет удобно и понятно отображаться на различных устройствах. С применением технологий адаптивного дизайна функциональность сайта нисколько не страдает.
Вид на мониторе компьютера и на мобильном устройстве — адаптивная версия отличается от основной
Пример сайта с адаптивной версией: http://www.mvideo.ru/.
Преимущества адаптивного дизайна для мобильных устройств
Один URL для всего контента.
Гибкий интерфейс — можно настроить комфортное отображение сайта для любой ширины экрана.
Адаптивный дизайн соответствует требованиям поисковиков к удобству просмотра сайта на мобильных устройствах.
Если у сайта есть адаптивная версия, то поведенческие факторы становятся лучше на мобильных устройствах, а от этого улучшаются общие показатели сайта. Для ранжирования в поисковой выдаче это будет большим плюсом.
Недостатки адаптивного дизайна для мобильных устройств
Необходимость создания отдельных макетов страниц сайта под каждое разрешение дисплея.
Адаптивную версию, в отличие от мобильной, нельзя переключить в обычный режим. Т. е. у пользователя не остается выбора отображения сайта. Недостаток актуален, если в адаптивной версии имеются ошибки — например, некорректно отображаются элементы.
Сложность добавления нового шаблона страниц, т. к. их нужно будет настраивать для корректного отображения на адаптивной версии. Если добавлять информацию на уже имеющиеся шаблоны страниц, то никаких проблем с отображением не будет.
Что же лучше: адаптивная вёрстка для мобильных устройств или мобильная версия сайта?
Лучшим решением для сайта является использование адаптивной вёрстки под мобильные устройства. Несмотря на ряд недостатков, сайт с адаптивной версткой более функционален. Также наличие шаблонов страниц подразумевает простоту добавления контента на сайт, в отличие от мобильной версии, в которой работы по внесению контента дублируются, так как фактически существует два разных сайта. Большим плюсом является тот факт, что адаптивная версия улучшает поведенческие факторы основного сайта. Это полезно с точки зрения продвижения и юзабилити. Исходя из этого, свой выбор мы рекомендуем сделать в пользу адаптивной верстки.
Полезно
1
Kак настроить адаптивность? | База ответов Платформы LP
Содержание:
1. Адаптация — что это такое? 2. Глобальная адаптация страницы 3. Адаптация секций 4. Адаптация виджетов: 4.1 Через настройку стилей 4.2 Через настройки виджета
5. Часто используемые настройки адаптивности 6. Как скрыть виджет или секцию от конкретного устройства? 7. Как детально настроить отображение контента на разных устройствах? 8. Мобильное меню (меню «гамбургер») 9. Как настроить фон под мобильные экраны?
1. Адаптация
Адаптация – это автоматическое изменение содержимого страницы для улучшения ее читабельности на разных устройствах. Большое количество посетителей заходят на вашу страницу с различных устройств: с компьютеров, небольших ноутбуков, планшетов и мобильных телефонов. Адаптация создает возможность удобно просматривать контент страницы с любого устройства, даже с небольшого экрана телефона. На Платформе есть две возможности для настройки адаптивности:
Глобальная адаптация страницы. Через глобальные настройки, мы можем указать, под какие устройства будет адаптироваться страница. Подробно разберем это в пункте «Глобальная адаптация страницы»
Настройки адаптивности у определенных виджетов и секций. В этих настройках мы адаптируем нужные виджеты и секции под конкретные устройства. Делаем мы это для того, чтобы весь контент на странице корректно отображался на любом устройстве. Более подробно об этом в пунктах «Адаптация секций» и «Адаптация виджетов»
2. Глобальная адаптация страницы
Настройки глобальной адаптации находятся на верхней панели редактора, по центру:
Нажав на иконку одного из устройств, контент в редакторе выстроиться так, как будет отображаться страница на этом устройстве. Тем самым, вы сможете оценить, насколько корректно страница отображается на выбранном устройстве, и внести правки, если понадобится. На примере ниже проверим отображение страницы на широкоформатных экранах и на мобильных телефонах.
Как мы видим на примере выше, контент в мобильной версии подстроился под примерный размер мобильного телефона. Если вы зайдете на страницу с мобильного, то вы увидите только эту часть страницы:
При формировании каждой секции страницы, желательно проверять её вид, переходя на разные адаптации, чтобы вовремя подкорректировать отображение.
Обратите внимание на то, что адаптивность зависит не от вида устройства, а от ширины экрана. У каждой адаптации есть минимальная ширина экрана, начиная с которой, страница будет подстраиваться под эту адаптацию. Значения по умолчанию:
Широкие экраны– 1200px;
Ноутбуки– 992px;
Планшеты– 768px;
Мобильные телефоны– 320px.
Например, если посетитель зашел на страницу с устройства, у которого ширина экрана 900px (пикселей) — страница откроется в формате планшета, т. к. ширина экрана больше 768px (что позволяет открыть версию для планшета) но меньше 992px (что не позволяет открыть версию для ноутбука, т.к. ширины не хватает до минимального значения). Чтобы посмотреть, какое у вас сейчас установлено минимальное значение ширины экрана, для каждого из устройств, нажмите на стрелочку вниз, возле иконок адаптации:
На иконках каждого устройства будет отображаться минимальная ширина экрана, начиная с которой, страница адаптируется под это устройство.
Но минимальное значение адаптации можно изменить. Для этого нажмите на числа, которые расположены поверх иконки устройства, и укажите желаемую минимальную ширину. Чтобы вернуть значение по умолчанию — нажмите на иконку ↻ она отображается сверху устройства, если было изменено значение по умолчанию. Разберем на примере:
Чтобы отключить адаптацию под определенное устройство — нажмите на стрелочку возле списка адаптаций и на иконку устройства, которое хотите отключить. Отключенные адаптации не подсвечиваются, а их иконки не отображаются в списке адаптаций:
Что будет отображаться у посетителей страницы с планшета и ноутбука, если отключить адаптацию под эти устройства? Откроется адаптация под ближайшее наименьшее устройство. Поскольку мы отключили адаптацию под планшет и ноутбук — остается только мобильная и широкоформатная версия. В таком случае, планшеты и ноутбуки тоже откроют мобильную версию, поскольку это ближайшее наименьшее устройство.
Если отключить мобильную и планшетную версию, то все устройства будут открывать только версию ноутбука или широкоформатную. То есть мобильные телефоны и планшеты откроют версию ноутбука.
❗Важно:Для корректной работы адаптивности мы рекомендуем оставлять минимум два устройства.
На Платформе можно просмотреть, как страница будет отображаться на разных устройствах. Для этого используем редактор страницы и предпросмотр:
В редакторе
Этот пример мы уже рассмотрели выше. Достаточно нажать на иконку устройства, чтобы страница сформировалась так, как будет отображаться на этом устройстве.
❗Обратите внимание, что если включить на секции функцию «Растянуть по ширине экрана», то в редакторе, при переходе между устройствами, контент в секции будет оставаться на месте и не будет подстраиваться под экран, как показано на примере выше.
Но это только в редакторе. В предпросмотре и на опубликованной странице, если зайти на нее по ссылке, контент также будет адаптироваться, как на примере ранее.
В предпросмотре
Мы можем зайти в предпросмотр страницы, и также, как и в редакторе, нажать на иконку нужного устройства. Страница адаптируется под это устройство внутри предпросмотра.
3. Адаптация секций
Помимо глобальной адаптации, которая применяется ко всей странице, можно также настроить адаптивность для отдельных секций и виджетов.
В настройках стилей секции (иконка капельки) мы имеем общие настройки адаптации, которые одинаковы на всех секциях. Для этого зайдите в настройки стилей секции и нажмите на иконку устройства, для которого хотите ее адаптировать:
Здесь мы имеем следующие настройки:
Скрывать отображение секции на определенном устройстве
Изменить отступ сверху или снизу
Для примера, на скриншоте ниже, изменим у секции отступ сверху для мобильных телефонов:
При таких настройках, у этой секции будет отступ сверху 5px (стандартный) для всех устройств, кроме мобильного, поскольку для мобильного мы изменили значение отступа сверху, на 25px.
Также мы можем скрыть отображение этой секции для конкретного устройства. Более подробно мы разберем эту функцию в разделе «Как скрыть виджет или секцию от конкретного устройства?»
4. Адаптация виджетов
Адаптивная настройка виджета позволяет менять отображение содержимого самого виджета, в зависимости от того, с какого устройства посетитель зашел на страницу. Есть 2 вида настроек адаптивности виджета и находятся они в разных местах. Рассмотрим оба.
4.1 Через настройку стилей виджета
Как и на секциях, в настройках стилей виджета (иконка капельки) мы имеем общие настройки адаптации, которые одинаковы на всех виджетах. Для этого зайдите в настройки стилей виджета и нажмите на иконку устройства, для которого хотите адаптировать виджет:
Здесь мы имеем следующие настройки:
Скрывать отображение виджета на определенном устройстве
Изменить отступ сверху, снизу, слева, справа
Функции добавления отступа и скрытие виджета работают по тому же принципу, что и в настройках секции. Подробно разобрали это в пункте «Адаптация секций»
4.2 Через настройки виджета
В настройках виджета (иконка гаечного ключа) находятся настройки адаптации, которые меняют отображение содержимого виджета. Для этого зайдите в настройки виджета и нажмите на иконку устройства, для которого хотите адаптировать виджет:
В этих настройках у разных виджетов могут быть разные функции. Например, в виджете текста, можно сделать шрифт меньшего размера, если посетитель зашел с мобильного, а у виджета кнопки изменить ее положение.
Для примера, на скриншоте ниже, у виджета текста изменим размер шрифта для мобильных:
При таких настройках, на мобильных телефонах размер текста у этого виджета будет на 40% меньше, чем на других устройствах. Если мы установим этот ползунок на 100% — размер текста на мобильных будет такой же, как и на других устройствах.
5. Часто используемые настройки адаптивности
Далее, разберем настройки адаптации некоторых виджетов, которые могут быть особо полезными.
Виджет «Колонки»
Стандартно на мобильных устройствах колонки будут расположены по вертикали, а на других устройствах будут расположены по горизонтали. Включить и выключить отображение колонок по вертикали на мобильных устройствах можно в настройках виджета (гаечный ключ) → нажать на иконку мобильного → включить или отключить функцию «Выстраивать колонки в ряд». Эту функцию также можно активировать или деактивировать для планшетов.
На примере ниже, посмотрим как колонки отображаются по умолчанию, после чего отключим выравнивание в ряд, чтобы они стали отображаться по горизонтали, а не по вертикали.
Виджет «Картинка»
В виджете «Картинка» можно задать особый размер картинки для мобильных устройств. Например, если на мобильных картинка получается слишком большой, но если сделать ее меньше, на других устройствах станет слишком маленькой — можно воспользоваться этой функцией, чтобы уменьшить ее только для мобильных, а для остальных устройств оставить прежнего размера. Для изменения размера картинки для мобильных, проделаем следующее:
Заходим в настройки виджета (гаечный ключ)
Выбираем тип картинки «Обычная». Обратите внимание, что только для этого типа можно задать отдельный размер для мобильных.
Включаем функцию «Особый размер для телефонов»
Настраиваем размер картинки для мобильных
Запись проделанных действий и результат:
Виджет «Текст»
По умолчанию, в настройках виджета (гаечный ключ) установлено выравнивание текста по центру только на мобильных устройствах. На остальных устройствах (Планшеты, Ноутбуки, Широкие экраны) текст выравнивается по левому краю. Данную функцию можно выключить или включить не только для мобильных, но и для планшетов:
Также можно изменить размер текста для разных видов устройств. Мы уже разбирали эту функцию выше, теперь рассмотрим на примере:
Отступы у виджетов и секций
Настраивая отступы для широких экранов и ноутбуков, не стоит забывать об их настройке и на мобильных устройствах, так как они могут изменить отображение контента. Например, если вы укажите большой отступ слева, то на мобильных он тоже добавится. Но, поскольку на мобильных ширина экрана не большая — лишний отступ может слишком сильно сместить контент. Если отображение всё-таки изменилось, можно исправить это настроив отступы только для определенного устройства.
Виджет «Кнопка»
Кнопке можно задать «Особое положение для телефонов». Данная настройка меняет выравнивание кнопки только на телефоне: слева, по центру, справа, а также можно растянуть по ширине. На примере ниже сделаем так, чтобы на мобильных кнопка была слева, а на остальных устройствах — справа.
6. Как скрыть виджет или секцию от конкретного устройства?
Можно скрыть виджеты и секции, которые не должны отображаться на определенном устройстве.
Скрываем виджет:
Скрываем секцию:
Если скрыть секцию или виджет для определенного устройства, то в редакторе они тоже не будут отображаться для этого устройства(при просмотре адаптации под это устройство). Например, если мы скрыли виджет для мобильных и перешли в мобильный формат редактора, то скрытый виджет отобразится так:
Скрытая секция так:
Чтобы содержимое скрытого виджета или секции снова начали отображаться в редакторе — перейдите в просмотр того устройства, от которого они не скрыты, или отключите скрытие. Например, если виджет скрыт на мобильных — его содержимое будет отображаться на всех форматах в редакторе, кроме мобильного. На примере ниже, проделаем следующие действия:
Скроем для мобильных виджет картинки и одну секцию
Перейдем в просмотр разных версий страницы в редакторе, и убедимся, что секция и виджет скрыты только для мобильных.
❗ Информация, что виджет или секция скрыты на конкретном устройстве (в виде текста), отображается только в редакторе. В предпросмотре или на опубликованной странице, если зайти на нее по ссылке, этот текст отображаться не будет.
7. Как детально настроить отображение контента на разных устройствах?
Выше мы разобрали, как настроить секцию или виджет под определенное устройство. Но, что делать, если нужного функционала в настройках адаптации нет? Например, если мы хотим задать разный фон для секции на мобильных и на широкоформатных экранах. Проделаем следующие действия:
1. Создадим копию секции, у которой хотим настроить разный фон для некоторых устройств. Если возникли трудности, скопировать секцию можно по нашей инструкции: «Копирование, перемещение и удаление секции»
2. Зайдем в настройки секции, которую хотим показывать на всех устройствах кроме мобильных, и скроем ее от мобильных:
Копию секции, которую хотим показывать только на мобильных — наоборот, скроем от всех устройств, кроме мобильного. Подробнее скрытие секций мы рассматривали в прошлом разделе: «Как скрыть виджет или секцию от конкретного устройства?»
3. Зайдем в формат мобильной версии страницы и настроим другой фон для нашей мобильной секции (той, которая отображается только на мобильном).
В итоге, у нас получится 2 секции с разными фонами. Первая секция будет отображаться на широкоформатном экране, ноутбуке и планшете, но не будет отображаться на мобильных, т.к. будет скрыта от этого устройства. Вторая секция будет отображаться только на мобильном, т.к. от других устройств будет скрыта.
Проделаем все перечисленные действия на записи:
Таким способом можно настроить отдельные секции, которые будут отображаться на двух или на всех устройствах по разному. Тоже самое можно сделать и для виджетов, используя тот же метод.
❗Помимо настроек отдельных секций, для мобильных можно даже создать отдельную страницу. Все посетители, которые зашли на вашу страницу с мобильного, будут автоматически перенаправлены на эту отдельную страницу. Сделать это можно с помощью следующей инструкции (пункт 2): «Kак сделать мобильную версию для страницы?»
8. Мобильное меню
Виджет «Мобильное меню» превратит ваше меню в адаптивную версию, которая будет хорошо смотреться и функционировать на мобильных устройствах. Этот виджет позволяет посетителю скрыть кнопки меню или раскрыть их, поэтому меню не занимает лишнего места на мобильном экране. Раскрываются кнопки меню по нажатию на эту иконку:
Скрываются по нажатию на крестик (если меню уже открыто):
При этом, на других версиях страницы (широкоформатный, ноутбук, планшет) меню останется в обычном формате, без кнопки открытия и скрытия. Рассмотрим на примере:
Более подробно о мобильном меню в нашей инструкции: «Как использовать мобильное меню»
9. Как настроить фон под мобильные экраны?
Открыв в редакторе просмотр мобильной версии страницы, мы видим, что ширина секции обрезается, и контент выстраивается в той области, которая будет отображаться на мобильном:
Фон на мобильных, также как и контент, будет отображаться только в этой области. Для примера, добавим на фон секции картинку, на которой будет 3 полосы: красная, зеленая, голубая. На широкоформатных экранах мы видим все 3 полосы, и контент вмещается полностью по ширине фона:
Далее, переходим в мобильную версию страницы, и проверяем, в какой области фона отображается контент:
Мы видим, что контент отображается только в зеленой области, а остальные полосы не помещаются в ширину мобильного экрана. Это значит, что если посетитель зайдет на страницу с мобильного — контент у него будет отображаться только на зеленом фоне, и другие полосы не будет видно.
Если вам обязательно нужно, чтобы какая-то часть картинки отображалась в области мобильной адаптации — попробуйте уменьшить картинку по ширине, через любой графический редактор и загрузить ее повторно в фон. Для изменения размера картинки, можно воспользоваться онлайн сервисами. Например, этим. ❗ Также, не забывайте проверять разные положения фона, чтобы проще было найти подходящий формат:
В данном случае, конкретных рекомендаций по размеру и положению фона дать сложно, т.к. все зависит от того, какую область фона вы хотите вместить в мобильный экран. Попробуйте поэкспериментировать с разными размерами изображения, и обязательно найдете подходящий.
Взяв картинку с тремя полосами, и указав ей ширину 320px, мы получили желаемый результат. Все 3 полосы видны в мобильном формате:
Чтобы изменение фона в мобильной версии не затронули фон на широкоформатной, и других версиях страницы — настройте секцию, которая будет отображаться только на мобильном, с помощью функции, которую мы разбирали выше: «Как детально настроить отображение контента на разных устройствах?»
Мы ознакомились с основными функциями для настройки адаптивности 👍
Адаптивный сайт — способ не терять клиентов
Или как получать больше мобильных пользователей и остаться конкурентным.
Необходимость создания адаптивного веб-сайта обусловлена тем, что количество гаджетов растет и люди проверяют почту и совершают покупки онлайн на смартфоне, планшете или ноутбуке, в любое время и в любом месте.
Согласно исследованию GfK Russia, за 2017 аудитория мобильного интернета выросла на 20%. 13,2% российских юзеров пользуются только интернетом на гаджетах.
Мобильными устройствами считаются смартфоны и планшеты, ноутбуки и телевизоры с доступом к интернету. Таких пользователей, без сомнений, считают значимой частью аудитории.
Данные Mediascope за 2017 год указывают на то, что 54% пользователей выходят в сеть хотя бы 1 раз в 30 дней через гаджеты, а 16% населения России — только с мобильных устройств.
Адаптивность, что это?
Адаптивность — точный и корректный способ отображения страниц веб-ресурса на гаджетах, подключенных к интернету. Подобный дизайн динамически подстраивается под заданные параметры и размеры окна браузера.
Гибкие технологии не требуют создания отдельных макетов для разных видов гаджетов. Один макет охватывает всю аудиторию и работает на всех устройствах, не только на смартфоне и планшете, но и на ноутбуке и телевизоре.
Технологии основаны на автоматическом определении размеров экрана и типа устройства. Применение гибких технологий отображает подвижную структуру и элементы страниц, адаптивные изображения, а также позволяет сократить содержимое страницы и изменить размер шрифта.
Возникновению и развитию поспособствовали рекомендации Google и Яндекс. Весной 2015 года, поисковик Google пустил в ход обновленный алгоритм поиска, а в феврале 2016 года, Яндекс начал учитывать оптимизацию страниц при ранжировании.
Адаптивные веб-сайты позволяют юзеру задействовать специфические функции и дополнительные инструменты, которые нужны и доступны только на гаджетах, например — GPS, навигация, звонок в один клик, гироскоп и т.п.
Подобная версия воспринимается как приложение, пользователю не нужно расширять отдельные области страниц, просмотр с любого устройства будет простым и удобным, с использованием иконок, кнопок, изображений и других элементов страниц.
Преимущества и недостатки адаптивности
Главное преимущество — вовлечение и поддержание интереса у мобильных клиентов, 46% российских юзеров заходят в сеть со смартфонов.
Плюсы:
Лучшая видимость в поисковых системах Яндекс и Google.
Увеличение конверсии с мобильных устройств.
Использование специфических функционала.
Повышение лояльности клиентов.
Один вариант под все гаджеты.
Увеличение конкурентоспособности.
Охват целевой аудитории.
Сокращение издержек на поддержку.
Использование вместо отдельного приложения интернет-магазина.
Повышение эффективности SMM.
Продвинутый e-mail-маркетинг.
Улучшенная seo-оптимизация, отсутствие дублирующихся URL-адресов.
Проведение дополнительных и персонализированных рекламных кампаний.
Удобство разработки.
В марте 2015 года, Яндекс.Директ предоставил возможность управлять мобильным трафиком. Появился доступ к настройке ставок для показов на гаджетах.
Ключевой минус — расходы на разработку и запуск превышают стоимость разработки без адаптации.
Некоторые недостатки:
Нет возможности отобразить полный сайт на мобильном устройстве.
Разработка и верстка дополнительных, адаптивных состояний макетов.
Цена за адаптивный сайт
Разработка адаптивной версии составляет 20%-40% бюджета. Что касается внедрения адаптивной верстки в шаблоны CMS-системы, стоимость может незначительно отличаться от обычного внедрения. В стоимость разработки входит:
Проектирование и разработка адаптивного сайта.
Разработка и верстка адаптивных макетов.
Тестирование на различных устройствах.
Имеется возможность адаптации только ключевых страниц. Выявление и проработка только узких мест, где наиболее высокий процент отказа при просмотре с гаджетов.
Примеры адаптивных сайтов
Интернет-магазин М. Видео.Автомобильный производитель Toyota.Сеть ресторанов с доставкой PizzaHut.
Альтернативы адаптивному сайту
Существует несколько альтернатив: мобильная версия, нативное приложение, а также динамический показ.
Нативное приложение
Нативное приложение требует установки, с собственным ПО. Такие приложения обладают некоторыми преимуществами, например push-уведомления и высокая производительность, но установка приложения оказывается препятствием. Что касается стоимости, создание нативного приложения не сопоставимо по стоимости с разработкой адаптивной версии, подобное приложение сложно и дорого продвинуть в App Store и Google Market.
Нативное приложение не имеет никаких преимуществ для поисковой seo-оптимизации. Кроме того, требует постоянной и отдельной поддержки, а цена разработки будет выше стоимости адаптивной версии.
Мобильная версия
Ориентирована на любителей смартфонов и планшетов. Представляет собой урезанный вариант — сайт работает только с набором элементов и функционалом, который необходим пользователям. Подобная версия значительно упрощена по сравнению с обычной, десктопной.
Мобильная версия не предоставляет ненужного функционала. Кроме того, в отличие от адаптивного сайта, имеется возможность перейти на полный сайт. По трудозатратам, разработку можно сопоставить с адаптивной версией, но она требует больше затрат при последующем развитии и поддержке.
Так же есть минусы в поисковой оптимизации. В индексацию включаются страницы с дублированным контентом, но с разными URL-адресами. К тому же, неприятным фактором является то, что необходимо запоминать еще один адрес сайта.
Динамический показ
При динамическом показе для разных гаджетов используются разные варианты HTML, но один URL-адрес. Есть вероятность, что робот поисковых систем может ранжировать данную конфигурацию хуже адаптированных сайтов.
Резюме
Гаджеты завоевывают мир, размер экранов постоянно видоизменяется. Число мобильных юзеров превышает число десктоп-пользователей.
Интернет на мобильном устройстве используется для онлайн-шопинга, работы с электронной почтой и поисковиками.
Адаптивный сайт — отличная возможность доносить информацию до пользователей, вне зависимости от того, где они находятся.
Обновленный функционал доступен только юзерам гаджетов, например — звонок в одно нажатие или навигационные сервисы.
Один URL отлично повлияет на seo-оптимизацию.
Цена разработки адаптивного сайта не значительно отличается от стоимости разработки обычного. Адаптивный сайт работает на всех видах устройств.
Возможность обойти конкурентов и завоевать внимание новой аудитории.
Улучшенные решения для продвижения.
Привлечение новых покупателей и удержание внимания постоянной аудитории.
Материалы и инструменты для создания адаптивного сайта
PageSpeed Insight — инструмент, который поможет увеличить скорость загрузки страниц на всех устройствах.
Mobile-Friendly Test — сервис поможет вам выяснить, насколько удобно просматривать страницы вашего сайта на мобильных гаджетах.
Search Console — сервис от поисковой системы Google, который поможет вам отследить и проанализировать основные показатели сайта, а также поможет разобраться с трудностями и проблемами с отображением сайта.
Рекомендации по созданию сайтов для мобильных устройств от Яндекс.
Рекомендации по SEO для мобильных сайтов от Google.
Проверяйте отображение сайта или аккаунта везде
Возможно, вы знаете, что любой сайт при создании проверяется на то, как он отображается в разных браузерах (Хром, Мозилла, Фокс и тп). Более «продвинутые» не забывают еще проверить отображение в разных ОС — Виндах и Маке. Еще у сайта в наши дни обязательно есть мобильная версия, которую тоже должны проверить на отображение на разных устройствах с разной диагональю и ОС. Напоминаю, что всё это делается ДО запуска сайта и уж тем более ДО начала рекламной кампании. А теперь главный совет от прожженного маркетолога ))))
Ни один разработчик сайта и ни один сеошник и ни один рекламщик и прочие не скажут вам самого главного — сайт надо проверять постоянно. Во-первых, при размещении любой новой информации — от картинок и текстов до логотипа и иконок. Любая верстка может поплыть, если вы добавили на сайт что-то, что не соответствует заложенным габаритам. А узнать эти габариты вы вряд ли сможете так сразу, если вы не верстали сами. Во-вторых, текст также может не влезть в формат. А еще с текстами есть сразу пара подстав. Он «плывет», если тупо копировать из Ворда. А еще в редкой админке он отображается ровно так, как будет смотреться на экране пользователя. То есть то, как будет выглядеть для посетителя сайта ваш текст, вы поймете только после его размещения. В-третьих, при изменении меню или подменю. Удаление или добавление нового пункта в то место, которое функционально еще и ограничивает экран, — опасное занятие. Либо новый пункт внезапно станет перекрывать нужную информацию на экране телефона, либо убранный пункт откроет что-то лишнее. Очень часто портит сайт изменение способа отображения меню (например, добавление выпадающего списка или изменение стиля его выпадения). В-четвертых, это, конечно, добавление на сайт всплывашек. Не во всех админках вы можете легко редактировать стиль и размер этих всплывашек, к тому же, не всегда движок позволяет отдельно редактировать всплывашку для мобильной версии сайта. Очень часто всплывашка, которая хорошо смотрится на сайте в ноуте, вообще не работает в мобильнике.
В общем, не ленитесь и сами регулярно проверяйте отображение вашего сайта на самых разных устройствах: смартфонах, лаптопах, ноутах, стационарных компах, планшетах, на виндах и маках, на андроидах и эплах и, конечно, в разных браузерах.
Режим адаптивного дизайна — Инструменты разработчика Firefox
Адаптивные дизайны (Responsive designs) адаптируются к различным размерам экрана, чтобы обеспечить подходящее отображение для различных видов устройств, таких как мобильные телефоны или планшеты. Режим адаптивного дизайна даёт легкую возможность увидеть, как ваш сайт или веб-приложение будет выглядеть на экранах разных размеров.
Скриншот ниже показывает страницу мобильной версии Википедии, отображаемой при размере области контента 320 на 480.
Режим адаптивного дизайна удобен тем, что можно быстро и точно изменять размер области содержимого.
Конечно, можно просто изменить размер окна браузера: но этим вы уменьшите и все остальные вкладки, что может очень затруднить использование браузера.
В режиме адаптивного дизайна можно ходить по страницам в изменённой области содержимого как и обычно.
Есть три способа включения режима адаптивного дизайна:
и три способа выключить режим адаптивного дизайна:
снова выбрать пункт меню «Режим адаптивного дизайна» или «Адаптивный дизайн»;
кликнуть кнопку «Выйти» («закрыть») в верхнем левом углу окна режима;
Нажать Ctrl + Shift + M, (or Cmd + Opt + M on OS X). До Firefox 34, Escape тоже закрывала Режим адаптивного дизайна.
Изменить размер области содержимого можно двумя способами:
При использовании перетаскивания можно удерживать клавишу Control (command на Max OS X), чтобы изменение шло медленнее. Это помогает установить размер точнее.
Элементы управления режимом
Выйти
Закрыть Режим адаптивного дизайна и вернуться к нормальному просмотру
Выбрать размер
Выбрать из ряда комбинаций ширины и высоты, или определить свои собственные.
Начиная с Firefox 33, показываемые здесь числа можно редактировать на месте, так что можно легко определять собственные измерения.
Повернуть
Переключить экран между книжной и альбомной ориентацией.
Симулировать события прикосновения
Включить / выключить симуляцию сенсорных событий: когда она включена, события мыши переводятся в touch events.
Скриншот
Сделать скриншот (снимок) области содержимого.
Как проверить вид сайта на разных устройствах
Один из важнейших факторов ранжирования сайтов в поисковых системах – адаптация сайта для мобильных устройств. Но даже если бы этого не было, то здравый смысл подсказывает, что на любом экране сайт должен выглядеть достойно. Поэтому при создании сайта, даже на готовом шаблоне, нужно проверять, как выглядит ваш сайт на разных устройствах и экранах.
Проверить, как выглядит сайт на разных устройствах очень просто. Как минимум, существуют три простых способа проверить адаптацию сайта под мобильные устройства, а точнее – под разные размеры экранов:
Режим адаптивного дизайна в браузере Google Ghrome или Mozilla Firefox
Это пожалуй, самый надежный способ после просмотра на реальном устройстве.
Чтобы проверить вид сайта на разных устройствах, открываем интересующую станицу сайта, входим в режим адаптивного дизайна. Режим адаптивного дизайна – простой способ проверить, как ваш сайт или веб-приложение отображается на экранах разных размеров.
Mozilla Firefox
Самый простой способ включения режима адаптивного дизайна в Мозилле – использовать сочетанием клавиш Ctrl + Shift + M, на Mac Cmd + Opt + M. Здесь можно посмотреть другие способы включения режима адаптивного дизайна в Мозилле.
Выбираем тип устройства и внимательно смотрим, как выглядит страница сайта на разных экранах.
Доступна прокрутка страницы.
Google Ghrome
Нажимаем F12 и оказываемся в панели Инструментов разработчика Chrome (Chrome DevTools).
Затем входим в режим эмуляции экрана, нажав уже знакомое сочетание Ctrl + Shift + M, на Mac Cmd + Opt + M или нажав на кнопку переключения в режим устройства.
Затем, точно так, как в Mozilla Firefox можно проверить адаптивность, выбрав модель устройства или задав свои, пользовательские размеры экрана.
WordPress
Если вы разрабатываете сайт на WordPress, то вы можете из панели управления в панели управления быстро проверить вид сайта на разных устройствах. Для этого в админке нужно выбрать пункт меню Внешний вид> Настроить. На странице настроек темы в левом нижнем углу есть возможность выбрать устройство – компьютер, планшет или мобильный телефон. Этот способ не позволяет протестировать все устройства, но для того, чтобы быстро оценить адаптивность веб-страницы, вполне подходит.
Онлайн проверка
Responsinator – позволяет быстро посмотреть, как будет выглядеть веб-станица на наиболее популярных устройствах. Как признают сами разработчики, способ не дает 100% достоверных результатов.
Повторюсь, с моей точки зрения, самый надежный способ проверить вид сайта на разных устройствах и экранах – режим адаптивного дизайна в браузере.
Проверка сайта в разных браузерах, тестирование верстки и отображение сайтов, тест кроссбраузерности
Браузер — это программа, с помощью которой мы можем просматривать сайты и взаимодействовать с ними — заполнять формы, переходить по ссылкам, искать что-то на сайте, оформлять заказы в интернет-магазинах и т.д. По статистике каждый пользователь интернета использует для работы один или два браузера, не больше. Кто-то любит Google Chrome, другой предпочитает Mozilla, а третьему нравится Opera… И это еще не весь список популярных браузеров. Поэтому необходимо анализировать кроссбраузерность сайта, то есть насколько корректно веб-ресурс отображается в разных браузерах.
Каждый браузер учитывает стандарты работы с веб-кодом, но делают он это по-своему. Поэтому в разных браузерах неодинаково отображаются и элементы одного и того же сайта. Иногда такие различия не доставляют неудобств пользователю, но чаще ошибки существенно влияют на юзабилити и удобство просмотра информации.
Неопытные разработчики сайтов проводят проверки отображения веб-ресурса только в привычных им браузерах, а вот у посетителей часто бывают иные предпочтения, и просматривать веб-ресурс они могут в искаженном, неудобном виде.
Как проводится проверка
Программ для просмотра сайтов очень много. Каждая из них еще имеет множество версий. Например, последняя версия Google Chrome не так давно принесла множество проблем владельцам SSL-сертификатов. На самом деле проверка на кроссбраузерность — трудоемкий и скучный процесс. Расмотрим три шага, при помощи которых специалисты Иноко выявляют ошибки отображения веб-ресурса.
Шаг 1
Если мы идем на рыбалку, то сначала копаем червей и замачиваем крупку. Но никогда не подумаем взять с собой шоколадные конфеты, ведь рыбы их не едят. Значит, потенциальным посетителям сайта также нужно предлагать именно то, что они любят. Если через системы аналитики понятно, какими браузерами чаще всего пользуются посетители вашего сайта — значит, ставку нужно делать именно на них.
Нам помогает Яндекс метрика — эта система аналитики моментально устанавливается на любой сайт. С ее помощью можно получить необходимую информацию о разрешениях экранов пользователей, устройствах просмотра и, непосредственно, их браузерах. Составляем список самых популярных программ, которые выявила Яндекс-Метрика.
Если ваш сайт существует недавно и статистику по нему собрать пока нельзя, то этот шаг пропускается. В этом случае тестирование проводится в браузерах по следующему списку: Google Chrome, Mozilla, IE, Opera, Safari. Что касается версий этих браузеров — то корректность отображения сайта проверяется в последних трех.
Шаг 2
Специалист составляет матрицу покрытия. Это специальная таблица, в которой указываются все браузеры с версиями, устройства для просмотра и разрешения экрана. При адаптивной верстке проверке подлежит отображение на компьютерах, планшетах и смартфонах.
Шаг 3
Выбираются инструменты проверки кроссбраузерности. Здесь возможна только ручная работа, потому что автомат не сможет проверить отображение лучше, чем человек. Но для имитации открытия сайта на разных устройствах можно использовать эмуляторы.
Если вы закажете техническую поддержку сайта в компании Иноко, то проверка на кроссбраузерность будет проводиться в ее рамках. Ошибки при этом выявляются и исправляются своевременно, а ваши посетители будут всегда работать с удобным сайтом.
Как масштабировать ваш веб-сайт для всех мобильных устройств
Большинство из нас просматривают Интернет, делают покупки в Интернете и даже оплачивают счета с помощью наших мобильных устройств, потому что они удобны и легко доступны. Согласно исследованию Forrester «Цифровой бизнес-императив», 43% клиентов банковского сектора в США использовали мобильные телефоны для совершения банковских операций в течение трех месяцев.
Значительный годовой рост онлайн-бизнес-транзакций, совершаемых с помощью мобильных устройств, побудил компании создавать веб-сайты и сайты электронной коммерции, которые выглядят, работают и функционируют одинаково на компьютерах и интеллектуальных мобильных устройствах.Однако многие пользователи по-прежнему находят, что просмотр веб-сайтов на смартфоне отличается от просмотра веб-сайтов на компьютере. Чтобы разрабатывать веб-сайты, которые эффективно и плавно масштабируются на разных устройствах, важно понимать, что вызывает эти различия между платформами.
Веб-страницы обычно состоят из одного или нескольких из следующих компонентов: верхний и нижний колонтитулы, основное содержимое (текст), изображения, формы, видео и таблицы. Устройства различаются по таким функциям, как размер экрана (длина x ширина), разрешение экрана (плотность пикселей), вычислительная мощность (процессор и память) и операционная система (iOS, Android, Windows и т. Д.).). Эти различия значительно влияют на общую производительность и визуализацию веб-компонентов, таких как изображения, видео и текст, на разных устройствах. Еще одним важным фактором является то, что мобильные пользователи не всегда могут быть подключены к высокоскоростной сети, поэтому веб-страницы должны быть тщательно спроектированы для эффективной работы в соединениях с низкой пропускной способностью.
Самые неприятные проблемы на мобильных платформах
Вот некоторые из наиболее распространенных проблем, которые могут повлиять на производительность и масштабируемость веб-сайтов на разных устройствах:
Сайты не адаптируются автоматически к разным размерам экрана. Некоторые веб-сайты предназначены для форматирования экрана переменного размера, но их элементы могут не масштабироваться автоматически. Это приведет к тому, что сайт автоматически подстраивается под различные размеры экрана, но элементы сайта могут выглядеть слишком большими на небольших устройствах. Некоторые сайты могут быть не предназначены для настройки экрана с переменным размером, из-за чего элементы выглядят очень маленькими на устройствах с меньшими экранами.
На сайтах слишком много контента для мобильных устройств. Некоторые веб-сайты загружаются контентом, чтобы заполнить пустое пространство на экране рабочего стола.Веб-сайты, разработанные без учета мобильных пользователей, обычно подпадают под эту категорию. Этим сайтам требуется больше времени и пропускной способности для загрузки, и если страницы не предназначены для мобильных устройств, некоторое содержание может даже не отображаться.
Сайты слишком долго загружают изображения. Веб-сайты со слишком большим количеством изображений или тяжелыми файлами изображений, вероятно, будут долго загружаться, особенно если изображения не были оптимизированы на этапе разработки.
Данные в таблицах выглядят сложными и загружаются слишком долго. Многие веб-сайты представляют данные в виде таблиц (например, сравнения конкурирующих продуктов, данные о стоимости авиабилетов с разных сайтов путешествий, расписания рейсов и т. Д.), А на мобильных устройствах эти таблицы могут быть медленными и трудными для понимания.
На веб-сайтах размещены видео, которые не воспроизводятся на некоторых устройствах. Не все мобильные устройства поддерживают все форматы видео. На некоторых веб-сайтах размещены медиафайлы, требующие лицензии, Adobe Flash или другие проигрыватели, которые могут не поддерживаться некоторыми мобильными устройствами.Это вызывает разочарование и плохое взаимодействие с пользователем.
Создавайте свои сайты для адаптации к различным устройствам
Все эти проблемы можно решить за счет правильного проектирования и внедрения подхода, ориентированного на мобильные устройства. При работе с такими ограничениями, как размер экрана, пропускная способность и т. Д., Сосредоточьтесь на правильном количестве и качестве контента. Стратегия, ориентированная на мобильные устройства, ставит контент в качестве основного объекта и разрабатывает для самых маленьких устройств, гарантируя, что сайт включает только самые важные функции. Сначала решите проблемы дизайна мобильных устройств, а затем постепенно улучшайте дизайн для более крупных устройств.
Вот несколько рекомендаций, которые следует учитывать при разработке веб-сайтов, которые необходимо масштабировать на разных устройствах.
Адаптация к любому размеру экрана . Как минимум, веб-страницу необходимо масштабировать под размер экрана любого мобильного устройства. Современные мобильные устройства имеют очень высокое разрешение экрана. Плотность пикселей на мобильных устройствах намного выше, чем на экранах настольных компьютеров, поэтому важно отформатировать страницы так, чтобы они соответствовали ширине экрана мобильного устройства в пикселях, не зависящих от устройства.Тег «meta viewport», включенный в документ HTML, отвечает этому требованию.
Значение мета-области просмотра, как показано выше, помогает отформатировать всю HTML-страницу и отобразить содержимое в соответствии с любым размером экрана.
«Контент — это король». Контент должен определять дизайн веб-сайта, а не наоборот. Веб-сайты со слишком большим количеством элементов, таких как таблицы, формы, диаграммы и т. Д., Становятся сложными, когда их нужно масштабировать на мобильных устройствах. Разработчики в конечном итоге скрывают контент для мобильных пользователей, и настольная и мобильная версии становятся несовместимыми.Дизайн должен быть сосредоточен на основной структуре и содержании, а не на декоративных элементах. Методология, ориентированная на мобильные устройства, обеспечивает единую версию контента как для настольных, так и для мобильных пользователей, поэтому веб-дизайнеры должны тщательно продумывать, создавать и оптимизировать контент, чтобы он не только отвечал бизнес-целям, но и нравился пользователям мобильных устройств. Контент, который не отображается в мобильной версии, может даже не отображаться в версии для ПК.
Адаптивные изображения . При проектировании следует учитывать небольшие портативные устройства, работающие в зонах с низким уровнем сигнала.Большие фотографии и сложная графика не подходят для мобильных устройств, работающих в таких условиях. Убедитесь, что все изображения оптимизированы для разных размеров окон просмотра и плотности пикселей. Рекомендуемый подход — переключение разрешения, которое позволяет браузеру выбрать файл изображения подходящего размера в зависимости от размера экрана устройства. Переключение разрешения использует два атрибута — srcset и , размеры (показаны во фрагменте кода, показанном ниже), — которые позволяют браузеру использовать ширину устройства для выбора наиболее подходящего состояния носителя, представленного в списке размеров, выберите размер слота на основе при этом условии и загрузите изображение, указанное в srcset , которое наиболее точно соответствует выбранному размеру слота.
Например, если устройство с окном просмотра 320 пикселей загружает страницу, условие мультимедиа (max-width: 320 пикселей) в списке размеров будет истинным, и будет выбран соответствующий слот 280 пикселей. Ширина первого изображения, указанного в srcset (elephant-320w.jpg), ближе всего к этому слоту. Браузеры, не поддерживающие переключение разрешения, отображают изображение, указанное в атрибуте src, как изображение по умолчанию. Этот подход не только подбирает правильное изображение для области просмотра вашего устройства, но также предотвращает загрузку излишне больших изображений, которые потребляют значительную полосу пропускания.
Адаптивные таблицы. По мере того, как мир становится все более управляемым данными, передача критически важных, чувствительных ко времени данных на карманные устройства предоставляет пользователям мощность и свободу. Задача состоит в том, чтобы представить данные таким образом, чтобы их было легко загружать и читать на мобильных устройствах. Некоторые данные необходимо представить в виде таблицы, но когда таблицы данных становятся слишком большими и громоздкими, пользователям может быть неприятно интерпретировать их на мобильном устройстве с маленьким экраном. Например, если экран намного уже, чем ширина таблицы, пользователи вынуждены уменьшать масштаб, из-за чего текст становится слишком маленьким для чтения.И наоборот, если экран шире таблицы, пользователи должны увеличивать масштаб для просмотра данных, что требует постоянной вертикальной и горизонтальной прокрутки.
К счастью, есть несколько способов создания адаптивных таблиц. Вот один из самых эффективных:
Столбцы таблицы переставлены в строки. Размер каждого столбца соответствует ширине экрана, что исключает необходимость горизонтальной прокрутки. Использование цвета помогает пользователям четко различать каждую отдельную строку данных.В этом случае для каждой «ячейки» должно использоваться содержимое (: before) , созданное CSS, чтобы применить метку, чтобы можно было четко идентифицировать каждый фрагмент данных.
Другой подход — отображать данные в одном из двух форматов в зависимости от ширины экрана: в формате диаграммы (для узких экранов) или в формате полной таблицы (для более широких экранов). Если пользователь хочет щелкнуть диаграмму, чтобы увидеть полную таблицу, можно использовать описанный выше подход для отображения данных в табличной форме. (: До)
Третий подход — показать мини-графику на узком экране, чтобы указать на наличие таблицы.Пользователь может щелкнуть изображение, чтобы развернуть и отобразить таблицу.
Видео, которые всегда воспроизводятся. Видео файлы, как правило, не воспроизводятся на мобильных устройствах, если их форматы не поддерживаются или для них требуется проприетарный видеопроигрыватель. Рекомендуемый подход — использовать стандартные теги HTML5 для видео и анимации. Элемент видео в HTML5 можно использовать для загрузки, декодирования и воспроизведения видео на вашем веб-сайте. Создавайте видео в нескольких форматах для разных мобильных платформ и убедитесь, что размер видео выбран правильно, чтобы они воспроизводились в своих контейнерах.
В приведенном ниже примере показано использование тегов для указания различных видеоформатов (обозначенных элементом type). При таком подходе переключение на правильный формат происходит на стороне клиента, и к серверу делается только один запрос. Это сокращает сетевую задержку и позволяет браузеру выбирать наиболее подходящий формат видео без его предварительной загрузки.
Свойства videoWidth и videoHeight элемента video помогают идентифицировать закодированный размер видео.Размеры видео можно контролировать с помощью JavaScript или CSS. max-width: 100% помогает подобрать размер видео по размеру экрана. Медиа-запросы CSS можно использовать для установки размера на основе размеров области просмотра. Также существует несколько библиотек и плагинов JavaScript, которые могут поддерживать соотношение сторон и размер видео.
С учетом всех обстоятельств…
В наши дни пользователи регулярно выходят в Интернет и выполняют бизнес-операции со своими смартфонами и планшетами. Интернет становится основным бизнес-каналом для многих компаний по всему миру. Следовательно, важно разрабатывать веб-сайты, которые работают и хорошо масштабируются на мобильных устройствах. Цель состоит в том, чтобы улучшить взаимодействие с мобильным пользователем, чтобы оно соответствовало функциональности и производительности настольных компьютеров и больших мониторов.
Подход, ориентированный на мобильные устройства, помогает веб-дизайнерам создавать сайты, которые хорошо работают на небольших мобильных устройствах. Дизайн должен быть сосредоточен на контенте, который удовлетворяет бизнес-требованиям, а также учитывать технические ограничения, такие как размер экрана, скорость процессора, память и условия эксплуатации (например,g., слабый сигнал сети). Он также должен гарантировать, что изображения, видео и данные реагируют на все мобильные устройства, оставаясь при этом чувствительными к точкам останова, целям касания и т. Д.
Хорошо спроектированный веб-сайт, который работает и масштабируется на небольшом устройстве, всегда может быть постепенно улучшен для работы на больших устройствах.
Список литературы
Что читать дальше
Как сделать так, чтобы ваш интернет-магазин работал на всех устройствах
В современном мире покупатели должны иметь возможность подключаться к вашему интернет-магазину с одного или нескольких устройств.Фактически, последние статистические данные показывают, что в Америке:
человек.
77% людей владеют смартфонами
Почти 80% владеют ноутбуком или настольным компьютером
Около 50% имеют планшетный компьютер
20% владеют устройством для чтения электронных книг
Более 10% используют только смартфоны, что означает, что у них нет дома традиционного широкополосного доступа в Интернет и вместо этого они используют свои смартфоны для просмотра веб-страниц.
Эти цифры демонстрируют важность наличия интернет-магазина, который может реагировать на все эти различные типы устройств.Особенно если учесть тот факт, что мобильный трафик начинает вытеснять традиционный трафик настольных компьютеров. По сравнению с тем, что было несколько лет назад, мобильный веб-сайт — это не то, что «приятно иметь», это необходимость.
Почему у вас должен быть адаптивный дизайн веб-сайта?
Согласно Google, к преимуществам адаптивного дизайна веб-сайта относятся:
Пользователям проще размещать ссылки и делиться вашим контентом с помощью одного URL
Требуется на меньше времени для обслуживания нескольких разных страниц с одинаковым содержанием
It снижает риск типичных ошибок , которые допускаются на мобильных сайтах
Пользователи не должны перенаправляться на веб-сайт, оптимизированный для их устройства, таким образом, сокращает время загрузки вашего сайта.Это также снижает риски или ошибки, связанные с перенаправлением на основе агента
.
It помогает алгоритмам Google, потому что они могут точно назначать свойства индексации страницам вашего веб-сайта, вместо того, чтобы сигнализировать о существовании соответствующих страниц для мобильных / настольных компьютеров.
Адаптивный ли ваш интернет-магазин?
Во-первых, важно выяснить, реагирует ли ваш магазин электронной коммерции, и есть несколько простых способов сделать это:
Браузер для настольных ПК
Это самый быстрый способ узнать, использует ли ваш интернет-магазин адаптивный веб-дизайн:
Откройте браузер вашего веб-сайта, например.грамм. Safari, Fox или Chrome
Наведите указатель мыши на правый нижний угол окна
Уменьшите размер окна, перетащив его справа налево
Если при этом ваш контент начнет приспосабливаться к новым размерам, которые вы создали, весьма вероятно, что ваш веб-сайт будет реагировать на запросы. Однако, чтобы убедиться, что он полностью реагирует на другие устройства, вам нужно проверить, как ваш веб-сайт отображается на них.
Смартфоны, планшеты и настольные устройства
Возьмите телефон, планшет друга или рабочий стол сестры и начните просматривать свой сайт на всех этих устройствах. Это даст вам подлинное представление о том, насколько адаптивен дизайн сайта и совместим ли ваш интернет-магазин с устройствами всех форм и размеров.
Нет доступа ко всем этим устройствам? Затем отправляйтесь в магазин электроники и загрузите свой сайт на все продаваемые там устройства!
Эмуляторы
Еще один способ проверить скорость отклика вашего сайта — использовать эмулятор, однако нельзя на 100% полагаться на него, чтобы получить точное представление о впечатлениях пользователей.Но они дадут вам общее представление о том, как ваш интернет-магазин работает на разных устройствах.
Эмуляторы
включают Screenfly от Quirktools. Для использования просто:
Вставьте URL своего веб-сайта при появлении запроса
Нажмите на различные значки устройств в верхней части экрана, чтобы начать просмотр веб-сайта через них — к ним относятся настольные компьютеры, планшеты, мобильные телефоны и даже телевизоры.
Чтобы упростить задачу, включите прокрутку, щелкнув значок со стрелками, направленными вверх и вниз.
Вы также можете протестировать работу пользователя с различными разрешениями, что особенно полезно, когда на рынок начинают выходить новые устройства.
Несмотря на то, что эти эмуляторы предоставят вам отличный обзор того, как ваш интернет-магазин выглядит на различных устройствах, они не учитывают прокрутку пальцами.В этом эмуляторе вы будете использовать мышь, поэтому крайне важно, чтобы вы оценивали удобство использования своего сайта через само устройство, чтобы учесть такие вещи, как «синдром толстого пальца».
Наконец, если после всего этого вы обнаружите, что ваш веб-сайт не отвечает, не паникуйте. Ниже вы найдете несколько способов создать интернет-магазин, который будет работать на всех устройствах.
Лучшие советы по созданию адаптивного веб-сайта электронной коммерции
Узнайте о пути ваших клиентов
Во-первых, вам необходимо понять, какой трафик приходит на ваш сайт.Откуда приходят эти клиенты и какое устройство они используют для просмотра вашего интернет-магазина?
Вы можете обнаружить, что лишь небольшое количество пользователей используют свои мобильные телефоны, но если их используют более 10%, пора убедиться, что ваш веб-сайт оптимизирован для мобильных устройств. Точно так же, анализируя посещаемость вашего веб-сайта, вы сможете адаптировать контент под пользователя, убедившись, что призывы к действию и контент, которые вы показываете, нравятся покупателю и соответствуют его потребностям.
Многие веб-сайты теперь вынуждены создавать интерфейс, учитывающий несколько различных устройств в рамках одного цикла взаимодействия с клиентом.Например, вы можете заметить, что покупатель просматривает ваш веб-сайт на своем мобильном телефоне после поиска продукта, который вы продаете. Однако покупатель может использовать свое настольное устройство для окончательной покупки. В таких случаях недостаточно просто убедиться, что ваш сайт работает на разных устройствах. Вместо этого вам нужно понимать, чего хотят ваши клиенты, когда они этого хотят и как вы можете им это дать.
Понимание вышеизложенного поможет вам со следующим советом.
Определите «микромоменты» в пути ваших клиентов
Теперь вы знаете, что нужно представить каждому покупателю на каждом этапе его пути к вашему интернет-магазину. Пришло время взглянуть на «микромоменты» в этом путешествии.
Эти микромоменты — это время, когда пользователи рефлекторно идут к своему устройству, чтобы удовлетворить свою потребность купить что-то, посмотреть что-то, найти что-то, сделать что-то или чему-то научиться. Эти моменты богаты намерениями и являются временем, когда ваши клиенты принимают решения.
Примеры того, как бренды адаптировали это в рамках пути своих клиентов, включают:
Hertz отправляет клиенту электронное письмо, как только самолет приземляется, и сообщает, что его машина готова.
Apple Passbook загружает карту Starbucks, когда покупатель находится рядом с кафе
Starwood позволяет своим клиентам открывать свой гостиничный номер и регистрироваться с помощью своего смартфона
Эти интимные и отзывчивые впечатления — это то, чего ожидают клиенты.Недавнее исследование, проведенное Forrester, показало, что:
62% американцев ожидают, что веб-сайт будет удобен для мобильных устройств
23% ожидают, что качество работы с мобильными устройствами будет меняться в зависимости от их местоположения
Чтобы создать такой опыт, вы можете проанализировать:
Поисковые запросы клиентов: Какие ключевые слова, объявления и запросы приводят пользователей в ваш магазин на альтернативных устройствах? Оказавшись там, какие поиски выполняют пользователи на этих различных устройствах, и можете ли вы определить какие-либо полезные тенденции? Владелец ресторана может обнаружить, что пользователи мобильных устройств ищут ее местоположение или часы работы, в то время как пользователи настольных компьютеров более склонны переходить на страницу меню.
Контент: К какому контенту получают доступ пользователи на каждом этапе пути к покупке и на каком устройстве? Есть ли какая-то тенденция в отношении того, что люди загружают на свои телефоны? Каким контентом они делятся?
Flow: Посмотрите, в каком направлении клиенты перемещаются по вашему интернет-магазину, в зависимости от того, какое устройство они используют. По какому пути идет клиент, использующий мобильные устройства, планшеты или настольные компьютеры? И какие источники отправляют этих клиентов на сайт?
Понимая эти более тонкие детали, вы сможете предоставить своим клиентам быстрый и легкий доступ к контенту, который им нужен и необходим для совершения покупки.
Сначала рассмотрите мобильную версию
Ошибка многих онлайн-компаний заключается в том, что они сначала создают свой сайт для настольных компьютеров. Однако, если мобильный телефон является предпочтительным способом просмотра вашего сайта, может быть полезно сначала начать с дизайна вашей мобильной версии. Это потому, что масштабировать сайт проще, чем уменьшать.
Показать все содержимое в мобильной версии
Пытаясь уменьшить размер веб-страницы, некоторые разработчики сжимают или скрывают контент от мобильного пользователя.Тем не менее, это не помогает уменьшить размер страницы, а только пытается усложнить работу пользователей мобильных устройств, поскольку они не могут найти нужную информацию.
Из-за большого количества людей, пользующихся мобильными телефонами, особенно на этапе исследования пути к покупке, пропуск информации с этих устройств только ухудшит впечатление, которое вы им предоставляете.
Выберите фреймворк
Как вы понимаете, создание адаптивного веб-сайта требует больших усилий.Однако есть ряд фреймворков, которые могут сделать за вас большую часть тяжелой работы. К ним относятся Foundation и Twitter Bootstrap.
Вместо того, чтобы начинать с самого начала, эти платформы позволят вам использовать существующий код вашего интернет-магазина перед его обновлением и изменением.
Преобразование кода вашего сайта
Когда вы конвертируете фиксированную ширину, нужно учесть многое. Например, вам нужно будет добавить в метатеги, такие как «maximum-scale = 1», «initial-scale = 1» и «width = device-width»
.
Точно так же, если ваш сайт переходит от фиксированного дизайна к адаптивному, вам нужно будет активировать правила CSS с «точками останова.«Выполнение всего этого по одной странице за раз значительно упростит выполнение и контроль.
Убедитесь, что ваши электронные письма отвечают
Недостаточно сделать ваш веб-сайт адаптивным, так как не менее важно, чтобы ваши электронные письма также реагировали на размер используемого устройства. Электронные письма, которые отправляет ваш интернет-магазин, идут рука об руку с вашим веб-сайтом, так почему же они не должны быть отзывчивыми?
Заставить мобильных пользователей пролистывать бесконечные потоки информации в поисках основных моментов электронного письма может быть невероятно утомительным. Итак, убедитесь, что усилия, которые вы собираетесь сделать, чтобы ваш сайт был отзывчивым, включают и ваши электронные письма. Это включает в себя электронные письма с подтверждением после того, как ваша служба выполнения заказов собрала, упаковала и отправила их заказ.
Предлагает поддержку более одного разрешения изображения
Очень важно, чтобы ваш веб-сайт поддерживал более одного разрешения изображения, если он будет считаться «адаптивным». Это связано с тем, что время, необходимое для загрузки изображения, зависит от типа используемого устройства.
Для автоматического изменения изображений в вашем интернет-магазине вы можете использовать такие платформы, как HTML, JavaScript и PHP. Также важно учитывать конкретные цветовые палитры, максимальные размеры, которые вы устанавливаете, и то, какое соотношение сторон будет использоваться.
Например, если вы используете CSS для изображений, вам нужно вставить код «.my-img {width: 100%; height: auto;} ». Это автоматически сохранит пропорции ваших изображений.
Получение удовлетворительных адаптивных изображений будет зависеть от вашего интернет-магазина, потребностей ваших клиентов и имеющихся у вас ресурсов.Например, если вы выберете подход, оптимизированный для производительности, вы могли бы создавать изображения различных размеров, назначая определенный размер конкретному устройству. Это может занять время для реализации и создания, но снизит риск проблем, вызванных производительностью или пропускной способностью.
Следуя всем этим советам, вы должны быть на правильном пути к созданию магазина электронной коммерции, который максимизирует удобство для пользователей. В то же время, когда многие бренды осознают преимущества создания веб-сайтов, оптимизированных для мобильных устройств, важно не отставать.
Дополнительные ресурсы
Чтобы получить еще более полезный совет о том, как сделать так, чтобы ваш интернет-магазин создавал лучший пользовательский интерфейс с помощью адаптивного дизайна, ознакомьтесь с этими руководствами и учебными пособиями ниже:
Smashing Magazine — это подробное руководство объясняет, что такое адаптивный веб-дизайн и как его использовать.
DZone.com — Узнайте, как использовать HTML / CSS для создания адаптивного веб-сайта.
Google.com — Совет по использованию JavaScript для изменения поведения и отображения вашего веб-сайта на разных устройствах.
w3schools.com — включает коды, которые помогут вам перемещать, увеличивать, сжимать, скрывать и изменять размер содержимого вашего веб-сайта.
CreativeBloq.com — 10 полезных ссылок на еще более полезные руководства по адаптивному веб-дизайну.
В чем разница между адаптивным и отзывчивым веб-дизайном? —
Многие люди используют термины «Адаптивный дизайн », «» и «Адаптивный дизайн », как взаимозаменяемые, но проведение различия между ними помогает прояснить два разных подхода к современной проблеме разработки веб-страниц, работающих на малых и больших экранах.
В мире веб-дизайна единственное, что труднее, чем идти в ногу с постоянно развивающимися стандартами в HTML, CSS и других технологиях, — это не отставать от словаря.Эта статья поможет вам понять, что означают отзывчивый и адаптивный дизайн и чем отличаются эти подходы .
Многие подходы к мобильному веб-дизайну
Когда люди впервые начали использовать мобильные телефоны для подключения к веб-сайтам, многие из нас создали специальные версии наших сайтов, специально оптимизированные для работы только на небольших мобильных устройствах. Сегодня некоторые сайты все еще используют этот подход, создавая один простой мобильный сайт для посетителей с мобильными телефонами и направляя всех остальных на основной веб-сайт для ПК.
По мере того, как мобильные устройства стали «умнее», стали популярными два новых подхода к проектированию для маленьких и больших экранов — адаптивный и адаптивный дизайн.
Адаптивный дизайн был разработан для удовлетворения разнообразных потребностей растущего числа сотовых телефонов с различными возможностями и размерами экрана. Адаптивный дизайн требует, чтобы вы создали множество различных версий каждой веб-страницы и установили на своем веб-сервере сложную программу, которая обнаруживает каждое устройство и предоставляет версию сайта, оптимизированную для определенного размера и функций этого посетителя мобильного телефона. Адаптивный дизайн сложен, дорог и обычно используется только крупными, хорошо финансируемыми веб-сайтами.
К счастью, быстро набирает популярность новый, более простой подход, называемый адаптивным дизайном. С адаптивным дизайном и вы создаете одну веб-страницу, а затем используете несколько наборов правил CSS для изменения формата и макета в зависимости от размера окна браузера.
Что общего у адаптивного и адаптивного веб-дизайна
Во-первых, что у них общего. И отзывчивый, и адаптивный веб-дизайн в основном предназначены для создания веб-дизайнов, оптимизированных для размера экрана или типа устройства, которое используется для их просмотра.
Основная концепция заключается в том, что вы создаете веб-сайт, который работает на экранах разных размеров, чаще всего хорошо работает как минимум на трех разных размерах экрана — маленьком мобильном экране, экране размером с планшет и большом мониторе настольного компьютера.
Хорошо, а в чем разница между адаптивным и адаптивным веб-дизайном?
Самый простой и распространенный способ сравнения этих терминов:
Адаптивный дизайн реагирует на изменения ширины окна браузера, плавно регулируя размещение элементов на веб-странице, чтобы они лучше соответствовали доступному пространству. Таким образом, если вы перетаскиваете край браузера, чтобы увеличить или уменьшить его, вы увидите, как меняется дизайн в реальном времени. Если вы хотите увидеть, как работает адаптивный дизайн, посетите сайт, на котором используется адаптивный дизайн, например http://foodsense.is/, и если перетащите край окна браузера, чтобы сделать его меньше и больше, вы увидите, как адаптивный дизайн работает. Посетите этот сайт на iPhone, iPad или другом устройстве аналогичного размера, и вы увидите дизайн, ориентированный на устройство этого размера.
Адаптивные конструкции , такие как дизайн American Airlines, созданный в aa.com, используйте сложный сценарий автоопределения на веб-сервере, чтобы идентифицировать каждое устройство, которое посещает сайт, а затем предоставить лучшую версию сайта в зависимости от размера и возможностей каждого устройства. В результате сайт American Airlines не изменится, если вы перетащите браузер во время просмотра сайта. Однако если вы посетите американский сайт на разных мобильных устройствах, вы увидите не только разные дизайны, но и разный контент, потому что с адаптивным дизайном вы можете отправлять совершенно разные версии своего сайта на каждое устройство.
Почему выбирают адаптивный дизайн вместо адаптивного?
American Airlines — пример адаптивного веб-дизайна.
Ответ прост: адаптивный дизайн намного сложнее и дороже, но это единственный способ охватить самую широкую мобильную аудиторию. Это связано с тем, что адаптивный дизайн с использованием медиа-запросов CSS — относительно недавняя технология, которая не поддерживается настоящими старыми или ограниченными мобильными телефонами.
Если вы работаете над веб-сайтом, подобным веб-сайту American Airlines, и вам необходимо разработать высокоинтерактивный и безопасный сайт, который будет работать для всех, кто может когда-либо посетить ваш сайт с любого типа мобильного устройства, тогда у вас есть для создания адаптивный дизайн.В идеале у вас также есть большая команда разработчиков и бюджет, чтобы справиться со сложностью такого сайта.
Большинство дизайнеров сегодня выбирают адаптивный дизайн. Не только потому, что это дешевле и проще, но и потому, что гораздо эффективнее создать один дизайн, который адаптируется к разным размерам экрана, чем создавать множество дизайнов, оптимизированных для всех существующих сейчас телефонов, а также для всех новых телефонов и устройств. это выйдет в будущем.
Мы больше не разрабатываем для телефонов, ноутбуков и настольных компьютеров.Веб-сайты отображаются на гигантских телевизионных экранах, и скоро мы будем использовать новые очки Google (так называемые Google Glass) и бог знает что еще…
Но разве вас не волнуют люди со старыми мобильными телефонами?
Если вы задаете этот вопрос, я приветствую ваше желание охватить самую широкую аудиторию. К сожалению, адаптивные веб-сайты не работают на действительно старых или действительно ограниченных мобильных телефонах.
Мне определенно не все равно, и если вы работаете на развивающихся рынках, в том числе в некоторых частях Африки, Азии или Латинской Америки, где смартфоны не так распространены, вам следует волноваться — очень сильно.В этом случае я рекомендую вам создать адаптивный веб-сайт, если у вас есть ресурсы. Если вы не можете себе позволить такую возможность, подумайте о создании одного очень простого сайта, оптимизированного для мобильных устройств. Вам придется ограничить количество функций, но, по крайней мере, он будет доступен для всех в вашей аудитории.
Для тех из нас, кто разрабатывает веб-сайты для США или других более развитых рынков, где широко распространены смартфоны и планшеты, адаптивный дизайн становится все более предпочтительным вариантом — не только потому, что так много людей используют мобильные устройства высокого класса, но и потому, что Те немногие люди, которые все еще пользуются старыми, действительно ограниченными мобильными телефонами, не проводят много времени в веб-серфинге.Серьезно, посещаемость веб-сайтов с действительно старыми или ограниченными мобильными телефонами в большинстве развитых стран настолько мала, что большинству дизайнеров просто не о чем беспокоиться.
Если вы еще не пробовали, просматривать веб-страницы, когда все, что у вас есть, это крошечный двухцветный экран и клавиатура с номером телефона, не так уж и весело, поэтому большинство людей с такими ограниченными устройствами не беспокоятся.
Технические детали адаптивного и адаптивного дизайна
Адаптивный дизайн использует медиа-запросы CSS для применения правил стиля в зависимости от размера экрана (подробнее о создании адаптивного веб-дизайна).
Адаптивный дизайн требует скрипта обнаружения устройства, который запускается на веб-сервере, а также нескольких версий сайта, которые обычно создаются динамически путем извлечения содержимого из базы данных и отображения его с помощью ряда шаблонов, оптимизированных для каждого устройства. В случае адаптивного дизайна, если вы посещаете веб-сайт с мобильного устройства, вы можете увидеть совершенно другую версию сайта, чем если бы вы посещали страницу с настольного компьютера.
Лучшее из обоих миров: Boston Globe — отличный пример адаптивного сайта, который также использует небольшое серверное программирование для удаления элементов, таких как большие изображения и видео, когда страницы отображаются на маленьких экранах. и сотовые телефоны с ограниченными возможностями.Вы найдете хорошо написанный пример того, как был создан адаптивный дизайн для Boston Globe, на http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/.
Немного истории и благодарности за адаптивный и отзывчивый дизайн
Термин «Адаптивный дизайн» обычно принадлежит Итану Маркоуту. Здесь вы найдете его оригинальное эссе об адаптивном дизайне.
Термин «адаптивный дизайн» существует намного дольше, но некоторые считают его именем Аарона Густафсона, написавшего книгу под названием «Адаптивный дизайн».
Другие термины часто встречаются, когда мы говорим о мобильном дизайне «сначала мобильные».
Люк Вроблевски заслуживает похвалы за термин «сначала мобильные», что означает разработку мобильной версии сайта до того, как вы создадите более крупную, настольную версию (исторически большинство сайтов создавались наоборот).
Подробнее об адаптивном / адаптивном веб-дизайне
dwcs6, адаптивный, веб-дизайн
Показать и скрыть различный контент на мобильных устройствах и настольных компьютерах
Вы не всегда заказываете одну и ту же пиццу, так зачем же отображать один и тот же контент на мобильных устройствах И на компьютерах? Вот как показать и скрыть различный контент на мобильных устройствах и настольных компьютерах.
Первое, что вам нужно понять, это то, что существует МНОГО способов показать и скрыть контент на мобильных устройствах и настольных компьютерах. Вот почему ниже вы найдете три различных способа показать и скрыть контент в зависимости от того, как был создан ваш веб-сайт.
Выберите ниже тот, который лучше всего соответствует вашему веб-сайту, щелкнув один из них, вы добавите закладку на эту страницу … или вы можете вручную прокрутить вниз до бесконечности, если это вам нравится.
Метод 1: универсальный метод (работает на любой платформе)
Узнайте, как использовать несколько фрагментов CSS для отображения и скрытия контента на любом веб-сайте, независимо от того, как он был создан.
Метод 2: Метод строителя бобра
Узнайте, как использовать встроенные настройки адаптивного макета в любом модуле Beaver Builder для отображения и скрытия содержимого.
Метод 3. Метод конструктора веб-сайтов Dynamik
Используя комбинацию CSS и несколько настроек Dynamik Website Builder, вы можете легко отображать и скрывать контент.
Метод 1. Показать и скрыть различный контент на любой платформе
Используя простой CSS, можно легко отображать и скрывать различный контент на мобильных устройствах и на компьютерах независимо от того, как был создан ваш веб-сайт.
Да, этот метод также будет работать на ЛЮБОМ сайте Beaver Builder или Dynamik Website Builder… но следуйте тем методам, которые используют некоторые из встроенных функций этих платформ.
Итак…. вы создали веб-сайт, используя какую-то случайную тему WordPress, Joomla или Drupal и т. д., и вы хотите отображать и скрывать различный контент на мобильных и настольных устройствах! Без проблем! Для этого нам просто нужно использовать волшебный CSS!
PRO СОВЕТ: Вам действительно стоит подумать об использовании комбинации WordPress и Beaver Builder!
Шаг 1.
Демонстрационный контент
В режиме Text или Code скопируйте и вставьте приведенный ниже код на свою веб-страницу / виджет / сообщение, а затем Сохраните ваши изменения:
Это контент, который будет отображаться на DESKTOPS.
Это контент, который будет отображаться на МОБИЛЬНЫХ УСТРОЙСТВАХ.
Просто взглянув на это, вы сможете сказать, что верхний блок будет для содержимого DESKTOP , а нижний блок будет для содержимого MOBILE . В приведенном выше примере я использую одно простое предложение, но вы можете поместить ВСЕ между двумя открывающими и закрывающими тегами div (например, фотографии, заголовки, видео на YouTube, галереи и т. Д.).
Ваш экран (если вы используете WordPress) теперь должен выглядеть примерно так:
SUPER-DUPER ВАЖНО: Убедитесь, что вы вставляете эту строку в текстовом или кодовом режиме, ИЛИ ЭТО НЕ БУДЕТ РАБОТАТЬ !!!
Шаг 2.
Волшебный CSS
Теперь, когда на вашем сайте размещены две части контента, нам нужно немного магии CSS, чтобы контент Desktop отображался только на рабочих столах, а мобильный контент — только на мобильных устройствах. Отредактируйте файл CSS вашего веб-сайта и вставьте следующий CSS в этот файл.а затем СОХРАНИТЬ ваши изменения.
Для всех пользователей WordPress это будет расположено в панели администратора вашей темы или в Внешний вид> Редактор> style.css файл
Для всех других платформ ищет любой тип раздела, который касается «Настраиваемых таблиц стилей», «Расширенного CSS» или «Настраиваемых стилей»… каждая платформа отличается.
ВАЖНАЯ ИНФОРМАЦИЯ: не забудьте про последний} в конце!
Шаг 3.
Проверьте это
Посмотрите свою веб-страницу на рабочем столе, а затем на телефоне.Заметили, как меняется контент?
Вы также можете изменить размер веб-браузера на рабочем столе , чтобы он был более тонким, чтобы увидеть тот же эффект. Проверьте это и узнайте, как отображать и скрывать различный контент:
Вы можете увидеть приведенный выше пример вживую, перейдя ЗДЕСЬ.
Шаг 4. Замените демонстрационный контент
Теперь, когда вы видите, что это работает, вы можете заменить демонстрационный контент для настольных компьютеров и мобильных устройств своим собственным реальным контентом . Помните, что вы можете добавить все, что хотите… это не просто текст.
КАК ЭТО РАБОТАЕТ
Если вам немного интересно, как это работает, вот краткое объяснение:
Взгляните на тот код CSS, который вы вставили в файл CSS своей темы. Вы заметите, что в обоих блоках используется стандартное правило CSS на основе браузера для . Отображение используется для того, чтобы волшебство произошло. Есть много опций для команды Display (смотрите их здесь), но мы в основном используем опцию Block и None .
Верхний блок предназначен для всех размеров экрана более 768 пикселей в ширину (также известный как настольные устройства)
Нижний блок предназначен для всех размеров экрана менее 768 пикселей в ширину (также называемых «Мобильные устройства»).
Рабочий стол: вы увидите, что содержимое рабочего стола имеет значение Display , равное Block на обычных экранах, но на экранах шириной менее 768 пикселей (что является стандартным для телефонов и некоторых планшетов) значение Display изменяется на Нет (что убирает).
Mobile: вы увидите, что мобильный контент имеет значение Display , равное Нет на обычных экранах, но на экранах шириной менее 768 пикселей (что является стандартным для телефонов и некоторых планшетов) значение Display изменяется на Блок (который его убирает).
Метод 2: Показать и скрыть различное содержимое в Beaver Builder
Итак, давайте разберемся с этим прямо здесь … Beaver Builder потрясающий, и ваша жизнь будет намного проще, чем два других метода, описанных в этом посте, для отображения и скрытия различного контента!
Ниже приведен самый простой способ отображать и скрывать различный контент на мобильных устройствах благодаря встроенным функциям Beaver Builder.Щелкните эту ссылку, если у вас еще нет лучшей платформы WordPress.
После установки Beaver Builder и редактирования страницы просто выполните следующие действия:
Шаг 1. Добавьте содержимое рабочего стола
Давайте начнем с добавления содержимого для устройств DESKTOP, для этого убедитесь, что вы находитесь в режиме Page Builder (где вы можете перетаскивать модули на страницу) и перетащите ЛЮБОЙ модуль Beaver Builder на свою страницу , I Я просто собираюсь использовать простой текстовый модуль:
Добавьте содержимое DESKTOP в этот модуль. В этом примере я просто использую латинский текст-заполнитель, но этот метод будет работать с любым контентом.
Шаг 2 — Установите настройки дисплея
Щелкните вкладку Advanced в верхней части всплывающего окна и в разделе Display выберите Large & Medium Devices Only … затем Save your changes.
Шаг 3. Добавьте свой мобильный контент
Теперь давайте добавим контент, который вы хотите отображать на MOBILE устройствах.Перетащите ЛЮБОЙ модуль (для этого урока я просто буду использовать текстовый модуль, но вы можете сделать то же самое для любой кнопки, почтового модуля, заголовка и т. Д.) НЕПОСРЕДСТВЕННО ПОД ПРЕДЫДУЩИМ МОДУЛЕМ «DESKTOP» затем добавьте нужный контент для отображения на устройствах MOBILE . В этом примере я просто немного изменю текст и сделаю одно слово синим. Как это:
Шаг 4 — Установите настройки дисплея
Щелкните вкладку Advanced в верхней части модуля и в разделе Display выберите Small Devices Only … затем Сохраните изменения вашего модуля. Должно получиться так:
На этом этапе (когда вы все еще находитесь в режиме компоновщика страниц) вы все еще должны видеть ОБЕ модули на своем экране (как на скриншоте ниже)… это нормально! Когда вы сохраните изменения, волшебство начнет происходить.
Шаг 5. Сохранение, публикация и просмотр
Нажмите кнопку Готово (верхний правый угол экрана), а затем кнопку Опубликовать , чтобы сохранить изменения. Затем просмотрите свою страницу на рабочем столе, а затем на телефоне … заметили, как меняется содержимое? Вы также можете просто изменить размер браузера до размера мобильного устройства, например:
Это сделано? АГА!
Это круто? АГА!
Метод 3. Отображение и скрытие различного содержимого в Dynamik Website Builder
Итак … вы используете Dynamik Website Builder & Genesis? Правильно? Вы хотите отображать и скрывать различный контент на настольных и мобильных устройствах ? Круто! Круто! Продолжайте читать…
Ниже я научу вас очень простому волшебному трюку с использованием CSS, который покажет некоторый контент на настольных устройствах, а в том же месте покажет совершенно другой контент на мобильных устройствах. Мы также поговорим о видеоиграх, тако и моей сладкой мексиканской борцовской маске. Звучит неплохо? Звучит немного безумно? Да, черт возьми!
Готовы начать? Хороший! Первое, что вам нужно сделать, это…
Шаг 1. Добавьте все свое содержимое
Без фундамента дом не построить. Без XBOX вы не можете играть в видеоигры (вы — отстой PS4!). Без Taco Bus вы не сможете насладиться пикантным вкусом Taco Tuesday, а без вашего контента вы не сможете его показать / скрыть.
Итак, мы сделаем это очень простым и очень очевидным… давайте покажем / скроем эти два изображения:
Понимаете, о чем я. Будет очень очевидно, что и куда должно идти, верно?
Здесь я должен упомянуть, что то, что вы собираетесь изучить, можно применить к тексту, видео, гиперссылкам и т. Д.… Нет предела тому, что вы можете показать / скрыть.
Еще раз, чтобы упростить задачу, я собираюсь сделать все это в области Header Right на сайте Академии веб-дизайнеров, но это можно сделать где угодно (боковая панель, контент, нижний колонтитул и т. Д.).
Для этого я добавил текстовый виджет справа в заголовок и поместил простые теги , которые ссылаются на эти изображения:
НЕ КОПИРУЙТЕ ЭТОТ HTML-КОД, ЕЩЁ МОЛОДОЙ GRASSHOPPER!
Итак, с этим кодом сайт выглядит так на настольных компьютерах.
и на моем айфоне (да, андроид отстой!)
Примечание: я ненавижу бриться, поэтому прошу прощения за лишние волосы на лице.
Как видите, глупо выглядит.Однако у нас есть контент, который мы хотим показать и спрятать на месте … следующий шаг — …
Шаг 2 — Оберните его в теги DIV
Имея контент на месте, нам нужно отметить, какой контент следует отображать и скрывать… мы сделаем это, заключив каждый фрагмент в отдельный тег DIV.
Давайте упростим задачу: воспользуемся тегом div content-mobile для мобильного контента и тегом div content-desktop для обозначения содержимого рабочего стола.
Гениальный нейминг, я знаю!
Возвращение к моему правому виджету заголовка и упаковка двух частей контента (в данном случае изображений) в эти теги теперь выглядит так:
Теперь я хочу, чтобы вы поучаствовали здесь! Поймите, лучший способ чему-то научиться — это делать это, поэтому я играю в видеоигры … если мне когда-нибудь понадобится выстрелить из ракетной установки, прыгая с парашютом над зданием, теперь у меня есть этот навык.
Найдите место на своем участке, где вы хотите попрактиковаться в этом. Выберите область виджетов, страницу или другое место, где вы хотите потренироваться. Как только вы его получите, скопируйте и вставьте это в эту область:
png ”/>
Вы это сделали? Хороший!
Простое обертывание этих тегов DIV не должно ничего изменить… оно должно выглядеть так же, как на скриншоте выше. Смотрите, вы можете обернуть тег DIV вокруг чего угодно, но если к этому тегу DIV не применяется класс и какой-либо стиль, он ничего не сделает.
Итак, теперь, когда две части контента четко определены разными тегами DIV, теперь нам нужно…
Шаг 3. Добавьте CSS, чтобы показать или скрыть классы Div
Вот несколько запутанная часть (часть, на которой Эми все время зацикливается).Теперь нам нужно указать сайту (с помощью CSS) сделать следующее:
На настольных компьютерах: скрыть МОБИЛЬНЫЙ контент
На мобильных устройствах: скрыть содержимое DESKTOP и показать содержимое MOBILE
Хотя это может показаться немного устрашающим, на самом деле это довольно легко сделать. Всего несколько строк CSS в нескольких местах покажут и скроют различный контент.
Предполагая, что вы используете Genesis + Dynamik Website Builder (а вы должны использовать), давайте начнем с перехода к Genesis> Dynamik Custom> CSS.
Там вы найдете болтливое поле, в которое вы можете ввести собственный CSS … но вот вопрос: что контролирует CSS, который вы вводите в это поле? Сайт для ПК или для мобильных устройств?
ХЧЧмммм.
Ответ: ОБА.
Что?
Разум = взорван!?!
Это правда, CSS в этом большом поле влияет на веб-сайт (где бы он ни находился), поэтому нам нужно указать, что делать с КАЖДЫМ классом DIV в этом поле, ЗАТЕМ мы сделаем то же самое, но только для мобильных устройств.
Если вы помните (примерно 30 секунд назад), мы хотим скрыть МОБИЛЬНЫЙ контент и отображать НАСТОЛЬНЫЙ компьютер на настольных устройствах. Для этого нам нужно ввести этот CSS:
Так что скопируйте приведенный ниже код CSS и вставьте его в это место:
# content-desktop { display: inline; }
# content-mobile { display: none; }
Теперь волшебство начинает происходить.
Посмотрите, как сейчас выглядит сайт на моем рабочем столе:
Видите, как ушел мобильный образ? Его нет, потому что CSS сообщает display: none … что на сленге означает: убирайся отсюда к черту.Таким образом, изображение мобильного контента исчезло.
Bbbuuuuuuutttttt….
Это тоже пропало на моем телефоне:
Примечание. Вот мое впечатление об этом смайлике
🙁
Почему?
Поскольку поле Custom CSS влияет на веб-сайт везде, где он отображается… поэтому оно также скрывает его на моем телефоне.
Итак, давайте исправим это, чтобы отображать и скрывать различный контент там, где мы хотим!
Чтобы исправить это, нам нужно перейти в Genesis> Dynamik Design> Responsive и перейти к значку полностью вправо.Так…. тот, вокруг которого нарисован пунктирный прямоугольник:
:
Каждый значок управляет определенным размером экрана, а размеры экрана обычно связаны с устройством, на котором он просматривается. Вот почему мы собираемся добавить немного CSS к единственному разу справа, потому что он управляет самыми маленькими экранами (например, мобильными устройствами).
Какой CSS мы должны добавить? Что ж, что нам нужно сделать сейчас, так это отменить стандартный CSS, который мы добавили выше, чтобы вместо СКРЫТИЯ мобильного контента мы хотели показать его, и вместо того, чтобы отображать контент DESKTOP, мы хотим это скрыть.
Итак, мы хотим добавить это:
# content-desktop { display: none; }
# content-mobile { display: inline; }
Видите, как изменилось отображаемое значение?
Вставьте его в это поле и сохраните изменения, теперь ваш экран должен выглядеть так:
После этого последнее, что нужно сделать, — это проверить его на настольном компьютере и мобильном устройстве… поэтому на настольных компьютерах это выглядит так (изображение красного содержимого рабочего стола ):
, а на мобильных устройствах это выглядит так (синее изображение для мобильного контента ):
БОНУС: Помните ту маску, которую я подобрал на Косумеле, Мексика… ну, я подумал, что сейчас подходящее время надеть ее для вас! Добро пожаловать, интернет-люди.
Показать и скрыть различный контент — только представьте возможности
Как я уже упоминал выше, вы можете отображать и скрывать различный контент различными способами. Вы можете отображать видео YouTube на рабочих столах и приветственное сообщение на мобильных устройствах. У вас может быть ссылка для загрузки PDF-файла на рабочий стол, а затем ссылка для просмотра карты Google на мобильных устройствах. Возьми? Хороший!
Теперь вы знаете, и теперь вы можете показать / скрыть все, что захотите!
Твой друг. Ян «Парень в маске рестлинга» Андерсон
PS: Большое спасибо Бет (наша соседка из-за залива) за идею этого урока CSS о том, как показывать и скрывать различный контент!
Эта статья была обновлена 22 мая 2018 г.
Как проверить совместимость адаптивного веб-дизайна между браузерами
HTML по своей природе является подвижной средой. Текст и контейнеры расширяются по горизонтали и вертикали, чтобы использовать доступное пространство. Эта гибкость усложнила сложный дизайн, поэтому на рубеже тысячелетий многие сайты приняли фиксированную ширину, основанную на популярных размерах экрана.
Процесс оставался жизнеспособным, поскольку размеры экрана продолжали увеличиваться с 800 × 600 до 1024 × 768 и выше. Однако распространение смартфонов и выпуск iPhone в 2007 году изменили эту тенденцию. Сегодня более половины пользователей получают доступ к веб-страницам с мобильных устройств меньшего размера.
Примечание. Технически смартфоны часто имеют более высокое разрешение, чем многие мониторы, но отдельные пиксели становятся невидимыми. IPhone 11 Max переводит свое аппаратное разрешение 2688 x 1242 в более практичное логическое разрешение 896 x 414.Каждый логический пиксель отображается в сетку размером 3 × 3 реальных пикселя, что обеспечивает более плавные шрифты и повышенную детализацию изображения.
Первоначальный обходной путь заключался в двух сайтах: один для настольных компьютеров и один для мобильных устройств, часто с анализом пользовательского агента для перенаправления по мере необходимости. Это быстро стало непрактичным, поскольку разнообразие устройств росло в геометрической прогрессии.
Наконец, термин Отзывчивый веб-дизайн (RWD) был изобретен Итаном Маркоттом в 2010 году. Этот метод позволял одному и тому же сайту работать на любом устройстве независимо от размера экрана или размеров области просмотра.
Как работает задний привод?
Не существует единого подхода или технологии RWD.
Во-первых, вы должны определить, как дизайн сайта будет реагировать на дисплеи разного размера. Это сложная задача, и многие из первых сайтов RWD взяли существующий макет рабочего стола и удалили разделы по мере уменьшения размеров экрана.
Лучшей техникой была , сначала мобильная, . Он начался с линейного мобильного представления, которое работало на всех устройствах, а затем перестраивало или адаптировало контент по мере того, как становилось доступным больше места и поддерживаемые функции браузера.В последнее время многие сайты приняли более простые макеты, в которых работа на мобильных устройствах и настольных компьютерах в основном схожа.
Типичным примером RWD в действии является гамбургер-меню. Те, кто на маленьких экранах, могут щелкнуть значок, чтобы просмотреть ссылки для навигации, а те, у кого большие экраны, могут увидеть все параметры в горизонтальном списке.
В следующих разделах представлен ряд технических вариантов реализации.
HTML
область просмотра Мета-тег
Независимо от какой-либо техники RWD, следующий тег должен быть установлен в вашем HTML :
Параметр width = device-width гарантирует, что мобильные браузеры масштабируют логические пиксели CSS по ширине экрана.Без этого браузер будет считать, что он отображает сайт для настольных компьютеров, и соответствующим образом масштабирует его, чтобы его можно было панорамировать и масштабировать.
Медиа-запросы
Медиа-запросы были основной основой первых сайтов RWD. Они позволяют CSS ориентироваться на определенные диапазоны размеров области просмотра. Например:
п {
размер шрифта: 1 бэр;
}
@media (min-width: 900px) и (max-width: 1200px) {
п {
размер шрифта: 1,5 бэр;
}
}
Медиа-запросы все еще используются, хотя теперь доступны менее явные параметры.
<картинка> Элементы
Элемент HTML использует синтаксис медиа-запроса для управления отображаемым изображением из выбора из вариантов . Обычно это используется для художественного оформления, чтобы отобразить подходящее изображение для области просмотра устройства. Например:
<картинка>
Единицы окна просмотра CSS
CSS-единицы vw и vh представляют 1% ширины и высоты области просмотра соответственно. vmin составляет 1% от наименьшего измерения, а vmax составляет 1% от наибольшего измерения.
Они обеспечивают гибкость RWD, особенно при использовании вместе с calc . Например:
п {
размер шрифта: 1rem + 0,5vw;
}
Столбцы CSS
Многоколоночные макеты
CSS позволяют создавать несколько текстовых столбцов по мере увеличения размеров контейнера.Например:
CSS Flexbox и CSS Grid предоставляют современные методы размещения дочерних элементов в зависимости от их содержимого и доступного пространства. Основное отличие:
Flexbox используется для одномерных макетов. При необходимости элементы могут переноситься (или не переноситься) на следующую строку, чтобы столбцы не выстраивались в линию.
Сетка предназначена для двумерных макетов, обычно с идентифицируемыми строками и столбцами.
Любой из них можно использовать для создания внутреннего макета (термин, разработанный Джен Симмонс). По сути, размеры элементов определяются в соответствии с размерами области просмотра без необходимости в медиа-запросах. Например:
Аналогично, размеры отдельного элемента можно проверить с помощью offsetWidth и offsetHeight, хотя метод getBoundingClientRect () может возвращать больше информации, включая доли пикселя:
конст.
element = document.getElementById ('myelement'),
rect = element. getBoundingClientRect (),
ew = rect.width,
eh = rect.height;
Размеры окна и элемента могут изменяться при повороте устройства или изменении размера окна браузера.API-интерфейс matchMedia может анализировать медиа-запросы CSS и инициировать события изменения:
const mql = window.matchMedia ('(минимальная ширина: 600 пикселей)');
mqTest (mql);
mql.addListener (mqTest);
function mqTest (e) {
if (e.matches) {
console.log ('ширина области просмотра не менее 600 пикселей');
}
еще {
console.log ('ширина области просмотра меньше 600 пикселей');
}
}
Поддержка браузера
Технологии RWD, прежде всего, предлагают хорошую поддержку браузерами. Самый последний вариант - CSS Grid - поддерживается почти 95% браузеров, используемых сегодня.Однако по-прежнему необходимо протестировать свой сайт на различных устройствах, разрешениях и браузерах…
Тестирование в браузере
Изменение размера окна браузера - разумная стратегия тестирования на несколько часов, но она быстро становится неточной и громоздкой. Большинство браузеров предлагают режим адаптивного дизайна , который позволяет вам выбирать устройство и пользовательский агент, вращать его, выбирать разрешение, изменять плотность пикселей, регулировать полосу пропускания, имитировать прикосновение и делать снимки экрана.
В Firefox выберите Responsive Design Mode из меню Web Developer или нажмите Ctrl | Cmd + Shift + M :
В браузерах на основе Chromium откройте Инструменты разработчика из меню Дополнительные инструменты или нажмите Ctrl | Cmd + Shift + I .Затем щелкните на панели инструментов Toggle device icon:
Вернитесь на вкладку браузера, чтобы просмотреть сайт с измененным размером:
В Safari включите Показать меню «Разработка» в строке меню на вкладке Advanced браузера Preferences . Загрузите страницу и выберите Enter Responsive Design Mode из меню Develop .
Однако имейте в виду, что эти инструменты только имитируют размеры экрана устройства и пользовательского агента.Они не могут точно воспроизвести следующее:
Возможности рендеринга
Браузер будет использовать собственный механизм визуализации, а не эмулируемое устройство. Функция CSS, которая работает в Firefox, будет «работать» в эмулированном представлении iPhone независимо от фактической поддержки. Тем не менее, рабочий стол Chrome будет показывать разумное приближение к Android Chrome, а macOS Safari будет похож на iPhone, потому что они основаны на тех же механизмах рендеринга.
Старые устройства
Тестирование представления браузера iPhone в последней версии Safari не может точно представить старые устройства с устаревшими операционными системами и программным обеспечением.
Дисплеи высокой плотности
Вы ограничены физическими пикселями монитора вашего ПК, поэтому сайт может выглядеть лучше или хуже на реальном устройстве.
Сенсорный
Мышь или трекпад имеет более точное управление, чем устройство с сенсорным экраном и небольшим дисплеем. Может быть невозможно просмотреть эффекты, применяемые при наведении курсора.
Скорость обработки
Ваш компьютер, вероятно, будет иметь более быструю сеть и скорость обработки данных, чем мобильное устройство.
Эмуляторы мобильных ОС
Запуск виртуальной машины Android или iOS на вашем устройстве позволяет вам устанавливать и запускать настоящие мобильные браузеры и использовать их фактические механизмы рендеринга.
Эмуляторы Android
включают:
Genymotion: бесплатные и коммерческие облачные решения, все версии Android для Windows, macOS и Linux
Android Studio (и эмулятор): бесплатно, Windows, macOS и Linux
Visual Studio Xamarin (и эмуляторы): коммерческая, Windows и macOS
Bliss OS: бесплатно, Android 9 для Windows, Linux и Chrome OS
Phoenix OS: бесплатно, Android 7. 1 или 5.1 для Windows и macOS
Android-x86: бесплатные ISO-образы Android для любой платформы виртуальных машин.
Chrome - очевидный выбор браузера для Android, но вы также можете установить Opera Mini, которая характерна для телефонов с более низким энергопотреблением.
Варианты для iOS более ограничены:
У этих эмуляторов есть минусы:
Программное обеспечение требует определенных технических знаний и значительных ресурсов системы.
Многие варианты iOS - это симуляторы .Они адаптируют другой движок рендеринга и не всегда будут точными.
Услуги онлайн-тестирования
Этот сегмент создан в сотрудничестве с LambdaTest. Спасибо за поддержку партнеров, которые делают возможным использование SitePoint.
Несколько онлайн-сервисов позволяют тестировать адаптивные страницы в мобильных браузерах через Интернет. По сути, вы арендуете время на реальном устройстве и можете просматривать его экран в своем браузере. Нет программного обеспечения, которое нужно настраивать или поддерживать.
Помимо тестирования в реальном времени, некоторые службы включают API-интерфейсы автоматизированного тестирования, которые позволяют запускать сценарии и проверять регрессии стиля или неработающие пользовательские интерфейсы.
LambdaTest предоставляет более 2000 комбинаций устройства, ОС и браузера. Возможности включают:
тестирование localhost страниц, запущенных на вашем компьютере разработки
отладка с помощью встроенных инструментов разработчика
Тестирование геолокации из разных мест
автоматически сгенерированные полностраничные снимки экрана на нескольких устройствах
встроенный трекер проблем
Программное обеспечение браузера
LT (Windows, macOS, Linux) для тестирования и сравнения устройств с автоматической перезагрузкой и синхронизацией прокрутки
API автоматизированного тестирования на основе селена
Поддержка 24/7
- бесплатный план с неограниченным доступом от 15 долларов в месяц.
Подпишитесь на бесплатную учетную запись LambdaTest…
Альтернативные сервисы, которые также предоставляют живое и автоматизированное мобильное тестирование, включают:
Тестирование реальных устройств
Наконец, ничто не заменит тестирование на реальных устройствах. Это лучший способ оценить фактическую скорость обработки, сенсорное управление и адаптивный веб-дизайн вашего сайта.
В идеале вам следует протестировать как можно больше устройств, но ваш собственный недавний смартфон может не соответствовать среднему уровню оборудования.Постарайтесь приобрести устройства среднего класса, которым исполнилось год или два, например подержанный Moto G7 или iPhone 8.
Устройства в одной сети могут получить доступ к серверу вашего ПК, введя его IP-адрес в браузере. Это можно получить с помощью ifconfig в macOS и Linux или ipconfig в Windows.
Смартфон можно также подключить к компьютеру с помощью кабеля USB. Это позволяет удаленно управлять устройством и легко получать доступ к его панелям инструментов разработчика для отладки.Этот метод различается для разных платформ, но для отладки Android Chrome в настольной версии браузера:
На устройстве Android выберите Параметры разработчика в настройках и включите Отладка по USB .
Подключите устройство к компьютеру с помощью соответствующего кабеля USB. При первой попытке вам может быть предложено подтвердить действия на одном или обоих устройствах.
Запустите Chrome на вашем ПК и откройте в новой вкладке.Убедитесь, что Обнаружение USB-устройств включено.
При желании установите Перенаправление портов - например, порт 8888 на удаленном устройстве может быть перенаправлен на localhost: 8888 .
Ваше устройство должно появиться в списке. Теперь вы можете проверить новую или существующую вкладку, которая открывает инструменты разработчика устройства:
Чтобы отладить Safari для iPhone, сделайте следующее:
Подключите телефон к компьютеру Apple.
Откройте веб-страницу, которую вы хотите отладить в Safari на своем iPhone.
Запустите Safari на вашем компьютере.
В Safari на компьютере перейдите по ссылке Develop > [ваш iPhone] > [веб-сайт для проверки] . На вашем компьютере откроются инструменты разработчика Safari, что позволит вам отлаживать сайт на своем iPhone.
Один сайт, много просмотров
Технологии адаптивного веб-дизайна
позволяют создать единый веб-сайт, который может просматривать любой человек на любом устройстве, независимо от технических ограничений и границ.Другое дело, сделать его удобным для пользователя, но набор и возможности инструментов тестирования продолжают улучшаться.
Введение в кроссбраузерное тестирование - Изучите веб-разработку
В этой статье модуль начинается с обзора темы (кросс) браузерного тестирования и ответов на такие вопросы, как «что такое кроссбраузерное тестирование?», «С какими наиболее распространенными типами проблем вы столкнетесь?», и «каковы основные подходы к тестированию, выявлению и устранению проблем?»
Предварительные требования:
Знакомство с основными языками HTML, CSS и JavaScript.
Цель:
Чтобы получить представление о высокоуровневых концепциях кроссбраузерного тестирования.
Кроссбраузерное тестирование - это практика проверки того, что веб-сайты и веб-приложения, которые вы создаете, работают в приемлемом количестве веб-браузеров. Как веб-разработчик, вы обязаны убедиться, что не только ваши проекты работают, но и работают для всех ваших пользователей, независимо от того, какой браузер, устройство или дополнительные вспомогательные инструменты они используют.Вам нужно подумать о:
Различные браузеры, кроме одного или двух, которые вы регулярно используете на своих устройствах, в том числе немного более старые браузеры, которые некоторые люди все еще могут использовать, которые не поддерживают все новейшие, самые блестящие функции CSS и JavaScript.
Различные устройства с разными возможностями, от новейших лучших планшетов и смартфонов до смарт-телевизоров, вплоть до дешевых планшетов и даже более старых функциональных телефонов, на которых могут работать браузеры с ограниченными возможностями.
Люди с ограниченными возможностями, которые используют Интернет с помощью вспомогательных технологий, таких как программы чтения с экрана, или не используют мышь (некоторые люди используют только клавиатуру).
Помните, что вы не являетесь вашими пользователями - просто потому, что ваш сайт работает на MacBook Pro или Galaxy Nexus высокого класса, это не значит, что он будет работать для всех ваших пользователей - предстоит еще много тестирования!
Примечание : «Заставить Интернет работать для всех» дает более полезный взгляд на различные браузеры, которые используют люди, их долю на рынке и связанные с ними проблемы кроссбраузерности.
Здесь следует пояснить несколько терминов. Начнем с того, что когда мы говорим о сайтах, которые «работают с кроссбраузерностью», мы действительно говорим, что они должны обеспечивать приемлемый пользовательский интерфейс в разных браузерах. Для сайта потенциально нормально не предоставлять одинаковые возможности во всех браузерах, если основные функции доступны каким-либо образом. В современных браузерах вы можете получить что-то анимированное, трехмерное и блестящее, тогда как в старых браузерах вы можете получить просто плоскую графику, представляющую ту же информацию.Если владелец сайта доволен этим, значит, вы сделали свою работу.
С другой стороны, сайт не может нормально работать для зрячих пользователей, но быть полностью недоступным для пользователей с ослабленным зрением, потому что их приложение для чтения с экрана не может прочитать какую-либо информацию, хранящуюся на нем.
Во-вторых, когда мы говорим «через приемлемое количество веб-браузеров», мы не имеем в виду 100% браузеров в мире - это практически невозможно. Вы можете сделать несколько осознанных звонков относительно того, какие браузеры и устройства будут использовать ваши пользователи (как мы обсудим во второй статье серии - см. Нужно проверить их все?), Но вы не можете гарантировать все.Как веб-разработчик, вы должны согласовать с владельцем сайта ряд браузеров и устройств, над которыми обязательно должен работать код, но помимо этого, вам необходимо использовать защитный код, чтобы дать другим браузерам наилучшие шансы на то, чтобы используйте свой контент. Это одна из самых серьезных проблем веб-разработки.
Примечание : Защитное кодирование мы также рассмотрим позже в этом модуле.
Существует много разных причин, по которым возникают проблемы с кроссбраузерностью, и обратите внимание, что здесь мы говорим о проблемах, когда вещи ведут себя по-разному в разных браузерах / устройствах / предпочтениях просмотра.Прежде чем вы даже перейдете к кроссбраузерным проблемам, вы должны уже исправить ошибки в своем коде (см. Отладка HTML, Отладка CSS и Что пошло не так? Устранение неполадок JavaScript из предыдущих разделов, чтобы при необходимости освежить память).
Проблемы с кроссбраузерностью обычно возникают по следующим причинам:
Иногда в браузерах есть ошибки или функции по-разному реализуются. Эта ситуация намного менее плохая, чем была раньше; назад, когда IE4 и Netscape 4 конкурировали за доминирующий браузер в 1990-х годах, компании-разработчики браузеров сознательно реализовывали разные вещи друг для друга, пытаясь получить конкурентное преимущество, что сделало жизнь разработчиков адом. В наши дни браузеры намного лучше следуют стандартам, но иногда все же появляются различия и ошибки.
некоторые браузеры могут иметь разные уровни поддержки технологических функций, чем другие. Это неизбежно, когда вы имеете дело с передовыми функциями, которые браузеры только реализуют, или если вам нужно поддерживать действительно старые браузеры, которые больше не разрабатываются, которые, возможно, были заморожены (т.е. над ними больше не выполняется новая работа. ) задолго до того, как была изобретена новая функция.Например, если вы хотите использовать на своем сайте передовые функции JavaScript, они могут не работать в старых браузерах. Если вам нужно поддерживать старые браузеры, возможно, вам придется не использовать их или преобразовать код в старомодный синтаксис, используя при необходимости какой-то кросс-компилятор.
Некоторые устройства могут иметь ограничения, из-за которых веб-сайт работает медленно или плохо отображается. Например, если сайт был разработан так, чтобы хорошо смотреться на настольном ПК, он, вероятно, будет выглядеть крошечным и его будет трудно читать на мобильном устройстве. Если ваш сайт содержит множество больших анимаций, это может быть нормально для планшета с высокими характеристиками, но может быть вялым или прерывистым на устройстве низкого уровня.
и еще несколько причин.
В следующих статьях мы рассмотрим типичные проблемы кроссбраузерности и рассмотрим их решения.
Весь этот бизнес по кроссбраузерному тестированию может показаться трудоемким и пугающим, но это не обязательно - вам просто нужно тщательно спланировать это и убедиться, что вы проводите достаточно тестирования в нужных местах, чтобы убедиться, что вы этого не сделаете. столкнуться с неожиданными проблемами.Если вы работаете над большим проектом, вам следует регулярно его тестировать, чтобы убедиться, что новые функции работают для вашей целевой аудитории и что новые дополнения к коду не нарушают работу старых функций, которые ранее работали.
Если вы оставите все тестирование до конца проекта, любые обнаруженные вами ошибки будут намного дороже и трудоемкими для исправления, чем если вы их обнаружите и исправите по мере продвижения.
Рабочий процесс тестирования и исправления ошибок в проекте можно разбить примерно на следующие четыре этапа (это очень грубо - разные люди могут делать что-то совершенно по-другому):
Шаги 2–4 будут повторяться столько раз, сколько необходимо для выполнения всей реализации.Мы рассмотрим различные части процесса тестирования более подробно в следующих статьях, а пока давайте просто резюмируем, что может происходить на каждом этапе.
Первоначальное планирование
На начальном этапе планирования у вас, вероятно, будет несколько встреч по планированию с владельцем / клиентом сайта (это может быть ваш начальник или кто-то из сторонней компании, для которой вы создаете веб-сайт), на которых вы точно определите, каким должен быть веб-сайт - какое содержание и функциональные возможности он должен иметь, как он должен выглядеть и т. д.На этом этапе вы также захотите узнать, сколько времени у вас есть на разработку сайта - каков их крайний срок и сколько они собираются платить вам за вашу работу? Мы не будем вдаваться в подробности об этом, но проблемы с кроссбраузерностью могут серьезно повлиять на такое планирование.
После того, как вы получите представление о необходимом наборе функций и с какими технологиями вы, вероятно, будете создавать эти функции, вам следует начать изучение целевой аудитории - какие браузеры, устройства и т. Д. Будет использовать целевая аудитория для этого сайта? У клиента могут уже быть данные об этом из предыдущих исследований, которые он провел, например.грамм. с других веб-сайтов, которыми они владеют, или с предыдущих версий веб-сайта, над которым вы сейчас работаете. В противном случае вы сможете получить хорошее представление, просмотрев другие источники, такие как статистика использования для конкурентов или страны, в которых будет работать сайт. Вы также можете использовать немного интуиции.
Так, например, вы можете создать сайт электронной коммерции, который обслуживает клиентов в Северной Америке. Сайт должен полностью работать в последних нескольких версиях наиболее популярных браузеров для настольных и мобильных устройств (iOS, Android, Windows phone) - в их число должны входить Chrome (и Opera, поскольку он основан на том же механизме рендеринга, что и Chrome), Firefox, IE. / Edge и Safari.Он также должен обеспечивать приемлемый опыт работы с IE 8 и 9 и быть доступным с соблюдением требований WCAG AA.
Теперь, когда вы знаете свои целевые платформы тестирования, вам следует вернуться и просмотреть требуемый набор функций и какие технологии вы собираетесь использовать. Например, если владелец сайта электронной коммерции хочет 3D-тур на основе WebGL по каждому продукту, встроенному в страницы продукта, он должен будет согласиться с тем, что это просто не будет работать в версиях IE до 11. Вам придется согласиться. чтобы предоставить версию сайта без этой функции пользователям старых версий IE.
Вам следует составить список потенциальных проблемных областей.
Примечание : Вы можете найти информацию о поддержке технологий браузером, просмотрев различные функции на MDN - сайте, на котором вы находитесь! Вы также должны проконсультироваться с caniuse.com для получения дополнительных полезных сведений.
После того, как вы согласовали эти детали, вы можете приступить к разработке сайта.
Разработка
Теперь о разработке сайта. Вы должны разделить различные части разработки на модули, например, вы можете разделить различные области сайта вверх - домашнюю страницу, страницу продукта, корзину покупок, рабочий процесс оплаты и т. Д.Затем вы можете дополнительно разделить их: реализовать общий верхний и нижний колонтитулы сайта, реализовать подробный просмотр страницы продукта, реализовать постоянный виджет корзины покупок и т. Д.
Существует несколько общих стратегий кроссбраузерной разработки, например:
Сделайте так, чтобы вся функциональность работала как можно точнее во всех целевых браузерах. Это может включать в себя написание разных путей кода, которые воспроизводят функциональность по-разному, нацеленные на разные браузеры, или использование Polyfill для имитации любой отсутствующей поддержки с использованием JavaScript или других технологий, или использование библиотеки, которая позволяет вам написать один бит кода, а затем выполняет разные вещи в фоновом режиме в зависимости от того, что поддерживает браузер.
Примите тот факт, что некоторые вещи не будут работать одинаково во всех браузерах, и предоставьте разные (приемлемые) решения в браузерах, которые не поддерживают полную функциональность. Иногда это неизбежно из-за ограничений устройства - широкоформатный кинотеатр не даст такого же визуального восприятия, как 4-дюймовый мобильный экран, независимо от того, как вы программируете свой сайт.
Примите тот факт, что ваш сайт просто не будет работать в некоторых старых браузерах, и двигайтесь дальше. Это нормально, если ваш клиент / пользовательская база согласны с этим.
Обычно ваша разработка включает комбинацию трех вышеперечисленных подходов. Самое главное, что вы тестируете каждую маленькую деталь перед ее фиксацией - не оставляйте все тестирование до конца!
Тестирование / обнаружение
После каждого этапа внедрения вам нужно будет протестировать новую функциональность. Для начала вы должны убедиться, что в вашем коде нет общих проблем, которые мешают работе вашей функции:
Протестируйте его в паре стабильных браузеров в вашей системе, таких как Firefox, Safari, Chrome или IE / Edge.
Проведите небольшое тестирование доступности, например, попробуйте использовать свой сайт только с клавиатурой или используйте свой сайт с помощью программы чтения с экрана, чтобы проверить, доступен ли он для навигации.
Протестируйте на мобильной платформе, например Android или iOS.
На этом этапе исправьте все проблемы, которые вы обнаружите с новым кодом.
Затем вам следует попробовать расширить свой список тестовых браузеров до полного списка браузеров целевой аудитории и начать концентрироваться на устранении проблем с кроссбраузерностью (см. Следующую статью для получения дополнительной информации об определении ваших целевых браузеров).Например:
Попробуйте протестировать последнее изменение во всех современных браузерах для настольных ПК, в том числе в Firefox, Chrome, Opera, IE, Edge и Safari для ПК (в идеале - Mac, Windows и Linux).
Протестируйте его в обычных браузерах телефонов и планшетов (например, iOS Safari на iPhone / iPad, Chrome и Firefox на iPhone / iPad / Android),
Также проведите тесты в любых других браузерах, которые вы включили в свой целевой список.
Самый ленивый вариант - просто провести все возможные тесты самостоятельно (привлечь товарищей по команде, чтобы они помогли, если вы работаете в команде).По возможности вы должны попробовать протестировать его на реальных физических устройствах.
Если у вас нет средств для тестирования всех этих различных комбинаций браузера, операционной системы и устройств на физическом оборудовании, вы также можете использовать эмуляторы (эмулировать устройство с помощью программного обеспечения на вашем настольном компьютере) и виртуальные машины (программное обеспечение, которое позволяет имитировать несколько комбинаций операционной системы / программного обеспечения на вашем настольном компьютере). Это очень популярный выбор, особенно в некоторых случаях - например, Windows не позволяет одновременно устанавливать несколько версий Windows на одном компьютере, поэтому использование нескольких виртуальных машин часто является единственным вариантом.
Другой вариант - группы пользователей - использование группы людей вне вашей группы разработчиков для тестирования вашего сайта. Это может быть группа друзей или родственников, группа других сотрудников, класс в местном университете или профессиональная установка для тестирования пользователей, где людям платят за тестирование вашего сайта и предоставление результатов.
Наконец, вы можете стать умнее в тестировании, используя инструменты аудита или автоматизации; это разумный выбор, поскольку ваши проекты становятся все больше, поскольку выполнение всего этого тестирования вручную может занять очень много времени.Вы можете настроить свою собственную систему автоматизации тестирования (наиболее популярным приложением является Selenium), которая, например, может загружать ваш сайт в различных браузерах и:
посмотреть, вызывает ли нажатие кнопки что-то успешное (например, отображение карты), отображая результаты после завершения тестов
сделайте снимок экрана каждого из них, что позволит вам увидеть, соответствует ли макет в разных браузерах.
Если хотите, можете пойти и дальше. Доступны коммерческие инструменты, такие как Sauce Labs, Browser Stack, Endtest, LambdaTest, TestingBot и CrossBrowserTesting, которые делают это за вас, не беспокоясь о настройке, если вы хотите вложить немного денег в свое тестирование. Также можно настроить среду, которая автоматически запускает тесты для вас, а затем позволяет вам регистрировать свои изменения в центральном репозитории кода только в том случае, если тесты все еще проходят.
Тестирование в предварительных версиях браузеров
Часто бывает полезно протестировать предварительные версии браузеров; см. следующие ссылки:
Это особенно распространено, если вы используете очень новые технологии на своем сайте и хотите протестировать их на соответствие последним реализациям, или если вы столкнулись с ошибкой в последней версии браузера, и вы хотите увидеть, Разработчики браузера исправили ошибку в более новой версии.
Исправления / итерация
Как только вы обнаружили ошибку, вам нужно попытаться исправить ее.
Первое, что нужно сделать, - это как можно больше сузить область появления ошибки. Получите как можно больше информации от человека, сообщившего об ошибке: какие платформы, устройства, версии браузера и т. Д. Попробуйте это в аналогичных конфигурациях (например, та же версия браузера на разных настольных платформах или несколько разных версий одного и того же браузера на одной платформе), чтобы увидеть, насколько широко сохраняется ошибка.
Возможно, это не ваша вина - если в браузере есть ошибка, мы надеемся, что поставщик быстро ее исправит. Это могло быть уже исправлено - например, если ошибка присутствует в Firefox версии 49, но ее больше нет в Firefox Nightly (версия 52), то они исправили ее. Если это не исправлено, вы можете сообщить об ошибке (см. Сообщение об ошибках ниже).
Если это ваша вина, то нужно это исправить! Выявление причины ошибки включает ту же стратегию, что и любая ошибка веб-разработки (опять же, см. Разделы «Отладка HTML», «Отладка CSS» и «Что пошло не так? Устранение неполадок JavaScript»). После того, как вы обнаружили причину вашей ошибки, вам нужно решить, как ее обойти в конкретном браузере, в котором она вызывает проблемы - вы не можете просто сразу изменить код проблемы, так как это может нарушить код в других браузерах. . Общий подход обычно состоит в том, чтобы каким-то образом разветвлять код, например, использовать код обнаружения функций JavaScript для обнаружения ситуаций, в которых проблемная функция не работает, и запускать другой код в тех случаях, которые действительно работают.
После внесения исправления вы захотите повторить процесс тестирования, чтобы убедиться, что исправление работает нормально и не привело к поломке сайта в других местах или в других браузерах.
Чтобы повторить то, что было сказано выше, если вы обнаружите ошибки в браузерах, вы должны сообщить о них:
Эта статья должна дать вам общее представление о наиболее важных концепциях кроссбраузерного тестирования, которые вам необходимо знать. Вооружившись этими знаниями, теперь вы готовы двигаться дальше и начинать изучать стратегии кроссбраузерного тестирования.
Что общего между адаптивным веб-дизайном и доступностью?
Очень много. Адаптивный веб-дизайн (RWD) - это подход к веб-дизайну, направленный на предоставление гибких макетов веб-страниц для обеспечения оптимального просмотра на широком спектре устройств.RWD обеспечивает удобство чтения и навигации на различных устройствах разного размера - от больших настольных мониторов до экранов мобильных телефонов - с минимальным изменением размера и прокруткой. Вместо того, чтобы создавать несколько сайтов для нескольких типов устройств, RWD позволяет разработчикам создавать один сайт, который реагирует на каждый тип устройства, которое обращается к нему, и обеспечивает соответствующий вывод.
С момента создания Интернета пользователи с ослабленным зрением искали способы изменить размер текста без добавления горизонтальной прокрутки к странице.Кроме того, фиксированные, не подвижные размеры приводят к наложению или обрезке текста при изменении размера текста веб-страницы. Точно так же таблицы и нефиксированные страницы, используемые для размещения контента, вызывают проблемы с порядком чтения для пользователей программ чтения с экрана. Универсальный формат для всех сайтов, не отвечающих потребностям пользователей с ограниченными возможностями. Принципы адаптивного дизайна, включая гибкие макеты, приносят пользу пользователям с ограниченными возможностями как на настольных компьютерах, так и на мобильных устройствах.
Effective RWD использует адаптивный (несколько макетов подвижной сетки), а не адаптивный (несколько макетов фиксированной ширины) дизайн.Адаптивный веб-дизайн ориентирован на ширину веб-браузера каждого пользователя, чтобы определить, сколько места доступно и как он должен отображать веб-сайт. Точки останова разрешения устанавливаются в целевые диапазоны, которые определяют определенные типы дисплеев. Например, один набор CSS используется, когда ширина экрана больше или меньше определенного размера. @media all and (max-width: 480px) { #container { // styles here }
В своем сообщении на RWD в декабре 2012 года новостной блог Mashable назвал 2013 год «Годом отзывчивой сети». Дизайн », во многом из-за увеличения продаж таких устройств, как планшеты и смартфоны, что привело к серьезным изменениям в том, как потребители просматривают веб-сайты, подобные их.Mashable прогнозирует, что к концу 2013 года более 50% трафика их веб-сайтов будет приходиться на мобильные устройства. Пользователи с ограниченными возможностями также устремились к мобильным устройствам, таким как Apple iPhone и iPad, а также к смартфонам и планшетам Android на базе Google. Эти мобильные платформы содержат доступные браузеры и поддерживают доступные функции и вспомогательные технологии. Последние законы США (например, CVAA) помогают обеспечить доступность расширенных коммуникационных услуг (ACS) на мобильных устройствах.
Поскольку к Интернету подключены буквально тысячи различных устройств, создание собственных приложений для работы на всех этих платформах не всегда возможно. Кроме того, многие пользователи просто предпочитают использовать браузер вместо приложения. Согласно исследованию будущего мобильных новостей Pew Research Center, опубликованному в октябре 2012 года, примерно 60% пользователей планшетов и смартфонов предпочитают использовать свои браузеры для доступа к новостям на своих устройствах. Точно так же пользователи с ограниченными возможностями не хотят иметь отдельные сайты для доступа к контенту.Хорошо спроектированные веб-сайты могут реагировать как на устройство пользователя, так и на его потребности. Например, соответствующие методы, такие как прогрессивное улучшение и прогрессивное раскрытие, распространены на мобильных устройствах и приносят пользу пользователям с ограниченными возможностями. В основе отзывчивого веб-дизайна лежат четыре ключевых компонента:
Медиа-запросы и прослушиватели медиа-запросов - помогает устройству решить, как просматривать веб-сайт в зависимости от размера экрана.
Гибкая компоновка на основе сетки - использует относительный размер, позволяя изменять размер и переупорядочивание содержимого по мере увеличения или уменьшения ширины сетки веб-страницы в процентах.
Гибкие изображения и мультимедиа с помощью динамического изменения размера или CSS
Создание области просмотра
Каждый из вышеперечисленных компонентов может влиять на доступность.
Медиа-запросы могут использоваться для предоставления различных CSS в зависимости от свойств устройства. Существует медиа-тип CSS для «слухового» и «брайлевского». Однако эти два типа мультимедиа плохо поддерживаются браузерами и вспомогательными технологиями. В целом, хотя адаптация сайта к размеру устройства с помощью точек останова поможет пользователям, которым требуется увеличение, и уменьшит необходимое масштабирование. Кроме того, настройка количества контента на сайте в зависимости от ширины устройства обеспечит более сфокусированный просмотр контента для пользователей с когнитивными нарушениями.
Плавный дизайн способствует перекомпоновке содержимого при изменении его размера и помогает обеспечить правильный порядок чтения. Гибкие макеты обычно отображают контент в том порядке, в котором он отображается в объектной модели документа (DOM). Это тот же порядок, в котором программы чтения с экрана отображают контент для слепых или слабовидящих пользователей. Гибкие макеты также требуют относительного изменения размера содержимого и контейнеров, позволяя тексту и содержимому увеличиваться и автоматически сдвигать другое содержимое вниз по странице. В большинстве современных настольных браузеров функция масштабирования увеличивает всю страницу (а не только текст) и заставляет полосы прокрутки, а не только текст.Хотя это обеспечивает доступ, он обеспечивает много горизонтальной прокрутки. Для более эффективного увеличения требуется жидкостная компоновка на основе относительных единиц. Пользователи с ослабленным зрением могут извлечь из этого выгоду, указав браузеру на рабочем столе «изменять размер только текста» при выполнении команды масштабирования. Теоретически прослушиватель мультимедиа может использоваться для обнаружения изменений в устройстве и обновления макета. В настоящее время это используется для изменения макета сайта, когда пользователь переходит из портретного режима в альбомный на мобильном устройстве, но эту концепцию можно применить для проверки проверки пользовательского масштаба на мобильных устройствах.
Гибкое использование изображений позволяет изменять размер изображений в соответствии с доступной для них областью. Это позволяет изображениям занимать больше места, если оно доступно, и не перекрывать другой контент, если доступно меньше места.
Создание и правильная настройка области просмотра очень важны. Может потребоваться указать область просмотра на мобильных сайтах, чтобы обеспечить отображение сайта с правильным размером устройства. К сожалению, многие сайты RWD ограничивают возможность изменения окна просмотра пользователем и могут ограничивать уровень масштабирования.Критерии успеха 1.4.4 Руководства по обеспечению доступности веб-контента (WCAG) версии 2 уровня AA требуют, чтобы сайты были масштабируемыми без вспомогательных технологий до 200%. Это означает, что в случае мобильного браузера функция масштабирования пальцем должна позволять масштабирование до 200% без использования вспомогательной технологии масштабирования на мобильном устройстве. В приведенном ниже примере кода метатег установлен правильно, чтобы пользователь мог масштабировать страницу, и он устанавливает максимальный масштаб 2,0, позволяющий пользователю увеличивать масштаб до 200%.
Соображения по поводу RWD и доступности
для настольных браузеров
Полосы прокрутки должны появляться, когда содержимое не умещается на экране. Предотвращение полос прокрутки путем скрытия переполнения без возможности доступа к содержимому при изменении его размера является нарушением доступности.
Страницы должны правильно реагировать на настраиваемый CSS и удаление CSS. Включение режима высокой контрастности в таких браузерах, как Internet Explorer, отключит фоновые изображения, чтобы обеспечить надлежащий уровень контрастности текста.
Страница должна быть понятной без CSS Background-изображений.
Страница должна быть удобочитаемой без указанных цветов.
Если задан цвет фона, необходимо также указать цвет переднего плана, и наоборот.
Положение и порядок чтения содержимого должны оставаться правильными.
Использование CSS для скрытия содержимого в различных контекстах не всегда может обеспечить желаемый результат с помощью вспомогательных технологий. Следует использовать манипуляции с DOM для добавления или удаления содержимого страницы (например, appendChild).
На мобильных устройствах
Область просмотра должна позволять пользователям увеличивать (масштабировать) до 200%.
Минимальный уровень контрастности между цветами переднего плана и фона может потребоваться больше при отображении на мобильном устройстве. Например, яркость стандартного текста должна составлять 4,5: 1 для соответствия уровню AA WCAG. На мобильном устройстве потребность в контрасте, вероятно, будет больше, например, коэффициент яркости 7: 1, указанный в критериях уровня AAA WCAG 2.
Разработчики по-прежнему должны учитывать рекомендации и стандарты доступности, такие как WCAG 2, при разработке мобильных веб-сайтов. Например, распространено заблуждение, что порядок фокусировки (или порядок табуляции) не важен на устройствах с сенсорным экраном. Порядок фокусировки по-прежнему важен для пользователей вспомогательных технологий и альтернативных устройств ввода. Например, жест смахивания с помощью мобильного средства чтения с экрана переместится к следующему блоку контента, например ссылке, полю формы или тексту, в зависимости от порядка DOM.Пользователи с ограниченными физическими возможностями могут использовать внешнюю клавиатуру или устройство, имитирующее клавиатуру, для доступа к планшету.
В идеале концепция адаптивного веб-дизайна должна быть расширена за пределы ширины устройства до возможностей устройства и потребностей пользователей. Например, действительно отзывчивый сайт может знать предпочтения пользователей, автоматически включать скрытые субтитры для мультимедиа, автоматически увеличивать страницу до 200% или представлять контент с большим межстрочным интервалом в зависимости от предпочтений пользователя.
Дополнительная информация
Прогрессивное улучшение
Методики прогрессивного улучшения предписывают базовую реализацию, которая работает на нескольких устройствах и с широким спектром вспомогательных технологий и функций доступности платформы. Богатые интерактивные возможности добавляются автоматически, если они поддерживаются устройством, что позволяет пользователям с соответствующими устройствами или в случае вспомогательных технологий с возможностью доступа пользоваться улучшенным веб-контентом.
Прогрессивное раскрытие информации
Прогрессивное раскрытие информации - это принцип пользовательского интерфейса, направленный на устранение беспорядка на сайтах, привлекая пользователей к определенной задаче. Сайты с менее сфокусированным контентом могут помочь пользователям с когнитивными нарушениями оставаться сосредоточенными и решить проблемы навигации, которые слепые или ограниченные пользователи часто находят на сложных сайтах.В прошлом пользователи вспомогательных технологий часто посещали мобильные сайты со своими настольными браузерами, поскольку они были более доступными и менее загроможденными, когда мобильные версии сайтов были впервые представлены до принятия RWD. По-прежнему может быть полезно разрешить пользователю переключаться между мобильной и настольной версиями сайта, даже если используется RWD.
Метрике или Google Analytics) по посещаемости в разрезе устройств, с которых пользователи заходят на сайт. В случае если более 15% аудитории используют смартфоны или планшеты, рекомендуется разработать адаптивную верстку или мобильную версию. Здесь важно учитывать и трафик сайта. Например, для сайтов с большим количеством посетителей (от 1 000 000 и выше) данная планка снижается, так как нельзя пренебрегать таким большим сегментом трафика сайта.
Сайт автоматически адаптируется под размеры устройства, на котором он открыт, будь то монитор ПК, смартфон или планшет. Благодаря такому типу верстки сайт будет удобно и понятно отображаться на различных устройствах. С применением технологий адаптивного дизайна функциональность сайта нисколько не страдает.
Большим плюсом является тот факт, что адаптивная версия улучшает поведенческие факторы основного сайта. Это полезно с точки зрения продвижения и юзабилити. Исходя из этого, свой выбор мы рекомендуем сделать в пользу адаптивной верстки.
Тем самым, вы сможете оценить, насколько корректно страница отображается на выбранном устройстве, и внести правки, если понадобится. На примере ниже проверим отображение страницы на широкоформатных экранах и на мобильных телефонах.
к. ширина экрана больше 768px (что позволяет открыть версию для планшета) но меньше 992px (что не позволяет открыть версию для ноутбука, т.к. ширины не хватает до минимального значения).
Поскольку мы отключили адаптацию под планшет и ноутбук — остается только мобильная и широкоформатная версия. В таком случае, планшеты и ноутбуки тоже откроют мобильную версию, поскольку это ближайшее наименьшее устройство. 
Подробно разобрали это в пункте «Адаптация секций» 
Например, если вы укажите большой отступ слева, то на мобильных он тоже добавится. Но, поскольку на мобильных ширина экрана не большая — лишний отступ может слишком сильно сместить контент.
Например, если мы скрыли виджет для мобильных и перешли в мобильный формат редактора, то скрытый виджет отобразится так:
Но, что делать, если нужного функционала в настройках адаптации нет? Например, если мы хотим задать разный фон для секции на мобильных и на широкоформатных экранах.
Первая секция будет отображаться на широкоформатном экране, ноутбуке и планшете, но не будет отображаться на мобильных, т.к. будет скрыта от этого устройства. Вторая секция будет отображаться только на мобильном, т.к. от других устройств будет скрыта.
Этот виджет позволяет посетителю скрыть кнопки меню или раскрыть их, поэтому меню не занимает лишнего места на мобильном экране. Раскрываются кнопки меню по нажатию на эту иконку:
Это значит, что если посетитель зайдет на страницу с мобильного — контент у него будет отображаться только на зеленом фоне, и другие полосы не будет видно.
Появился доступ к настройке ставок для показов на гаджетах.
Видео.Автомобильный производитель Toyota.Сеть ресторанов с доставкой PizzaHut.
Подобная версия значительно упрощена по сравнению с обычной, десктопной.
.jpg)
Но даже если бы этого не было, то здравый смысл подсказывает, что на любом экране сайт должен выглядеть достойно. Поэтому при создании сайта, даже на готовом шаблоне, нужно проверять, как выглядит ваш сайт на разных устройствах и экранах.
Здесь можно посмотреть другие способы включения режима адаптивного дизайна в Мозилле.
Этот способ не позволяет протестировать все устройства, но для того, чтобы быстро оценить адаптивность веб-страницы, вполне подходит.
Поэтому необходимо анализировать кроссбраузерность сайта, то есть насколько корректно веб-ресурс отображается в разных браузерах.
Согласно исследованию Forrester «Цифровой бизнес-императив», 43% клиентов банковского сектора в США использовали мобильные телефоны для совершения банковских операций в течение трех месяцев.
Д.).). Эти различия значительно влияют на общую производительность и визуализацию веб-компонентов, таких как изображения, видео и текст, на разных устройствах. Еще одним важным фактором является то, что мобильные пользователи не всегда могут быть подключены к высокоскоростной сети, поэтому веб-страницы должны быть тщательно спроектированы для эффективной работы в соединениях с низкой пропускной способностью.
Некоторые сайты могут быть не предназначены для настройки экрана с переменным размером, из-за чего элементы выглядят очень маленькими на устройствах с меньшими экранами.
Д.), А на мобильных устройствах эти таблицы могут быть медленными и трудными для понимания.
Сначала решите проблемы дизайна мобильных устройств, а затем постепенно улучшайте дизайн для более крупных устройств.
При проектировании следует учитывать небольшие портативные устройства, работающие в зонах с низким уровнем сигнала.Большие фотографии и сложная графика не подходят для мобильных устройств, работающих в таких условиях. Убедитесь, что все изображения оптимизированы для разных размеров окон просмотра и плотности пикселей. Рекомендуемый подход — переключение разрешения, которое позволяет браузеру выбрать файл изображения подходящего размера в зависимости от размера экрана устройства. Переключение разрешения использует два атрибута — 
Ширина первого изображения, указанного в 
Например, если экран намного уже, чем ширина таблицы, пользователи вынуждены уменьшать масштаб, из-за чего текст становится слишком маленьким для чтения.И наоборот, если экран шире таблицы, пользователи должны увеличивать масштаб для просмотра данных, что требует постоянной вертикальной и горизонтальной прокрутки.
Если пользователь хочет щелкнуть диаграмму, чтобы увидеть полную таблицу, можно использовать описанный выше подход для отображения данных в табличной форме. (: До)
При таком подходе переключение на правильный формат происходит на стороне клиента, и к серверу делается только один запрос. Это сокращает сетевую задержку и позволяет браузеру выбирать наиболее подходящий формат видео без его предварительной загрузки.
Следовательно, важно разрабатывать веб-сайты, которые работают и хорошо масштабируются на мобильных устройствах. Цель состоит в том, чтобы улучшить взаимодействие с мобильным пользователем, чтобы оно соответствовало функциональности и производительности настольных компьютеров и больших мониторов.
По сравнению с тем, что было несколько лет назад, мобильный веб-сайт — это не то, что «приятно иметь», это необходимость.
Это даст вам подлинное представление о том, насколько адаптивен дизайн сайта и совместим ли ваш интернет-магазин с устройствами всех форм и размеров.
Точно так же, анализируя посещаемость вашего веб-сайта, вы сможете адаптировать контент под пользователя, убедившись, что призывы к действию и контент, которые вы показываете, нравятся покупателю и соответствуют его потребностям.
Пришло время взглянуть на «микромоменты» в этом путешествии.
Это потому, что масштабировать сайт проще, чем уменьшать.
Итак, убедитесь, что усилия, которые вы собираетесь сделать, чтобы ваш сайт был отзывчивым, включают и ваши электронные письма. Это включает в себя электронные письма с подтверждением после того, как ваша служба выполнения заказов собрала, упаковала и отправила их заказ.
Это автоматически сохранит пропорции ваших изображений.
iwdro.org/web-design/4-ways-to-make-your-website-responsive-across-all-platforms
Адаптивный дизайн сложен, дорог и обычно используется только крупными, хорошо финансируемыми веб-сайтами.
Таким образом, если вы перетаскиваете край браузера, чтобы увеличить или уменьшить его, вы увидите, как меняется дизайн в реальном времени. Если вы хотите увидеть, как работает адаптивный дизайн, посетите сайт, на котором используется адаптивный дизайн, например http://foodsense.is/, и если перетащите край окна браузера, чтобы сделать его меньше и больше, вы увидите, как адаптивный дизайн работает. Посетите этот сайт на iPhone, iPad или другом устройстве аналогичного размера, и вы увидите дизайн, ориентированный на устройство этого размера.
это выйдет в будущем.
Вам придется ограничить количество функций, но, по крайней мере, он будет доступен для всех в вашей аудитории.
и сотовые телефоны с ограниченными возможностями.Вы найдете хорошо написанный пример того, как был создан адаптивный дизайн для Boston Globe, на http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/.
Метод конструктора веб-сайтов Dynamik 
Демонстрационный контент
Волшебный CSS
Проверьте это
Отображение используется для того, чтобы волшебство произошло. Есть много опций для команды Display (смотрите их здесь), но мы в основном используем опцию Block и None .
В этом примере я просто использую латинский текст-заполнитель, но этот метод будет работать с любым контентом.
Должно получиться так:
Мы также поговорим о видеоиграх, тако и моей сладкой мексиканской борцовской маске. Звучит неплохо? Звучит немного безумно? Да, черт возьми!
Д.).
png ”/>
png ”/> 
Вот почему мы собираемся добавить немного CSS к единственному разу справа, потому что он управляет самыми маленькими экранами (например, мобильными устройствами).
Эта гибкость усложнила сложный дизайн, поэтому на рубеже тысячелетий многие сайты приняли фиксированную ширину, основанную на популярных размерах экрана.
Это быстро стало непрактичным, поскольку разнообразие устройств росло в геометрической прогрессии.
Они позволяют CSS ориентироваться на определенные диапазоны размеров области просмотра. Например:
getBoundingClientRect (),
ew = rect.width,
eh = rect.height;
Большинство браузеров предлагают режим адаптивного дизайна , который позволяет вам выбирать устройство и пользовательский агент, вращать его, выбирать разрешение, изменять плотность пикселей, регулировать полосу пропускания, имитировать прикосновение и делать снимки экрана.
Загрузите страницу и выберите Enter Responsive Design Mode из меню Develop .
1 или 5.1 для Windows и macOS
Нет программного обеспечения, которое нужно настраивать или поддерживать.
Это позволяет удаленно управлять устройством и легко получать доступ к его панелям инструментов разработчика для отладки.Этот метод различается для разных платформ, но для отладки Android Chrome в настольной версии браузера:
В современных браузерах вы можете получить что-то анимированное, трехмерное и блестящее, тогда как в старых браузерах вы можете получить просто плоскую графику, представляющую ту же информацию.Если владелец сайта доволен этим, значит, вы сделали свою работу.
Это одна из самых серьезных проблем веб-разработки.
В наши дни браузеры намного лучше следуют стандартам, но иногда все же появляются различия и ошибки.
Если ваш сайт содержит множество больших анимаций, это может быть нормально для планшета с высокими характеристиками, но может быть вялым или прерывистым на устройстве низкого уровня.
/ Edge и Safari.Он также должен обеспечивать приемлемый опыт работы с IE 8 и 9 и быть доступным с соблюдением требований WCAG AA.
Это может быть группа друзей или родственников, группа других сотрудников, класс в местном университете или профессиональная установка для тестирования пользователей, где людям платят за тестирование вашего сайта и предоставление результатов.
Доступны коммерческие инструменты, такие как Sauce Labs, Browser Stack, Endtest, LambdaTest, TestingBot и CrossBrowserTesting, которые делают это за вас, не беспокоясь о настройке, если вы хотите вложить немного денег в свое тестирование. Также можно настроить среду, которая автоматически запускает тесты для вас, а затем позволяет вам регистрировать свои изменения в центральном репозитории кода только в том случае, если тесты все еще проходят.
После того, как вы обнаружили причину вашей ошибки, вам нужно решить, как ее обойти в конкретном браузере, в котором она вызывает проблемы - вы не можете просто сразу изменить код проблемы, так как это может нарушить код в других браузерах. . Общий подход обычно состоит в том, чтобы каким-то образом разветвлять код, например, использовать код обнаружения функций JavaScript для обнаружения ситуаций, в которых проблемная функция не работает, и запускать другой код в тех случаях, которые действительно работают.
Точно так же таблицы и нефиксированные страницы, используемые для размещения контента, вызывают проблемы с порядком чтения для пользователей программ чтения с экрана. Универсальный формат для всех сайтов, не отвечающих потребностям пользователей с ограниченными возможностями. Принципы адаптивного дизайна, включая гибкие макеты, приносят пользу пользователям с ограниченными возможностями как на настольных компьютерах, так и на мобильных устройствах.
Дизайн », во многом из-за увеличения продаж таких устройств, как планшеты и смартфоны, что привело к серьезным изменениям в том, как потребители просматривают веб-сайты, подобные их.Mashable прогнозирует, что к концу 2013 года более 50% трафика их веб-сайтов будет приходиться на мобильные устройства. Пользователи с ограниченными возможностями также устремились к мобильным устройствам, таким как Apple iPhone и iPad, а также к смартфонам и планшетам Android на базе Google. Эти мобильные платформы содержат доступные браузеры и поддерживают доступные функции и вспомогательные технологии. Последние законы США (например, CVAA) помогают обеспечить доступность расширенных коммуникационных услуг (ACS) на мобильных устройствах.
Точно так же пользователи с ограниченными возможностями не хотят иметь отдельные сайты для доступа к контенту.Хорошо спроектированные веб-сайты могут реагировать как на устройство пользователя, так и на его потребности. Например, соответствующие методы, такие как прогрессивное улучшение и прогрессивное раскрытие, распространены на мобильных устройствах и приносят пользу пользователям с ограниченными возможностями. 
Гибкие макеты также требуют относительного изменения размера содержимого и контейнеров, позволяя тексту и содержимому увеличиваться и автоматически сдвигать другое содержимое вниз по странице. В большинстве современных настольных браузеров функция масштабирования увеличивает всю страницу (а не только текст) и заставляет полосы прокрутки, а не только текст.Хотя это обеспечивает доступ, он обеспечивает много горизонтальной прокрутки. Для более эффективного увеличения требуется жидкостная компоновка на основе относительных единиц. Пользователи с ослабленным зрением могут извлечь из этого выгоду, указав браузеру на рабочем столе «изменять размер только текста» при выполнении команды масштабирования. Теоретически прослушиватель мультимедиа может использоваться для обнаружения изменений в устройстве и обновления макета. В настоящее время это используется для изменения макета сайта, когда пользователь переходит из портретного режима в альбомный на мобильном устройстве, но эту концепцию можно применить для проверки проверки пользовательского масштаба на мобильных устройствах.
Следует использовать манипуляции с DOM для добавления или удаления содержимого страницы (например, appendChild).
Например, жест смахивания с помощью мобильного средства чтения с экрана переместится к следующему блоку контента, например ссылке, полю формы или тексту, в зависимости от порядка DOM.Пользователи с ограниченными физическими возможностями могут использовать внешнюю клавиатуру или устройство, имитирующее клавиатуру, для доступа к планшету.
Богатые интерактивные возможности добавляются автоматически, если они поддерживаются устройством, что позволяет пользователям с соответствующими устройствами или в случае вспомогательных технологий с возможностью доступа пользоваться улучшенным веб-контентом.