Саммит разработчиков Chrome завершился пару недель назад, и вот первый из серии репортажей с мероприятия. Особое внимание уделялось разработке мобильных устройств и кросс-девайсов, поэтому с этого и начнем!
Лучшие UX-шаблоны для мобильных веб-приложений Пола Кинлана
Проанализировав мобильность 1000 лучших сайтов, мы обнаружили некоторые проблемные области: 53% по-прежнему поддерживают только настольные компьютеры, 82% сайтов имеют проблемы с интерактивностью на мобильных устройствах и 64% сайтов содержат текст, который у пользователей возникнут проблемы с чтением.
Быстрые действия, которые значительно улучшат работу вашего мобильного Интернета
- Всегда определять область просмотра
- Поместите содержимое внутри области просмотра
- Сохраняйте размер шрифта на читаемом уровне
- Ограничьте использование веб-шрифтов
- Соответствующий размер и расположение целей касания
- Используйте семантические типы для элементов ввода
PageSpeed Insights только что запустила UX-анализ, чтобы определить, насколько ваш сайт удобен для мобильных устройств . Это поможет вам найти распространенные проблемы с мобильным UX вашего сайта. Попробуйте!
Слайды: Лучшие шаблоны UX для мобильных веб-приложений
Доступность нескольких устройств от Элис Боксхолл
Пользователи будут получать доступ к вашим сайтам и сервисам с множества устройств с самыми разными требованиями к доступности. Используя правильные семантические элементы и правильные роли ARIA, вы помогаете браузеру и вспомогательным технологиям значительно улучшить понимание вашей страницы.
Слайды: Доступность для нескольких устройств
Ключевые способы понимания и решения любых проблем
- Убедитесь, что у вас удобный пользовательский интерфейс только с клавиатурой.
- Выразите семантику вашего интерфейса с помощью правильного выбора элементов и ARIA.
- Для тестирования используйте ChromeVox на компьютере и TalkBack на Android.
- Попробуйте расширение Chrome для инструментов разработчика специальных возможностей.
- В Интернет выходит более разнообразная аудитория, что еще больше усиливает необходимость обеспечения доступности ваших сайтов.
Создавайте мобильные приложения с помощью Chrome WebView, Мэтт Гуант
Мы все знаем проблемы, с которыми разработчики сталкивались в прошлой версии WebView: ограниченные возможности HTML5, отсутствие инструментов отладки, отсутствие инструментов сборки. С появлением WebView на базе Chromium в Android 4.4 (KitKat) разработчики получили в свое распоряжение огромный набор новых инструментов для создания отличных собственных приложений с использованием WebView.
WebView поддерживает полную удаленную отладку с помощью тех же инструментов, которые вы используете для Chrome. Вы также можете использовать проверенный рабочий процесс веб-разработки с помощью Grunt и интегрировать его в свои собственные инструменты стека через Gradle. Для дальнейшего объединения миров есть хитрый трюк, позволяющий использовать Chrome DevTools для тестирования вашего собственного кода на JavaScript.
Слайды: Создание мобильных приложений с помощью Chrome WebView
Выводы по эффективной разработке WebView
- Важны не новые функции, а инструменты, которые теперь можно использовать для ускорения рабочего процесса.
- Не пытайтесь имитировать собственный пользовательский интерфейс. Но обязательно удалите некоторые указания на то, что это веб-контент.
- При необходимости используйте собственные реализации функций. т. е. для больших файлов используйте DownloadManager, а не XHR.
Оптимизация рабочего процесса для мира разных устройств, Мэтт Гонт
Если нам приходится разрабатывать приложения для настольных компьютеров, мобильных устройств, планшетов, носимых устройств и других форм-факторов, как вы можете оптимизировать свой рабочий процесс, чтобы сделать свою жизнь менее напряженной? Существует надежный подход к использованию нескольких устройств для быстрой итерации с помощью LiveReload, Grunt, Yeoman и недавно представленной лаборатории Mini Mobile Device Lab . Наконец, если у вас нет физического оборудования, которое вы хотите протестировать, некоторые поставщики предоставляют его через облако.
Слайды: Оптимизация рабочего процесса для мира разных устройств
Ключевые моменты
- Количество устройств, которые нам придется обслуживать, будет только увеличиваться.
- Правильный рабочий процесс с Grunt и Yeoman
- Упростите кросс-браузерное и кросс-устройствное тестирование с помощью Mini Mobile Device Lab.
- Будьте разумны в выборе эмуляции, используя эмуляцию Chrome DevTools, стоковые эмуляторы, облачные эмуляторы, такие как Saucelabs , Browserstack и appexperience , а также сторонний эмулятор Genymotion.
- Мобильное тестирование — это больше, чем просто тестирование вашего Wi-Fi-соединения. Используйте прокси-сервер для имитации более медленной скорости сети.
Подключение к сети: опционально, Джейк Арчибальд
Из этого выступления мы узнали много нового: Джейк не носит обувь во время презентации; Скоро выйдет новая книга Business Kinlan ; Производители браузеров серьезно относятся к офлайн-режиму, и вскоре у вас в руках будут инструменты, которые помогут вам создать отличный опыт, который хорошо работает в автономном режиме.
ServiceWorker предоставит нам гибкость, необходимую для того, чтобы с легкостью создавать привлекательные первые впечатления в автономном режиме, не страдая от проблем, причиняемых AppCache. Вы даже можете поэкспериментировать с API, используя Polyfill .
Слайды: Подключение к сети: необязательно.
ServiceWorker спешит на помощь
- В следующем поколении прогрессивных улучшений мы рассматриваем сеть как потенциальное улучшение.
- ServiceWorker предоставляет вам полный, управляемый сценариями и отлаживаемый контроль над сетевыми запросами.
- Если у вас есть опыт работы в автономном режиме, не ждите, пока сеть выйдет из строя, прежде чем показывать его, поскольку это может занять много времени.