UPDATE 2: TurnTubelist is now LIVE. Go now and play with it and let us know what you think. We are still tweaking it but we decided to get it up and out there. More details to come soon…

So Webjam 8 was the biggest and best so far by all accounts. There were brilliant presentations and competition was as tough as ever, but it was to Mr Speaker’s and my absolute delight to win first prize for TurnTubelist, a little pet project we’ve been mucking around with in our spare time. Props where due, Mr Speaker (aka Earle Castledine) presented brilliantly as always in his own inimitable style, not to mention his JavaScript prowess in turning a beer-idea into something well cool. When it’s available, I’ll also put up the vid of the presentation hereThe vid is now at the end of this post.

Mr Speaker at Webjam. Photo by Halans

TurnTubelist demo. Photo by Halans

Sneak-peek at TurnTubelist

TurnTubelist is a web application that lets you crossfade YouTube videos and build your own playlists for continual YouTube fun. It currently works entirely on the client-side using HTML, CSS and lots of JavaScript (mainly jQuery). It’s not up yet but we aim to put a beta up on the web really soon.

Earle has come up with some neat wizardry that hooks up to YouTube via their API, does some nice AJAX to search for YouTube vids without interrupting playback and stores your playlists in a cookie. Not to mention, the sliders, keyboard shortcuts and a whole bunch of other stuff.

I worked on the graphics, the user interaction design and got my hands dirty with some jQuery for a lot of the user interface bells and whistles. There’s still a lot of work and testing to be done, but I think it’s just about time to put it out there to get some feedback.

Stay tuned for when we launch the beta, this thing is a hell of a lot of fun to use if I do say so myself.

In the meantime here’s the presentation video:

Published at HenryTapia.com – Experiencing and designing things

Adobe have launched the service with Buzzword, an online service that lets you share and collaboratively edit PDF-style documents (think Google docs but schmicker), and ConnectNow, a web-based video conferencing tool. There’s also some file sharing and online PDF creation tools there too. Like Photoshop Express, Adobe have again opted for the full Flash interface. I’ve gotta say, it really is impressive what you can do with Flash these days (other than animated splash pages). ConnectNow lets you see the host’s desktop and (with their permission) you can even steer, all the while chatting via text and video conference.

Take a look for yourself and see what you think.

More info at the Acrobat.com blog.

Published at HenryTapia.com – Experiencing and designing things

Once you start getting a few such libraries going on a site, you can end up with a whole pile of script includes in your header for minor user interface enhancements here and there. This can be a hassle to deploy over various page templates/master pages/etc, particularly if you work with large sites. More importantly, you want to minimise requests to the server if they’re not necessary – it’s been shown that reducing HTTP requests can reduce response times and improve server performance.

There are various ways you can reduce HTTP requests from the front-end (like using CSS sprites to reduce image requests, aggregating CSS and JS files), but the tip I want to share is to not include multiple javascript libraries (eg. jQuery plug-ins) on your pages but having your main JavaScript file load the relevant libraries on demand, as the need arises.

JQuery has a handy method for dynamically loading script files: $.getScript()

But you don’t want to load all libraries on $(document).ready (thus when each page loads), instead you only want a plug-in to load when it’s needed. You can do this by testing for the existence of the relevant element(s) first. You can’t do this (as I found when I looked at Firebug’s console) by saying:

if ($(".tabs")) {
	$.getScript(URL, callback function)
}

This will work in other helper libraries like MooTools (as it’s just short form for document.getElementById), but jQuery will return an array of all matched elements, so even if that array is empty it will never return false. This is actually a good feature of jQuery as you don’t have to test for the existence of anything before applying behaviours.

There’s an easy way to get around this (which wasn’t obvious to me right away). Make sure the array length is greater than zero, of course:

if($(".tabs").length > 0) {
	$.getScript(URL, callback function)
}

So a more complete code snippet would look like:

$(document).ready(function(){
	if($(".tabs").length > 0) {
		$.getScript("/scripts/jQuery.idTabs.js", function(){
			$(".tabs").idTabs();
		});
	}
});

Basically, if you include that snippet in your main JS file, then whenever you have an element with given the class “tabs”, then it will load idTabs.js from the location specified and then initialise Sean’s neat script, and you’ll have yourself nice easy tab behaviour.

Thanks to my co-worker buddy Nick at the Valley for introducing me to the $.getScript feature in jQuery.

Update 23/06/08:

It seems in Firefox 3 and Safari Webkit, objects loaded via $.getScript() aren’t instantly available when called via the callback function. Adding a setTimeout of as little as 100ms seems to get around this like so:

$(document).ready(function(){
	if($(".tabs").length > 0) {
		$.getScript("/scripts/jQuery.idTabs.js", function(){
			setTimeout(function(){
				$(".tabs").idTabs();
			}, 100);
		});
	}
});

Published at HenryTapia.com – Experiencing and designing things

Any web developers that spend any time using CSS would be familiar with the Firebug add-on for Firefox. (If you don’t have it, get it. It is the best web development and diagnostics tool out there.)

Having become completely dependent on this tool, the first thing I noticed when I upgraded Firefox a while back (well, it upgraded itself) is that it no longer worked for inspecting links and images (a and img elements). I had a bit of a search around and found that there was a problem with something called dom-utils in the latest Firefox.

The temporary solution I came up with (until the next Firefox release hopefully) was to reinstall Firefox 2.0.0.11. I did it straight over the top without uninstalling and everything went fine (Windows XP Pro). I found somewhere that also said installing the latest Firebug beta would also solve the problem.

Related links

• Bugzilla.Mozilla.org – Bug 416896
• Firebug
• Firefox 2.0.0.11

Published at HenryTapia.com – Experiencing and designing things

This is not just another in a recent trend toward “design contests” but a whole community site purpose-built around them. The otherwise respectable web development authority, SitePoint has become the posterchild for speculative work. I find this quite disappointing form for SitePoint.

In case none of this makes sense, here’s some background:

What is spec work:

…any requested work for which a fair and reasonable fee has not been agreed upon, preferably in writing

Basically, you do creative work in exchange for the possible opportunity to get paid, without any guarantees. This idea has become quite popular in recent times in the advertising and creative spaces. Large full-service creative agencies are often in the position to pitch on spec work, but young individuals trying to get their break are less able to afford to spend hours on designs with no guarantee of remuneration. This idea devalues the graphic/web design industry and seems to be fairly unique to the creative space. I can’t think of any other professional service that would be expected to complete the service first when providing a price, and only then given the chance to be selected from a host of others.

An analogy, quoted from David Airey:

I went for a dental check-up yesterday. After the dentist inspected my teeth, she suggested some work to prevent further tooth decay. I told her to go ahead, and if the dental work was satisfactory, I’d be more than happy to pay. She responded that she wouldn’t be able to do that, because she normally provides a service when a fee is agreed upon up-front. I said I’d let her know after I checked in with other local dentists.

Design contests

In this case, many of the posted “contests” are not really contests, merely freelance labour auctions with creative work thrown in up-front. Many “prizes” offered are $150 – $200. A prize that is less than the market rate for what was produced. I find that somewhat exploitative…

This concept attracts clients who think design is a commodity rather than a service, and have a very low regard for this profession. I really do wonder about the businesses that are submitting these contests. Putting being a designer aside, I would have a fairly low trust level for a company that held a competition to have its logo or website designed and awarded a prize of $200 for it. I also wouldn’t have high hopes for the design they ended up with either. As always, you get what you pay for.

One thing I will say for SitePoint, they at the very least safeguard the copyright of all entrants’ work. According to the contest rules, copyright ownership is only transferred upon the winner accepting the prize. This is unlike many other contests, where the contest organiser retains ownership of all submitted entries. I find that idea unfathomable.

I realise that not everyone will agree with me on this one, and yes, designers aren’t forced to participate in these contests, obviously. But I would encourage young designers (any designers and agencies, really) to avoid engaging in these design contests and any other forms of speculative work as they only serve to harm our industry in the long run.

