дизайн: з урахуванням контексту
Джошуа Портер
Веб-стандарти обіцяють нам поліпшену підтримку мультимедіа: можливість оптимізувати контент під можливості комп'ютерних екранів, портативних пристроїв, принтерів, проекторів, і інших засобів.
За допомогою CSS зробити це дуже просто. Все, що вам потрібно - імпортувати окрему таблицю стилів для кожного типу пристроїв, яка перевизначити стильові правила, зазначені в основний таблиці стилів. Почитайте фантастично важливу статтю Еріка Мейєра "До друку!", Де дається докладний приклад того, як на практиці здійснити сказане вище. (Увага: деякі типи пристроїв підтримуються не повністю).
В даний час в дизайнерському співтоваристві більша частина дискусій сфокусована на проблемі написання стилів для різних типів пристроїв. Точніше, дизайнери намагаються зробити контент більш доступним, позбавляючись від великовагової графіки (оптимізація для портативних пристроїв) або застосовуючи більш розбірливі шрифти (підготовка друкованої версії).
Ми не хочемо зупинятися на досягнутому. Замість того, щоб писати різні стилі до одного й того ж контенту, але для різних пристроїв, чому б не використовувати їх для показу специфічного контенту, призначеного тільки для поточної ситуації?
Уявіть, що дизайнер читає статтю з його улюбленого мережевого журналу, а потім роздруковує її. Дизайнер зшиває сторінки, виділяє що-то в тексті, а в процесі читання ще й відзначає важливі моменти на полях сторінок. Пізніше він знову звертається до паперової копії.
Що можемо ми сказати про цю ситуацію? Чи є в ній щось унікальне? На що слід звернути увагу?
Інше середовище пропонує інші можливості
Перш за все, дизайнер з нашого прикладу читав статтю не в тому середовищі, для якої вона була створена, використовуючи її таким чином, який немислимий при роботі з екраном (ну, наприклад, виділення цікавих моментів маркером). Нарешті, ми знаємо, що дизайнерові ця стаття потрібна настільки, що він хотів би мати її фізичну копію. Саме це виділяє його на фоні людей, що читають лише мережеву версію.
Дизайн для контексту
Скажімо, ви хочете використовувати для спілкування з потенційними відвідувачами такий контент, який безпосередньо залежить від поточної ситуації. Що станеться, коли хтось, не бував на вашому сайті, буде читати роздруківку однієї з ваших статей? Яке повідомлення ви можете до нього донести, коли він надрукує статтю, при цьому сховавши його від тих, хто читає статтю з екрану? Якщо ваша мета - збільшення числа читачів - ви можете написати їм щось на кшталт:
"Ви бачите друковану версію статті з фантастичного веб-сайту (http://www.xyz.com), на якому ви зможете знайти море відповідної вам інформації. Ми думаємо, вам буде цікава ще одна стаття (http://xyz.com / article02.html) по цій же темі ".
Якщо у ваші плани входить збільшення числа зареєстрованих клієнтів, напишіть, наприклад, ось що:
"Якщо ви отримали цю роздруківку від кого-то из ваших друзів або колег - ви маєте право на особливу знижку. Увійдіть у нас - і ми дамо вам 10% знижку для першої покупки".
Якщо ви хочете зв'язатися з людьми, які цікавляться послугами вашої компанії, напишіть щось подібне:
"Ви читаєте статтю, написану юристом компанії XYZ. Це - його робота. Якщо у вас є якісь питання щодо згаданих у статті послуг, просто зателефонуйте нашому юристу на персональний номер (321-867-5309 ext 123) і вона зможе розповісти про тому, що XYZ може зробити для вас ".
Попередній приклад не дуже-то підходить для друкованої версії, але може бути корисний тим читачам, хто бачить ваш контент на екрані свого мобільного телефону. Ви ж знаєте - їм нескладно зателефонувати вам.).
Але не виставляйте ці послання на загальний огляд відвідувачів вашого сайту. Вам не треба показувати їх поза контекстом - створіть особливу ситуацію, в контексті якої ваше послання буде доречним - і люди скористаються ним.
Легким рухом CSS ...
Напишемо нескладний CSS код. Спочатку створимо div з контентом, спеціально написаним для тих пристроїв, заради яких все і затіяно - нехай, для ясності, це буде друк на принтері:
Пропозиція, від якої неможливо відмовитися.
В основній таблиці стилів застосуйте до цього блоку властивість display: none;, таким чином він буде невидимий при перегляді в Мережі (на моніторі комп'ютера). Для цього в таблицю стилів для монітора (media = "screen") дозволите ось такий рядок:
div # offer4print {display: none;}
Тепер запишіть у таблицю стилів для печатки (втім, можете писати і для іншого типу пристроїв - на ваш розсуд) ті стильові правила, які вам необхідні:
div # offer4print {/ / вкажіть тут стилі для друкованої версії}
Декілька ідей по створенню друкованої версії ...
Якщо вам відомо ім'я читача (скажімо, він зареєструвався на вашому сайті) - вкажіть його в друкованій версії. Вийде, ніби ця роздруківка зроблена спеціально для нього: ex libris Джошуа Портер.
Висувайте спеціальні пропозиції. Пам'ятайте, ці люди відрізняються від основної маси читачів (адже вони не даремно роздрукували вашу статтю) - звертайтеся з ними відповідно і створюйте такий дизайн, який враховує контекст.
... І версії для портативних пристроїв:
Номери телефонів (а чому б і ні? - Це ж очевидно). Запропонуйте прямий доступ до інформації, пов'язаної з тією, що знаходиться в роздрукованій ними статті. Люди оцінять ваші праці.
Дайте їм простий спосіб одержання по електронній пошті PDF-версії документа, зручною для перегляду (і друку).
Почніть з цього, і про вас заговорять. Розкажуть друзям і колегам по роботі. А може, вони скажуть щось на кшталт: "Гей, глянь-но на це. Ось це стало видно, коли я роздрукував сторінку. Це ж щось особливе! Піду подивлюся, чи є така фішка на інших сторінках їх сайту ".
Завдяки цій методиці, ви внесете у вашу роботу унікальні інновації, корисні вашим користувачам. Звичайно, ви не зобов'язані використовувати для цього лише CSS. Для цих цілей підійде будь-яка технологія, здатна розрізняти типи медіа-пристроїв. Однак існує найпростіший шлях - застосування CSS. З урахуванням контексту.