Print Multiple Web Pages  at once - so clients/employees can write comments on paper

Posted on 2007-08-05
Last Modified: 2013-11-05
We are slowly moving toward web standards and css/box model and away from just tables to layout web pages.  We have about 100 pages that run off a screen css and a print css.  Most of our clients /employees are on IE6.0.  

Our clients/employees like to print out the web page - make their edits and comments on paper.  They hand these printed pages with comments to me to update the web sites.

How can we print hard copies of our pages for our clients to "markup, edit, write on, etc."  ....
-Without all the pages flipping into landscape mode.
-without using print.css to cut off a lot of design elements.
-without using Screen Capture software that has to be captured and printed one page at a time (since we've got 100's of pages)

We have a print css but it cuts off graphically menus in two places and really doesn't show the actual page exactly like it is on the screen.  

We've thought of asking our clients to use software like Techsmith's SnagIt - but then they'd have to capture and print each page individually.

Have any of you faced this issue?  Any idaeas on how to work around it?

I see tons and tons of sites that look very different when printed - so it must be a common problem.

Hope I've explained this clearly.

Many many thanks, April
Question by:aprillougheed
    LVL 15

    Expert Comment

    create a "print for feedback" button on your page that calls a javascript function.  That function removes the print.css from your styles, executes the print (use "window.print()") and re-adds the print.css
    LVL 30

    Accepted Solution

    yes it is common. and the bottom line is there are too many variables in printing for a web page to print out exactly like it is on screen.

    We have the same thing happen at my company, and we've rolled out snagit to all staff. they capture one page at a time, (scrolling web page capture) and print it out.

    thats the only sure shot way of printing the web page as it looks on screen as its equivalent to printing an image.
    LVL 30

    Expert Comment

    dave4dl, using the same stylesheet for print and screen will still not guarantee that the web page will print out exact.

    browser defaults, printer settings, paper sizes, colors.. are just few of the variables that cause this.
    LVL 15

    Expert Comment

    true but it will come closer than using the print specific settings (it sounds like)

    Author Comment

    Ya know - it's so nice to know I'm not the only one.

    I design out of my home and ee is my only link to other developers.  I've wracked my brain for a week - thinking I must be missing something.

    I'm have troubles as the "reviewers" are all using ie6 and I'm using ie7.  IE7 makes it a lot easier as it uses a "shrink to fit" option so the pages don't flip over into landscape.

    Plus - they've decided to add a left hand vertical menu to a site that was designed for a horizontal top menu.  I can't squeeze in a left hand menu without changing the size of all the images (and of course they don't want to pay for that.)

    Now - if I can just figure out how to explain this simply to non-coders.  :)

    Thanks for all your help.  April

    Featured Post

    What Should I Do With This Threat Intelligence?

    Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

    Join & Write a Comment

    A colleague recently asked me about how to give his client a small part of the web site that could be completely under the client's control.  Since I have done this sort of thing before to add emergency banners to a web site, I decided I would creat…
    Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
    In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

    745 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now