Other links

• NO!SPEC
• Spec work can damage your business
• Andy Rutledge on re-design contests
• Zeldman: Don’t design on spec

Published at HenryTapia.com – Experiencing and designing things

Update: 31/05/2010

I’m no longer using this technique on the site since the redesign – I’m using jQuery Tools Overlay. The examples below will still work but they use the new overlay library.

We interrupt the travelogues to talk about some geeky stuff that’s been going on around these parts.

I’ve recently been using grids of thumbnails to link to Flickr photos as they relate to blog posts (e.g. my previous post). One thing I’ve wanted to do is find a way to show these images without sending viewers over to Flickr and away from my site for fear that they might get lost (if they are navigationally challenged) or simply be pulled into something more interesting and not return. This would be a good excuse to add a little Script.aculo.us and AJAX sweetness to my blog posts.

What I needed was:

• To be able to embed images into blog posts and just link to my Flickr account rather than hosting the photos myself;
• A list of thumbnails for when there are several images to show;
• To avoid encouraging users to go off-site without resorting to pop-ups and such;
• A JavaScript solution, ideally, but I wanted to avoid adding more libraries (e.g. Mootools) and if possible re-use the ones my already rather bloated Wordpress theme already uses (in this case Prototype).

Solution:

Here’s an example of the end product. Click on the thumbnails…

Plaza de las Tres Culturas

Monument at Plaza de las Tres Culturas

Statue of JPII

Basilica de Guadalupe

Obsidian carving

Temple of the Moon at Teotihuacán

At the Temple of the Sun at Teotihuacán

You can hit escape, click the close button or anywhere outside the box to close the overlay. Mouse over the image and click on previous or next to view other images (when part of a series). Even use keyboard shortcuts (P and N). NICE.

For this I had to use my many and varied skills (such as searching on Google, copying and pasting code snippets, checking my Facebook) to come up with the best solution. The end result was shamefully easy and involved:

• Floating the thumbnails and captions in a grid (using a DL element) was a nice reusable way of displaying the thumbnails regardless of container and text size. TJK Design has a good scalable technique for this.
• Modal windows are becoming a good solution for contextual user interactions when used appropriately. They are becoming fairly familiar to users, especially those who use Windows Vista (where they have the annoying tendency to come up every 10 seconds or so), and are quite appropriate for viewing larger images in the context of a gallery.
• Using AJAX to load the images (as I wanted to load an external image rather than load all the images within the page or launch another window).

I found a few great contenders but I settled on the very excellent Lightbox 2 by Lokesh Dhakar, as it did exactly what I needed, looked good and used prototype and script.aculo.us. If I wanted overlays in general for other interactions or content, I would have gone with one of the scripts previously mentioned, or the very cool ModalBox, and if I was using the Mootools JavaScript framework (which would have been ideal, I really like Mootools) I would have used MOOdalBox.

I was pleased to find I didn’t need to really hack any JavaScript out at all in order to get this going, I just had to make a few changes here and there to tie it in with my current Wordpress scheme.

This type of interaction is something you will see more often in sites rich in functionality. I’m currently starting to use these type of techniques at work in order to build user friendly standards-based e-commerce user interfaces. The down side of the ease of using these types of libraries is that it’s very possible there will be a flurry of overuse leading to massive user annoyance. Use wisely…

Published at HenryTapia.com – Experiencing and designing things

Day 103 – 105, Dallas, Texas

Meg and I arrived at Dallas-Fort Worth Airport on March 7 and took an airport shuttle mini-bus to downtown Dallas, and after a bit of searching we found Jade’s place. Jade is an old work friend of Meg’s who we thought we’d visit while we were in the area. She and her partner Carter were kind enough to let us stay for a couple of nights prior to taking a Greyhound bus to Austin.

In that time we went to some of the local cafés and bars. Interestingly, the streets of Dallas were very quiet for a weekday. I was told that there is a network of underground malls where you’ll find the crowds, especially during summer when the heat is treacherous.

The main attraction in Dallas (and the only one I could find) was the Sixth Floor Museum, built on the sixth floor of the Texas School Book Depository building, from where it is believed Lee Harvey Oswald assassinated President John F. Kennedy on November 22, 1963. This was a very interesting and detailed exhibition about the life and death of JFK and all the controversy surrounding his assassination.

Hank, Meg, Jade, Carter and tips

Sixth Floor Museum

Photos courtesy of Meg. Click ‘em to see ‘em bigger (at Flickr). But don’t forget to come back…

Day 105 – 111, Austin, Texas – South by South West

On the 8th, we took a Greyhound bus to Austin, the capital of Texas. We arrived at the bus terminal on the outskirts of the city, somewhat lost and without a guide book for the city. We eventually decided on taking a taxi to our hotel, seeing there were very few other options.

Austin was a great city to visit. It’s the creative centre and cosmopolitan heart of otherwise conservative Texas. Austiners are very proud of this.

We stayed our first night at a fairly fancy but relatively cheap (though still out of our budget) hotel on the outer rim of Austin City. I’d left the hotel booking too late and it was near impossible to get anything during SXSW unless you booked months in advance. Austin’s only hostel (that we could find) was Hostelling International Austin (HI-Austin) and they seemed to be completely booked. That didn’t stop us from trying to get in there though. Once we’d settled in at the hotel and used the facilities, we headed over to the hostel and asked if we could get any beds in the dorms. We managed to book one and then another one became available when someone cancelled. With hostels, it’s worth hanging around on stand-by as rooms often become available at short notice, so long as it’s not one of the few hostels that now only take advance bookings online. HI-Austin was a small hostel with a great vibe and in a great location, close to the heart of the city and right on the river where you could watch teams of rowers race past.

Austin was a great city to visit. Not just the administrative centre of Texas, it seemed to be the creative centre also, the cosmopolitan heart of an otherwise conservative state. Austiners are very proud of this and are quick to point out the cultural divide between themselves and other Texans.

There are a lot of creative types around Austin. Even the beggars seemed to have a certain flair. One fellow with tatty clothes and dreaded hair stationed alongside a main road on the outskirts of town had a series of signs featuring witticisms from the ubiquitous “Need money for beer, pot and hookers. At least I’m honest” to the more entertaining “Not suffering from insanity, loving every minute of it” and my favourite “Ninjas killed my family. Saving up for Karate lessons”. This style of begging seems to work in places like this as well as San Francisco and Los Angeles, where young male tourists find it hilarious and take photos of themselves with their new bum friend to show their buddies back home. For a small donation of course…

An Austin local

A rowing carnival

The lovely Kristen

Photos courtesy of Meg. Click ‘em to enlarge ‘em…

SXSW

Okay so that’s Austin. The main reason I went to Austin was to go to the South by South West festival, where folks from all over the USA and around the world converged for a few weeks of film, interactive and music awesomeness. I got a badge for the Interactive festival. I would love to have bought a badge for the film and music festivals as well but we didn’t have much time and to be honest, I couldn’t have afforded the US $600+ ticket price (and that’s early bird pricing), especially given we were travelling around the world for seven months and then resettling in London for a while.

But interactive was more than enough for my wondering mind. Lots of interesting talks, panels and after parties with free booze. Some of the highlights for me were:

• A field guide to design inspiration
  Jason Santamaria and Rob Weychert from Happy Cog Studios discussed how they, as designers, keep the creativity in their work. Cameron Moll was also meant to be involved in this presentation but he pulled out with a bad case of the ‘flu, which was a shame as I was really keen to see him, being one of my favourite web design bloggers. Still, Jason and Rob did a great job of it (with some good laughs in there too). In a nutshell, the main gist was that you can’t turn on creativity from 9-5 and then turn it off. Being a designer means you have to think and look at the world with a creative eye 24-7. Look at the good design around the place, look at the beauty in nature and find what inspires you. Do your own personal projects and apply design to every part of your life. Design is a lifestyle, not just a day job. Good advice.
