Creating a Print Version of Your Website

Once upon a time, a user searches for “how to care for roses” in Google and stumbles upon your website. They see that your website contains a lot of valuable information, and they want to print off your page so that they can refer to it later when they’re gardening. So they hit the print button and go to their printer to collect the page… only to see that the page is weirdly formatted, runs off the page, and wasted a LOT of their printer ink. Needless to say, they’re a bit disappointed.

This problem could’ve been avoided if you had a print version of your website. This means optimizing your website so that when the user tries to print your page directly from the web browser they’ll have something they can actually use. In order to accomplish this, you’ll have to create some CSS styles that alter your webpages’ design only when the user hits print. Once you’ve created this optimized stylesheet (we’ll call it “print.css”), you’ll link to this stylesheet under your main stylesheet. This link would look something like this:

<link rel=”stylesheet” media=”print” scrc=”print.css” />

As you can see, the media is set to “print”; this tells the browser to only implement this stylesheet when the user tries to print, and no other time.

Now that we know how to link to this stylesheet properly, here are some tips to follow to create a stylesheet that formats your webpage properly for printing:

  1. Remove All Background Images/Colors: The quickest way to eat up all of the visitor’s printer ink is to leave in your background colors and images, and believe me, you DON’T want to do that to them. In your stylesheet you should override any “background-image” or “background-color” style with either “none” or “white”.
  2. Remove Color in General: In fact, you should try to avoid using any color altogether. Colored ink is much more costly than black ink, and so you should try to be mindful of that. Set all your elements to black or white, and maybe gray if you need some variation to maintain your design. Even if your logo is in color, you should have a black and white version that is print-ready.
  3. Remove Unnecessary Content: The reason that a visitor is printing off your webpage is that they want the important content that contains the information they were seeking, and that should be all you give them. Cut out any and all unnecessary elements such as your primary and secondary navigation, search box, social media icons, advertisements, etc. However, don’t go on a cutting frenzy and cut everything BUT the content; some elements you might want to keep or add in addition to your main content might be things like your website’s logo or a URL to the page they printed off so they can find you again.
  4. Readjust Font Sizes: More than likely you’re going to need to increase the “font-size” for your printed page. Your visiting gardening enthusiast may want to be able to read the page while their hands are full of dirt, and so having your content at an increased size is very helpful.
  5. Insert Page Breaks: One thing you might notice is that when you print off your web page, your content may break in weird places onto the next page. To avoid this problem add page breaks within your content by targeting them with the “page-break-before” or “page-break-after” properties in your CSS stylesheet. For example, if you want the page to break to a new page when reaching a new section of the page, you could add a style such as “page-break-before: always” that will tell the browser to always insert a page break right before this element.

Sources: [ Make Your Website Printable with CSS ], [ Make Your Site Printer-Friendly With CSS ], [ Optimizing Your Website Structure for Print Using CSS ]


Effectively Titling Your Website

Title tags (<title>My Website</title> for example) are a HTML element that defines the title of a specific page of your website. These titles appear in the “title bar” of your web browser (for this website it’s “PixelSheffield – Home” or “PixelSheffield – Effectively Titling Your Website” depending on which page you’re viewing this article on!) and are also visible when you view your website in a search engine results page. Since users first interaction with your website is very likely what they see on this search engine results page, it’s vital that you title your webpages effectively.

Here are some things to keep in mind when you’re titling your web pages:

  1. Make Sure EVERY Page Has a Title: The worst mistake you could make is to forget to even give your webpage a title at all! This may be difficult to ensure on a very large website with hundreds and hundreds of pages, but it’s vital that each page has one. If your page doesn’t have a title it won’t show up correctly in search engines (if at all), which will definitely result in a loss of potential visitors. Also make sure that each page has a different title and it isn’t using a default one provided by a WYSIWYG program.
  2. Utilize Relevant Keywords: If your website sells jewelry, you should definitely include jewelry-related keywords somewhere in your title tag. This could include relevant keywords like rings, necklaces, or even just jewelry! Having relevant keywords in your title will help users find you when searching for specific keywords, and the more people that can find you the higher your website will climb in the rankings. However, avoid keyword stuffing—most search engines can pick up on this and actually rank you lower.
  3. Be Accurately Descriptive: Your title tag should be descriptive of the page it’s representing. It makes no sense to title your page “Diamond Rings” if the page is all about sapphire necklaces. Make sure all title descriptions are accurate, while avoiding overly generic or verbose wording.
  4. Use the Optimal Length: If your webpage’s title is too long, search engines will actually truncate the title so that it fits on their results page. For Google the ideal title is between 50 – 60 characters long, and you should aim to for about this length. However, you should not sacrifice a good, descriptive title for the sake of squeezing under this character length.
  5. Don’t Forget to Include Your Brand: You should always include your brand name in the title tag somewhere; after all, you want to keep reminding visitors whose site they’re on! However, there is some debate as to where within the title tag you should include your brand name. A good rule of thumb is if your business is very well-known and the presence of that name can influence users to click the link to your website in the search results, put your brand name at the beginning of your title. Otherwise, add it onto the end.

Sources: [ Title Tag – Learn SEO – Moz ], [ Review Your Page Titles and Snippets ]