Abstract Sequential Stephanie Hobson's abstract thoughts in the sequence she has them.

Intro to Google Tag Manager

Google Tag Manager (GTM) is still pretty new as I write this. Stuff is still changing so I’m going to try to focus on techniques rather than step by step instructions (but I have some of those too).

What is GTM

You include a code snippet from GTM on your site which, among other things, includes a file. Then you use the GTM interface to configure what goes in that file.

This is intended to replace any scripts you’d normally have to write yourself to track stuff that isn’t a regular page view (example: tracking a file download as a page view). Say good bye to code like this: pageTracker._trackPageview(fileurl);

Why do we care?

One snippet to rule them all. All your tracking scripts and pixels can be moved off the page and into GTM. Smaller pages, faster loading! They have some already supported services (AdWords, DoubleClick, Remarketing, Mediaplex…) and you can theoretically code support for others in yourself.

Theoretically, it means non-technical people will be able to do the set up for this kind of tracking. Less work for us! But let’s face it, the interface was written by devs, it still needs some technical knowledge.

It cuts down on the amount of code writing and maintenance we have to do in the future. Also less work for us!

Is it a trap?

Could be. Yup.

A javascript error in GTM code can break all the javascript on the page and anyone with access to your GTM account can add javascript.

GTM seems to insist on following the href on <a> elements. So if you are hijaxing any links GMT could break your code. For example: if you are using a lightbox style plugin which opens links in overlays.

Some GTM features can add query strings or hash tags to URLs, depending on the system on the other end of the link, this could cause problems too.

So test, and limit the publishing permissions on your account to people who know how to test.

Creating an account

Remember how we all went out and got personal Google Analytics accounts and added our clients to them and then stopped working for those clients and it got awkward? Google remembers too.

You hook an existing personal login up to GTM and then have the option to create accounts. One per business is ideal here. Then you get to set up what Google is calling a container. A container contains all the code snippets you are going to want to run. Google suggests you should create a different container for each website associated with the business that owns the account.

(This seems like sound advice if you’re just getting started but will lead to some code duplication in the long run if you have multiple domains, I have complicated thoughts on this that belong in a separate blog post).

Once you’ve set up a container you get the code snippet. Place the code snippet on the page after the opening <body> tag.

What’s all this?

Your container contains 3 things: tags, rules, and macros.

Tags
Tags are individual things to do. Things like “listen for links being clicked on”, “track this page view”, “listen for form submissions”, “track this conversion”, “track pressing play”. They’re individual tasks so listening for form submissions and tracking a conversion takes two separate tags.

Rules
Rules are when to apply tags. The basic one is “on every page”. Each rule can have multiple conditions so you can combine them to create rules like “if this event is a click and it happened on an element that does not link to this website”.

Macros
Macros are just a way to store stuff you’re likely to re-use (mostly text or javascript). There’s some pre-populated ones and you can write your own. Stuff I’ve been keeping in macros: our analytics tracking number, a line of javascript that retrieves the page title, and a complex regex that checks if the href of a link takes the user off the current site. You reference macros inside tags, rules, and other macros by writing its name in {{double curly braces}}.

Example: Tracking page views and external link clicks with Universal Analytics

My examples are all for Universal Analytics but if you’re still using Classic the concept is the same where I pick Universal Analytics from the Tag Type menu pick Google Analytics Classic and do your best with the slightly different options that follow from there.

This is, more or less, what we’ll be setting up, in an order that makes sense to me:

  1. Macro: your Analytics tracking number.
  2. Tag: track a pageview in Analytics.
  3. Tag: listen for clicked links.
  4. Rule: if link does not lead to current site.
  5. Tag: create event in Analytics for outbound link click.
  6. Create version
  7. Preview
  8. Publish

I found the actual order somewhat more headache inducing, and that’s why I’m writing a blog post about it. Hopefully you end up at the end of this list with link tracking and no headache.

