Printing Webpages & Maintaining the Brand

Posted by: Heidi Seymour | 27 September 2007

The importance of a client’s brand or identity relies heavily on consistency. This as a designer is one of the factors we consider and carry through the whole life cycle of a project. However recently I encountered a little puzzle in achieving this consistency.

The Puzzle

The puzzle is this. I apologise in advance if this gets a little technical. Web Designers you may like to skip to the solution?

At first it seemed quite simple. I was working on the CSS (cascading style sheet) that controls the appearance of a web page when printed. I was keen to have the company’s logo at the head of these pages. The problem was the logo on website was placed on a dark background (see Image 1).

Image 1: Logo with a dark background

When I printed the web page the logo looked like this…

Image 2: Logo appearance when printed.

Now the reason the image looked like this was when building a website, to ensure the logo blends seamlessly with the background, various parts of the image are made transparent allowing the background colour to show through. The problem is when the web page is printed, in the majority of cases, background colours are not printed (see Image 2).

So here was my puzzle. I needed the logo to look great on paper and on screen. The only way is to have two logos, one for each scenario.

The Solution

So how was I to achieve this and the html still be accessible and semantically correct? With CSS it is possible to show and hide elements within the html. However I couldn’t possibly have the two logos sitting in the html because:

• a)    Assistive software (e.g. screen readers for the visually impaired) would pick both them up and read both instances of the image out to the user. To get around this issue an empty alt tag could be placed on the image and the screen reader would then ignore the image but…
• b)    …What the user’s browser couldn’t interpret the CSS or the user had them switched off. In this instance the user would see both logos on the web page and on the printed page.
• c)    …Also it’s not great html semantics to have two elements placed directly after one another essentially communicating the same thing. This could be seen as confusing.

I knew I had to come up with a CSS solution to my problem. So ensued much head scratching and discussion with colleagues over various solutions. None of which were ideal because of a, b and c… I didn’t want to “hack it”. Then it came to me. Yes it was a light bulb moment.

The problem was thus. We needed two logos for the 2 different media types and 3 scenarios:

• Print
• Screen – CSS enabled
• Screen – CSS disabled

I mention earlier that when a web page is printed, background colours are not printed. This is also true of images that are used as a background element in CSS.

e.g
.logo
    {
    background-image:url(logo.gif);
}

This image would not appear when printed. I could use this inability to my advantage. So I went ahead and created an additional logo for the print scenario (see Image 3).

This is the image that would be referenced directly in the html. This would ensure that those printing or those who didn’t have their CSS enabled on their browser would see a great version of the brand logo.

Html is as follows:

<h1><a href="/Content/Home.aspx"><img src="/_common/img/logo-print.gif"  alt="" class="printlogo" /><span>08 Business Connect</span></a></h1>

This logo however needed to be hidden from the majority of users browsing the website. I added class=”printlogo” to the image, this class would be picked up by the CSS for screen where I’d be able to state it not to be displayed.

The screen logo could then be applied as a “background image” to a different part of the html code.

Print CSS is as follows:

img.printlogo, h1 span
    {
    display:block;
    }


Screen CSS is as follows:

img.printlogo
    {
    display:none;
    }
h1 a
    {
    background:transparent url(/_common/img/logo.gif) no-repeat 0 0;
    display:block;
    width:325px;
    height:68px;
    }
h1 span
    {
    position:absolute;
    left:-5000px;
    }    


You may question why <span>08 Business Connect</span> was added. Would not an alt tag on the image be sufficient? Well this was added because the display:none on this image. In some instances the css value “display:none” really does display none. So any alt tag place on the image would be lost for those users. The solution here is to place rich text place within the H1, which is good for those users, good for search engines and good for semantics. It only needs to be placed off the visible web page so we can’t see it. Here I have used absolute positioning to make that possible using the span tag.

So that’s it a relatively simple solution but it works. Try it out. Visit the newly launched 08 Business Connect website.

www.08businessconnect.com

Posted in: