Highlighted

Printability error

Engaged ,
May 29, 2018

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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 }

Views

229

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Printability error

Engaged ,
May 29, 2018

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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 }

Views

230

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 29, 2018 0
May 29, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 29, 2018 0
Engaged ,
May 30, 2018

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 30, 2018 0
May 30, 2018

Copy link to clipboard

Copied

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 OShea​what are your thoughts on this?

Regards,

Ankush

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 30, 2018 0
Adobe Community Professional ,
May 30, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 30, 2018 1
Engaged ,
May 31, 2018

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 31, 2018 0
Adobe Community Professional ,
May 31, 2018

Copy link to clipboard

Copied

Start with this:

CSS Tutorial

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 31, 2018 1