Once you’ve followed these steps once hopefully you will understand how the pieces fit together and you can go on to work in the way that makes the most sense to you :)

This is the part where I list actual steps, this part might change as the product develops.

  1. Macro: your Analytics tracking number.
    1. In Analytics get your tracking ID from Admin > Property Settings
    2. In GTM go to your container’s overview page.
    3. Click the big red “new” button and pick “macro” out of the list.
    4. Configure the macro like this:
      Macro Name:
      tracking ID (well you can name it whatever you want)
      Macro Type:
      Constant String
      Value:
      Your tracking ID

      Or, if prefer a screen shot:

    5. Save it.
  2. Tag: track a pageview in Analytics.
    1. Click the big red “new” button and pick “tag” out of the list.
    2. Configure the macro like this:
      Tag Name:
      Pageview
      Tag Type:
      Google Analytics & gt; Universal Analytics
      Tracking ID:
      {{tracking ID}}
      This is the macro we just created. You can either type it yourself or click the little lego block to pick it out of a list.
      Track Type:
      Page View
      Firing Rules:
      Add All pages
      You don’t have to create this rule, GTM creates it automatically.

      Or, if you prefer a screen shot:

    3. Save it.
  3. Tag: listen for clicked links.
    1. Click the big red “new” button and pick “tag” out of the list.
    2. Configure the macro like this:
      Tag Name:
      Listener - linkClick
      Tag Type:
      Link Click Listener
      Firing Rules:
      Add All pages

      Leave everything else on the defaults.

    3. Save it.
  4. Rule: if link does not lead to current site.
    • Click on the big red “new” button and pick “rule” out of the list.
    • Configure the rule like this:
      Rule Name:
      on - outbound link click
      Conditions:
      {{event}} equals gtm.linkClick
      {{element url}} starts with your site URL
    • Save it.

    I actually use a complex regex in a macro for the conditions to catch a few edge cases like: urls missing the www, relative links, mailto/tel/ftp etc. but for this example and basic sites this will get what we want.

  5. Tag: create event in Analytics for outbound link click.
    • Click on the big red “new” button and pick “tag” out of the list.
    • Configure the rule like this:
      Tag Name:
      UA event - outbound link
      Tag Type:
      Universal Analytics
      Tracking ID:
      {{tracking id}}
      Track Type:
      Event
      Category:
      outbound-link
      Action:
      {{element url}}
      Label:
      {{element text}}
      Value:
      1
    • Save it.

    If you have an existing implementation you are trying to match so your stats aren’t disrupted you should look in Google Analytics to see what you are currently using for the event category, action and label and match those values instead :)

  6. Create version
    • On the Container Draft > Overview page the Create Version button is in the top right.
    • If you really want to be on the ball you can amend the name or add notes to describe what you added in this version, handy in case you want to roll back.
  7. Preview
    • The Preview button is also on the top right of the Container Draft > Overview screen.
    • Click Debug in the popover
    • In the next popover click on the url of your site. This will open a new window with your site and a Tag Manager window at the bottom.
    • In the window at the bottom check that:
      • “Page View – Page” and “Listener – linkClick” have the status “Fired on Tag Manager Load”
      • Click on a link and check that “UA event – outbound link” gets added with the status “Fired on Event “gtm.linkClick”. You can usually see it flash to the top before the other page loads but if it’s too fast find (or create) a link with the attribute target=”_blank” to click.
    • If something is not working check your rules and try again.
    • Also important, check that the javascript on your own pages is working properly. In an ideal world you have a list of features you can test.
    • Exit preview mode
  8. Publish (blue button in top right of Container Draft > Overview page)

You can see some changes applied immediately in Analytics on the Real-Time > Overview page. Other events which don’t seem to be working on Real-Time occasionally start showing up in the stats a day later. I have no insight to offer here, sorry.

Summary

So we create tags to do things, rules to govern when we do the things in the tags, and macros to save ourselves time when creating tags and rules.

