Selling concepts

I endured a misspent youth in retail sales and one of the things I’m good at is finding the best way to sell things to clients, even if it’s a concept like progressive enhancement rather than a physical product, the concept can be ‘sold’ in a way that the client understands and, more importantly, accepts.

Let’s start with the definition from Wikipedia:

Progressive enhancement is a strategy for web design that emphasizes accessibility, semantic mark-up, and external stylesheet and scripting technologies. Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth or more advanced browser software an enhanced version of the page.
Wikipedia

While this is a clear and concise definition it does assume a certain level of knowledge and so isn’t the most ideal method to explain the concept to clients.

I tend to use analogies to explain a lot of things to people, taking something that may be alien to them, such as the differing capabilities of web browsers, and use something they may be familiar with to explain the point. My favourite analogy uses games consoles as a replacement for web browsers.

my favourite analogy

So let’s take a popular sports game, Say ‘Tiger Woods Golf’, this game is available on just about every popular games console on the market such as the Nintendo Wii, Xbox 360 and Playstation 3 as well as handheld consoles such as the Nintendo DS, does the game look the same on each console? Absolutely not! It’s physically impossible and there’s a clear and defined difference with games consoles, the ‘high-end’ consoles like the 360 and PS3 cost the most, and undoubtedly give the best visual representation of the game, with better textures, realistic faces, perfect trees and water effects but the Nintendo Wii, having less power will have blockier graphics, jagged edges and rougher details like trees and water. The games don’t look exactly the same, but the most important thing is that — despite these obvious visual differences — it doesn’t stop you playing a round of golf.

Image showing the difference between the game on the Wii (left) and the 360 (right)

Every client I’ve ever explained this to has understood the analogy really well. Nearly all own, or have owned games consoles or have children with them and so can understand that a £300 console might give a better overall experience than a £150 console, even if the game costs the same. The game is designed to take advantage of the increased power available in high end machines, and cut back on certain things on low end machines to make sure that you can still do the core task in the game. Everyone will remember owning an older system when they were younger and wouldn’t expect their Atari, NES or Master System to be able to cope with the latest video games on the market, but they could still get a game that would let them play a round of golf. Even if the balls are square.

the ‘convincers’

There’s a couple of conscious decisions here which help to ‘sell’ the analogy, Firstly: games such as Tiger Woods Golf, Fifa Football or Formula 1 are extremely widespread and mainstream, you can be sure that even if your audience isn’t familiar with a specific game, they know the sport. You can tailor the analogy on-the-fly with the client also, if you know they’re a football fan, switch to Fifa Football as your reference.

Secondly: I use a sports game as they’re the most likely to be ported across all major consoles and contain familiar elements which stay consistent regardless of the platform, such as golf courses, race tracks or sports stadiums. It’s the graphical detail that is the major difference and this is what we’re using to compare.

Thirdly: sports games attract huge investment and sponsorship and sell and make millions. This helps to sell the fact that even EA Sports, with their millions of dollars can make a game look the same across every console.

what about you?

Do you have a favourite analogy? what do you use to explain certain things to clients? It doesn’t have to be progressive enhancement, hit up the comment box below and let me know!

Why redesign?

I first registered the coffeepowered.co.uk domain in 2007 and over time my use of the site has changed. In 2007 it served as a freelance identity with a basic online portfolio, then in 2008/2009 I scaled back the freelance angle of the site and used it as a landing page which linked off to my various and disparate identies around the web. While I still like that approach I felt that I needed to build the site back up to be my main online identity and as well as injecting some life into my previously feeble attempts at blogging. I will also be working on a new portfolio in the near future to highlight some of the projects I’ve been involved with recently (which can be currently seen on my CV).

Sketching concepts

Before any photoshop layers were created or lines of code were written I sharpened my pencil and went to work in my Stuff and Nonsense Moleskine, I started with some basic wireframe sketches which roughly blocked out areas of content for the homepage and a couple of inside pages.

I had a clear idea in my mind at this stage which involved using the same leather texture I had previously in the header of the site as I loved the embossed text and stitching, as you can probably tell at this point the design ended up taking a vastly different direction during my design process so I’ll probably keep the leather and stitching for another design in the future.

After the wireframes I started sketching some individual elements which I wanted to implement, one of those which persisted throughout the design was the ‘Macbook Mission’ thermometer graph. As I’m saving for a new Macbook I wanted to have a bit of fun with the situation and have an old-school fundraising thermometer like we used to always have on T.V. when I was a kid. Immediately the idea of working in the Apple logo into the thermometer came to me and a couple of pencil strokes later, I knew that I had to use it!

Designing in the browser