• Grids are good
  Designers Khoi Vinh and Mark Boulton presented a very practical example of how a good grid can improve the design and usability of a site. To make their point, they decided to do a re-design of a very popular site using a good grid, in this case Yahoo.
• Open-source hardware
  Slightly different subject matter but nonetheless interesting keynote presentation from Limor Fried and Phil Torrone about home made hardware, hacking consumer electronics and open source hardware. Some interesting examples were hacking iPods to run Linux, home made MP3 players built from memory cards and how to make an (illegal) bluetooth and mobile phone jamming device in a cigarette packet.
• Adobe SXSW Web Awards
  Some complimentary fine food and drinks then the very cheeky Ze Frank presented the awards for the finest websites of the past year. Marco, an acquaintance I met at the registration night drinks who’d flown over from Italy, took out the award for best CSS site with his gallery of sideways scrolling sites The Horizontal Way. Congrats…
• Helvetica
  Tuesday’s (13/3/07) main events were great (but somewhat annoyingly overlapping), starting with the 1:30pm world premier screening of Helvetica, a documentary film about the most widespread typeface of our time. It was introduced by director Gary Hustwit, who was very pleased and humbled to see a fully packed auditorium. I found the film very enjoyable and humorous in parts, but you don’t have to be a typophilic designer to enjoy it, it is a relevant exploration of modern western popular culture. Shame I didn’t get to watch the whole thing, I’ll have to get it out on DVD.
• Will Wright on user generated stories (and Spore)
  I had to tear myself away from Helvetica (and I almost didn’t) to run over and attend a talk by the guy famous for inventing Sim City and The Sims. I wasn’t disappointed. Will Wright is a hip guy who knows how to make a slick presentation (well actually the PowerPoint slides weren’t all that slick). He explained about conventional linear storytelling versus the new wave of multi-threaded user generated storylines in online gaming communities. This discussion then neatly segued into a compelling presentation of Maxis‘ next game, Spore, which by all accounts promises to be brilliant. The basic premise of this game is you take a single celled creature and evolve it into an advanced species and take over the universe. Simple right? When you have a spare 35:51, take a peek below (or at YouTube)…

Of course the Aussie contingent were representing, with Cameron Adams, Maxine Sherrin, Scott Gledhill and Cheryl Lead all doing their bit in various panels. I also caught up with Aussie web standards regulars Anson, Lachlan and Lisa.

Worth mentioning were talks I attended from Doug Coupland, the author of Microserfs, Life After God and Everything’s Gone Green (which is now being made into a film), Dan Saffer from Adaptive Path on 2Las Vegas Design”, what can be learnt from Sin City and applied to web design, and Brian Oberkirch and Dan Cederholm on the feasibility of building web apps outside of Silicon Valley. The Dorkbot event was pretty cool too, a show of home made devices and mashup technology.

At this time Meg and I made friends with Kristen and Tony who were staying at the hostel. They were a fun pair who were travelling around working as pedicab drivers. They took us to a retro Mexican restaurant. Also found a café not far from the convention centre that did decent organic coffee and excellent Tex-Mex for breakfast.

While I was geeking it up, Meg got to enjoy a little time-out from me, relax in the parks and riverside around Austin and enjoy going to cafés with new found friends. We had pretty good weather most of the time we were there, so I took a few time-outs from SXSW myself to join Meg and have a relax from all the bits and bytes…

We enjoyed the USA a lot, but besides bigger roads and cars, it felt a lot like home in so many ways. I needed to be pushed out of my comfort zone a little and get a little culture shock. Latin America would provide this. And I’d need to brush up on Spanish. Plenty of opportunity to do just that over the next month in Mexico and Guatemala…

Related posts

• Travel plans

Published at HenryTapia.com – Experiencing and designing things

Generally speaking, I’ve been one to follow the aforementioned flowchart (ie. just say no), but having been in the role of “The company Flash guy” previously, I was used to sprinkling bits of Flash here and there on various websites I worked on. Being a search-friendly, usability and accessibility sort-of-guy, I generally avoided full Flash site development like the plague, but I’ve found some interesting reads on Flash best practices, for those times you choose to use it.

