Ваш сайт доступен для мобильных устройств? Это действительно отзывчиво? Если это не так, согласно eMarketer , ожидается, что в этом году число пользователей смартфонов превысит 1,75 миллиарда. К 2017 году глобальное проникновение мобильных телефонов вырастет до 69,4% населения.
Я знаю: вы слышали песнопения раньше; интернет везде; в следующем году интернет будет просматриваться только на мобильном устройстве; настольные компьютеры идут по пути динозавров…
А если серьезно, то, что происходит! Нравится вам это или нет, но если вы не попали в команду, у сайта, в который вы вложили столько средств, скоро может появиться очень ограниченная аудитория.
Но потом все усложняется, потому что нет ни одного мобильного ландшафта. С выпуском iPhone 6 и 6 Plus недавно появилось не менее 46 конкурирующих устройств с различными разрешениями и аппаратными возможностями. И в дополнение к этому, есть скорость сети, с которой приходится бороться.
Принимая во внимание, что на настольном компьютере вы можете думать только с точки зрения скорости Wi-Fi или DSL, для мобильных телефонов существуют различные скорости передачи данных в сети, а именно: GPRS , EDGE , 3G и LTE (4G ).
Хотя вы можете сделать сайт с поддержкой мобильных устройств, можете ли вы создать такой сайт, который будет работать с таким широким спектром устройств, который также хорошо работает на разных скоростях передачи данных?
Теперь я хочу показать вам два простых инструмента; инструменты, которые могут помочь вам реагировать на наиболее распространенные устройства и скорости и оставаться в курсе проблем разработки, пока ваш сайт не станет идеальным. Начнем с номера один.
Мобильная эмуляция в Google Chrome
С выпуском Chrome 32 был добавлен новый инструмент для разработчиков — мобильная эмуляция . Этот инструмент — абсолютная находка для отладки мобильных и адаптивных проектов.
Если он еще не открыт, откройте его одним из следующих вариантов:
- Нажмите F12 (или Cmd + Alt + l на Mac)
- Нажмите Инструменты разработчика под View -> Developer
- Щелкните правой кнопкой мыши в любом месте веб-сайта и выберите « Проверить элемент».
В верхней части окна инструментов разработчика вы увидите новый значок, который выглядит как мобильный телефон. Нажмите на него, и режим эмуляции мобильного телефона будет включен для сайта, на котором вы сейчас находитесь, как вы можете видеть на скриншоте ниже.
Вы можете видеть, что доступны обычные инструменты разработчика, но есть ряд дополнительных опций, и сайт создан для имитации мобильного устройства, в данном случае iPhone 6 Plus. Давайте посмотрим на это более подробно сейчас.
Конфигурация устройства
Вверху слева находится конфигурация устройства, позволяющая выбрать одно из 46 мобильных устройств для эмуляции. Ниже списка устройств вы можете увидеть варианты:
- Разрешение экрана
- Отображение поворота между пейзажем и портретом
- Установите соотношение пикселей устройства
- Установите дисплей в пределах видимой области просмотра или дисплея
это в полном размере
конфигурация сети
Далее синим цветом показана конфигурация сети. Там вы можете установить скорость сети, от автономного режима до регулирования. Это поможет вам понять, насколько быстро или медленно ваш сайт будет загружаться в зависимости от скорости сети, в которой находится пользователь.
В разделе «сеть» вы можете вручную установить пользовательский агент. Это поможет вам увидеть, как будет реагировать ваш сайт.
Контрольные точки
А как насчет тех точек останова? Инструмент автоматически обнаружит все точки останова, которые вы установили в CSS, и предоставит ссылку на каждую из них. Вы можете видеть на изображении ниже, что он обнаружил 6. Нажав на каждый из них, вы можете увидеть, как страница отображается на каждом.
Один момент о строках User-Agent; если вы не хотите устанавливать их вручную, вам не нужно это делать. Нажав клавишу escape на клавиатуре, вы можете открыть дополнительные параметры конфигурации и выбрать из списка предустановленных пользовательских агентов для подмены.
В дополнение к этому вы также можете эмулировать датчики аппаратного устройства, включая сенсорный ввод , геолокацию и акселерометр .
Расширение Usersnap
Со всей конфигурацией, которую обеспечивает эта новая редакция, проектирование для мобильных устройств стало намного проще. Но это не конец истории.
Одно дело увидеть, как сайт отображается в разных условиях, но как вы делитесь результатами со своими разработчиками и дизайнерами?
Расширение Usersnap Chrome прекрасно интегрируется с этим новым дополнением к инструментам разработчика Chrome. Вы можете воспользоваться функцией аннотации экрана и создания отчетов, с которой вы уже знакомы, если вы когда-либо использовали виджет Usersnap, и применить его к сеансам проектирования с помощью мобильного эмулятора.
Если у вас его еще нет, установите его из Интернет-магазина Chrome . После установки на панели инструментов Chrome появится значок Usersnap. При первом использовании появится небольшая подсказка, указывающая, что вы должны настроить ее.
Нажмите «ОК», и после входа в Usersnap вы попадете на страницу конфигурации инструмента. Внизу страницы, как показано ниже, вы увидите список своих проектов.
Выберите подходящий из списка и нажмите « Выбрать проект» . После этого вы готовы использовать расширение. Возвращаясь к плагину мобильной эмуляции, я заметил, что когда страница достигает точки останова 768 пикселей, она перестает корректно отображаться.
Поэтому я хочу, чтобы моя команда узнала об этом, чтобы я мог это исправить. Нажатие на кнопку Usersnap открывает то, что я видел на сайте в редакторе Usersnap, где у меня есть все обычные доступные функции. Я могу добавить комментарий , выделение , заметку , затемнение , линейку и рисовать на экране .
Вы можете видеть на скриншоте выше, что я сделал несколько аннотаций для моей команды, чтобы они знали, как выглядит сайт, и что он нуждается в некоторых изменениях, чтобы сайт правильно отображался на мобильном устройстве. Теперь у вас есть еще больше гибкости и контроля, чем когда-либо прежде, для проектирования, разработки и отладки отличных веб-сайтов и приложений.
Завершение
Итак, у вас есть два замечательных инструмента, которые помогут вам упростить усилия, необходимые для обеспечения совместимости вашего веб-сайта или веб-приложения на разных устройствах.
Вы уже пробовали их? Какой у тебя был опыт?