Printability error

Report · May 29, 2018

I'm getting Nibbler errors to say that some pages of sites Ive built arent optimised for printability. The recommendation is to optimise using CSS.

Could anyone explian this to me please?

Thanks

Report · May 29, 2018

Hey there,

Muse by default has linked css so you can not print the exact format of what you see in the preview.

But in Google Chrome browser there is a Chrome extension "Nimbus Screen Capture App" can take an image of the entire web page as it's shown on screen (including the part you can't see without scrolling). I.e. it's as if you've taken a series of screenshots and stitched them together, but it's only one button-click

Hope this will work!

Regards,

Ankush

Report · May 30, 2018

Hi, I dont want to print them, the printability of a page is noted by Google with its ranking. Printable pages are ranked higher. Hence I wanted to explore why certain pages arent printable.

I think, after some thought, it may be down to the addition of widgets and animated elements including slide shows and videos n the page. But I am happy to be corrected if there is another reason. Can you tell me why some pages are not printable when exported from Muse?

Report · May 30, 2018

Exactly, the background videos, third party widgets external HTML codes and <iframes> are the reason making the page non printable, however Donn't thing if that would affect the ranking of your page.

Maybe an SEO expert can guide you well here.

Hey Nancy OSheawhat are your thoughts on this?

Regards,

Ankush

Report · May 30, 2018

I don't know about the SEO factor but I always try to use a dedicated print.css file which is plain vanilla and linked in my <head> tag.

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

The goal is to save ink and paper by making printable only that which should be printed.

no ads,
no navigation,
no slideshows,
no YouTube,
no feeds,
no excess padding, margins, borders,
no backgrounds,
no animations,
no fancy web fonts, etc...
just basic black text on a white background.

If you've never built your own print.css file before, below is an example of one I made for a project.

@charset "utf-8";

/* Print CSS Document */

html {

font-size: 100%;

line-height: 100%

}

body {

margin: 0 auto 0.75in auto;

padding: 0;

font-family: "Times New Roman", Times, serif;

font-size: 14pt;

line-height: 1.2;

color: #000;

width: 98%;

}

/**forced page breaks**/

.page-break {

display: block;

page-break-before: always;

}

/* Ensure content spans the full width of paper */

#container, #middle, #content {

width: 100%;

margin: 0;

}

/**don't show these elements**/

#sidebar, #YouTube, footer, #toTop, .scroll, form, hr, #logo, nav, img { display: none }

/**tell printers to not split tables or lists over 2 pages**/

table { page-break-inside: avoid }

ol, ul { page-break-inside: avoid }

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · May 31, 2018

Thank you Nancy, I have to admit I dont really understand what CSS is let alone build my own. Id like to learn though if yuo could recommend a tutorial?

Report · May 31, 2018

Start with this:

CSS Tutorial

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Adobe Community

Printability error

1 Correct answer