Web Designing for Context with CSS

Web standards promised us improved multimedia delivery: the ability to optimize content for computer screens, handhelds, printers, projection devices, and other media.
The CSS required to accomplish this is simple. All you have to do is import a separate style sheet for each media type to override the style selectors for the primary medium. Check out Eric A. Meyer’s fantastic and influential article “Going to Print” for an in-depth example of how to do this. (Warning: some media aren’t fully supported.)
Most of the discussion thus far in the design community has focused on styling content for varying media. Specifically, designers have tried to improve the accessibility of content, stripping away heavy graphics for handhelds or switching to more legible fonts for print.
We don’t have to stop there. Instead of using CSS to style the same content for different media, why not use it to display content especially suited for the situation?
Imagine that a designer reads an article in his favorite web magazine and then prints it out. The designer staples the pages together, grabs a highlighter, and reads the article, marking the most important points and jotting down notes in the margins. Over time, he refers back to the hardcopy.
What can we say about this situation? Is there anything unique about it? What makes it worth noting?
Different media offer different opportunities
First of all, the designer in the above example viewed the article in a different medium than it was originally designed for, and used the article in ways that it couldn’t be used online (i.e. highlighting selected passages). Secondly, we know the designer cared about the article so much that he wanted a physical copy of it. That makes him fairly special compared to the folks who “only” read the web version.
Designing for context
Say you want to use context-aware content to speak to potential visitors to your site. What happens when someone who hasn’t visited your site reads a printout of one of your articles? What message can you give that person when they print the article that you wouldn’t give to someone who reads it online? If your goal is to increase readership, you might say something like:
You are viewing a printed version of an article that came from a fantastic website (http://www.xyz.com) where you can find many more relevant, insightful articles. We think that you’ll be interested in this other article (http://xyz.com/article02.html) because it deals with the same subject as the one you are now reading.”
If your goal is to increase account sign-ups, you might say something like:
If a friend or colleague gave you this printout, you might be eligible for a special, one-time offer. Sign up for an account and we’ll give you 10% off your first purchase.”
If your goal is to get people inquiring about your services, you might say something like:
You are reading an article written by J.D. of XYZ Company. J.D. lives this stuff. If you have any questions about the services mentioned in the article simply give J.D. a call at her personal number (321-867-5309 ext 123) and she’ll be able to talk with you in-depth about what XYZ can do for you”.
(The third example might not be particularly suited to print, but might work well for readers who view your content on a handheld phone. You know it’s not hard for them to call you.)
But don’t just put these messages on the website for everyone to see. You don’t want to deliver them out of context; you want to create the special situation that exists when you talk to people in their context and they realize it.
A dash of CSS will do
The CSS used to accomplish this is very easy. Create a div with the content that is specifically suited for the medium you’re designing for — for this example, let’s say print:

Highly persuasive text of offer.

Use the display: none; property applied to the div for your screen style sheet so that the div does not display on the web (screen). In your style sheet for screen, use:
div#offer4print { display: none; }
Then style the declaration in your print (or whatever media you’re designing for) however you’d like in your style sheet for print:
div#offer4print { //insert styling for print here }
Other ideas for printing:
If you know a reader’s name (because, for instance, they’re logged in), insert their name on the printed version. Now it’s a print piece designed especially for them: ex libris Joshua Porter.
Give them special offers. Remember, these people are different from casual readers; treat them accordingly and design for their context.
Ideas for handhelds:
Phone numbers (obviously). Offer direct access to information related to the article they printed. They will appreciate it.
Provide them with a simple way to email themselves an easy-to-read (and easy to print) PDF version of the document.
Start doing stuff like this, and people will talk about you. They’ll show their friends and coworkers. They might say, “Hey look at this. This only showed up after I printed it. That’s different. Show this to the website VP. I’m going to see if any of the other pages on the site do this.”
Exploring these methods, you can come up with unique innovations that work particularly well for your users. Of course, you don’t need CSS to do this. You can use any technology with the ability to distinguish between media. The easiest way, however, takes a little context and just a dash of CSS.

Quick CSS Mockups with Photoshop

You need to make a set of web design mockups for your client. You’d like to find an easy way to show these mockups in clean XHTML and CSS code, because plain JPGs don’t convey the full sense of the design, and sliced tables are evil. In fact, let’s forget table slices ever existed.
Caveat: This article is for people who need to produce valid, standards-compliant mockups quickly, with the graphics tools they already use. This is not a production technique for people who want to get the most benefit out of (X)HTML by creating structural, semantic markup. Creating structural, semantic markup, as A List Apart and most standardistas recommend, still takes time, thought, and hand-coding.
WYSIWYG graphics editors such as Fireworks, GoLive, and ImageReady allow you to generate HTML code, but the exported code tends to use tables or absolute positioning. That’s so 1999. So what, then, can these programs do in terms of producing valid and useful code? More than you think. I’ll show you an easy way to produce mockups with Photoshop, prepare them for the web with ImageReady, and clean up the code afterward.

Background

I must admit, Fireworks was a major part of my design arsenal until I started taking accessibility and standards compliance seriously, and I don’t think I’m alone here. The problem I ran into was that I could only export HTML code using tables, when what I really wanted was relatively positioned div elements. Only with ridiculous hours of coding and copious quantities of caffeine could you convert such a table to relative divs, and this just steals more time from when you could have been designing more mockups or sleeping. So why start off with a sliced table at all? What I needed was a way to generate clean relatively positioned divs—or, barring that, code that was close enough that it wouldn’t take aeons to make it play nice with W3C standards. These days, this is surprisingly straightforward with ImageReady.

Make ImageReady CSS-ready

Adobe Photoshop CS ships with a web-focused sidekick: ImageReady CS. Adobe Fireworks is great for vector applications, but less so for raster work. Conversely, ImageReady is perfectly suited for raster work, but less so for vector work (although that’s changing). Using ImageReady, you can export slices as absolutely positioned divs, which can be easily transformed into relatively positioned divs.
This means you can start off in Photoshop to do all your complex masking, fades, Illustrator vector art, filters, etc., and then switch to ImageReady to slice up your layout. You’ll want to be sure that your layout is aligned to the top left; don’t try to center it just yet—that’s a job for CSS later on. Using ImageReady, you can style your navigation menu items (unless you’re doing that with pure text / CSS) and set rollover states. (For a production layout, you would probably shy away from Adobe rollovers and actions in favor of your own JavaScript or CSS rollovers, but for mockup use, these rollover states should suffice.)

Slice it up

Use the Slice tool to create your slices. Once you’re finished use the Slice Select tool to select and rename each section. For example, you may have a header that will become a div tag later on. ImageReady would really like to call this “Yourfile_1_01,” but you’ll save yourself some work by giving it a logical name from the start, like “header”. You will use this later on when editing your CSS. The same goes for the content area, any side columns, the footer, and other areas you may want to define.
Jump back and forth between designing in Photoshop and ImageReady until you’re ready to test out your design in a browser. Then, in ImageReady, go to File › Preview In › (insert favorite browser here). See whether your slices look and behave as intended, and modify your optimization settings accordingly. Exported slices will result in JPG or GIF images inserted into div tags with img tags; later, you may want to insert some of the images as background images for the individual divs instead.

Exporting HTML & CSS

Set your output settings: select File › Output Settings › HTML and change the settings to your liking. Note that you can opt to generate XHTML code. Select “Next” and check the settings in Saving HTML Files.
Select “Next” again; this brings you to Slices. Here you can choose to “Generate CSS.” Next to Referenced, you’ll see a dropdown menu that allows you to choose By ID, Inline, or By Class. Select By ID. You can also get detailed with slice naming conventions if you’re so inclined.
Export your mockup to (X)HTML/CSS using File › Save Optimized As, and choose a location that makes sense to you. Note that ImageReady will create an /images subdirectory in the same location where you save the HTML file. (Line wraps marked » —Ed.)

Toast, anyone?We now have slices consisting of absolutely positioned divs, with the CSS contained directly in the HTML file’s head. Maybe absolutely positioned divs are just what you need—if so, grab a cup of coffee and relax. Otherwise, let’s take things a step further by converting these divs to relative positioning.
First, make a copy of the ImageReady-generated HTML file and open it in your code editor (e.g. Dreamweaver, BBEdit, or another favorite editor). You’ll probably want to wrap all your divs inside an outside container div to control your mockup layout more precisely. ImageReady exports the CSS slices as divs and wraps them in a container div called “Table_01.” Rename the “Table_01” div (to “container”, for example) and style it with CSS as you see fit. If you don’t need a container div, just delete the “Table_01” div and its CSS counterpart.
Next, switch all your other divs to relative positioning by removing the absolute positioning declarations and letting them inherit relative positioning. Pay special attention to your floats and clears. You could try to switch all your divs at once, but a more precise and predictable way to go about it is to change one div at a time and check each div individually.
For divs that contain images, decide which should be turned into CSS background images and which really deserve an image tag. Some slices (a content area, for example) may be of a single color and thus should be set using a CSS style without any images. Set the overall page background separately using your stylesheet. If this were a production layout, you’d probably move your CSS to an external stylesheet, but that may be overkill for single-page mockups. Validate your code and you’re good to go.
You’ll need to add appropriate height and width declarations back in if the image in this element becomes a background image in a later revision.