Accessibility with CSS: Making Websites Better for Everyone

Last night I spoke at the Style & Class Meetup about Accessibility and CSS. Posting the slides here for posterity:

Accessibility with CSS: Making Website Better for Everyone

Resources

A Matter of Semantics

Adapted from a blog post on Web Services’ blog at BCIT, the audience was our content community: people who contribute content using the CMS, with little to no technical experience.

Once, as part of a “getting to know you” activity at summer camp, I played a game where I was given a drawing and another camper was given a paper and pencil. Without her seeing the drawing, and without me seeing her paper, I had to try to get her to draw what I could see.

“In the top left hand corner there’s a square, in the bottom right there’s a circle, big enough that it overlaps the square. Inside the circle is a triangle.”

It was impossible to end up with an exact copy of the drawing. Usually the original and new drawings were hilariously different.

Every time you visit a web site, your computer is playing this game with another computer on the other end of the internet. In order to avoid ending up with a hilariously different web site, the computers speak a few really precise languages to each other.

A CMS (Content Management System) lets you make updates to a website without learning those languages. So you’re telling the CMS what you want to do and the CMS is translating your intention into one of those really precise languages – HTML.

HTML doesn’t tell the computer how to make things look. HTML tells the computer what things are: “this text is a link to another page”, “this text is a heading”, “this text a list of related stuff.” This is called semantic markup: the content is “marked up” with HTML to indicate its “semantics” or meaning.

When users view your website, their browser combines your HTML with files the developers have written in two other languages – CSS and JavaScript – to create the web page that they see.

CSS tells the computer how things should look: “links are blue,” “headings are bold,” “list items have bullets.”

JavaScript tells the computer how things should work: “When the user clicks this button, show the user that paragraph.”

With just the HTML a computer can do all kinds of interesting things with your content. It can read it out loud, translate it into a different language, put it on a really big screen (or a really little one), or search through it.

Sometimes things get misinterpreted.

When we edit pages in a CMS we see a visual metaphor instead of the plain HTML. We’re also playing the drawing game with the CMS. This means something that looks right might still not have the right HTML. Just because there are dots before that text doesn’t mean it’s a list. Just because this text is bold doesn’t mean it’s a heading.

With the wrong HTML the other computers will make mistakes.

When a screen reader comes to a list it will tell the user that there’s a list and how long it is, if the user has been to the page before and knows they need item number eight they can skip straight to it. With the wrong HTML the user has to skip past all the other items one at a time.

When a search engine is trying to identify what a page is about it looks for headings. Text that is marked up as an HTML heading is considered a better summary.

When the CSS (the way the website looks) changes the HTML doesn’t. In 2010 we changed how much space is between paragraphs on the website. Before we did this some editors had decided they wanted more space between their paragraphs and inserted it themselves by adding empty paragraphs, using markup to create visual formatting. After we made changes to the CSS their pages had huge spaces between paragraphs and it looked like something was wrong with them.

The mobile version of a website will often use the same HTML as a desktop version but different CSS. This is a very visual example of why separation of content and presentation matter.

From time to time, we see people use tables to impose a specific visual layout on their content, something that should really be done with CSS instead. Tables are hard for mobile browsers to handle because they are so wide. To avoid distorting content in them the tables could be re-arranged. This will make tables with data in them easier to read on a mobile phone but if the HTML says “this is a table” and what is inside is not data, just an image we wanted in a different position, things could end up looking like one of our drawing game pictures gone wrong.

How to avoid errors.

There are some simple things that can be done to avoid problems:

Don’t fight the default styles. The designer made careful decisions about how the HTML should be styled by the CSS using principles of graphic design and interface design and did user testing to refine them. This should make your job easier, you don’t have to make these decisions yourself instead focus on the purpose of each part of your content instead of how it should look.

If you are experienced enough to be writing your own HTML pay attention to what the meaning of the elements are.