Geoff at Deconcept discusses Flash and search engines, yes those two things can work together:
A modern approach to Flash SEO

Glass Onion (my employer until a few days ago) have been wise to the technique Geoff mentions for a while, using a little JavaScript called SWFObject, which detects the presence of the Flash plugin and replaces a piece of accessible, search-friendly XHTML with your razzle-dazzle Flash piece. It just so happens to also get around the whole EOLAS mess that forces IE users to click on a Flash piece to activate it.

The very wise Bobby van der Sluis, writing for Adobe explains how to similarly do this using his UFO (Unobtrusive Flash Objects) script, and explains the whole technique with examples in this tutorial:
Developing Flash websites using progressive enhancement

The whole concept of progressive enhancement fascinates me – you get the best of both worlds, the accessibility and search engine friendliness of web standards, coupled with the beauty and enhanced user experience of AJAX, or in this case, Flash.

Along with the accessibility features being built into the Flash plugin by Adobe, other flash enhancements are being written in the form of small scripts like SWFObject and UFO. One I’ve just recently seen and found interesting is:
ASUAL’s SWFAddress

SWFAddress is a small script that sits on top of SWFObject and provides deep linking for Flash websites and applications. In other words it enables the Back, Forward and Reload buttons of the browser and creates unique URLs with page titles that can be sent over email or IM.

SWFAddress involves attaching a JavaScript file (after the SWFObject js file) to the head of the page and then adding a little ActionScript to your Flash movies.

The thing to remember with all these techniques is that they still involve building on a base of HTML. We then enhance this basic accessible version with CSS, JavaScript and Flash. It’s a bit of extra work but it’s worth it for the search engine factor as well as accessibility (not just blind people, think about all those mobile devices out there – they’re not all Flash ready yet). If the budget (or inclination) is not there to take these extra steps, refer back to the Flash Website Flowchart…

Published at HenryTapia.com – Experiencing and designing things

A problem I’ve had a few times before and am currently experiencing is when you launch the DOM Inspector and inspect a page, switching to CSS Style Rules in the right-hand pane shows nothing! The panes just appear empty. I had this same issue at some stage around the release of Firefox 1.5, but one of the minor updates seemed to have fixed it. Now that I have installed the excellent Firefox 2 (for Windows), the problem has returned. It happened on my machine at work since installing FF 2, and now it’s happened on my home machine since upgrading FF – a mistake on my part in hindsight, seeing I’m trying to finish my new site for launch by Wednesday evening.

Here’s the Bugzilla record of the problem, (and it looks like I’m not alone).

Is anyone out there getting this problem? Better still, anyone got a fix? I haven’t found any answers to this problem and it’s causing me grief. I hope the Firefox team fix it soon!

Update 15/11/2006

OK I have found a temporary workaround of sorts. I can’t guarantee this will work for everyone having this problem, but when I had Firefox 1.5, my DOM Inspector still worked, so… I installed 1.5 again, in a different directory (something like C:\Program Files\Mozilla Firefox 1.5) making sure to select Custom install and confirming Developer Tools was selected. So now, I still use Firefox 2 (with the broken Inspector) for everyday use, but when I really want to use the DOM Inspector I switch back to 1.5 and the DOM Inspector works just fine like before! If your FF 1.5 Inspector was broken, well I don’t know how to help you there, except to suggest maybe try reinstalling Firefox…

I don’t know why I didn’t try this sooner. Well actually I do, I’m packing my life up getting ready to travel and live overseas, but anyway…

And by the way, you can’t run Firefox 2 AND 1.5 at the same time… if FF 2 is running and you fire up Firefox 1.5, it will just run another instance of 2.

Published at HenryTapia.com – Experiencing and designing things

It’s great that the McFarlane Prize is giving recognition to developers not only for good design but for all round well built solutions. Building to web standards and best practices is seldomly valued or even perceived, so it’s a good thing that I hope the organisers of the prize continue to recognise.

Published at HenryTapia.com – Experiencing and designing things

