CSS
дизайн: с учетом контекста
Джошуа Портер
Веб-стандарты обещают нам улучшенную поддержку мультимедиа: возможность оптимизировать контент под возможности компьютерных экранов, портативных устройств, принтеров, проекторов, и других средств.
С помощью CSS сделать это весьма просто. Всё, что вам нужно - импортировать отдельную таблицу стилей для каждого типа устройств, которая переопределит стилевые правила, указанные в основной таблице стилей. Почитайте фантастически важную статью Эрика Мейера "В печать!", где дается подробнейший пример того, как на практике осуществить сказанное выше. (Внимание: некоторые типы устройств поддерживаются не полностью).
В настоящее время в дизайнерском сообществе большая часть дискуссий сфокусирована на проблеме написания стилей для различных типов устройств. Точнее, дизайнеры пытаются сделать контент более доступным, избавляясь от тяжеловесной графики (оптимизация для портативных устройств) или применяя более разборчивые шрифты (подготовка печатной версии).
Мы не хотим останавливаться на достигнутом. Вместо того, чтобы писать разные стили к одному и тому же контенту, но для разных устройств, почему бы не использовать их для показа специфического контента, предназначенного только для текущей ситуации?
Представьте, что дизайнер читает статью из его любимого сетевого журнала, а потом распечатывает её. Дизайнер сшивает страницы, выделяет что-то в тексте, а в процессе чтения ещё и отмечает важные моменты на полях страниц. По прошествии времени он снова обращается к бумажной копии.
Что можем мы сказать об этой ситуации? Есть ли в ней что-то уникальное? На что следует обратить внимание?
Другая среда предлагает другие возможности
Прежде всего, дизайнер из нашего примера читал статью не в той среде, для которой она была создана, используя её таким образом, который немыслим при работе с экраном (ну, например, выделение интересных моментов маркером). Наконец, мы знаем, что дизайнеру эта статья нужна настолько, что он хотел бы иметь её физическую копию. Именно это выделяет его на фоне людей, читающих лишь сетевую версию.
Дизайн для контекста
Скажем, вы хотите использовать для общения с потенциальными посетителями такой контент, который напрямую зависит от текущей ситуации. Что произойдет, когда кто-то, не бывавший на вашем сайте, будет читать распечатку одной из ваших статей? Какое сообщение вы можете до него донести, когда он напечатает статью, при этом спрятав его от тех, кто читает статью с экрана? Если ваша цель - увеличение числа читателей - вы можете написать им что-то вроде:
"Вы видите печатную версию статьи с фантастического веб-сайта (xyz), на котором вы сможете найти море подходящей вам информации. Мы думаем, вам будет интересна ещё одна статья (xyz/article02.html) по этой же теме".
Если в ваши планы входит увеличение числа зарегистрированных клиентов, напишите, например, вот что:
"Если вы получили эту распечатку от кого-то из ваших друзей или коллег - вы имеете право на особую скидку. Зарегистрируйтесь у нас - и мы дадим вам 10% скидку для первой покупки".
Если вы хотите связаться с людьми, интересующимися услугами вашей компании, напишите нечто подобное:
"Вы читаете статью, написанную юристом компании XYZ. Это - его работа. Если у вас есть какие-то вопросы касательно упомянутых в статье услуг, просто позвоните нашему юристу на персональный номер (321-867-5309 ext 123) и она сможет рассказать о том, что XYZ может сделать для вас".
Предыдущий пример не очень-то подходит для печатной версии, но может быть полезен тем читателям, кто видит ваш контент на экране своего мобильного телефона. Вы же знаете - им несложно позвонить вам.).
Но не выставляйте эти послания на всеобщее обозрение посетителей вашего сайта. Вам не надо показывать их вне контекста - создайте особую ситуацию, в контексте которой ваше послание будет уместным - и люди воспользуются им.
Легким движением
CSS
...
Напишем несложный CSS код. Сначала создадим div с контентом, специально написанным для тех устройств, ради которых всё и затеяно - пусть, для ясности, это будет печать на принтере:
<divid="offer4print">
<p>Предложение, от которого невозможно отказаться.</p>
</div>
В основной таблице стилей примените к этому блоку свойство display: none;, таким образом он будет невидим при просмотре в Сети (на мониторе компьютера). Для этого в таблицу стилей для монитора (media="screen") включите вот такую строку:
div#offer4print { display: none; }
Теперь запишите в таблицу стилей для печати (впрочем, можете писать и для другого типа устройств - по вашему усмотрению) те стилевые правила, которые вам необходимы:
div#offer4print { //укажите здесь стили для печатной версии }
Несколько идей по созданию печатной версии…
Если вам известно имя читателя (скажем, он зарегистрировался на вашем сайте) - укажите его в печатной версии. Получится, будто эта распечатка сделана специально для него: exlibris Джошуа Портер.
Выдвигайте особые предложения. Помните, эти люди отличаются от основной массы читателей (ведь они не зря распечатали вашу статью) - обращайтесь с ними соответственно и создавайте такой дизайн, который учитывает контекст.
… и версии для портативных устройств:
Номера телефонов (а почему бы и нет? - это ж очевидно). Предложите прямой доступ к информации, связанной с той, что находится в распечатанной ими статье. Люди оценят ваши труды.
Дайте им простой способ получения по электронной почте PDF-версии документа, удобной для просмотра (и печати).
Начните с этого, и о вас заговорят. Расскажут друзьям и коллегам по работе. А может, они скажут что-то вроде: "Эй, взгляни-ка на это. Вот это стало видно, когда я распечатал страницу. Это ж что-то особенное! Пойду-ка посмотрю, есть ли такая фишка на других страницах их сайта".
Благодаря этой методике, вы внесёте в вашу работу уникальные инновации, полезные вашим пользователям. Конечно, вы не обязаны использовать для этого лишь CSS. Для этих целей подойдёт любая технология, способная различать типы медиа-устройств. Однако самый простой путь - применение CSS. С учётом контекста.
Другие работы по теме:
Модальности
Модальности (от лат. modus - вид, способ) - тип отношения высказывания к реальности. Наиболее известные нам модальности - это наклонения: изъявительное - оно описывает реальность ("Я иду"), повелительное - оно ведет диалог с реальностью ("Иди").
Дизайн
Дизайн развитая и теоретически осмысленная сфера деятельности человека по законам красоты вне искусства. Вторжение эстетического начала в производство. Изготовление вещи предполагает изобретение, конструирование, компоновку и технологию производства.
Жак Луи Давид основные биографические данные
Жак Луи Давид (1748 - 1825) – французский художник. В сущности, Давид был диктатором для своего поколения. Уходящее далеко за пределы картин, его влияние направляло стиль моды, дизайн мебели и интерьера, а кроме того отражалось на развитии моральной философии. Искусство на протяжении всей биографии Давида было неожиданным, решительным разрушением традиций.
Стиль гостиниц
Фирменный ы - это не только дизайн здания, интерьер и декор. Это также и правила оформления печатной и сувенирной продукции, рекламы, документации, принципы использования логотипа, определение фирменных шрифтов и цветов, внутренние стандарты гостиницы, корпоративная одежда, правила поведения персонала.
Социальный интеллект 2
Социальный интеллект – это способность понимать намерения, чувства и эмоциональные состояния человека по вербальным (словесным) и невербальным проявлениям. Социальный интеллект – это, также, проявление дальновидности в межличностных отношениях. Социальный интеллект связывают со способностью высказывать быстрые, почти автоматические суждения о людях, прогнозировать наиболее вероятные реакции человека.
Теория и практика культурных индустрий
Творческие индустрии объединяют отрасли, в основе которых лежит производство и эксплуатация интеллектуальной собственности, например, искусство, компьютерные технологии, дизайн, ремесла и т д
Дисциплины
Специальность 032401 "Реклама" Дистанционная форма обучения п.п. по сем. Название дисциплины Стоимость, руб. Форма контроля курс 1 семестр
работа
ПЕРЕЧЕНЬ ЭКЗАМЕНОВ И ЗАЧЕТОВ ЛЕТНЯЯ СЕССИЯ 2011/12 уч.г. Кафедра «ИНФОРМАЦИОННЫЕ ТЕХНОЛОГИИ В ДИЗАЙНЕ» 1 КУРС Гр.1141/1,2 Иностранный язык экзамен
Дизайн. Техническая эстетика
Дизайн — главная, наиболее развитая и теоретически осмысленная сфера деятельности человека по законам красоты вне искусства. Он охватывает область проектирования, производства и бытия вещей, изготовляемых промышленностью.
Сравнение двух магазинов г. Бугульмы
Оценка внешних и внутренних факторов магазина, которые способствовали приобретению продукции или оказывали негативное воздействие на восприятие покупателем, привлекательности, удобства, комфорта и поиска продукции этих магазинов. Комфорт внутри магазина.
Человек, слово и контекст
Одним из самых распространенных лингвистических мифов является миф о зависимости слова от контекста, миф о порождающей силе (функции) контекста.
История дизайна в России
- особая ветвь становления и развития дизайнерского искусства, обусловлен ная спецификой производственных, экономических и общественных условий и отношений в нашей стране.
Дворцы XVII столетия в контексте истории проектирования
Проектирование, художественное конструирование, иначе говоря - дизайн, - это самостоятельный способ творческой деятельности, ведущий вид творчества в современной культурной ситуации (по крайней мере, в количественном отношении).
Графический дизайн постсоветского пространства 1990-х годов
Сбитнева Н.Ф. Харьковская государственная академия дизайна и искусств Аннотация. В статье анализируется стилистика графического дизайна конца ХХ века. Выделяются три основные ветви, в рамках которых реализовались творческие и проектные концепции графического дизайна. Выявляется связь графического дизайна с экономико-политическими особенностями развития общества.
Ferrari
Гоночное 2-дверное купе с числом мест 2+2 имеет алюминиевый кузов на стальной раме, выполненный кузовным ателье "Pininfarina".
Талье, Хосе Бернардо де
Хосе Бернардо де Талье и Портокарреро, маркиз де Торро Талье, маркиз Трухильо — (исп. Josй Bernardo de Tagle y Portocarrero, marquis de Torre Tagle and marquis of Trujillo) — (21 марта 1779, Лима — 26 сентября 1825, Кальяо) — перуанский военный и политический деятель, президент Перу в 1823 и 1824 годах.
История российского дизайна
Наиболее сильной стороной отечественного дизайна была и остается эстетика, что объясняется двумя принципиальными моментами: особенностями появления дизайна в России и спецификой развития государства в XX веке.
Лоуи, Раймонд
Введение 1 Начало карьеры 2 Железнодорожный транспорт 3 Автомобили 4 Авиация и космос 5 Потребительский рынок Введение Раймон Лоуи (англ. Raymond Loewy, полное имя: фр. Raymond Fernand Loewy, 5 ноября 1893, Париж — 14 июля 1986, Монте-Карло) — мастер промышленного дизайна, автор логотипов, промышленных образцов и почтовых марок.
Рунные камни в Еллинге
Рунные камни в Еллинге — внесённые в список Всемирного наследия валуны с руническими надписями X века, которые находятся в датском городе Еллинге. На малом камне, установленном около 955, первым датским королём Гормом Старым высечена надпись
TED конференция
Введение 1 История 2 TED Talks 2.1 TED Prize 2.2 Аналоги 2.3 TEDx 2.3.1 Список конференций TEDx в России: Список литературы Введение TED (аббревиатура от англ. Technology Entertainment Design; Технологии, Развлечения, Дизайн) — частный некоммерческий фонд в США, известный прежде всего своими ежегодными конференциями, проводившимися с 1984 в Монтерее (Калифорния), США, (с 2009 проходит на Лонг-Бич (Калифорния), США).
Автомобиль Фрезе и Яковлева
Введение 1 Параметры автомобиля 2 Интересные факты Список литературы Введение Автомобиль Фрезе и Яковлева Общие данные Дизайн Двигатели Характеристики
Театр Пиквик
План Введение 1 История 2 Стоимость билетов (кино) 3 Интересные факты 4 Смотрите также Введение Театр Пиквик (англ. Pickwick) расположен в городе Парк Ридж (пригород Чикаго), штат Иллинойс.
Флаг Флориды
Флаг Флориды Флаг Флори́ды (англ. Flag of Florida) — один из государственных символов американского штата Флорида. Флаг представляет собой прямоугольное полотнище белого цвета с красным андреевским крестом. В центре изображена печать Флориды.
Андерсон, Крис TED
Крис Андерсон (Chris Anderson) — куратор ежегодной конференции TED. Родился в Пакистане в 1957 году. Детство он провёл в Пакистане, Индии и Афганистане. Среднее образование получил в Англии. В 1978 году закончил Оксфордский университет по специализации «Философия, Политика и Экономика».
О пользе точности темплейтов
Темплейты для сайта (сториборды, вайрфреймы) - спроектированные проволочные схемы страниц сайта. Темплейты показывают где и какие элементы должны стоять, как они должны выглядеть.
Myspace
Содержание 1 MySpace в России 2 Интересные факты 3 См. также 4 Примечания 5 Ссылки Myspace MySpace space , «моё пространство»; произносится майспэ?йс) — популярная международная социальная сеть (сайт сетевых сообществ, блог-платформа), в которой представлена возможность создания сообществ по интересам, персональных профилей, ведение блогов, размещение фото- и видео- контента.
Периферийные устройства устройства ввода
Text Text Graphics Разрешающая способность (ppi – pixels per inch)– количество распознаваемых точек (пикселей) на дюйм Разрешающая способность (ppi – pixels per inch)– количество распознаваемых точек (пикселей) на дюйм Скорость сканирования – показатель быстродействия, который равен времени, затрачиваемому на обработку одной строки изображения Размеры сканируемого листа (область сканирования) Разрядность битового представления – определяет количество цветов или оттенков серого, которые может воспринимать сканер Graphics