Упрощенная страница

Автор: Craig Mod. Опубликовано: 20.02.2011 Источник: alistapart.com
Translated with the permission of A List Apart Magazine and the author[s].

Настоящая книга – это то, что дизайнеры хорошо понимают. У нее множество черт помимо того, что это физический объект. Есть определенные ограничения, которые совершенно очевидны. Никакие догадки не нужны. И прекрасных примеров хорошего дизайна книг достаточно. Не нужно долго искать, чтобы найти целую гору красиво оформленных, гармонично сверстанных страниц.

А как насчет цифровых книг?

Планшеты во многом похожи на настоящие книги — экран имеет четко определенные границы, и оптимальное число слов в строке на экране не может внезапно измениться. Однако больше ничего общего с настоящими книгами они не имеют — текст может расширяться в любом направлении, и размер шрифта может варьироваться. Так как же уравновесить эти сходства и различия? Где найти основу дизайнерам, стремящимся создать красивый, читабельный текст на планшете?

Цель данной статьи – рассмотрение именно этих вопросов. Это статья также знаменует выпуск базовой библиотеки типографики HTML для планшетов. На данный момент она оптимизирована под iPad. Она называется Bibliotype, и есть надежда, что она послужит надежной базой, на основе которой мы можем исследовать новые возможности. Она предельно проста, но простота – это отличная отправная точка.

Простая страница

Разработка дизайна книги – это, по большому счету, поиск равновесия – баланса букв и окружающего пространства по отношению к свойствам настоящей книги. В книге Дизайн книг (Designing Books) авторы Хочуи (Hochui) и Кинкросс (Kinross) рассматривают уникальность симметрии книги:

«Ось симметрии корешка неизменна; ею, конечно, можно пренебречь, но отрицать ее существование нельзя. В этом смысле книжная типографика принципиально отличается от типографики отдельных листов, использующейся в коммерческой печати, для оформления плакатов и так далее.»

Корешок придает книге кинетическое движение, которое отсутствует в несвязанных листах бумаги. Движение вперед и назад в книге происходит благодаря корешку. Дизайнеры возводят строительные леса — блоки текста, колонтитулы и другие атрибуты литературы — все вокруг этой центральной оси. Это естественная точка равновесия книжного разворота. Ее очевидность означает, что издатели добились функциональности дизайна книги с самого начала — двадцать две колонки жирного шрифта в библии Гутенберга даже сегодня представляют собой чудо типографического равновесия.

Если осью симметрии книги является корешок, где он на планшете iPad? С другой стороны, дизайнеры могут рассматривать планшет как отдельный лист «бумаги», позволив физическому качеству объекта определять центральную ось симметрии – ровно посередине.

С другой стороны, физические качества этих устройств не представляют весь потенциал пространства содержания. Экран становится маленьким порталом в бесконечную плоскость содержания, или “бесконечное поле”, как это удачно продемонстрировал Скотт Макклауд.

Что касается дизайна книг iPad, перед дизайнерами остается фундаментальный вопрос, на который они должны ответить, прежде чем подойти к этому устройству:  Осознаем ли мы физические качества этого устройства – страницы без корешка с центральной осью симметрии? Или же мы принимаем виртуальную физическую форму устройства – невидимый корешок, определенный каждым его краем, который сигнализирует о потенциальном существовании дополнительного содержания на расстоянии одного движения?

В данный момент в дизайне информационных публикаций для iPad наблюдается явный раскол. Такие приложения как iBooks, Kindle, New York Times, Wired, The New Yorker, пытаются перенести тип графического дизайна, созданного на основе физических аспектов, на экран, лишенный этих аспектов. Они воспринимают границы экрана  iPad как края печатного листа бумаги, иногда неуклюже распределяя содержание по колонкам, которые не оптимизированы для планшета.

