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: 187

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 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) ") ";
}
Thanks the link to the Dave Walsh script as well as your colleague's. I haven't worried about IE6 not printing out urls before, but perhaps I should.

RSS

Elsewhere

Latest Activity

Rachel Mele commented on Lynn Zawie's group OmniUpdate
" Before you launch into new content creation or migrate content to your new website during a redesign, save time and resources by evaluating your existing content. "
Friday
Jessie Groll replied to Jessie Groll's discussion Front End Web Developer Opening at Indiana University of Pennsylvania
"Note, the deadline has been extended on this search!"
Thursday
Rachel Mele commented on Lynn Zawie's group OmniUpdate
"If a website redesign is in your future, our new white paper is a must-read! It’s a step-by-step guide to auditing your content so your new site is well-organized, streamlined, and replete with high-performing pages. Download now!"
Wednesday
Rachel Mele commented on Lynn Zawie's group OmniUpdate
"Check out these 5 biggest takeaways from the 2018 E-Expectations Trend Report: "
Oct 9
Rachel Mele commented on Lynn Zawie's group OmniUpdate
"Information architecture should not be an afterthought in a website redesign, but rather, one of the main priorities. "
Oct 4
Rachel Mele commented on Lynn Zawie's group OmniUpdate
"According to the 2018 E-Expectations Trend Report, 59% of seniors and 63% of juniors said virtual tours enhanced their likelihood of enrolling at a particular college or university. "
Sep 27
Rachel Mele commented on Lynn Zawie's group OmniUpdate
"Increasing your college or university’s search rankings can have profound effects on enrollment. Check out these 13 tips to boost your SEO"
Sep 25
social networking web design commented on social networking web design's album
Thumbnail

Custom Web Designers

"Who is the best SEO in Reno? Sandy Rowley continues to lead the way for local and national businesses looking to outrank their competitors in Google search. Best SEO Expert Sandy Rowley"
Sep 24
Rachel Mele commented on Lynn Zawie's group OmniUpdate
"Do high school students read email? You bet. But YOUR emails better cater to them or they’ll get lost in the shuffle. "
Sep 20
Rachel Mele commented on Lynn Zawie's group OmniUpdate
"Join us for our next webcast to learn how Michigan Technological University assessed new CMS products, gained approval from leadership, built buy-in and excitement on campus, migrated more than 12,000 web pages, and lived to tell the tale. "
Sep 19
Rachel Mele commented on Lynn Zawie's group OmniUpdate
"Join us for our next webcast to learn how Michigan Technological University assessed new CMS products, gained approval from leadership, built buy-in and excitement on campus, migrated more than 12,000 web pages, and lived to tell the tale. "
Sep 19
Rachel Mele commented on Lynn Zawie's group OmniUpdate
"Due to high demand, we have extended our #OUTC19 call for proposals deadline to this Friday, September 21. Submit today! "
Sep 18
Rachel Mele commented on Lynn Zawie's group OmniUpdate
"Looking for ways to boost your higher ed website traffic? Time to dig into SEO. "
Sep 18
Jessie Groll posted a discussion

Front End Web Developer Opening at Indiana University of Pennsylvania

Indiana University of Pennsylvania (IUP) invites applicants for the position of Web Developer in the Marketing and Communications Division.The front-end Web Developer works to support and enhance the IUP website and other digital properties and communications. Using CSS, HTML, scripting languages, and other tools the web developer is responsible for creating user experiences optimized for usability, download time, and accessibility while following defined standards for brand and coding. They…See More
Sep 13
Matt Senger is now a member of University Web Developers
Sep 13
Lynn Zawie commented on Lynn Zawie's group OmniUpdate
"Job Opening:  Front-end Web Developer -  OU experience a plus! https://stonybrooku.taleo.net/careersection/jobdetail.ftl?job=1802495&lang=en#.W5lQ1odqRec.email"
Sep 12
Lynn Zawie posted a discussion

Front-end Web Developer

https://stonybrooku.taleo.net/careersection/jobdetail.ftl?job=1802495&lang=en#.W5lQ1odqRec.emailRequired Qualifications (as evidenced by an attached resume):Bachelor’s degree (or foreign equivalent or higher) in computer-related field.  Three years of full-time programming experience.  Fluent in HTML5/CSS3 and able to develop valid…See More
Sep 12
Rachel Mele commented on Lynn Zawie's group OmniUpdate
"Join us for our next webcast to learn how Wharton County Junior College used a structured approach to reorganize the info/resources on the college's intranet site and efficiently manage them in a CMS."
Sep 5
Rachel Mele commented on Lynn Zawie's group OmniUpdate
"In-house or outsource, that is the question. #FulltimeJob  "
Sep 4
Sara Clark posted a discussion

Register for HighEdWeb 2018 by Sept. 21

Mark your calendars and join us for one of our favorite events: the 2018 Annual Conference of the Higher Education Web Professionals Association (HighEdWeb) in Sacramento, CA, this October 21-24!HighEdWeb is the annual conference created by and for higher education web and digital professionals. From developers, marketers and programmers to managers, designers, writers and all team members…See More
Sep 4

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

© 2018   Created by Mark Greenfield.   Powered by

Badges  |  Report an Issue  |  Terms of Service