University Web Developers

University Web Developers

I'm curious if anyone has guidelines or recommendations for best practices for print style sheets. We don't really have anything in place yet so I'm starting from scratch. I'm putting together a quick & simple sheet for one project but I would rather get it right so I can use this on the whole site eventually. Mainly so far it has been a project that points out all of the early mistakes I made when I designed our current site template.

Views: 58

Replies to This Discussion

We've hidden extraneous nav elements in our print CSS:
http://www.fredonia.edu
Here is an excellent article on print styles: http://www.alistapart.com/stories/goingtoprint/

What we do is eliminate nav elements and unnecessary images. We don't have a separate css page, but rather when we link to the stylesheet we use media="all". Within the stylesheet we do this:

@media print {
body {
background: white;
font-size: 12pt;
}
....
}

This eliminates an extra server hit.
Excellent advice. Thank you!
No problem!
This is initially what I planned to do on our new Web site, but I realized that quite a few of our users actually want to print things the way they look on the screen. Therefore, rather than just implementing a print stylesheet or using the print media declaration in our standard stylesheet, I went ahead and built a "printable" template for the site.

I know that some people consider that sort of old-school, but it's actually good practice.

Print stylesheets, by themselves, break one of the cardinal rules of good Web practices - they perform an action (in this case, reformatting the page) without the user asking it to do so. While it's not nearly as unnerving or annoying as playing music or resizing a browser window without the user explicitly choosing to do so, it's still a bad idea.

That's my opinion, anyway.
I understand your point and agree with it somewhat. However, in our case print styles include all of the content that the page normally contains plus adds to it in most cases. For instance (can't take credit for this...again, check out Eric's article),links show the url on most of our print pages.

It would be interesting to see what percentage of people would prefer to print what they see on the screen. Most of the time when printing what what the user sees it turns out messy when going to the printer plus web fonts don't necessarily make very legible print fonts. It almost seems to me that we should push for this (kind of kidding IE5 goodbye).

I wouldn't agree that it breaks one of the cardinal rules of good web practices. Printers are very different from screens and needed to be treated as such. I don't want a printer to print my black background with white text, for instance. I would be pissed if that happened to me and some designer / developer didn't account for that.

If a user wants what is on the screen they need to learn how to take screenshots ;)

Sorry if this comes across as harsh...i've been told that my replies on forums usually are. It's just my opinion.
Not harsh at all.

I see where you're coming from, and I agree to a certain extent. However, there are a few factors you have to take into account when making a decision like this:

1) How much are you planning to (or will you need to) change the page in order to make it presentable on a printer. - If you are planning to radically change the layout (such as removing the navigation, logos, etc.), you might not want to do all of that automatically. If you are just adjusting things like fonts, backgrounds and floats, then a print style sheet is probably ideal (especially since certain floats actually cause IE to freeze up when trying to print).

2) Who is your target audience? - If you're dealing with a mostly tech-savvy crowd, then using a print style sheet probably isn't a big problem. However, the less accustomed to the Web your target audience is, the less you want to do without them understanding why you did it.
I learned something new. That's pretty nifty, so in one master stylesheet, you're essentially nesting your styles within media rules? Have you tried it with @media handheld? or any other medias? And this works in all browsers?

^_^
It works in all browsers I have tested (IE6, 7, Safari, Opera, FF). I actually got the idea from Neal Grosskopf at http://www.nealgrosskopf.com. If you look at his stylesheet, you'll see that he embeds @media and @aural as well (http://www.nealgrosskopf.com/files/css/all.css).

So, yeah, I usually have one master stylesheet with everything in it. It's easier for me to go back to, and I don't have as many hits to the server then.
I agree that the article from A List Apart (listed in the discussion) is a great place to start. I think print stylesheets are very useful, and it always surprises me that more sites don't use them. Here are some thoughts:
Unlike screen rendering, print stylesheets should use pixels or points for sizing type. (as opposed to percentages or EMs). The best place to start with a print stylesheet is to decide which elements you don't want printed and set a single rule for all of them as: display: none; (e.g. navigation, footer, header).

One trick I like to do is to insert a high-resolution header logo for printed pages, using the method described here: High-Resolution Image Printing. This is a great way to give the effect of a nice logo without cluttering the header.

I've implemented print stylesheets on two sites where the page output is radically different than what you see on screen. Surprisingly, nobody ever complained (or even asked) about why this happens. I'd like to think I saved a few trees in the process!
I would suggest taking out any elements that are only relevant to the web and concentrating on formatting the text so that it is simplified and makes since when printed. As it was mentioned before you can do at @media print and source a stylesheet to accomplish this. The easiest way to drop elements or tighten the page up on print is to just add a display: none; string too those divs in which you want to omit from the printing process. Example:

#advertisement {display: none;}

A List Apart does do a very good job about formatting the text.
Other than the usual -- setting the background to white, hiding nav, unfloating columns; I usually set the font to a larger serif font - because that's easier to read in print.

I also always add this little tidbit -- which prints out the URLS of links:

a:link:after, a:visited:after {
content: " (" attr(href) ") ";
font-size: 90%;
}
a[href^="/"]:after {
content: " (http://www.yourdomain.com" attr(href) ") ";
}

RSS

Elsewhere

Latest Activity

Jesse Wells is now a member of University Web Developers
6 hours ago
David McKelvey joined Mark Greenfield's group
Thumbnail

WordPress

This group is for all those using WordPress as both a blogging platform and as a CMS
8 hours ago
David McKelvey joined Richard Orelup's group
Thumbnail

PHP Developers

The group to join if you develop webpages and applications in PHP.
8 hours ago
David McKelvey joined Kevin Daum's group
8 hours ago
David McKelvey joined Lynn Zawie's group
Thumbnail

OmniUpdate

Share your experiences using OmniUpdate CMS
8 hours ago
David McKelvey joined Shelley Wetzel's group
Thumbnail

eduWeb Conference

annual conference for higher education professionals who are involved in any step of the strategy, design or development of an institution's/department's website
8 hours ago
Ross Shaw posted a discussion

FB Page admin privacy

Hi,We have 11 admins for our Facebook page, and we all post as the page, which in our case is 'James Cook University'. I'd like to have it so we post as ourselves, but with our privacy set up so we can partition our activity on the page from the rest of our Facebook 'lives'. Any idea on how to do that?thanks,RossSee More
yesterday
Michelle Sargent replied to Cassie E's discussion Conferences ... which to choose?
"Hi Cassie I haven't been to HigherEdWeb, but attended eduWeb last year. The social media stream was a little disappointing, very basic and not tailored to an intermediate/advanced audience. Though, my colleague who also attended said the mobile…"
yesterday
Tim Cigelske replied to Cassie E's discussion Conferences ... which to choose?
"I'm not at all qualified to answer this question, having been to neither conferences in the past. But I will be presenting on social media a table topic at eduWeb Boston. So there's that. Maybe I'll see you there! "
yesterday
annalisa replied to Cassie E's discussion Conferences ... which to choose?
"Great question. There are so many different highered conference to pick from it is so hard to choose! Cheers, Annalisa"
yesterday
Profile IconRachelle Avery and Scott Glime joined University Web Developers
Tuesday
Susanne Starck replied to Susanne Starck's discussion Google Indoor Maps
"I believe that is in development now. Feel free to email Jacqui Erwin jacquierwin@google.com. She is very helpful! "
Tuesday
Justin replied to Susanne Starck's discussion Google Indoor Maps
"Do any of you know if the indoor maps are only available on Android devices, or are they available via the web too?  The website seems to communicate that you can only utilize them on Android devices."
Tuesday
Susanne Starck replied to Susanne Starck's discussion Google Indoor Maps
"Ask them about the version for first-responders. It would give fire/police access to areas that you don't want the public to see! Our admins have not approved the project yet, I'm still trying... "
Tuesday
Carol Clements commented on Lynn Zawie's group OmniUpdate
"OmniUpdate welcomes Bluffton University as a new OU Campus client! We look forward to working together!"
Tuesday
Susanne Starck replied to Susanne Starck's discussion Google Indoor Maps
"This hasn't been approved yet, but we have had several meetings. Google has been great, always making themselves available by phone. They are also working on a version that would allow first-responders to access a secure map, just for them.…"
Tuesday
Justin replied to Susanne Starck's discussion Google Indoor Maps
"I was recently contacted by Google as well and am hoping to be able to move forward with them as well, but I'm currently in the process of running that by administration.  Sounds like the service could be really useful. Justin Mississippi…"
Tuesday
Emily Schu replied to Emily Schu's discussion How are you offering courses on Android?
"Yes and no. We have been supplying RSS Feeds with mp4/mp3 files using the LMS as a platform for delivery with the thought that students can access the LMS through their native browser on their mobile device and download the files from there. The…"
Tuesday
Michael Fienen replied to Emily Schu's discussion How are you offering courses on Android?
"Is it safe to assume that your LMS can't help facilitate this?"
Tuesday
Carol Clements commented on Lynn Zawie's group OmniUpdate
"It’s great to have Ferrum College as a new OmniUpdate OU Campus customer! We look forward to working together!"
Monday

UWEBD has been in existence for more than 10 years and is the very best email discussion list on the Internet, in any industry, on any topic

About

© 2012   Created by Mark Greenfield.

Badges  |  Report an Issue  |  Terms of Service