At work I recently rolled out a new system for one of our clients, the Rick Wilcox Magic Theater. Their site is largely informational about them and their show, and a portal for selling tickets to their show online. As their theater is part of a vacation destination, people often buy tickets far in advance. The best method for presenting their show schedule is literally in a calendar format where people can see months of show dates at a single glace.
This has always been a popular page for their customers to print out. For a long time, what we did was offer a PDF to download that we kept up to date with the current show dates. This allowed for some nice design control, but was very cumbersome to update all the time. So when rolling out the new version, I figured this was the ideal time to build in a page that was designed for printing, that kept itself up to date dynamically with the rest of the calendar.
On the web, you can count on people’s monitors displaying color (thank god). We make good use of this when displaying the show calendar on the web. My first attempt a print stylesheet was great I thought. It set type in points, fit nicely onto one page, eliminated everything but the necessary information, and looked good doing it. All except one fatal flaw: it relied on color.
There are two problems with this:
- Not everyone has a color printer.
- Backround colors and images don’t print by default.
Yes, it is a printer option your users could change, but you absolutely can’t count on your users knowing or doing that. You cannot control this from the web side (as far as I know).
Solution: figure out a way to go black and white
One solution would have been to go with a list-style presentation that wouldn’t need colors to distinguish show times. We were really liking the calendar-style presentation though, so what we needed was a way to distinguish show times in the limited confines of a day table cell without needing color.
CSS borders to the rescue!
Surely it’s not as pretty as the colored solution, but it certainly does the job!
That’s a pretty nifty solution actually, and now I know that while background colours don’t work, borders do :). I wonder if theres any other css properties that dont get taken into account what a document if printed…
Very good point Luke.
Perhaps this means Chris should write another great article about print.css and what attributes are printer safe and supported. *hint hint nudge nudge * Wise idea migrating away from PDF. My only suggestion would be to have a dynamic PDF generator on the fly, because otherwise it’d just be too much time and upkeep.
Cheers,
Dormgear.net
Did you look into any solutions that would create PDFs on the fly? If you’re running PHP, you can use FPDF (http://www.fpdf.org). There are no doubt lots of others – and not just PHP-based.
I really enjoy these Problem>Solution type of posts. Real world examples are definitely the best way to give advice.
Thanks!
PS – Like the twitter bubble in the footer!
I like the way that you figured out how to use calenders on the front page with those graphics. I wouldn’t have thought about doing that. I would have a download pdf button. I think that most people who might want to print might figure there would be an option to do that. But good technical solution.
Sure color is more beautiful, but also think that not everyone has color printers. For example: I have a color printer, but where can I order prints in black and white, not to spend toner.
A doubt, would be bad if we use black in grayscale instead of the edges?
A little bug: the printable page has bad links in each calendar cell!
Thanks, little tweak from moving server to server =)
Hi Chris, nice work! – but if border works in print stylesheets how about colouring them also to make it easier to view at a glance for those with coloured printers?
Obviously you would still need dotted / dashed / solid for those with black and white printers as the shades of grey that come about may not be clear enough on their own…
I guess if you need more variation than the border style options you can use varying thicknesess too!
keep up the good work!
Andy
So why not just combine the two methods so that those with color printers can still print color w/ borders and those without will just get the B&W with the borders. That way when the printable page displays on the monitor it will show the colors to keep it looking pretty.
How about accessibility? Wondering if the screen version of the calendar meets WCAG 2.0: 1.4.1 – Use of Color?
“The intent of this Success Criterion is to ensure that all users can access information that is conveyed by color differences, that is, by the use of color where each color has a meaning assigned to it. If the information is conveyed through color differences in an image (or other non-text format), the color may not be seen by users with color deficiencies. In this case, providing the information conveyed with color through another visual means ensures users who cannot see color can still perceive the information.”
http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html
Maybe the print version is the way to go for screen as well?
Very good point about the color itself being a problem for colorblind folks. Fortunately, we have JavaScript popups when rolling over each date that clearly show the show time. Although… JavaScript popups aren’t exactly known for their accessibility either.
You could always use a CSS hover “balloon” tool-tip instead of a JavaScript popup to display the information.
I find JavaScript can be as obtrusive or unobstusive as the programmer wants it to be – its all about making it accessible, having a backup method to provide the same functionality if JS is disabled or not supported then use CSS to style it.
In this case CSS will be better than JS!
I’m color blind and I can read it. All good. That easy.
Really appreciated the problem – solution layout. I was actually facing this issue yesterday. I decided on making a PDF version available for those who want the full document. Yet, this might work… and make it easier for the user.
Good solution, but I might be concerned that someone would confuse dashed and dotted borders. Maybe use double for one instead? Or maybe use side borders for different show times; left side is 7:30, right side is 7:00, etc.
I would also turn the text color gray if there is no show that day, just to increase the visibility of show dates.
Very clever solution.
However, you have (and lucky you):
7:00 » Solid
7:30 » Dotted
2:30 » Dashed
Special Shows » 2px wide
…
But what if you add more show hours?… Mmm… I guess you’d rely on % of black like 20%, 50%, 100% (with reserved font [white font]). Not sure if the other types of borders would work… double borders then?
It’d be interesting to test how far this solution could go.
How does this work in IE6? I don’t have a printer.
Again, clever solution.
A PDF version would share the color problem with the web version. Just because I can print it with background colors intact does not mean I have a color printer.
I do like the border solution, though as rzea pointed out, it really isn’t going to be scalable if you add additional types of shows.
I am more curious about how you know that your users were printing out the original page. Are you just assuming printing because they grabbed the PDF version?
I’m sure this theory could be applied to a number of solutions. Well done on pointing out a real-world problem and a practical concept for a solution that can be customized for different scenarios!
Great idea, and good solution.
What about IE6 though – it doesn’t support dotted borders, (renders them as dashed) right ? So, will it print 2:00pm boxes the same as 7:00pm boxes? (Sorry, I don’t have access to IE6 right now.)
Other than that issue, which admittedly is probably not the highest priority, great job, thanks.
I agree with cancel bubble, you could try having the calender having a “print” button that when selected it would generate the page into a pdf and then instead of displaying it, it would just print what your print.css says to print. (fpdf or pdflib)
I’ve always felt not allowing the author to override the background printing settings was pointless. If a background color is marked as !importing or something it should be printed.
Or at least have the browser detect it and notify the user that “The author of this page has indicated that you should enable background-color printing. Do you want to enable this feature while printing this page? [yes] [no]”
Anyway… Try this.
http://www.rickwilcox.com/shows/print.phpin the print.css file
.calendar td a {
display:block;
padding:0;
}
.a6F009F {
border-bottom:21px solid orange;
height:0;
padding:0;
}
.abb7902 {
border-bottom:21px solid coral;
height:0;
}
.a11bc1b {
border-bottom:21px solid skyBlue;
height:0;
}
.aSPECIAL, .aE48E00 {
border-bottom:18px solid lightgreen;
height:0;
}
#show-key span {
bottom:16px;
margin:0 5px 0 0;
overflow:hidden;
padding:0 6px;
position:relative;
}
Probably fails in IE but it prints fine with firefox.
This solution of using chunky borders is a brilliant solution which is just perfect for my needs!! Thanks very much. I have tested it in Firefox, Chrome and IE 8 and it works!!
Who else has had a client INSIST print outs of their site MUST look exactly like what’s on the screen to the point that they made you rebuild the entire layout using tables and img tags?
Almost, it took several hours to talk them out of it!
Phew!
Good luck on that. Every client I’ve ever had would gripe over that. If it doesn’t fit accessibility guidelines, it doesn’t get pushed onto the print stack.
And for the person querying about PDF’s created on-the-fly: Not everybody has nor wants a PDF reader. I created a Flash printer once, since over 80% of computers had flash at the time (over 90 today). It was lightweight and could print from there. It was somewhat like flashpaper, only not full of branding, nor did it look like a presenter, and blended in with the document.
That was back in Flash 8, but I have a strong urge to make another one now.
I’m not a windows user so I am not sure if this is the case on windows. but on MacOS if you don’t have a PDF view installed it will open all PDF documents in picture viewer.
That’s what I use for all my PDF’s.
I’m pretty sure that windows will gripe though!
I always do a test print on low grade paper before printing any work its important that I get consistency with my images. Only takes a couple of minutes to rectify any problems (cleaning and aligning heads) which makes good sense if you are using A3+ paper
I’m still waiting for someone to give us a good enough reason why background printing is turned off by default.
Simple. A number of websites have white text on a dark background. To print those out would use up an entire printer ink cartridge. Its better not to print out the background.
It is more of a ‘better than nothing’ then a ‘solution’…I mean, look at the original page and printed version. How do you explain this to a customer?
@muckluck
you don’t even know….98% of customers go with a thought ‘let me print this out and make my notes on it’.
So now rather than customer focusing on correcting content they call with questions why the ‘website doesn’t print right’.
Man on man do I miss tables sometimes.
Hi Chris – Great post. I was hoping sometime you could do a post on how you implemented that calendar, and how it works.
It’d be great to incorporate something small like that on a blog with a jQuery slider to the corresponding post/ even date.
Great Post……..I would like to try this…
I have to agree with rzea that your solution doesn’t scale and comments that the reference can be rather confusing.
However, I must say that this is a very good idea. Essentially, you are asking potential customers to waste their own resources (paper and ink) to help you make a sale and the less ink (black is cheaper too) and paper they need to use – the better so well done on a cheaper solution and if there is no colour then it should print out quicker too so no waste of time.
All-in-all – a great solution.
I wish that more people used a special print CSS sheet. One major gripe that I have is that serifs are easier to read on paper and sans serif is better on screen. With just that change some blogs that I follow could be much easier to read offline.
Chris, excellent, and I’m coming to a similar crossroad at the moment. As savagecorp said, would you mind sharing how you’re creating a calendar dynamically? Right on.
I hate being that guy, but this can be done.
It’s either a matter of getting some PHP code to parse the table and get GD to render the cell contents as images (and maybe cache them) substituting what’s already there, or getting Jquery to parse the table and substitute the cells contents with a prerendered JPEG or GIF file.
Now I said that THIS can be done because we are dealing with a finite amount of alternatives (31 numbers times 5 colors = 155 alternatives), and we would still have to deal with the month headers.
We could also use fpdf library to render it as a PDF file on the server side…
What we should do though is instruct the audience that if they want the website to print-as-seen they could download and install tools like Cute PDF, Bullzip PDF and more (this are free) to then print to PDF file and print that to paper.
@chriscoyier
The site in question now uses you meathod for it’s print styles ;)
Put this in your print css, works great !