Чтобы улучшить опыт взаимодействия структурированного контента, нам, как минимум, будет нужно составить список типов устройств, которые мы хотели бы поддерживать, группируя их в «классы» устройств. Проще говоря, сформируйте группу устройств с одинаковыми характеристиками, с тем чтобы сосредоточиться на классах устройств, а не на отдельных устройствах. Мы могли бы поддерживать только iOS или Android, но это уж было бы слишком ограничено. В результате мы можем наладить все так, чтобы приложение правильно выглядело и работало на любом устройстве.
Не классифицируйте в соответствии с основной физической формой, например такой как компьютер, смартфон, планшет и т. д. Эти категории важны менее, чем вы могли бы подумать. Вместо этого проанализируйте устройства (и заодно их браузеры по умолчанию) в соответствии с функциями, которые требует ваше приложение. Любой фактор может играть роль, будь то сенсорный ввод, размер экрана, пиксельное разрешение, геолокация, локальное запоминающее устройство, поддержка SVG и т. д.
Концентрация на свойствах гарантирует то, что наши решения останутся значимыми даже когда появляются новые устройства, которые трудно соотнести со средней потребительской и маркетинговой категориями. Маркетинговые категории не скажут нам о том, что нам нужно знать (например, существует ли поддержка SVG и хорошо ли она представлена в этом браузере и на этом устройстве).
Чуть ближе: классы устройств
Для сайта «Три маленьких прямоугольника» нам действительно нужно обратить внимание на классы устройств. Сайт будет образовательным и требует ввода кода пользователем, чтобы узнать, как он работает. Код будет интерпретироваться в браузере, а результат воспроизводиться на экране.
Давайте реально смотреть на вещи: провернуть все это на большинстве мобильных телефонов невозможно. В общем, вот классы устройств, с которыми мы будем иметь дело:
• с поддержкой HTML: необходима для обучающего текстового контента (теория и синтаксис);
• с поддержкой JavaScript: обязательна для интерактивных заданий;
• с большими экранами: не требуются для текстового контента, но удобны для упражнений;
• с кнопочной (неэкранной) клавиатурой: предпочтительна для набора кода;
• с браузером, который должен поддерживать последние спецификации Flexbox (иначе не будут работать упражнения).
Но у нас серьезная проблема. На момент написания этой книги новейшие спецификации Flexbox поддерживаются только в Chrome Canary[123], который ограничивает наши возможности работы с многочисленными устройствами. Если бы это был реальный сайт, мы бы столкнулись с тяжелым выбором. Предположим, мы не хотим создавать механизм разметки Flexbox в JavaScrip, мы застряли в Chrome Canary – единственном браузере, в котором будет исполняться код для задания.