Skip straight to the examples here: Example 1, Example 2.

I know this isn’t new, and can probably be achieved in a variety of ways. I do it by applying a class to the paragraph we want to apply the drop cap to, using the :first-letter CSS pseudo-class, like so:

The HTML:

<p class="dropCap">
	Ten years ago a crack
	commando unit was sent to
	prison by a military court
	for a crime they didn't
	commit...
</p>

The CSS

.dropCap:first-letter {
	float: left;
	padding: 4px 12px 4px 0;
	font-size: 400%;
	font-family: Georgia, Times;
	/* IE seems to need the following line */
	line-height: 1em;
}

So, we’re floating the first letter of the specified paragraph to the left, applying some padding and margins and of course making the font-size super big. The only cross-browser strangeness was that IE looked very odd until I added the line-height value, then all went well.

The result is demonstrated in Example 1. Screenshot:

If IE played nicely we could just add a style to the containing element such that the first paragraph would automatically have the drop cap style applied (using. :first-child:first-letter), but for now, we have to apply the .dropCap style to the paragraph manually. Such is life.

Now if you want to get fancy (and be somewhat tied to pixels and images) you can bring in a background image, as in Example 2. Here’s a screenshot:

The CSS I used looks like this:

.dropCap:first-letter {
	float: left;
	padding: 14px;
	margin: 4px 8px 8px 0;
	font-size: 480%;
	background: url(ornament.gif) no-repeat;
	font-family: Georgia, Times;
	/* IE seems to need the following line */
	line-height: 1em;
}

Pretty simple and not a lot of code for a nice effect…

Published at HenryTapia.com – Experiencing and designing things

When I’ve designed a site that’s on a dark background or on a strong coloured background, the print version can look a little odd. In any case print versions can look a little odd until you develop your print stylesheet. Often clients (and developers no doubt) treat the print version as an afterthought. A project I’m currently working has a large recipe component and needs to look good printed, and of course clients being clients, they need to have their branding present, and not replaced by a text version. So I’ve been working on the print stylesheet and the light on dark treatment on screen versus dark on light of the browser’s print function (or when viewing without a stylesheet) present a stark contrast. Take this example (use your browsers print preview):

View example

Normal view of header on screen:

Print preview:

It can often look Not Quite Right, and if the header image in question has a transparent background, it’s particularly unsightly. Browsers by default don’t print background colours and images to save ink. Fair enough. You can change this in the browser preferences, but for obvious reasons you can’t rely on the majority of users to do this. So, generally speaking, we design print stylesheets to work with black (or colour) on white. In the past we’ve created a separate page which is the “printer-friendly version” with different mark-up, use different images, layout, etc. But that’s so 20th century and this is the age of CSS and web 3.0 (well not quite). We can be a bit trickier and use the same code to serve both purposes and use CSS to control the presentation… as you do.

What I’ve decided to do here is have a dark on light version of the header image that appears on the print version as well as any unstyled version (for mobile phone users and people allergic to fancy stylesheets).

Print friendly header:

Here’s how we do it:

• We use an img in the heading, in this case I’m using an h2. This image is the printer-friendly version.
• For the screen version we hide the img element (display: none) and use a background image on the h2 (kind of similar to some CSS image replacement techniques).

Pretty simple in the end..?

The code looks like this:

In the HTML:

<div id="masthead">
	<h2><img src="images/logo_print.gif" alt="trendylogo" /></h2>
</div>

In the main CSS:

#masthead h2 {
	margin: 0;
	background: url(images/logo.gif) no-repeat;
	height: 68px;	/* So the h2 doesn't collapse when the img is set to not display */
}
#masthead h2 img {
	display: none;	/* Hide the printer-friendly version on screen */
}

In the printer only CSS:

#masthead h2 img {
	display: inline;	/* Show the heading image */
}

Here’s what the final print version looks like (use your print preview again):

And it also works just fine for the unstyled version:

Thanks to the ever-brilliant Rodos who worked with me to come up with this technique.

Published at HenryTapia.com – Experiencing and designing things