Internet requirements promised us improved multimedia supply: the flexibility to optimize content material for pc screens, handhelds, printers, projection gadgets, and different media.
Article Continues Beneath
The CSS required to perform that is easy. All you must do is import a separate fashion sheet for every media kind to override the fashion selectors for the first medium. Try Eric A. Meyer’s improbable and influential article “Going to Print” for an in-depth instance of how to do that. (Warning: some media aren’t absolutely supported.)
A lot of the dialogue to date within the design neighborhood has targeted on styling content material for various media. Particularly, designers have tried to enhance the accessibility of content material, stripping away heavy graphics for handhelds or switching to extra legible fonts for print.
We don’t must cease there. As a substitute of utilizing CSS to fashion the identical content material for various media, why not use it to show content material particularly suited to the scenario?
Think about {that a} designer reads an article in his favourite internet journal after which prints it out. The designer staples the pages collectively, grabs a highlighter, and reads the article, marking crucial factors and jotting down notes within the margins. Over time, he refers again to the hardcopy.
What can we are saying about this case? Is there something distinctive about it? What makes it value noting?
Totally different media provide completely different alternatives#section2
Initially, the designer within the above instance considered the article in a distinct medium than it was initially designed for, and used the article in ways in which it couldn’t be used on-line (i.e. highlighting chosen passages). Secondly, we all know the designer cared in regards to the article a lot that he needed a bodily copy of it. That makes him pretty particular in comparison with the oldsters who “solely” learn the net model.
Designing for context#section3
Say you need to use context-aware content material to talk to potential guests to your website. What occurs when somebody who hasn’t visited your website reads a printout of considered one of your articles? What message are you able to give that particular person after they print the article that you just wouldn’t give to somebody who reads it on-line? In case your aim is to extend readership, you may say one thing like:
You’re viewing a printed model of an article that got here from a improbable web site (http://www.xyz.com) the place you could find many extra related, insightful articles. We expect that you just’ll have an interest on this different article (http://xyz.com/article02.html) as a result of it offers with the identical topic because the one you at the moment are studying.”
In case your aim is to extend trương mục sign-ups, you may say one thing like:
If a good friend or colleague gave you this printout, you may be eligible for a particular, one-time provide. Join an trương mục and we’ll provide you with 10% off your first buy.”
In case your aim is to get folks inquiring about your providers, you may say one thing like:
You’re studying an article written by J.D. of XYZ Firm. J.D. lives these things. If in case you have any questions in regards to the providers talked about within the article merely give J.D. a name at her private quantity (321-867-5309 ext 123) and she or he’ll be capable of speak with you in-depth about what XYZ can do for you”.
(The third instance won’t be significantly suited to print, however may work nicely for readers who view your content material on a handheld cellphone. You know it’s not arduous for them to name you.)
However don’t simply put these messages on the web site for everybody to see. You don’t need to ship them out of context; you need to create the particular scenario that exists whenever you speak to folks of their context they usually notice it.
A splash of CSS will do#section4
The CSS used to perform that is very straightforward. Create a div with the content material that’s particularly suited to the medium you’re designing for — for this instance, let’s say print:
<div id=“offer4print”>
<p>Extremely persuasive textual content of provide.</p>
</div>Use the show: none; property utilized to the div in your display screen fashion sheet in order that the div doesn’t show on the internet (display screen). In your fashion sheet for display screen, use:
div#offer4print { show: none; }Then fashion the declaration in your print (or no matter media you’re designing for) nonetheless you’d like in your fashion sheet for print:
div#offer4print { /*insert styling for print right here*/ }Different concepts for printing:#section5
- If you already know a reader’s identify (as a result of, as an illustration, they’re logged in), insert their identify on the printed model. Now it’s a print piece designed particularly for them: ex libris Joshua Porter.
- Give them particular affords. Bear in mind, these persons are completely different from informal readers; deal with them accordingly and design for his or her context.
Concepts for handhelds:#section6
- Telephone numbers (clearly). Provide direct entry to info associated to the article they printed. They may admire it.
- Present them with a easy option to e mail themselves an easy-to-read (and simple to print) PDF model of the doc.
Begin doing stuff like this, and folks will discuss you. They’ll present their mates and coworkers. They may say, “Hey take a look at this. This solely confirmed up after I printed it. That’s completely different. Present this to the web site VP. I’m going to see if any of the opposite pages on the positioning do that.”
Exploring these strategies, you’ll be able to give you distinctive improvements that work significantly nicely in your customers. After all, you don’t want CSS to do that. You should use any know-how with the flexibility to tell apart between media. The simplest method, nonetheless, takes somewhat context and only a sprint of CSS.