HTML5 Forms OF DOOM

I spoke at an HTML5 Code Camp the other day on HTML5 forms because HTML5 forms are cool! They’re so cool you can use most of them today anywhere you have a text field to increase functionality for your users!

HTML5 Forms OF DOOM from stephaniehobson

Download the slides.

Sample form.
Finished form (no peeking).

Resources

Basic Introductions

CSS

Compatibility Specifics

Shim

Leave

I’m taking a one year leave of absence from my job at BCIT beginning June 1st, 2012.

Right now it kind of feels like I’m doing this because I’m crazy.

I’m really doing it because there’s stuff I want to do.

I want to build something cool. I want to learn something new. I want to live in London. I want to live in San Francisco. I want to hang out with the dear friends who live in each city who I have been apart from for way to long. I want to get to know the friends that I’ve made in my travels but never lived near.

Along the way I’d going to have to do a bit of work. Contract/sub-contract work I can do remotely while I’m travelling or job offers in San Francisco and London that will help me with the paperwork to work there.

Work that will let me do what I do really well1, work that will let me do things I enjoy but don’t do enough of2, and work that will give me a chance to learn what I don’t do at all yet3.

  1. HTML, CSS, JavaScript, jQuery, brainstorming and problem solving.
  2. Responsive design, user experience testing, information architecture, interface design.
  3. SVG, SASS, ePub.

I’m also looking for cheap places to say – friend of a friends who need house sitters or subletters, empty guest rooms and comfy couches. In London or Brighton in Aug and Sept and San Francisco or Berkeley from Oct-Dec.

If you have some work, a place to stay, or some advice for me I can be contacted on LinkedIn, or Twitter.

An Invocation for Beginnings

Print Styles Are Responsive Design

Print styles are the original responsive designs. Using media queries we pare down the content, focus on readability, and design with different device capabilities in mind but when was the last time you took a good look at your print styles?

Yes, people still print web pages. Extrapolating from these numbers about 10,000 pages are printed from bcit.ca every month. The print experience is an important part of a good site and relying on your screen styles to print properly is foolish:

Printing can really screw up a web page.

Avoid common problems

One of the most common problems I saw when doing my survey of print styles was white text printing on a white page. To save ink the browsers will strip all background colours and background images before printing so in your print style sheet be sure to over-ride any light coloured fonts. I also add a thin border to elements where the background colour is used on the screen to differentiate the content and reinforce the grid.

There’s a variety of common layout bugs everything from floats to absolute, fixed, fixed-width, and semi-opaque elements can get cut off, misplaced, or disappeared entirely especially when the element flows across a page break. If it’s too wide some browsers will shrink your page until it fits and others will crop it. Where possible do away with your layout and make your content linear and fluid.

Web fonts introduce a new quandary to the world of print styles. FireFox and Chrome don’t print web fonts. Have you ever seen a site with the word-spacing, line-height, and font-size picked for one font displaying its fallback font? It’s not usually a pretty picture. I recommend over-riding web fonts in favour of a common font, especially for body copy.

Focus on content and save paper

While you’re stripping your web fonts out, consider the readability of the rest of your typography. How does it look printed? If your page is being printed chances are someone is going to spend some time reading it – more time than they’d spend on your site. Do what you can to make that pleasant.

Layout elements like headers, footers, banners, ads, and menus distract from the information the user is trying consume, are un-usable on a printed page, and take up extra paper. It’s very common to remove these elements when printing. A three-column page layout doesn’t look so bad on one short page but if your site has a substantial amount of content those columns will likely be empty from the second page onward leaving large fields of empty space or worse your columns will spread onto a second page when your content only filled the first. What’s your user going to do with that printed navigation menu anyway – click on it? How does that logo in your header look in black and white? Removing layout elements makes it much easier to make your remaining content fluid to avoid common print bugs and fit the page. Think about a better way to communicate the other information – more on this in a bit.

