CSS дизайн: з урахуванням контексту

Джошуа Портер

Веб-стандарти обіцяють нам поліпшену підтримку мультимедіа: можливість оптимізувати контент під можливості комп'ютерних екранів, портативних пристроїв, принтерів, проекторів, і інших засобів.

З допомогою 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. З урахуванням контексту.

Список літератури

Для підготовки даної роботи були використані матеріали з сайту http://infolio.asf.ru/