design-manual
design-manual copied to clipboard
cfpb
Print CSS Guide
I am working on print styles for Owning a Home. There are a few print styles in the works for the CF.Gov Refresh. I find myself making some design decisions on what elements to change for print, and there are no guidelines on print CSS in the Design Manual.
For now, I'm taking direction from the HTML5 Boilerplate print styles (also used by Bootstrap).
Other resources on this:
- Owning a Home Print styles, in progress
- "What's the level of print-friendliness of current site?"
- cfgov-refresh print styles approach
- docs for cf-gov refresh print styles, in progress
Starting to look further at this. Creating a list of thoughts so far from the OaH team from github issues and conversations:
Color
- All page elements will print in black and white. Should this apply to the header (including cfpb logo) and footer?
- Background colors in areas such as sidebars and header bars will drop off.
- Button colors will drop out. Button text will remain with gray border around it.
Images
- Images will not print. This applies to header graphics, illustrations, photos, isocons. Does not apply to minicons. Does not apply to content-driven images such as graphs like on the rate checker page. Do social media icons print in the footer?
Links
- Href attribute will appear to the side and/or underneath link text. Will be underlined and in parentheses. Should this path be relative or include "consumerfinance.gov?" Have been looking at other sites for reference. So far have found that gov.uk includes full path. Mint and Warby Parker use relative paths.
- Href attribute should appear for header and footer links, including social media?
- Href attribute should appear with any links embedded in copy.
- Output URLs for media like youtube, videos, share? Or hide them?
Lines
- Lines separating content and as sidebar headers will print.
Expandables
- Should expandables on a page collapse?
- Should the minicon/text of an expandable button appear or disappear or appear in a different style when printed?
Typography
- Will stay in web type heirarchy and not convert to print type?
To explore different aspects of this, I've used http://refresh.demo.cfpb.gov/doing-business-with-us/
1. All elements on a page will become grayscale when printing.
This includes the cfpb logo in the header and footer as well as the lines, which I've changed to 50% black.
2. Background colors will drop out.
So, in this case, the gray box:
Becomes this:
4. Link paths will appear.
A.) For pages within consumerfinance.gov, should these paths be relative?
B.) Styling: Link text becomes Avenir Next Regular, black and with a solid underline. Link path appears directly next to/under link text in parentheses and with a solid underline.
Another possibility is to make the link text demi bold to pull it out a little from the path:
C.) Links in the the side nav, header and footer: We need to consider whether or not to make the paths appear and if they should be relative.
Header example:
Side nav:
Same consideration regarding social media icons and whether or not the links are shown relatively to those sites:
D.) Example of pulling an email address out:
I think we should ask the question of whether things like navigation and social media links should be printed at all. Most likely, that stuff is useless to the person who wants to have a printed version of the page.
That's a good thought. Perhaps the print header/footer just include our logo, phone number and email--- or some other very basic identifying elements.
Page view with basic header and footer info and no navigation. Also no side nav, which, if we drop, we might want to contemplate if that changes anything with the spacing/margins of the printed page.
Hmmm, dropping the side nav may drop important contextual information. Not in all cases but definitely in some. I would be wary of dropping that all together. (Though taking the link paths out for that side nav makes sense.)
I like the look of dropping the header and footer though. Interesting exploration!
@schaferjh I did have that thought, too.
I haven't followed your breadcrumb discussions super closely, but would that proposal provide enough of that contextual information, if those were printed (without the link paths)?
No, the breadcrumb only shows the path to the page, not the sibling or children pages. So in the example Jen is using above, the breadcrumb alone wouldn't inform people that there is further information available around future requests, active requests and small businesses.
Depending on why someone has printed out the page, this could be important info. (Again, not on every page but on enough of them that removing it by default seems like a step too far.)
Discussion during 4/23 design manual working session with @huetingj and @Dnpizarro:
- We like displaying the link information in body content (email or full URL), but leave any navigation/menu links as straight text, no relative links showing.
- We like the idea of providing some contrast between the link text and displayed URL, per @huetingj's example above where she made the link text demi bold. (She's going to explore a little more on this.)
- Keep the header and footer intact and without any relative links showing.
Woot!
Here are a few ways the links could be styled.
- Link text is demi-bold
- Link text is medium
- Link text is regular and URL is dark grey
- Link text is medium and URL is dark grey
- Link text is demi-bold and URL is dark grey
@huetingj it helps to see the various options for the links. I like your solution for the url, I feel the dark grey gives enough of that distinction that we were looking for. My tendency is to lean towards option 3 since it stays inline with our our link standard. However, I also like option 4. @schaferjh how are you feeling about the new options?
Nice. I agree that I like using the dark gray for the URL text. Both 3 and 4 work for me, so if 3 is more in line with our current standard, I say let's go in that direction.
Nicholas Johnson (sorry, can't find his github handle!) found a government URL shortener: https://go.usa.gov.
Shortened URL example: before: http://build.consumerfinance.gov/owning-a-home/loan-comparison after: http://go.usa.gov/3K6Ue
Authentication occurs by signing up with a government email address, and the URLs never expire.
Any considerations or issues before I use these for my printable PDF needs?
A few thoughts: *For the printed experience, I'm worried that if all the links display as "http://go.usa.gov/..." it will look like some kind of gibberish the printer/computer did to the website on print. Esp. for less-sophisticated users, it removes one of the benefits of showing the URL -- trust and confirmation. *For the actual web experience, we are going to be implementing a privacy notice interstitial for non-gov third party links in the refresh. If the links are all entered as shortened .gov versions, then we won't know when to trigger the privacy notice and when not to. If the shortened versions have to be entered separately from the actual links as a "print only link", that strikes me as something of a burden and prone to human error.
I know the shortened links are super attractive, but I'm not sure they're really the right answer for the print style.
I agree with everything @schaferjh said, but I will point out that go.usa.gov can only shorten .gov URLs, so there is no uncertainty over whether something is a .gov link or not.
Those are really good points @schaferjh and @Scotchester – it seems like it's best to not shorten the URLs.
If the user doesn't want to type in a super-long URL, they can always go back to the web page they printed and click on the link from there. Including the real URL in the printout provides additional context for users to learn where they would have been taken (e.g., "Oh, that link goes to the FTC website")
I want to challenge the assumption that the print styles should be grayscale. Some people use the Print function to save the page as a PDF, and other people will prefer to print in color. I think the folks who prefer to print in black and white can be expected to opt-in by choosing black and white in their print settings.
For the example in this thread, that mostly impacts our logo and the links on the page, but it'll be more impactful for pages that include photos or illustrations.
+1 to @benguhin's comment on grayscale on images.
I think "All images will print in grayscale" is an assumption we can make about how a good chunk of folks will end up printing these documents (and it's really great that the images in this discussion are designing around that assumption), but it's not something we should enforce as a rule.
Pulling these thoughts into one view:
- All navigation will remain when printed and not include URLs.
- Links within page content will include full URLs. A different font weight will be used to differentiate the link text from the URL. Above, I'm using demi bold for link text and regular for URLs.
- Background colors will drop out. This seems nonessential but keeping it here for further consideration.
- All elements will print/export to pdf in color. It will be the user's responsibility to select BW in his print settings if preferring no color.
- All images will print.
- Expandables a user has collapsed will remain collapsed when printed. Ones a user has not collapsed will remain rolled up on print.
What about illustrations or heros? Will those stay or drop out like the background colors?
I'm leaning toward keeping them. When I look at sections such as "About the Bureau" on beta, I realize that photos such as the director's headshot provide helpful context and should print. Many of our illustrations are supplemental but are still helpful in creating a tone for a page. With headers, removing the background image but keeping the text seems like it would get funky space-wise and might look like a mistake, especially if someone is only exporting to pdf.
It was decided today in our design manual meeting that expandables a user has collapsed will remain collapsed when printed. Ones a user has not collapsed will remain rolled up on print.