Provide a better print experience

Print doesn’t work like a web page. The user can’t interact with it anymore all they can do is read it. Consider what that means for content on your page that you can’t normally see.

There’s some pretty fancy CSS tricks you can use to add the URL of links to the page in brackets after the link. I think I’ve seen it done best by the HTML5 boilerplate but I prefer to add footnotes with javascript. This is much less disruptive for readers. Either way make sure you consider how you’ll handle links that aren’t URLs: javascript hooks, in page anchors, mailto or tel. These same tricks can be applied to abbreviation titles and other attributes.

Not all interactive content can be exposed. There’s no CSS trick to print a video or Flash file and frequently this missing content will just leave a big white gap in your page. Your options are pretty much: hide it, provide a place holder, include a short summary, or include a full transcript. I’ll leave the method up to you.

For content revealed by javascript my suggestion is to do your best to print the content that the user sees. If they’ve toggled open two out of ten of your FAQs, just print the full text of those two and leave the others closed. I’ve seen several sites which don’t include their global styles when printing but forget to include the styles their pages are dependant on in print stylesheets (this is most common with javascript). I can only imagine how frustrating that would be to a user.

Provide a better brand experience

The most basic print styles make a page more readable at the expense of some of its character but we don’t just have to take away. You can include a print specific header and footer hidden in your HTML or add them later with javascript. This gives you a chance to include a black and white version of your logo and any other brand cues you feel are important. You might already be using a grid to maintain visual consistency between desktop and mobile, here’s your chance to do it in print too.

Other information you might consider adding in a print header or footer is: way-finding clues like a section or category name, general contact information like a 1-800 number (more useful than a link to a contact us page), and a short URL to help the user get back to that page. Some sites even include a QR code but use your best judgement.

Speed up your pages

It boggles my mind that browsers will still delay rendering a page until it has loaded a style sheet with the media type of print. #seriously #testyours. This article on Browser Performance Problem with CSS “print” Media Type outlines the problem really well.

If you’re just trying to avoid the extra http request and your print styles are very small you can always just add them into your main CSS file.

@media screen {
/* screen styles here */
}
@media print {
/* print styles here */
}

Otherwise you can look at techniques to load them asynchronously. There’s a couple ways to do this.

Seeing it in action

Original page.Without a print stylesheet.With a print stylesheet.

On the left is our site on a screen, on the right how it looks formatted for print. In the middle, without any print styles, you can see it goes boom:

Did you see what happens to the Bebas font we used on our section names? You caught me, this is a screen cap not a scan of a printed page. Bebas wouldn’t actually print and the 6 pixels of word spacing we have to apply to it to get it to play nice looks kind of silly on Arial Narrow.

Our print style sheet is loaded asynchronously after the rest of the page and at the same time I run functions to add a print header, print footer and the URLs of the links on the page as footnotes.

The screen header, sidebars, banners, and footer are hidden from display and I force the main content to become fluid again. Other than that the actual body of the page needs only minor work because these styles are layered over our global styles. I darken up some text, remove videos and Flash elements, and on pages which don’t already have outdented headings I outdent the headings. If this page had javascript elements everything would print as the user left it before printing.

The print header includes a black and white version of our logo which prints nice and crisp compared to a colour one and uses a few thin lines to re-establish the grid creating a visual tie back the way the website looks on a monitor. It also includes the name of which section of the site the page is from and a shortened URL to return to the page.

The footnote function is complex enough to re-use a footnote if there are multiple links to the same page, provided a shortened URL if it’s an internal link, include fallback text for javascript links, and skip footnoting an email address if the address itself is all that’s included between the anchor tags (our style guide mandates this but the odd one slips through the cracks).

The very basic footer was a victim of time constraints. We couldn’t include our 1-800 number on all pages because it’s specific to Student Enrolment and wouldn’t be appropriate on business services pages, for example.

Code tips