Эти приложения зачастую отличаются применением произвольных, несемантических разрывов в содержании ради нумерации страниц. Оливер Райхентсьян (Oliver Reichentsien) в своей статье iPad: прокручивать или сдвигать анализирует эти две модели на примерах. Он предоставляет расчеты для определения, в какой ситуации лучше прокручивать, а в какой – сдвигать, а также как при этом изменяется ощущение в процессе чтения.

Нелогичные метафоры

Нелогичность, с которой настоящая страница изображается на планшете, дезориентирует читателей, которые не могут определить свое положение в контексте материала и не могут легко вернуться назад.

С другой стороны, у нас есть приложения для чтения, такие как Instapaper и Mobile Safari (Mobile Safari является основным приложением для чтения на электронных устройствах производства  Apple, которое учитывает безграничность экрана  iPad, где физические края устройства не ограничивают блоки текста.

Приложения, в которых мастерски объединяются две эти школы, встречаются крайне редко. Однако Inkling – это одно из приложений для чтения, которое использует старое и новое, разбивая на части содержание в интуитивной предсказуемой манере между главами и посреди главы, таким образом, ведя пользователя с помощью продуманной навигации.  Это делается красиво, с уверенным осознанием специфики носителя.

Что особенно захватывает, так это то, что даже сейчас — в начале 2011! — мы до сих пор совершенствуем и оптимизируем приложения для чтения этих электронных изданий.

Как дизайнеры мы должны задать себе вопрос: где проходят рациональные оси симметрии содержания, над которым мы работаем? Где рождается кинетический элемент этого содержания? Какова логика в определенной верстке и навигации для этого содержания, и будут ли они интуитивны и понятны для читателя?

Мы можем начать с этих вопросов. Затем мы можем убрать содержание и часть за частью помещать его обратно на полотно, учитывая его специфику.  Это первые шаги к обращению с iPad как с чем-то большим, чем просто страница.

Будущее и настоящее — книги и HTML

В октябре 2010 года я посетил конференцию «Книги в браузерах» (Books in Browsers) в организации Архив Интернет (The Internet Archive). Это была конференция с единственным видением: чтение  в «браузере» – это будущее.

Я поместил «браузер» в кавычки, потому что браузерные интерпретаторы сейчас появляются там, где их меньше всего ожидаешь увидеть. Они могут быть встроены в приложения устройств Apple, электронных устройств для чтения, на настольных компьютерах, на портативных или планшетных устройствах. То есть «книга в браузере» не обязательно обозначает книгу, просматриваемую в Internet Explorer (хотя, скорее всего, это также может подразумеваться).

Эта конференция подтвердила то, чего я давно ожидал (и в частных разговорах раструбил об этом всем, кто был готов слушать) — что мы должны создавать книги с помощью HTML.

Среди самых популярных устройств для чтения электронных книг доминируют iBooks,  Google Books на iPad, и Kindle (и приложение, и устройство). И в Google Books, и в iBooks используется формат ePub. В Kindle для форматирования книг используется  подмножество HTML.

ePub – это сжатый пакет файлов XHTML (с определенным количеством чистого XML в качестве дополнения). Кто-то может объяснить, что такое ePub и лучше, чем я, поэтому не будем вдаваться в подробности, но что стоит усвоить, так это то, что по своей сути ePub является HTML — индустрия электронных книг уже построена на фундаменте HTML.

На самом деле мне удалось поговорить с коллективом iBooks. iBooks – это просто оболочка WebKit. Мы уже создаем книги в браузерах в крупных коммерческих масштабах.

На конференции «Книги в браузерах» Билл Маккой (Bill McCoy) позволил нам взглянуть на  спецификации  ePub3 — это совокупность HTML5, CSS3 и ePub. Это означает, что все замечательные дизайнерские проекты, основанные на HTML5 и CSS3, которые мы разрабатываем сейчас, можно будет использовать на читающих устройствах ePub через несколько лет (спецификации планируется закончить в следующем году, но мы все знаем, как долго может длиться внедрение.)

В то время как интерпретаторы WebKit и Mozilla становятся более зрелыми и точными с каждым релизом (в последней версии Mozilla возможно использование дискреционных лигатур, например), при включенном в спецификацию ePub3 свойством @font-face (по стандарту), нетрудно себе представить, что ePub3 станет настолько же надежным и продуманным как InDesign для дизайна электронных книг.

Если еще немного напрячь воображение, то можно предсказать следующий этап: при включении HTML5, CSS3, и JavaScript в ePub, использовании высокоразвитых интерпретаторов типа WebKit, задействованных в наших электронных читальных устройствах или операционной системе портативных устройств Apple, приложения типа  Android для интерактивных цифровых книг могут больше не понадобиться. Все, что угодно, даже самые сложные интерактивные элементы можно будет реализовать в ePub. Это бы дало преимущество, упростив разделение современных форматов цифровых книг  (сделав возможными даже сложные журнальные раскладки). Это бы также помогло открыть пункты продажи: интерактивные книги не обязательно проводить через магазин приложений (AppStore).

Независимо от того, где мы увидим все это через несколько лет, в данный момент мы (особенно те из нас, кто читает A List Apart) знаем, насколько универсален HTML для дизайна. Только посмотрите на утонченную работу Джейсона Санта Марии (Jason Santa Maria) и команды над проектом Lost Worlds (Потерянные миры). Это доказательство возможностей дизайна в браузере.

Нужно также заметить, что в наши дни существует целое поколение дизайнеров, которые, работая с HTML и CSS, на более интуитивном уровне выполняют этапы дизайнерских проектов быстрее, чем при использовании программы типа InDesign. Это поколение дизайнеров, которое будет способно перенести лучшее из эстетики графического дизайна в Интернет с вниманием к деталям, балансом и мастерством воплощения.

Bibliotype: шаблон

Нам нужна отправная точка. Мы знаем, что HTML – это будущее. Так почему не создать базовый шаблон дизайна для долговременного чтения на планшете? Учитывая все это, я решил разработать именно такой шаблон. Конечный результат называется Bibliotype (Библиотипология). Это просто набор файлов CSS, HTML и JS, предоставляющий платформу для тех, кто стремится перенести долговременное чтение на планшеты (независимо от того, сделано ли это на базе системы управления содержанием, в блоге, приложении устройства Apple — главное, чтобы в системе использовался интерпретатор WebKit).

Я работал с прекрасными людьми в Enhanced Editions летом 2010 года, помогая им разрабатывать дизайн и концепции для долговременного чтения на iPad. Я также имел удовольствие работать с iPad-издательством (и я действительно считаю эту компанию издательством, пусть нового типа), Flipboard, с осени 2010 года. Этот шаблон и некоторые идеи, которые я здесь представляю, являются продуктом размышления и дизайна, родившегося в результате этого сотрудничества. Bibliotype (Библиотипология) не существовала бы без их поддержки и нашей совместной работы.

Направьте свои планшеты iPad (или браузеры) сюда для демонстрации.

Важнейшей особенностью дизайна информационных изданий для плашетов является то, что некоторые из первого поколения цифровых экранов используются на различных расстояниях. До сих пор экран настольного компьютера находился на расстоянии приблизительно полуметра от лица пользователя. В случае со смартфонами это расстояние приблизительно равнялось длине руки. Однако с планшетами дела обстоят по-другому.

Я разделяю такие расстояния при чтении с планшетов на три основные категории – кровать, колено и завтрак – и определяю их по характерным особенностям применения:

  • Кровать (близко к лицу):  чтение романа, лежа на животе с устройством iPad на подушке.
  • Колено (среднее расстояние от лица):  чтение, сидя в автобусе или, возможно, в поезде Eurostar по пути в Париж с устройством iPad на колене, используя приложение Instapaper.
  • Завтрак (далеко от лица):  iPad, установленный на специальный кожух под удобным углом,  оставляет руки свободными и позволяет читать новости за кофе с рогаликом, вытирая сливочный сыр в уголках рта.

Итак, расстояние близкое, среднее и дальнее.

Думаю, что все серьезные программы для чтения на планшете должны быть типографически приспособлены к этим трем способам использования. Я разработал Bibliotype именно для этого.

(Отступление: когда я показал это одному другу, он сначала воспринял Кровать, Колено и Завтрак как определения типов содержания. Содержание, которое вы читаете в постели, отличается от того, что вы читаете на колене или за завтраком. Абсолютно верно.)

Кроме того, эти три случая требуют разных подходов в зависимости от ориентации. Это означает, что нам нужно определить шесть типографических стилей: поля, интерлиньяж, которые не так легко реорганизовать из одной ориентации в другую.

Получившийся у нас базовый шаблон имеет следующие качества:

  • Медиа-запросы CSS для определения ориентации устройства,
  • Правила для шрифтов с засечкой и без засечки (использующие шрифты Georgia и Helvetica),
  • Расстановка переносов с помощью Hyphenation.js,
  • Размер шрифта, интерлиньяж, поля (и косвенно длина строки) определены для трех категорий чтения на планшете в обеих ориентациях,
  • Способность переключаться между текстом без выключки вправо и с выключенным текстом,
  • Настройки для низко- и высококонтрастного фона, и
  • Отключением сетки, чтобы увидеть расположение основного блока и блока заголовка документа
  • Оформление сносок

Структура

Эти шаблоны основаны на базовом подходе к экрану iPad. Мы определяем ось ниже центра экрана и центрируем текстовые блоки, задавая равные поля по бокам. Хотя эти шаблоны достаточно просты, они должны сэкономить часы мучений при первом ознакомлении для дальнейшего исследования и экспериментов.

Компоненты содержания таковы:

  • колонтитул
  • блок заголовка
  • вступительный абзац
  • текст главы (составленный из нескольких абзацев)
  • заключительный абзац
  • флерон
  • сноски
  • нижний колонтитул

Подразумеваемая задача дизайнера – добиться удобочитаемости при любом размере шрифта и любой ориентации. Я начал с наиболее подходящих для каждой категории размеров шрифтов.  Затем я установил длину строки для данного размера, что дало приблизительно 12-15 слов в строке. С заданными размером шрифта и длиной строки я увеличивал интерлиньяж до тех пор, пока блоки текста не стали комфортно восприниматься как единое целое.

Основная композиционная задача – «подвесить» текстовые блоки в рамке устройства iPad. Как и многие другие аспекты дизайна, этот заключается в поиске равновесия между математическими пропорциями и интуитивным балансом. В зависимости от размера шрифта некоторые блоки заголовков должны располагаться выше или ниже в рамке. Я люблю представлять заголовок этаким гвоздем, на который подвешивается веревка, удерживающая основной текст.

Чтобы было легче найти правильное место, куда забить гвоздь, я создал простые сетки для двух ориентаций. Это позволяет нам быстро определить, где элементы попадают в точки математического равновесия пространства экрана.

Представленный здесь шаблон также предназначен для использования в качестве платформы для быстрой отладки типографики планшетов вытянутой формы. Можно испытать переносы, оценить положение сетки, поиграть с типографическими переменными и быстро оценить результаты по мере редактирования кода HTML.

Это все очень просто. Дизайн книги – это не тайное искусство. Как и многое другое, это вопрос целенаправленной работы с мельчайшими нюансами в контексте большего целого.  Мы добавляем каждый элемент медленно и продуманно, с паузой после каждого принятого решения для чашечки кофе, стаканчика виски или для прогулки.

Версия Bibliotype, выпущенная при публикации этой статьи ни в коем случае не является всеобъемлющей, но это прекрасное начало. Я могу прочесть главу новеллы Flatland в трех размерах, в трех положениях (в постели, на коленях, за завтраком) с большим удобством, чем может позволить большинство других доступных программ для чтения на планшете  iPad. Да, планка действительно установлена настолько низко!

Мы, конечно, игнорируем дебаты по поводу того, какому типу навигации отдать предпочтение – горизонтальному или вертикальному. Независимо от того, прокручивается ли содержание (как традиционные веб-страницы) или экран iPad обрабатывается как строго определенные листы, разбивающие содержание на передвигаемые карты — это и технический, и редакторский вопрос. Поля, интерлиньяжи, размеры шрифтов, верхний и нижний колонтитулы в зависимости от навигации (особо) не меняются. Они определяются горизонтальным пространством, которое не изменяется и в том, и в другом контексте.

Применение шаблонов

Bibliotype выпускается под лицензией MIT License (Лицензия массачусетского института). Таким образом, система не принадлежит никому. Это значит, что вы можете использовать ее для чего угодно – коммерческого или бесплатного ресурса, который вы хотите разработать. Единственное условие состоит в том, что при использовании системы как основы для разработки вы должны оставить уведомление об авторских правах (http://craigmod.com) в своем приложении или на странице с информацией о книге.

Bibliotype размещается на сервере github. Загрузить систему можно здесь: https://github.com/cmod/bibliotype

Существует множество возможностей и устройств для применения с системой Bibliotype, и я рад раскрыть их для общества, чтобы вместе творить на ее основе.  (Например, нумерация страниц с помощью великолепной Библиотеки плагинов Джозефа Пирсона (Joseph Pearson) Monocle ePub Javascript library – это неплохой проект, который можно использовать совместно со стилями Bibliotype).

Если вы тестируете новые шрифты — ищете равновесие размеров, интерлиньяжа и отступов, то я мог бы посоветовать включить две функции JavaScript, которые по умолчанию закомментированы: перемещение экрана вправо для перезагрузки страницы и влево – для отображения сетки.

На настольном компьютере у нас есть инструменты, такие как Firebug, позволяющие быстро отображать эффект изменения кода CSS и HTML. На устройстве iPad, однако, постоянно перезагружать страницу немного утомительно, или, в случае версии Safari без панели инструментов, для перезагрузки нужно закрывать и вновь открывать приложение. Назначая движению вправо функцию перезагрузки страницы, а влево – отображение сетки, мы бесконечно упрощаем процесс отладки, ускоряем его, а может даже избегаем сумасшествия.

Все еще в поиске

Типографика iPad определяется двумя вещами: видимой частью экрана (загружен ли он изображениями, колонками, меню или панелью инструментов?), и способом чтения (в постели, на коленях или за завтраком?). О поле экрана можно думать как о расширяемом в любом направлении, имеющем бесконечное количество осей, но мы всегда будем ограничены тем, что видят читатели, и это пространство определяет как — на самом базовом уровне — форматировать текст для комфортного чтения.

Возьмите систему Bibliotype и поиграйте с ней. Переносите оси симметрии, перемещайте блоки текста, применяйте нумерацию страниц, представьте содержание, распространяющееся во всех направлениях с небольшими визуальными знаками для навигации читателя. Как типографика адаптируется во всех этих случаях? Какие модификации понадобятся такой базе как Bibliotype по мере того, как мы исследуем это пространство? И самое важное — что покажется наиболее естественным читателю и будет вызывать у него наименьшее напряжение?

Мне не терпится увидеть, куда мы двинемся с этой точки. Знаю, что где бы ни был текст, его будет удобно читать, а в его основе будет HTML.

Об авторе

Крейг Мод Craig Mod – писатель, дизайнер, издатель и разработчик, которого волнует будущее издательского дела и повествовательной прозы. Он соавтор и дизайнер Art Space Tokyo – путеводителя для утонченного туриста по миру искусства Токио. Он прожил в Токио десять лет. С октября 2010 года он проживает в области Калифорнийского залива и сотрудничает с цифровыми издателями, публикующими литературу с помощью приложения Flipboard. Он постоянно рассуждает о будущем книг, издательского дела и дизайне цифрового содержания.