Mando Group Ltd - heidi_seymour

The Mad Hatters

We often look to children and marvel at how creative they are. Ideas flow and there seems no limit to a child's imagination. There is no mystery here; children simply have not yet learned how things should be.

Instant judgement is the enemy of creativity...

Edward De Bono

We as adults judge ourselves and our ideas far too harshly. So before an idea has even begun to grow the majority of us have already slammed the metaphorical door shut on that thought or idea.

On Tues of last week we held a creativity workshop. The key aim was to get everyone to begin to make creative thinking part of everyday thinking. We would stimulate the right of brain, get everyone to access his or her inner child and see what we could create in a safe non-judgemental arena. Oooo and have lots of fun in the process.

We've also embraced the "6 thinking hats system" for creative thinking at Mando as devised by Edward DeBono. The thinker can put one on or take one these metaphorical hats off to indicate the type of thinking that is being used. Read more about the process here... http://www.debonogroup.com/ I can thoroughly recommend it for quick, productive meetings!

Anyway back to the workshop. We would use the 6 thinking hats system as our inspiration. The brief was simple. Brainstorm, design and create a hat that embodies all the characteristics, feelings, nature that the hat represents.

Three teams of two got together and were each randomly given one of the following statements to generate ideas from.

Red Hat:

This covers intuition, feelings and emotions. The red hat allows the thinker to put forward an intuition without any need to justify it.

Yellow Hat:

This hat finds reasons why something will work and why it will offer benefits. It can be used in looking forward to the results of some proposed action. It can also be used to find something of value in what has already happened.

Green Hat:

This is the hat of creativity, alternatives, proposals, what is interesting, provocations, and changes.

They were instructed to break the rules! There is no such thing as a bad idea. Just perhaps more appropriate ones.

I wasn't disappointed in the results... In the short hour that they had this is what they did!

Printing Webpages & Maintaining the Brand

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

Designing Responsibly for a Greener Planet.

Recently everyone seems to be talking about how big your carbon footprint is? Of this I’m not entirely sure. It seems impossible to measure? However I do believe in treading lightly on this planet. My mantra to be “greener” has always the three R’s: reduce my personal impact on the environment and re-use or recycle whenever I can. I was pretty much convinced I was doing a good job until I read a recent article in a design magazine (Creative Review).

Strangely it hadn’t really occurred to me what environmental impact my creative endeavours could have. I was content that Mando Group sent e-cards instead of Christmas cards and used recycled paper but is there much more? Well it seems there is an awful lot more I as a graphic designer can do. It is as simple as selecting a lighter weighted paper to using non-toxic ink.

Other points I picked up from the article were:

Think small? A reduced format can save on paper, ink, water, emissions and could also mean your client could save on postage costs.
Can it be recycled? Binding glues and laminations can mean the item won’t be able to be recycled at all.
Are the materials used sustainable? For example use vegetable oil based inks rather than more conventional mineral-oil inks.

Visit www.lovelyasatree.com to learn more. If you’re a graphic designer, I strongly urge you to do so!