If you have a large constantly evolving site I recommend making your global style sheets apply to both screen and print. It saves you the trouble of keeping two sets of stylesheets up to date when changes are made. That leaves you the task of over-riding some of the screen styles in the print style sheet. This will be much easier if you’re already avoiding IDs for styling. If you’re not it seems to be acceptable to sprinkle your print styles with !important declarations.

“Print preview lied to me.” – @hicksdesign

Test until it’s perfect in print preview.
Then test until it’s perfect when you print to PDF.
Then test until it’s perfect when you print it out on paper.
There is no other way to be sure you’ve got it right.

More information

CSS Loading Spinner

I needed a loading spinner for a side project the other day but I was too lazy to steal someone else’s off the internet or try to re-learn making an animated GIF so I just coded my own in CSS (CSS is my hammer).

On the bright side it works on any background colour and is a little transparent which is neat. And it’s way faster to adjust the colour scheme than an image file would be.

The basic idea

It’s one <div> containing 8 <span>s, styled to be little grey lozenges:

.spinner span{
display:block;
height:13px;
width:5px;
border-radius: 2px;
background-color:rgba(77, 77, 77,0.5);
...

In anticipation of rotating them I moved the transform-origin to the middle of the element and then a significant way down beneath it. Later, when I rotate the lozenges this spaces them further apart.

...
transform-origin:50% 160%;
...

They all have a simple animation applied to them that makes them fade in and out (it has a bit of an opacity on it just for fun):

...
animation-name: fade;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode:backwards;
}

@keyframes fade {
0% {
background-color:rgba(77, 77, 77,0.8);
}
40% {
background-color:rgba(77, 77, 77,0.8);
}
100% {
background-color:rgba(255, 255, 255,0.8);
}
}

Using nth-of-type each lozenge is rotated 45degrees more than the last and has a delay of 250ms added to the animation on it. Unfortunately there is no easy way to do this program-magically so they have to be specified for each. Here is an example of the code for the second one:

.spinner span:nth-of-type(2){
transform: rotate(45deg);
animation-delay:-750ms;
}

Starting in the middle

Did you know that you can provide a negative value for animation-delay? Cool, eh?!?! This means I can make it appear that the animation is beginning in the middle, otherwise the first time it’s run it looks funny.

Placing the spinner

I added some absolute positioning to the <span>s, so the origin of the transform is at the top left of their parent <div>. This means the spinner fans out from the top left of the <div> and you can absolutely position it to exactly where you want the middle of the spinner. Handy if you want to place the spinner in the middle of something, like I did.

.spinner{
position:absolute;
top:50%;
left:50%;
}

