Эта статья является частью серии веб-разработки от Microsoft. Спасибо за поддержку партнеров, которые делают возможным использование SitePoint.
Кажется, что каждый день публике предоставляются новые средства доступа к сети. В некоторые дни это новый браузер . Другие это новый смартфон . Или планшет . Или электронная книга . Или игровая консоль . Или умные часы . Или телевизор . Или хедз-ап дисплей . Или машина . Или холодильник .
Я работал над одним проектом, где клиент предоставил мне электронную таблицу с подробным описанием 1400 различных пользовательских агентов, которые получили доступ к экрану входа для сайта m-dot. В течение двух дней!
В качестве еще одного доказательства рассмотрим подробности этого поста от Джейсона Сэмюэлса из Национального совета по семейным отношениям, некоммерческой организации:
- В 2008 году на посещения «мобильных» устройств приходилось лишь около 0,1% их трафика. В 2014 году это число взлетело до 14,4%.
- В 2008 году было обнаружено 71 разрешение экрана, что уже очень важно учитывать. К 2014 году, однако, они видели 1000 уникальных разрешений экрана каждый квартал (более 200 из них записывали более 10 посещений в квартал).
Эта последняя статистика поражает меня каждый раз, когда я читаю ее. Вы не можете создать дизайн для 200 разных экранов, не говоря уже о 1000. Это дурацкое поручение. И даже не думайте пытаться тестировать на таком количестве устройств.
И все же, здесь мы разрабатываем сайты, которые могут (и будут) идти куда угодно. Нам необходимо тщательно протестировать, потому что мы не можем делать какие-либо предположения о браузерах и устройствах, используемых для доступа к нашему контенту.
Тестирование может быть утомительным, длительным и дорогостоящим. Конечно, есть способ сделать это проще. Безусловно, вместо того, чтобы зацикливаться на создании одного опыта, который должен быть практически идентичен в каждом браузере, мы можем быть умнее в том, как мы создаем вещи и воспринимаем опыт как континуум.
Мы можем создавать веб-сайты, которые будут достаточно шустрыми, чтобы работать на устройствах с низким энергопотреблением в медленных сетях, и достаточно умными, чтобы воспользоваться преимуществами расширенных функций и датчиков при появлении возможности.
Wha ?! Мы можем съесть наш пирог и съесть его тоже? Да. Да мы можем.
Начните на твердой Footing
Имея дело с безумным распространением веб-устройств и неизвестностью того, куда пойдут наши веб-сайты, стоит сделать шаг назад и сосредоточиться на том, что важно. Нам нужно задать себе два простых вопроса:
- 1. Какова цель этой страницы, этой формы, этого интерфейса?
- 2. Какой самый простой способ реализовать эту цель?
Тогда мы должны построить это в первую очередь . Обычно мы говорим о тексте, некотором базовом HTML, реальных ссылках на другие страницы и формах, которые отправляются в какой-то фон. Это наш минимальный жизнеспособный продукт, и он будет работать где угодно.
Затем мы можем искать возможности для улучшения опыта, сохраняя при этом это функциональное ядро в центре опыта.
Мы можем использовать CSS, чтобы добавить визуальную иерархию на страницу, обеспечить некоторый визуальный интерес и настроить макет, чтобы создать хороший опыт чтения на широком диапазоне размеров экрана. Мы должны начать с самого узкого размера экрана, который мы можем себе представить, и позволить содержанию руководствоваться нашими решениями для точек останова .
Мы будем использовать JavaScript для предоставления обратной связи нашим пользователям. Мы будем взламывать формы и ссылки, чтобы лениво загружать дополнительный контент или иным образом избегать полного обновления страницы. Черт возьми, мы можем даже взять на себя всю страницу и преобразовать ее в одностраничное приложение .
Но мы никогда не должны жертвовать функциональным ядром.
Такой подход к проектированию для веб-сайтов называется прогрессивным улучшением, и это инструмент номер один для работы с одним-двумя преимуществами старых браузеров и распространением устройств.
Будьте консервативны в доставке
Что делает прогрессивное улучшение настолько полезным, когда речь заходит об этой огромной массе устройств и браузеров, так это то, что основной опыт всегда будет доступен. Ничто не мешает нашим пользователям получить к нему доступ, даже в дрянном WAP-браузере или в текстовом браузере, таком как Lynx, или даже в каком-то не говорящем будущем компьютере, который «видит» сеть только как текст.
Чтобы гарантировать, что мы случайно не предоставим расширенные функции для менее способных браузеров, подобных этим, нам просто нужно быть умными в том, как мы загружаем такие вещи, как CSS и JavaScript.
Некоторые базовые CSS — например, типографика, цвет и т. Д. — могут быть использованы практически любым, поэтому мы можем поместить все эти вещи в один файл CSS (например, basic.csslink Затем мы можем собрать все наши правила компоновки и другой расширенный CSS в отдельный файл CSS (например, advanced.css
<link rel="stylesheet" href="default.css" media="all">
<link rel="stylesheet" href="advanced.css" media="only screen">
Любые браузеры, которые не понимают медиазапросы, будут полностью игнорировать второй файл CSS и получать только линейное мобильное представление. Легко и просто, и IE8 получает мобильную разметку (базовый уровень поддержки, который вряд ли вызовет у вас трудности при тестировании).
Вы даже можете пойти дальше и использовать блок @supports в файле advanced.css, чтобы ограничить определенные наборы правил только браузерами, которые поддерживают определенные функции CSS.
Конечно, проблемы поддержки CSS ничто по сравнению с JavaScript, поэтому иногда лучше не предоставлять определенные куски функциональности на основе JavaScript браузерам, которые не могут справиться с этим. Вот где обнаружение функций (и объектов) становится невероятно полезным:
if ( 'querySelector' in document ) {
// We can use querySelector!
}
Вы также можете использовать инвертированные условные комментарии, чтобы запретить более ранним версиям IE получать JavaScript в первую очередь (что означает, что вам даже не нужно беспокоиться об отладке JavaScript там). Вот пример, который скрывает main.js от IE8 и ниже, но делает его доступным для IE9 и выше и для любого другого браузера не из IE.
<!--[if gt IE 8]><!-->
<script src="main.js"></script>
<!--<![endif]-->
Будучи консервативными в том, что мы предоставляем браузерам, мы обеспечиваем максимальный уровень поддержки, но все же можем оптимизировать для более продвинутых . Это делает тестирование намного проще, потому что мы знаем, что старые браузеры будут в порядке с основами, и мы не пытаемся использовать функции JavaScript, если не знаем, что они доступны.
Тест, Тест, Тест
Прогрессивное усовершенствование помогает нам избежать многих проблем рендеринга и сценариев, прежде чем мы перейдем к фазе тестирования проекта, но в конечном итоге нам нужно сесть и запустить наши проекты в их темпе.
Чтобы тестирование было управляемым во время разработки, лучше всего тестировать в одном браузере, который, как мы знаем, имеет хорошую поддержку веб-стандартов. Это обеспечит основную проверку нашей работы. Как только мы убедимся, что все работает должным образом, мы можем начать более тщательное тестирование на различных браузерах и устройствах.
Я лично держу несколько версий каждого основного браузера на своем ноутбуке в любое время. Я работаю на Mac, поэтому у меня обычно лежат несколько версий Chrome, Firefox и Opera. Вы можете получить более старые версии этих браузеров здесь:
Почти невозможно запустить более старые версии Safari на современных версиях OS X, поэтому у меня обычно есть только последняя версия локально.
Для тестирования версий Windows указанных браузеров у меня обычно есть от 3 до 5 виртуальных машин, работающих под различными версиями Windows со связанной с ними версией браузера, и (как правило) копии Chrome, Firefox и Opera для хорошей оценки. Сайт MS Edge Dev предлагает бесплатные виртуальные машины Windows для загрузки . Если вы просто хотите узнать последние новости от Microsoft, есть также служба Remote.IE , которая позволяет подключаться к виртуализированной версии браузера.
Если вы разрабатываете для Windows или Linux, вам понадобится доступ к Mac или вам придется полагаться на виртуализацию для тестирования на этой платформе. Я расскажу о виртуализации через минуту.
После тщательного тестирования в различных браузерах для настольных ПК настало время глубоко погрузиться в мир устройств. Если вы не знаете, с чего начать, взгляните на свою аналитику; но возьмите их с зерном соли. Аналитика может привести вас к ложным предположениям. Например, если вы видите низкий процент пользователей Blackberry, может ли это быть из-за того, что ваш сайт просто не работает в Blackberry, поэтому они не остаются (или возвращаются)? Остерегайтесь самоисполняющегося пророчества.
Если у вас есть бюджет, во что бы то ни стало подберите устройства для тестирования. Вы можете использовать такие инструменты, как Adobe Edge Inspect , Vanamco Ghostlab или удаленный предварительный просмотр Viljami Salminen (или комбинацию всего вышеперечисленного), чтобы синхронизировать просмотр на нескольких устройствах. Некоторые из этих инструментов также позволяют проводить удаленную проверку устройства для отладки CSS и JavaScript. Weinre (который использует Adobe Edge Inspect ) и Vorlon.js также предоставляют функции удаленной проверки.
Если вам повезло иметь его поблизости, вам следует зайти в местную лабораторию открытых устройств (ODL), чтобы запустить свои тесты. ODL — это бесплатные ресурсы сообщества, обычно предлагаемые студией веб-дизайна или отдельным человеком, который сидит на куче устройств. Кто-то из ODL должен быть в состоянии помочь вам выбрать устройства для тестирования и познакомить вас с инструментами тестирования, которые есть в лаборатории.
Если поблизости нет ODL, вы также можете провести партизанское тестирование в своем местном магазине мобильных телефонов или электроники. Просто убедитесь, что у них есть настоящие устройства … вы не получите далеко от поддельных пластиковых.
Если ни один из этих вариантов для вас не существует, всегда есть виртуализация. Вы можете скачать и установить эмуляторы для различных мобильных браузеров и устройств . Кроме того, такие службы, как Browserstack и CrossBrowserTesting, предлагают доступ к сотням виртуальных рабочих столов и устройств за символическую плату.
Виртуализация никогда не даст вам такой же опыт, как если бы вы держали в руке реальное устройство. Производительность редко бывает одинаковой, и вы не чувствуете, как устройство реагирует на ваш ввод. Однажды я наткнулся на ошибку Android 2.3, когда сгенерированный контент перегенерировался и вставлялся каждый раз, когда устройство поворачивалось. Я сомневаюсь, что обнаружил бы это с помощью эмулятора. Тем не менее, эмуляторы могут помочь вам получить общее представление о том, работает ваш интерфейс или нет.
Независимо от того, каким образом вы приобретаете свои тестирующие устройства, постарайтесь охватить хорошее сечение. Выберите несколько недорогих, пару старых высококлассных устройств, несколько новейших флагманов, а также широкий выбор размеров и разрешений экрана. Убедитесь, что у вас есть хороший охват и с точки зрения операционных систем — последние версии iOS и Android являются само собой разумеющимся, но убедитесь, что у вас есть устройство Windows или два, несколько вариантов Blackberry и некоторые старые версии Android и iOS в миксе. Затем добавьте чудак или два, чтобы увидеть, работают ли ваши интерфейсы.
Важно помнить, что мы никогда не сможем предоставить каждому пользователю на каждом устройстве одинаковые возможности. Мы должны быть в порядке с этим — опыт — это континуум. Пока наши пользователи могут выполнять то, что им нужно на наших сайтах, они будут хорошо обслуживаться.
Бонусные очки: Шаблоны объятий
Если мы действительно хотим упростить ситуацию для себя (и для нашей команды), нам следует подумать о создании библиотеки шаблонов, прежде чем создавать одну страницу нашего веб-сайта.
Разбиение наших интерфейсов на отдельные повторяющиеся шаблоны (например, элемент управления метками и формами, интерфейс с вкладками и т. Д.) Позволяет нам рассматривать каждый из них изолированно и тестировать его таким же образом. Тестирование изолированно гораздо проще, чем отладка страницы с большим количеством движущихся частей.
Объединение наших шаблонов в живую веб-библиотеку шаблонов позволяет любому члену нашей команды собирать шаблоны, необходимые для создания заданного интерфейса, так же легко, как собирать табличку на шведском столе. И если мы действительно хотим упростить процесс сборки и тестирования, мы можем даже сделать шаблоны импортируемыми в живой сайт, чтобы все было синхронизировано.
Не бойся зомби-апокалипсиса
С постоянным натиском новых устройств, форм-факторов и соображений, заманчиво поднять руки и найти другую линию работы. Темпы продвижения вперед такие бодрые, что трудно идти в ногу, не говоря уже о том, что мы на вершине того, к чему все идет.
К счастью, однако, еще не все потеряно. Сделав шаг назад и сконцентрировавшись на том, что имеет значение, используя опыт в качестве континуума и продумав, как (и когда) мы предоставляем определенные функции и возможности браузерам, мы решим большинство проблем на этом этапе.
Это избавляет от некоторого давления (и разочарования) от процесса тестирования и освобождает нас для тестирования на более широком разнообразии устройств и браузеров, что означает, что мы сможем предоставить солидный опыт для большего количества пользователей, независимо от того, какое чудо технологическое волшебство, которое они используют в то время.
Все побеждают.
Больше практического опыта с JavaScript
У Microsoft есть много бесплатного обучения по многим темам JavaScript с открытым исходным кодом, и мы стремимся создать намного больше с Microsoft Edge . Вот некоторые, чтобы проверить:
- Microsoft Edge Web Summit 2015 (полная серия того, что ожидать от нового браузера, новых функций веб-платформы и приглашенных докладчиков из сообщества)
- Сборка // BUILD / и Windows 10 (включая новый движок JavaScript для сайтов и приложений)
- Продвижение JavaScript без взлома Интернета (недавний лейтмотив Кристиана Хайльмана)
- Размещенные веб-приложения и инновации в области веб-платформ (углубленное изучение таких тем, как manifold.JS)
- Практические советы по повышению производительности для ускорения работы с HTML / JavaScript (серия из 7 частей: от адаптивного дизайна до казуальных игр и оптимизации производительности)
- Современная веб-платформа JumpStart (основы HTML, CSS и JS)
И несколько бесплатных инструментов для начала работы: Visual Studio Code , Azure Trial и кросс-браузерные инструменты тестирования — все это доступно для Mac, Linux или Windows.
Эта статья является частью серии технологий веб-разработки от Microsoft. Мы рады поделиться с вами Microsoft Edge и новым механизмом рендеринга EdgeHTML . Получите бесплатные виртуальные машины или проведите удаленное тестирование на устройстве Mac, iOS, Android или Windows на сайте modern.IE .