Chrome Dev Summit завершился пару недель назад, и вот первый из серии отчетов с мероприятия. Особое внимание уделялось разработке мобильных и кросс-устройств, поэтому начнем с этого!
Лучшие шаблоны UX для мобильных веб-приложений от Пола Кинлана
Проведя анализ удобства использования мобильных устройств на 1000 лучших сайтах, мы выявили ряд проблемных областей: 53% по-прежнему поддерживают только настольные версии, 82% сайтов испытывают проблемы с интерактивностью на мобильных устройствах, а 64% сайтов содержат текст, который пользователям будет сложно прочитать.
Быстрые действия для кардинального улучшения вашего опыта работы в мобильном Интернете
- Всегда определяйте область просмотра
- Разместить содержимое в области просмотра
- Поддерживайте размер шрифта на читабельном уровне.
- Ограничить использование веб-шрифтов
- Правильно выбирайте размер и расстояние между целевыми объектами.
- Используйте семантические типы для входных элементов
PageSpeed Insights только что запустил UX-анализ для определения того, насколько ваш сайт дружелюбен к мобильным устройствам . Он поможет вам найти распространенные проблемы с мобильным UX вашего сайта. Попробуйте!
Слайды: Лучшие шаблоны UX для мобильных веб-приложений
Доступность нескольких устройств Элис Боксхолл
Пользователи будут получать доступ к вашим сайтам и сервисам с множества устройств с широким спектром различных требований к доступности. Используя правильные семантические элементы и правильные роли ARIA, вы помогаете браузеру и вспомогательным технологиям гораздо лучше понимать вашу страницу.
Слайды: Доступность для нескольких устройств
Основные способы понимания и решения проблем A11Y
- Убедитесь, что у вас есть удобный интерфейс, работающий только с клавиатурой
- Выразите семантику вашего интерфейса с помощью правильного выбора элементов и ARIA
- Для тестирования используйте ChromeVox на ПК и TalkBack на Android.
- Попробуйте расширение Accessibility Developer Tools для 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 предоставляет вам полный, скриптовый, отладочный контроль над сетевыми запросами
- Если у вас есть опыт работы в автономном режиме, не ждите сбоя сети, прежде чем продемонстрировать его, так как это может занять много времени.