.spinner span{
position:absolute;
top:-20px;
left:-3px;
...

Changing the colour

Changing the colour is as simple as creating a new animation and applying that to your special spinner spans.

.special .spinner span{
animation-name: specialfade;
}

Using it

Here’s the loading spinner with the moz and webkit prefixes. Of course, it only works in browsers that support animation and transforms but there’s more and more of those these days.

Also, yes, totally, please use it. Tweet me if you make any improvements.

A little bit more

I got a little carried away and made a few other styles.

A style tag counts as a :first-child

EDIT 2011-09-15: All of this applies to <script> in the body as well.

I have some bad news and a fix (I hesitate to call it good news).

HTML5 introduces a way for us to include <style> elements on the page, we just need to give them an attribute of scoped. So, for example, if you have an SSI included widget you can include the styles in the widget file instead of trying to devise a way to add them to the head.

A Problem

But it causes an itsy bitsy problem with the styles. The <style> counts as an element, and if you put it first, it becomes the first-child. The styles I’d defined for the first-child in that block were not applied to the (now) second child.

In other words this:
div p:first-child
stopped working when I added the style to the HTML here:

<div>
<style> p{color:#00F;} </style>
<p>Text!</p>
</div>

A Fix

Fortunately we can include style in our CSS declarations (and even style it if you want, I gave it a width, and garish background colour in both FF3.6 and Chrome) so an adjacent sibling selector is the fix:
div style:first-child + p

I’m not keen on going through my styles sheets and adding this rule to every place I have first-child declarations but we don’t use scoped style elements too much so hopefully I won’t have to.

The other option would be to not put the <style> first in the parent I pretty clearly remember reading that the style has to be the first-child, of course, I can’t find where I read it.

Side Note: using <style scoped> today.

As of August 2011 there are no browsers that support the scoped attribute but if you’re using an HTML5 doctype you can still use <style scoped> today. Browsers have been happily rendering style elements inside the body for quite some time, it just wasn’t valid HTML before ;)

The old browsers will apply the styles in your scoped tag to the entire page so I combine it with a class to get the effect I intended.

<div class="foo">
<style scoped> .foo p{color:#00F;} </style>
<p>Text!</p>
</div>

Perfect Stranger

Twitter is an amazing tool to catch a glimpse of the collective consciousness. I’ve seen it during the Olympics and I’ve been apart of it at conferences like An Event Apart. Jeremy Keith once said that Twitter was the closest he’d ever come to feeling as though he’s jacked into the Matrix.

Most of us use Twitter to keep in touch with people we know and keep up with things we care about. It makes sense, it’s familiar and comforting but it blocks out people and ideas we disagree with and it ignores some of the most powerful potential of Twitter.

What are we missing by insulating ourselves with the familiar? A recent episode of CBC’s Spark discussed the benefits of following a stranger with Joel Johnson who wrote a gizmodo article on the topic.

Not only can it help us avoid groupthink but Joel mentions a study that suggests exposure to other view points can make us more creative.

So I had the idea to create a twitter account that will add a random tweet to my feed now and then and when I mentioned it to Daniel he took a few minutes and built it.

You should follow a @perfectstranger on Twitter, and let me know what you think.

A Dull April Fool’s Day

There was a rash of black and white April Fool’s Day sites this year. We weren’t the only ones to do it but I think we did it best, if I do say so myself. There were three parts to our little switch and it wouldn’t have been the same without any of them:

Desaturating the colours in the stylesheet.

I captured the colours in the stylesheet using the Web Developer Extension in FireFox. Information > View Color Information produces a list of all the colours used in the styles and their hex codes. I took a screen shot of that and then desaturated it in Photoshop by adding a desaturation layer.

Once I had the desaturated colours I did a find and replace for the original hex codes in the style sheet, sampling the new hex codes from my Photoshop document.

Desaturating all the images.

All the images? Yep, all the images.

For this I tried out a couple different javascript libraries but ultimately went with PaintBrushJS by Dave Shea because it was the only one that could handle background images and didn’t add any extra elements to the page. PaintBrushJS uses a combination of javascript and canvas to alter the images.

For backwards compatibility I manually converted all the header and footer assets to black and white, this also meant I could restrict the desaturating javascript to running on just the content and leaving these pieces alone, taking a bit of a load off the client.

I actually had the easiest time getting it to work in IE… there’s a filter. I wouldn’t have used an evil evil filter if it hadn’t just been for half of one day but it was so I did.

I think this kind of photo manipulation has a place in web design since it means we can keep the unaltered versions of files and change their rendering when we change the theme, that’s pretty powerful.

Authentic Content.

We were lucky that the BCIT Archives have begun digitizing much of their collection. We got a great deal of source material from the 1968-69 Program and Course Catalogue. We listed courses like Punch Card Systems and Fortran VI for the day – both sold out of course.

Nope, the logo wasn’t a Star Trek knock off, that’s what the future looked like in the 60s and both BCIT and Star Trek ran with it.

The content about campus events came from copies of the student news paper from the same era. My favourite of the new stories was about how BCIT was getting its second computer.

It was a lot of fun and I’m glad we work at the kind of place that was keen to let us do it.

← Before