While I do the majority of my design these days in the browser, I did fire up Photoshop at this stage to throw together some visuals for the main page frame and to draw the Macbook Mission thermometer to see how it looked.

After coming to a layout which I was generally happy with, I moved into the browser as quickly as possible and started building the design concepts as a custom WordPress theme, styling and laying out the main blog elements according to the baseline and vertical grid that I’d worked out in Photoshop.

I wanted to experiment with font embedding on this project and during my daily browsing I’d spotted the wonderful Tandelle font which I wanted to implement. As this font was available on Typekit I was able to quickly and easily bring it into the design, initially within the blog comments section and loved the aesthetic immediately however Tandealle really didn’t work with the leather/elegant look I had previously been working with. I did initially play with Typekit to include this font but during the build I opted to take the opportunity to play with ‘proper’ @font-face embedding seeing as the font family was only $13.95 from myfonts.com

“the font reminded me of the numbers painted on the side of racing cars — to which I pay a minor homage in my blog comments bubble”

I sat for quite a while staring at Tandelle and having my mind swim with vintage race car imagery, the font reminded me of the numbers painted on the side of racing cars — which I pay a minor homage in my blog comments bubble — and this was the major turning point in the design. After spending a while flicking through vintage racing car photography I took away a couple of simple visual cues which I wanted to focus on.

• use of uppercase, large fonts
• faded, predominantely one-colour-on-white colour pallette
• horizontal striping

I kept the layout I’d wireframed initially and started to tweak the look and feel based around the new direction, redesigning the header section based on the typography and style I’d been researching and ended up very happy with the result, I brought in a paper texture to give the background some depth and to extend the muted colour theme around the site itself and set about re-theming some of the other elements.

I’d never been happy with the original ‘ribbon’ type navigation but in keeping with the very vague ‘vintage race car’ aesthetic I worked in a flag type motif which seemed to work quite well. I tried to keep the elments of my inspiration quite abstract even though in my own mind I had quite a strong source of inspiration, I didn’t want to over-do the theme.

Overall I felt that by doing the vast majority of my design work on paper and in the browser — avoiding Photoshop where possible — enabled me to very quickly change design direction and experiment with a completely different design aesthetic quickly and easily. I’ll definately be relying on my sketchbook more as a major tool when designing new sites as it seemed to bring back a skill I’d forgotten I have. During my academic life I had an interest in automotive engineering and was involved in building an electric racing car and petrol powered go-kart from scratch. This involved a significant amount of technical drawing which I quite enjoyed and I felt come back naturally as I worked with my mechanical pencil, pigment liners and french curves. I might have to try and find my old technical drawing portfolio to use it in a future design, I wonder if exploded diagrams of axles and gear assemblies might be good inspiration.

“Overall, I felt that by doing the vast majority of my design work on paper and in the browser — avoiding Photoshop where possible — enabled me to change design direction very fast and experiment with a completely different design aesthetic quickly and easily.”

Degrading gracefully

One of the issues with using the Tandelle font arose in situations where the browser didn’t support @font-face. I’m using Tandelle for headings and navigation items and based on my 18px typographic baseline, the elements using Tandelle are set to 4em. For browsers not supporting @font-face the font stack falls back to Helvetica Neue and eventually Arial. This is fine for the x-height of all the fonts but far to large for the character width as Tandelle is a far narrower font than either Helvetica or Arial.

I used the modernizr script to allow me to test if the browser was capable of supporting @font-face, if so then the headings were set to 4em, if not then they were set to a more sensible 2em. There were also other minor positioning rules which differed for each situation so modernizr allowed me to test the capabilities of the browser and deliver a slightly tweaked design to suit.

What’s next?

There’s still lots to do on the site such as the portfolio and contact section, and I’ve had a couple of ideas on how to develop the footer a bit further, all in all I’m extremely happy with it and I hope I’ll be sticking with this design for a while. What do you think? Hit up the comment box below! If you’d like to see more of the sketches that I did during this design you can take a look at the set on Flickr and if you take pity on me, you could dontate to my Macbook Mission! (details at the top of this page)

Disclaimer!

This theme isn’t finished, isn’t cross-browser tested and probably doesn’t validate. It’s to be considered a work in progress which I was just too impatient to keep hidden.

When it comes to embedding a company logo into a page, quite often the logo won’t be suitable for print. For example, the website may be dark and the logo might be light and while this works fine when the site is viewed on-screen, it can look out of place when used in a print stylesheet or if the site is viewed with CSS disabled.

While building the new University of Leeds corporate website we got to the stage where we needed to build our print stylesheet, the page header has a white logo on a dark background.

Originally, the logo was inserted into the design using a standard CSS image-replacement technique:

Light logo on dark header

When you’re using a CSS image replacement, the image doesn’t exist in the markup, it’s applied as a background image and only the h2 text is displayed. We toyed with the idea of using the same image replacement technique in our print.css, replacing the logo with the black-on-white variant. This quickly fell on it’s arse, as most browsers are set by default to not print background images as seen below.

Image replacement with CSS disabled

Putting the image back into the markup

In order to get around this, we decided to stop using image replacement and go back to having the image in the markup. Initially I was curious as to the effect of this from an SEO standpoint and had a quick chat with an SEO friend about the disadvantage of not having our corporate logo as a heading. He pointed out that there would be no disadvantage to us as we’re not trying to rank on the ‘University of Leeds’ as a keyword and that as it’s mentioned everywhere else in the thousands of pages we manage, it’s not going to make a difference. (Your mileage may vary and this might not be suitable for everyone)

Doing it bass-ackwards

Once we’d put the image back into the markup, it showed up as expected in our print stylesheet, however our white-on-black logo wasn’t really suited.

Same logo with CSS disabled

We already knew that we couldn’t use CSS to replace this with the black-on-white logo in our print.css, so we decided to do it the other way round. Rather than the have the white-on-black logo as default, we changed to having the black-on white as the default meaning that our no-css and print.css got the correct logo. We used a “hidden” class so we could hide the default image and a CSS overlay on the anchor tag to bring back our white-on-black logo to fit in with the rest of the design.

CSS enabled

CSS disabled / print stylesheet

Conclusion

Because most browsers disable background images when printing by default, you need to be aware that any important images that are using image-replacement techniques may not work. Working around these limitations is possible with a bit of planning.

I love my moleskine, although I need to get into the habit of scribbling more!

http://www.nikibrown.com/designoblog/2008/12/01/designers-scribbles/

Moleskine scribbles

The ISS Web Team have recently worked with the Enterprise and Knowledge Transfer Unit (EKT) to redevelop and redesign their Business and Enterprise site within the new University Content Management System.

This project was challenging in that the EKT wanted to provide 4 seperate ‘microsites’, which apart from having specific content targeted to differing audiences, would also have their own inherent theme through differing images and colour schemes. This is usually achieved easily if we have complete control over the HTML markup and can assign CSS ID’s to the element on the individual pages, however our CMS controls the HTML markup, and doesn’t allow us this convenience. Luckily, our CMS does grant us the flexibility to develop the visual layer (layout, colour, images) in much the same way as I would develop this on a non-CMS site.

To deliver alternate CSS to specific sections of the website is relatively trivial, the complexity comes when you have the same content in different contexts. Take, for example, the ‘Events’ section of the EKT site. The events functionality is an inbuilt component of the CMS, and is made available to all areas of the site. In the case of EKT, the user can view events from within the microsite context (for example, to just see staff-related events) so the events pages need to be displayed with the microsite-specific theme, of which there are many. The events can also be viewed from a site-wide context (for example, viewing all events), which also requires some layout changes to cope with the absence of secondary navigation.

To achieve this mixture of contexts, our CSS is structured as follows:

As you can see from the above diagram, there are 6 different contexts in which the Events module can be viewed, each of which requires it’s own colourscheme and imagery. Admittedly this is a simple implementation of Contextual CSS, but there is the potential and ability for each context to have completely different layouts to each other.

Because the HTML markup is slightly different within the microsite context, but is the same across microsites, we have a ‘common’ stylesheet which is invoked through the @import rule, allowing us to seperate common CSS rules and make maintaining the CSS easier by not duplicating the same rules across the microsite styles. The ‘microsite theme’ stylesheets are relatively small, only containing rules affecting colour and imagery.
for this variation.

We wanted to make up some ‘schwag’ to give away, and rather than the typical and tired pens, stress toys or coasters we thought we’d try and help our potential clients to indulge their own creative sides by giving away sets of coloured pencils. Our designer Claire had already produced the designs for our posters and banners, so we did a quick concept sketch (on a paper take-away bag) to translate the elements into this small form factor and I took Claires source graphics into Photoshop to create the layout and produce the inserts.

I only really had half a day and a minimal budget so was unable to outsource the printing and do anything fancy like die cutting, designing fully custom packaging or getting the pencils themselves branded. Maybe next time!

Because I work in an online medium, it’s satisfying to make a physical product for once, something that you can actually pick up and use rather than interact with via mouse and keyboard, plus the coloured pencils are a nice analogue analogy for our design process, which mainly revolves around the digital world.

Theres a full ‘Photoblog’ on my Flickr page where you can see more full size images of the project in progress.