Stephanie Hobson

Dictation is turned off by screen time

Fri, 06 Jan 2023 22:17:00 +0000

I recently ran into a problem where I could not enable dictation on my MacOS laptop. In the system settings the toggle was grayed out and could not be flipped. The message beneath it was “Dictation is turned off by Screen Time.”

I’m not bad at computers but I could not figure out where to re-enable it. It was not under App Limits. It was not under Content & Privacy. I could not add it to Always Allowed. Searching the system settings for “dictation” turned up two options, neither of which did what I needed.

Out of desperation I posted about it on Twitter and Mastodon. Of course I found it 5 second later.

On MacOS Ventura it’s System Settings > Screen Time > Content & Privacy > App Restrictions > Allow Siri & Dictation.

Happy dictating.

Using Tinypng to optimize images from the command line

Tue, 30 Apr 2019 16:36:56 -0500

Our team has identified image optimization as one of the more time consuming and often forgotten steps of our current process. In the long run we want to automate it using a git pre-commit hook. As the first step to this I’ve got PNG and JPG optimization working manually using TinyPNG from the command line:

git diff --diff-filter=ACM --name-only HEAD | grep ".png\|.jpg" | xargs tinypng

To set this up:

Get a TinyPNG API key.
Save the API key in a file named .tinypng in your home directory.
Install the npm TinyPNG CLI. Because it’s not part of our site yet I installed it globally:
```
npm install -g tinypng-cli
```
Add the files you want to optimize to Git’s staging area. (git add * will add all the files you’ve edited)
Run git diff --diff-filter=ACM --name-only HEAD | grep ".png\|.jpg" | xargs tinypng.
Add add the new modified files to your Git staging area before committing.

What it’s doing:

git diff: Telling Git we want to a list of differences between two things
--diff-filter=ACM: Filtering what we want to compare to include only Additions, Changes, and Modifications
--name-only: Asking for just the file names instead of the full output.
HEAD: One of the two things we’re comparing is the files in the staging area. Specifying HEAD here says to compare them to the files in the most recent commit.
|: This is a “pipe”, it passes the results of the Git diff to the next command.
grep: Grep is a command line search tool.
".png\|.jpg": I’m using grep to find only the files with .png or .jpg file extensions.
|: Another pipe to pass our reduced list of files on to the next step.
xargs: This is the results of the grep. (Why it goes here instead of after the next command I do not know.)
tinypng: Finally we get tinypng to do its magic. The compressed files will replace the originals.

How to make a chart of your users' window sizes

Thu, 23 Aug 2018 07:58:00 +0000

This article was originally published on the Mozilla Marketing Engineering & Operations blog.

In preparation for the MDN redesign I examined our analytics to get an idea of how wide our users’ browser windows were. I wanted window widths, not screen sizes and I thought a chart would tell a more compelling story than a table.

Here’s the chart I made:

I found this view useful because it shows us “clumps” of window sizes.

How to make a chart of browser window widths

The basic idea is:

Create and export a Custom Report for Browser Size.
Filter the Browser Size to just include widths.
Aggregate the number of users for each width.
Make a chart.

Working with Google Analytics and Google Sheets the specific steps I used were:

Create a custom report for browser sizes.
1. Customization > Custom Reports > New Custom Report
2. Set the Metric Group to Users
3. Set Dimension Drilldowns to Browser Size
4. Save
View the custom report.
Set Show rows: to 5000.
Export to Google Sheets.
Delete the extra stuff from the top and bottom of the export, you just want two columns: Browser Size, and Users.
Create a new column C called Width. Add this regex to it and fill down: =REGEXEXTRACT(A2, "^[0-9]+"). This gives you a column with just the width part of the browser size.
Create a new column D called Unique List. Add this formula to it (you don’t need to fill down): =UNIQUE(C2:C5001).This gives you a list of widths with no repeating values. That means 1900x950 and 1900x970 will be treated the same in our final chart.
Create a new column E called Conditional Sums. Add this formula and fill down the height of your Unique List: =SUMIF(C$2:C$5001,D2,B$2:B$5000).
Copy the Unique List and Conditional Sums columns.
Create a new sheet in your document.
Use Edit > Paste special > Paste values only to paste only the computed values of these columns.
Rename Unique List to Width and Conditional Sums to Total Users.
Find the (not set) row and delete it.
Make sure both columns are being treated as numbers (a hint this is happening properly is that they are right aligned). If you have headings on the columns make sure they’re frozen (View > Freeze > 1 row).
Sort on Width from A→Z.
Select both columns and create a chart (Insert > Chart). (I made a “Stepped area chart”)
Set Width as the X-axis.
Done!

This answered a question I’ve been curious about for ages: Do people with large monitors use MDN full screen?

About 40% of our users have a screen resolution of 1900px or wider and 25% of our users use MDN at 1900px or wider.

Surprise Emergency Site Migration

Wed, 22 Aug 2018 00:36:00 +0000

A small tweak to my WordPress config went sideways and, long story short, now my blog is hosted with Hugo on GitHub pages over https… Oops?

I wasn’t planning to migrate just yet so apologies for the RSS weirdness.

How we rebuilt the viewsourceconf.org website

Tue, 31 Oct 2017 21:19:14 +0000

This article was originally published on Mozilla’s Hacks Blog.

As a front-end developer at Mozilla, I end up working on big sites that have been around for a long time. There are a lot of interesting challenges when working with legacy code at a large scale, but rebuilding from scratch usually isn’t an option.

The View Source Conference website, on the other hand, is a small site. So when we decided to move away from WordPress, we had the chance to start fresh.

Here are a few highlights of the architectural decisions we made to make the site faster, more secure, and more reliable.

A Static Site

When a user requests a page from a CMS (content management system) like Wordpress the server puts it together from databases and templates. This takes the server a small amount of time. When a site is built on request like this we call it a “dynamic” website.

When a user requests a page from a static site the server only has to find and serve one file. It’s faster and takes fewer resources. We used a static site generator to generate our files before transferring them to the server.

Static files are also easier to copy than dynamic sites, this means we can copy our static site to different CDNs (content delivery networks) around the world. Getting our content closer to our users is a very effective way to reduce latency which is one of the biggest hurdles to delivering a site fast.

Offline First

A service worker is JavaScript that runs in a browser but not as part of a page. The most common use for service workers is to watch network requests and respond instead of the server.

I wanted to be sure the conference attendees would have access to the event schedule, even if they didn’t have wifi. So, when a user arrives on the site, browsers that support service workers automatically cache the conference schedule.

If the user returns to the site without a network connection the service worker will reply to the request with the cached schedule.

I am very grateful for the documentation published by The Guardian, Jeremy Keith, and others who are already using Service Workers.

Mobile First

When responsive web design first became the norm, the industry standard was to serve the full desktop site to all browsers with a bunch of extra code telling mobile browsers which pieces to remove to make the simplified mobile version. With the spread of mobile came the Mobile First development approach. Mobile first delivers the content and code for the mobile version of a site first and then the larger more powerful desktop computers do the work of creating a better large screen experience.

The View Source Conf site starts as a minimal mobile-friendly version. Then media queries in CSS and media queries in JavaScript add more complicated layout instructions for larger screens.

SVG

I used inline SVGs for the logo and icons. They look crisper on retina screens and, because they’re inline, don’t require any extra assets to download. Inlining also meant that I could change the logo’s colour in our print styles. It was my first time creating accessible SVGs.

No Script

All the content and functionality on the View Source site works with JavaScript disabled. Instead of sending shims and polyfills to older browsers to make them handle newer JavaScript features, we support those browsers by telling them not to load the JavaScript at all.

This meant we could write modern JavaScript! It also simplified testing. Less capable browsers just get functional, readable content, with no chance for odd JavaScript errors.

This isn’t a new idea, it’s progressive enhancement combined with the BBC News’ “Cut the Mustard” test.

HTTPS

HTTPS protects the privacy and security of your users and with Let’s Encrypt it’s free. You can tell browsers to only load your site over HTTPS with the Strict-Transport-Security header.

Do Not Track

We use Google Analytics to measure site traffic and try to improve our conversion rates but we respect the privacy of users visiting with Do Not Track enabled. By detecting Do Not Track settings we can avoid serving them the Google Analytics file. If a user has not set Do Not Track but has an ad blocker installed all our code runs without requiring Google Analytics to initialize.

View Source

Hear industry leaders speak about topics like web performance, security, reliability, CSS grids and more at the View Source Conference in London October 27, 2017. See the full schedule! Or watch videos of last year’s talks.

Flipping Tables at CSSDevConf

Tue, 10 Oct 2017 14:50:03 +0000

Here are my slides for Flipping Tables: Displaying Data on Small Screens which I had the pleasure of giving at CSS Dev Conf.

Flipping Tables: Displaying Data on Small Screens from Stephanie Hobson

Links I mentioned in my talk

Writing for Every Reader

Sun, 08 Oct 2017 14:14:11 +0000

I recently spoke at #a11yTOConf, a conference by the organizers of the regular a11yTO meet-up. The organizers put together a great line up of speakers. It was the first #a11yTOConf but I hope it won’t be the last!

Writing for Every Reader from Stephanie Hobson

Here are my slides for Writing for Every Reader.

Resources I mentioned:

Hemingway App, the app that helps improve the readability of your content.
BeeLine Reader, the browser plugin for dyslexics.

Articles that were helpful to me:

Cognitive Disabilities, an introduction by WebAIM.
Dyslexia and Typography
Fonts don’t matter
How Chunking Helps Content Processing
Legibility, Readability, and Comprehension: Making Users Read Your Words
Accessibility posters by the UK Home Office.

The MDN Redesign “Behind the Scenes”

Tue, 01 Aug 2017 19:34:47 +0000

This article was originally published on Mozilla’s Hacks Blog.

Kuma, the code that produces the MDN site, is a weird mix of the old and the new. MDN turned ten in 2015 and there’s still code and content around from those very first days. When I sat down to start coding the current redesign, the first thing I did was remove the last few traces of the last redesign. In contrast, we have a cutting-edge audience: 92% of our users have a browser with CSS grid support! We enabled http2, and 98% of our users have seen benefits from that.

One of the ways we deal with old code in kuma is with the campsite rule: Always leave your campsite better than you found it. A redesign touches a lot of files, and this was a great opportunity to clean up and refactor — at least until the deadline started getting close.

A redesign is also a great time to change stuff you’re afraid of breaking. People are more understanding of you working the bugs out of something new than breaking something that’s worked for years. I removed 640 lines of stale code during the redesign. (And if I broke a six-year-old XPCOM tutorial you use daily by removing the custom list-style-type, please file a bug!)

One website with two looks

Rather than working on the CSS for the redesign in a separate “redesign” folder, we duplicated all the files and added “-old” to the file name of the old files, which means that all of our redesign work is happening in the “official” files. This preserves the git history and means we don’t have to move anything around after launch. Once we’re happy with the code, we can delete the “-old” files with confidence.

To serve the new styles to our beta testers and the “-old” ones to everyone else, we use Django Waffle. Waffle can also be used to serve different content but because there’s a strong separation of presentation and content on MDN, we’ve made very few changes to the HTML.

Bugs our beta testers found

MDN is huge, and we can’t test every page in every locale. We’re really lucky to have active beta testers. :) Some of the biggest things they turned up for us were:

Highlighting

We started out by replicating Mozilla’s brand “highlight” effect by using the Zilla Slab Highlight font, but we abandoned that pretty quickly when problems turned up in many of our locales and when used in combination with inline code.

The current approach puts a full-width black background on h3 and h4 headings by default, and then some JavaScript runs to add a <span> tag so that the black background hugs the heading text. Progressive enhancement at work.

We went back and forth about this for a while, wondering if the JavaScript and extra <span> was worth the effort. But we stuck with it because it makes the h3 and h4 headings much easier to spot when scanning the page.

What’s Taiwanese for Slab Serif?

Previously we used Open Sans as our heading text. With the redesign, we switched to Zilla Slab. Open Sans was thin and an average height for a font. It didn’t look out of place next to the system fallbacks for Chinese or Japanese characters.

Zilla is big and thick, and we started getting feedback about the contrast with these system fallbacks. Additionally, the character set for Zilla is European Latin only at the moment, so Vietnamese, which uses Latin characters plus a couple Latin characters not used in Europe, displayed font fallbacks in the middles of words.

To address both these problems, we implemented a system that allowed us to override the site fonts on a per-locale basis.

Contrast

We received many complaints about the old design’s low-contrast display. We went a bit too far the other way with this design and received complaints about the high contrast. We’ve toned it down to the ever-popular #333 now.

What’s next

We’re moving on from this to make specific improvements to the article pages:

Putting code samples high on the page; our hard-working writers and volunteers are doing this, one page at a time.
A better approach to readable line-lengths and wide code examples, inspired by the Hacks Blog theme.
Compatibility tables that display desktop and mobile data side by side.
Code samples you can experiment with in the page.

Who is “we”?

The MDN dev team is:

Stephanie Hobson, me, CSS-Pre-Pre-Processor
Schalk Neethling, who reviewed each of my 30+ pull requests in ALL THE BROWSERS, sometimes multiple times
John Whitlock, who did the awesome locale fallbacks
Ryan Johnson, who always asks “Why not?” when John and I say things can’t be done.

We blog sporadically on the Mozilla Marketing Engineering & Operations blog.

You should also read this blog post by our Product Manager, Kadir Topal, about The Future of MDN.

HTTP/2 on MDN

Mon, 10 Jul 2017 12:46:34 +0000

This article was originally published on the Mozilla Marketing Engineering & Operations blog.

We enabled HTTP/2 on MDN’s CDN.

We didn’t do anything to optimize for HTTP/2, we just enabled it.

We’re seeing performance improvements.

You don’t have to get ready before you start using HTTP/2

While doing research to see if turning it on without doing any optimizations was a good idea I read things like:

“It also means that all of those HTTP1 performance techniques are harmful. They will make a HTTP2 website slower, not faster - don’t use them.” - HTTP2 for front-end web developers

And:

“However, many of the things you think of as being best practices can be detrimental to performance under HTTP/2.” - Getting Ready For HTTP2: A Guide For Web Designers And Developers

Which suggest that enabling HTTP/2 on a site optimized for HTTP/1.1 could result in a slower site.

A better way to interpret those quotes is:

If you optimize for HTTP/1.1 and turn on HTTP/2 your site will not be as fast as it could be - but it might still be faster!

On MDN we concatenate a lot of our files but we don’t concatenate all of them. For example, our article pages have 9 different files coming from our CDN. I thought we could benefit from a bit of HTTP/2’s multiplexing and header compression. And we did. You can see the DNS lookup time drop off in this waterfall from Pingdom:

Some numbers

Overall, our tests don’t show a huge improvement in page load speed but there are small improvements for everyone, and a real improvement for users located far away from our servers. (Hi Australia and China!)

Service	Location	Browser	HTTP/1.1	HTTP/2	Change
Pingdom	Dallas	Chrome	1.54s	1.34s	0.2s
Pingdom	Melbourne	Chrome	2.94s	2.80s	0.14s
WebPageTest	London	IE11	2.39s	2.37s	0.02s
WebPageTest	Australia	Firefox	5.61s	5.17s	0.44s
Google Analytics	All	Chrome	3.74s	3.04s	0.7s
Google Analytics	All	Firefox	3.99s	3.71s	0.28s
Google Analytics	Australia	All	3.01s	1.69s	1.32s
Google Analytics	China	All	8.10s	6.69s	1.41s

I tried to segment our users in Google Analytics to make sure we did not have a negative impact on users relying on HTTP/1.1 and… I couldn’t find enough users to draw any conclusions. MDN is lucky like that. (It’s possible the IE11 test in the table above is on Windows 7 and does not support HTTP/2, but WebPageTest doesn’t identify the OS.) In theory, older browsers should not be affected because the protocol falls back to HTTP/1.1.

There was a lot of variation in the page speed data I examined. I recommend running your before and after benchmark tests multiple times on multiple days so you can take an average. Try to wait a week before drawing conclusions from your analytics data as well.

In a perfect world you don’t increase the amount of code on your site or invalidate anyone’s caches in the sample time period, but we don’t develop in a perfect world.

Flipping More Tables

Thu, 25 Aug 2016 11:43:02 +0000

A few weeks ago I gave my talk on displaying data tables on small screens at Cascadia Fest. Which is a super awesome 3 days conference in the Pacific North West focusing on CSS and JavaScript (Browser and Server side!)

The video of my talk has been posted:

And my slides are available here.

Google Analytics, Privacy, and Event Tracking

Thu, 28 Jul 2016 09:38:57 +0000

This article was originally published on the Mozilla Hacks blog.

Many of us use Google Analytics (GA) or similar third-party services to keep track of how people interact with our websites; telling us things like when people visit and what they click. This data can help us make important decisions, such as when to schedule maintenance or if a feature can be removed.

Because these services are installed on multiple websites these third-parties can collect a lot of information about people as they move around the internet. Not everyone is comfortable with that. Some people have started taking steps to protect their privacy by installing ad blockers like Ghostery or enabling tracking protection in Firefox.

I think this is great!

Sometimes this breaks things

When code depends on these third-party services and they’re not there stuff goes wrong.

I’m going to use tracking external links as my example because it’s a common use case, but I started investigating this problem because we accidentally broke the ability to navigate within our website for users who were choosing not to load the GA script.

I’m also going to use the universal analytics tracking code (analytics.js) for my examples here, not the classic analytics code (ga.js), so if you notice some differences between my code and yours that might be why.

What goes wrong?

The current method (Jan 2016) for tracking outbound links as recommended by Google looks like this:

<a href="http://www.example.com"
    onclick="trackOutboundLink('http://www.example.com'); return false;">
        Check out example.com
</a>

var trackOutboundLink = function(url) {
    ga('send', 'event', 'outbound', 'click', url, {
        'transport': 'beacon',
        'hitCallback': function(){document.location = url;}
    });
}

What Google is recommending here is:

add return false to your links so that clicking on them doesn’t take the user off the page
when a user clicks a link, add that click to the GA queue of events to track and tell GA to take the user to the new page after that is done
GA processes the event
GA triggers the callback, taking the user to the new page

This guarantees that the user doesn’t leave the site before their action is recorded. However, if GA fails to process the event… it never triggers the callback, breaking all links off the website. :(

We are relying on GA to send the user to the new page, but what if the GA code never executes?

How we can avoid problems

If you’re using the current recommended method of adding GA to your site you’re including something like this on all your pages:

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-xxxxx-x', 'auto');
ga('send', 'pageview');

This snippet creates a global ga object. The ga object is available in JavaScript whether the rest of the script successfully loads from Google or not.

This means two things:

It is possible to add events to the queue before GA has loaded. (Cool! This is handy for tracking events that happen really quickly.)
We can’t check if GA has loaded by checking for the existence of the ga object like we used to because it’s always there.

So how do we know if GA has loaded? Well, clever people have figured out that when it initializes, GA alters the global ga object in a few different ways. None of these changes are officially documented by Google which means any of them could break in the long term.

In Tracking outbound links with Google Analytics, Andreas Veithen (who works at Google but was writing on his personal blog) suggests that the most reliable check is to see if the ga object still has the q array. The array is removed after GA initializes and processes all the events waiting in the ga.q queue. Because ga.q is created by the snippet we paste on our sites, changing it would require us to make changes to our websites and so would be a major change for Google to undertake. On the other hand, it would also be possible for Google to change their code to not remove ga.q so I’m not sure this is more reliable than any other method.

In Google Analytics, Ghostery, and Event Tracking John Morton suggests checking for the create property on the ga object. This technique has been around the longest and is probably the most widely used (I say this after a quick informal glance at GitHub).

In Workaround for when the hitCallback function does not receive a response (analytics.js), Dom Sammut observes that we can check for the loaded property on the ga object. This is a method used informally in some Google documentation so it’s probably also somewhat reliable. I like this one because it is obvious what we’re checking for.

Opting for the last method, we alter Google’s suggested code like so:

var trackOutboundLink = function(url) {
    // check if the GA object exists and that it has initialized
    if(window.ga && ga.loaded) { {
        // if yes, rely on GA to follow link
        ga('send', 'event', 'outbound', 'click', url, {
            'transport': 'beacon',
            'hitCallback': function(){document.location = url;}
        });
    } else {
        // if not, follow link ourselves
        document.location = url;
    }
}

Making this kind of check before relying on any third-party script is good practice. You should also be including a local fallback for any script that is not coming from your own domain - including CDNs.

Respecting our users’ privacy

Most users care about their privacy and there are more steps we can take to protect it. Depending on where you work you may also be required by your country’s laws or your company’s privacy policy to take extra care with users’ data.

Configuring Google Analytics for privacy

If Google Analytics is your analytics platform of choice, there are a number of steps you can take to make it more private.

One of these is an easy configuration option to request anonymized user IP addresses. Essentially, Google Analytics changes the last octet of the user’s IP address to 0 before recording it.

This is triggered by adding an additional line to your tracking snippet after ga('send', 'pageview');.

ga('set', 'anonymizeIp', true);

Of course, Google still gets the users’ IP address (that’s the way the web works), we’re just trusting them not to store it.

Respecting Do Not Track (DNT)

It’s also possible to detect when a user has enabled Do Not Track and be pro-active about what scripts you choose to load.

Schalk Neethling documents the process in Respect User Choice ~ Do Not Track. In a nutshell, we wrap the GA call with a check to see if the user has enabled DNT before executing the call to include the file.

function _dntEnabled() {
    // include the helper function from https://github.com/schalkneethling/dnt-helper/blob/master/js/dnt-helper.js

}
// Check the value of DNT before including GA
if (!_dntEnabled()) {
    // include the Google Analytics snippet
}

This means that the ga object will not be added to the global scope for our page, but that’s okay, the code snippet above handles that case gracefully as well.

Do you have other techniques/suggestions for using analytics services while respecting the online privacy of visitors to your site? Feel free to share your experience.

Flipping Tables

Tue, 19 Apr 2016 18:37:00 +0000

I was very pleased to be invited back to Style and Class to give a talk about making data tables responsive. Style and Class is a great Vancouver meet-up I can’t recommend enough.

Here are my slides, though the video and animated gifs don’t play :(

Flipping Tables: Displaying Data on Small Screens from Stephanie Hobson

And the links I encouraged everyone to check out:

(Still) Making Websites Better for Everyone

Tue, 27 Oct 2015 18:40:28 +0000

In the next few weeks I’ll be speaking at JavaScript Open Day Calgary, View Source, and JavaScript Open Day Toronto giving an updated version of Web Accessibility: Making Websites Better for Everyone.

Edit: videos have been posted for View Source and JavaScript Open Day Toronto. I’m more on the ball for View Source but the JSOpenDay one has some demos.

In my talk I encourage people to try out different assistive technologies themselves:

Chrome Vox / NVDA (Windows only) / VoiceOver (Mac only)
Change to a high contrast theme for your operating system or browser
Take the batteries out of your mouse or keyboard.
Try using a touch screen or track pad with your nose.

Here are two demo pages that list server status for a fictional hosting company, you should compare the bad example to the good example with one of the technology options listed above.

And here are all the resources I mention in my talk:

WebAIM
Web Accessibility Evaluation Tool (wave)
The Accessibility of WAI-ARIA
Don’t Lose Your :focus
Designing Safer Web Animation For Motion Sensitivity
Bulletproof Accessible Icon Fonts
Hiding Content for Accessibility
Switch Control Overview(a video about switch control made using a switch control)

Conference Debrief: An Event Apart Austin 2015

Thu, 15 Oct 2015 10:31:02 +0000

Last week, because working at Mozilla is awesome, I got to attend An Event Apart Austin, the conference put on by the A List Apart organization. It’s consistently one of the highest quality conferences for front-end/user experience talks. I try to go every other year.

The conference was great and the organizers did a good job making the speakers accessible, sitting them with us at lunch and keeping them around for the mixer. The caliber of the attendees is also consistently high. I have great conversations no matter who I sit with at lunch.

Most of these speakers are pros who have done their talks in multiple places so its usually possible to find videos of them online with a bit of Googling, and they might be speaking at a conference near you!

Conference overview

Designing for performance and designing with empathy were common themes this year and we got good overviews of some exciting CSS and HTML features that will be widely supported in the near future.

My Favourite Talk

A CSS geek at heart I enjoyed Jen Simmons’ “Modern Layouts: Getting Out of Our Ruts” the most. “We’re about to see a renaissance in design on the web," she promised at one point and I, for one, will be excited to see more than rectangles on the web. She covered CSS Shapes, Regions, Grid Layout, and the new view-port units, illustrating wonderfully with some really unique examples of layout from gasp print which she advocated we translate (not transfer) to the web. A similar version of this talk online if I’ve piqued your interest.

Talk Summaries

Jeffrey Zeldman The Fault, Dear Brutus (or: Career Advice From a Cranky Old Man) Zeldman made a compelling argument for quitting your job regularly :P He had some anecdotes about how it is the easiest path to career advancement, and this resonated with my own experience. He said the same could be accomplished by switching teams within an organization and I am glad we have so much sideways movement at Mozilla.

Yesenia Perez-Cruz Design Decisions Through the Lens of Performance Yesenia made a clear case for designers needing to take a lot of responsibility for the performance of a website. Designers make decisions about some of the things that add the most weight to our pages: fonts, images, and functionality - before developers ever see them. She said performance budgets should be set and understood as part of the requirements process and designers can be educated to stay within them and enlisted to help communicate with clients about staying within them as well. Great talk +1 would watch again.

Cameron Moll Unified UX Cameron talked about how a brand’s presence covers more screens than just a desktop and said we should be unifying user experience across browsers, devices, apps, and accounts citing the fact that 40% of all online US users start an activity on one screen and finish on another. He said we should pay attention to form and function (making widgets look and work similarly, respecting our users mental models) and data symmetry (syncing shopping carts, reading places, etc).

Karen McGrane Content in a Zombie Apocalypse Like Cameron spoke about the need for a unified UX, Karen spoke about the need for unified content - as much for the organization’s benefit as the users’. She encouraged us to find ways to create and update content in one place to share across all platforms. She despaired about how poor a tool a WYSIWYG editor is at translating styling decisions into semantic information (It’s not a list of links floated to the right with a narrow max width - it’s a table of contents!) and hoped for a future with better tools for storing and updating structured text so content doesn’t have to be redesigned every time a site is.

Ethan Marcotte Laziness in the Time of Responsive Design Ethan, who invented the term responsive web design, encouraged us to avoid the f-word for our sites - frameworks - and encouraged us to solve problems in context, watching to see where content needs adjustments rather than blanket redesigning the experience at different sizes. And he didn’t miss the opportunity to tell us hamburger menus are still awful.

Lara Hogan Designing for Performance Where Yesenia talked about process improvements for better performance Lara talked about code improvements. She talked in-depth about image compression, font sub-setting (explaining how the infamous 4 and a horse stars review bug occurred), style guides and OOCSS, and ended talking about setting a public performance budget and how to make performance everyone’s concern rather than having performance cops.

Eric Meyer Designing for Crisis Based on his personal experience sitting in a stranger’s car barreling down a highway, racing the med-evac helicopter carrying his young daughter to a hospital in an unfamiliar city, Eric implored us to add a new persona to our design toolbox: a user in crisis. We like to think we’re designing for cheerful, calm, with-it users living in the home of the future but we don’t get to decide when, where, or how a user will access our sites. He gave examples of how this persona could help the banking, hospital, airline, and insurance industries. And he gave some creative solutions to help us do user testing for these scenarios including using CSS to blur the page, JavaScript to transpose letters in words, or playing the Jeopardy theme song to testers. He encouraged us not to treat these users as edge cases, because defining edge cases defines the limits of what we care about, and we should care about these users. I don’t see much potential for an MDN user to be in crisis but it’s easy to imagine a Firefox user who just lost all their data or thinks an account of theirs has been hacked could be panicking and not thinking clearly.

Brad Frost Atomic Design Pioneer of style guides and pattern libraries, Brad reminded us what these look like and why they are valuable and demoed his open source tool patternlab.io for helping to create and maintain them. He has a great system, you can read about it here.

Matt Haughey Empathy Is Good Business: How Front-Line Customer Support Can Make You A Better Designer Continuing the empathic design theme Matt encouraged us all to spend a couple hours a week doing front-line customer support and explained how Slack is set up so that all employees must do that. It gives everyone a better idea of how users are using the product and what their pain points are. Rather than having personas to refer to designers have real people they could reference. They also don’t talk down to their users or judge the feedback they give them. It’s all data that makes the product better.

Jeremy Keith Resilience: Building a Robust Web That Lasts Jeremy praised the flexibility of HTML and CSS and encouraged us to embrace their resilience rather than fighting the inherent variability of the systems. He reminded us that we can build systems that work for everyone with very basic functionality and then layer enhancements on top of it. At it’s heart Instagram should be a bunch of <img>s and a <input type="file"> and there’s no reason to require JavaScript to see your friend’s images or add your own. Layout, fonts, file previews, filters, are all enhancements. “If you build pages with the idea that parts other than HTML are optional, you will create a better and stronger web page.” - gov.uk

How To Debug CSS

Sat, 15 Aug 2015 09:39:01 +0000

Some quick notes and links for the talk I gave at WordCamp Vancouver about Debugging CSS.

Edit: You can now watch a recording of Debugging CSS. Spot the three projector failures!

Steps

Is the HTML valid?
Is the CSS valid?
Is the right CSS being applied?
1. Is what you typed being applied?
2. Is other stuff being applied?
3. Is what’s being applied right?
Does CSS support what you’re doing?
Does the browser support it?
Can you isolate the problem?
Ask for help

Tools

Other resources

Cross-Browser Debugging CSS

Mobile First Is Performance First

Mon, 23 Feb 2015 22:10:03 +0000

Tonight I spoke at Vancouver Web Performance Meetup and I promised to share my slides so here they are:

Mobile First Is Performance First from Stephanie Hobson

If what you’re really after are the links, let me save you a bit of time:

Patrick Hamann - Building theguardian.com (slides) and Breaking News at 1000ms (video)
Paul Irish - Delivering the Goods in under 1000ms (video)
Scott Jehl - Responsible Responsive Design (book)
Ilya Grigorik - High Performance Browser Networking” (book - free online!)

Smashing Conference Whistler 2014

Tue, 06 Jan 2015 22:32:27 +0000

A few weeks ago Smashing Conference came to Whistler. This caliber of conference comes to Canada infrequently so I couldn’t not go ;)

The conference

As good as I hoped it would be. A mix of strategy and near future technology examples.

My Favourite Talk

Building the next-generation of theguardian.com, by Patrick Hamann
Slides
The Guardian takes a true mobile-first, progressive-enhancement approach to serving their content. I was super excited to see how quickly and cleanly an article loads. I think this is the future of front-end performance and I am eager to implement much of what I learned here.

Talk Summaries

Marcin Wichary
Good is the enemy of great: On designing, and then undesigning, a perfect link underline
200 years of typographic history was lost when we moved from printing presses to the typewriter, Marcin Took us through some of what he did in his attempt to re-create the perfect underline.His ultimate point was that it’s important to find a balance between shipping and creating good code. Perfectionism is not the right balance but we should strive to make things good and not just improve the status quo.

Susan Robertson
Style Guides: Why bother?
Susan walked us through a long list of benefits to using a style guide. Highlights included: front-end speed, consistency, and performance. Lots of good resources here: styleguides.io

Yoav Weiss
Responsive Images are Coming to a Browser Near You
I have been hearing a lot about new picture element and srcset attributes but Yoav was the first to really get me excited about them. The potential image management problems these additions could create are huge but there is a lot of potential to be really neat things with them. <picture>is a solution for providing art direction of images on different screen sizes and srcset gets added to if you just want to provide a smaller/larger version of an identical image.

Marcy Sutton
A Web for Everybody
Accessibility is easier if you build it you build it in from the start. Ask, does it work: With the keyboard only? In a screen reader? Without sound? Without colour? In high contrast mode? “This stuff is not that hard.”

Jenn Lukas
The Developer’s Ampersandwich
Things to consider when implementing type on a website: if you haven’t been given design direction you can find the type by looking at what’s popular and already in use, separate presentation from content, be aware of performance issues with web fonts, add accessible fallbacks for a icon fonts, use tools like typecast to communicate with designers about general styles rather than content specific styles.

Zach Leatherman
Better @font-face with Font Load Events
Web fonts are rendered blocking. Zach proposes a JavaScript fix which prioritizes a FOIT for icon fonts and a FOUT for content fonts. Lots of good stuff from this excellent article of his.

Stephen Hay
Easing the Pain of Designing in the Browser
We need to stop thinking about layout first, we need to start thinking about structured content first. Begin by focusing on the small screen, and then focus on type and color.

John Allsopp
The Web’s future is offline
“We can’t keep building apps with the desktop mindset of permanent, fast connectivity, where a temporary disconnection or slow service is regarded as a problem and communicated as an error.”

Dave Shea
Rolling Your Own CSS Methodology
A CSS framework is not about syntax. It’s about discipline and optimizing for people. Ideals Mobify uses when building theirs: classes for everything, no IDs, no nesting, no !important.

That was one day. It was a really long day.

Johnathan Snook
Jonathan gave a very personal talk about the development of his career overtime and the importance of empathy. It touched a lot of people, but it is difficult to summarize in two sentences.

Brad Frost
Atomic Design
If we all use the same framework we all look alike. We should be building “Tiny Bootstraps, for every client.” - Dave Rupert. Brad demoed patternlab.io which is a really cool tool for breaking designs down into component parts.

Lyza D. Gardner
Soothing Web Weariness: Saving the Web by Doing as Little as Possible
Make projects smaller to begin with - increase your constraints - improve them iteratively and systematically instead of accepting complexity as the status quo.

Val Head
All the Right Moves: Putting your UIs in Motion
Animations needs to be designed with intent the same way you would design any other part of the site. Prototype animations. Test that they match your site’s style and feel fast.

Kyle Simpson
#CSS {Yawn: Yay!}
Kyle talked about some high-level concepts he’d like to see implemented in CSS templating. It was very much a talk about the next generation of CSS informed by some complex computing science principles. I can’t do it justice, his slides are here

Tim Kadlec
In Between
Like Val, Tim talked about designing animations with intent. He had lots of great examples and data.

Paul Irish
Getting to Fast
Not all pixels are created equal. Paul talked about why the first 14KB transferred are the most important to performance.

It was a great conference. I left feeling super excited about my job, which is how I always want to leave conferences :) I also gave a ‘jam session’ talk on accessibility. They hosted it in a pub and I highly recommend pub audiences, they laugh at all your jokes! Accessibility was a theme running through all of the talks at Smashing and I am glad to see it being spoken about and incorporated into examples again I feel that, as an industry, we’ve sort of forgotten about it for a few years.

Making Websites Better for Everyone

Sat, 13 Dec 2014 11:00:15 +0000

There’s a few different versions of my talk floating around now. I’m really excited and humbled to hear that people have been making changes to the way the work in response to something I said.

The most detailed (and longest) version of my talk is available to watch on Wordpress TV.

My first slide deck and links to the resources I recommend are part of an earlier blog post.

In the most recent version of my talk I used a demo of a fictional hosting company’s server status page. Follow these thinks to see the bad and good examples and I encourage you to compare the two right now using some assistive technology, or at the very least, using your nose or elbow on your mouse or trackpad.

Intro to Google Tag Manager

Wed, 04 Jun 2014 22:01:01 +0000

Edit: 2018-10-30. Google now calls macros variables and rules triggers. I’ve updated the text but not the screen shots.

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 trigger 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, triggers, and variables.

Triggers

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

Variables

Variables 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 variables: 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 variables inside tags, triggers, and other variables 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:

Variable: your Analytics tracking number.
Tag: track a pageview in Analytics.
Tag: listen for clicked links.
Trigger: if link does not lead to current site.
Tag: create event in Analytics for outbound link click.
Create version
Preview
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.

Variable: 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 "variable" out of the list.
4. Configure the variable like this:
  
  Variable Name:
  
  tracking ID (well you can name it whatever you want)
  
  Variable Type:
  
  Constant String
  
  Value:
  
  Your tracking ID
  
  Or, if prefer a screen shot:
5. Save it.
Tag: track a pageview in Analytics.
1. Click the big red "new" button and pick "tag" out of the list.
2. Configure the variable like this:
  
  Tag Name:
  Pageview
  
  Tag Type:
  Google Analytics & gt; Universal Analytics
  
  Tracking ID:
  {{tracking ID}}
  This is the variable 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 Triggers:
  Add All pages
  You don't have to create this trigger, GTM creates it automatically.
  
  Or, if you prefer a screen shot:
3. Save it.
Tag: listen for clicked links.
1. Click the big red "new" button and pick "tag" out of the list.
2. Configure the variable like this:
  
  Tag Name:
  Listener - linkClick
  
  Tag Type:
  Link Click Listener
  
  Firing Triggers:
  Add All pages
  
  Leave everything else on the defaults.
3. Save it.
Trigger: if link does not lead to current site.
- Click on the big red "new" button and pick "trigger" out of the list.
- Configure the trigger like this:
  
  Trigger 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 variable 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.
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 trigger 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 :)
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.
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 triggers 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
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, triggers to govern when we do the things in the tags, and variables to save ourselves time when creating tags and triggers.

Accessibility with CSS: Making Websites Better for Everyone

Wed, 14 May 2014 17:20:48 +0000

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

Accessibility with CSS: Making Websites Better for Everyone from Stephanie Hobson

Resources

A Matter of Semantics

Tue, 21 Jan 2014 20:05:49 +0000

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:

When you are copy and pasting into your CMS only paste plain text.
Use your CMS’s editing tool bar to communicate your intent to it. Use the buttons to create lists and the style drop down to create headings.
When inserting images remember to fill in the “alt” text and ask if there is a class to help you position the image where you want it on the page.

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

Tue, 10 Jul 2012 16:26:19 +0000

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 Stephanie Hobson

Sample form.

Finished form (no peeking).

Resources

Basic Introductions

CSS

Compatibility Specifics

Shim

Leave

Thu, 24 May 2012 23:02:56 +0000

I’m taking a one year leave of absence from my job at BCIT beginning June 1^st, 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 traveling 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 well¹, work that will let me do things I enjoy but don’t do enough of², and work that will give me a chance to learn what I don’t do at all yet³.

HTML, CSS, JavaScript, jQuery, brainstorming and problem solving.
Responsive design, user experience testing, information architecture, interface design.
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

Wed, 14 Mar 2012 23:26:09 +0000

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:

Background images and colours are stripped.
Web fonts might turn into gibberish or not print at all.
Layout bugs can cause missing content.
You’re ignoring the fact that paper is a totally different medium!

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

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:

The white logo is invisible
Chrome decides to crop rather than shrink the site to fit making it obvious things are not right.
Our grid falls apart without the background images.* There are large gaps where the videos are.
The only useful information in the footer is pushed off screen by a sea of links.

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

Tue, 06 Sep 2011 14:34:49 +0000

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.

.spinner span {
    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):

.spinner span {
    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

Wed, 24 Aug 2011 23:31:09 +0000

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 <style> 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

Sat, 16 Jul 2011 18:59:51 +0000

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

Sat, 16 Jul 2011 18:59:20 +0000

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 style sheet.
Desaturating every image on the site, that’s right, all of them.
Authentic content.

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.

FireFox's buttons are wider than IE or Chrome/Safari's

Wed, 09 Mar 2011 14:29:42 +0000

I hate form styling on the best of days. This is a good example of why:

Firefox’s buttons are wider than IE’s or Webkit’s. Why? This little gem in the browser’s style sheets:

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    padding: 0px 2px 0px 2px;
}

That’s right, it’s 4px wider. Thank you FireFox.

Fortunately, we can fix it!

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    padding: 0px;
}

That was easy :)

We have a class on our site that is applied to every button. I call it “formbutton” (I didn’t get to pick it. My boss picked it 8 years ago. It’s a great name isn’t it? Epic and enduring.) So I can simplify that code up to this:

.formbutton::-moz-focus-inner {
    padding: 0px;
}

Want a little more info:

I found this with a little help from this article on viewing FireFox’s default style sheets. The observant among you may notice there is another style in there. It is for keyboard navigation. Use your new found powers wisely, don’t remove it without replacing it.

Also, here’s a link if you’re wondering what is up with the double colon notation.

And so far it does not look like there are equivalent pseudo elements in Webkit or IE, but I will admit to not looking very hard since this fixed my problem ;)

Taking a photo of yourself with an iPhone

Wed, 15 Sep 2010 22:31:27 +0000

Bullets aligned to the top of the text

Fri, 10 Sep 2010 12:59:47 +0000

Know how IE and FF display list-style-image bullets at two different heights and it drives us all nuts?

Did you know it was possible to use vertical-align on any inline element? Did you know that first-line is an inline element?

If you’re working on displaying the bullets at the same height, this might be the fix for you.

CSS3 only cover flow

Fri, 28 May 2010 22:40:44 +0000

Nothing teaches me how to do something like a project and I was trying to learn CSS3 so I tried to make a CSS only cover flow.

Some of it works in FireFox but all the cool stuff works best in webkit: here’s as far as I got.

Have fun with it :)

2009 in Review

Fri, 08 Jan 2010 19:09:46 +0000

My year in review Powazek style.

JAN: New Years at Joel’s. Seren born. Yelling and crying.

FEB: Mum’s nomination meeting. Elected to strata council.

MAR: Giants Fan Bus.

APR: I check into my first Gowalla spot.

MAY: My temporary roommate drops her phone down an elevator shaft after a Colonel Panic concert. Ultimate with H.A.M.M.E.R. starts.

JUN: Program catalogue launch. Asthon Lane, Inverness and @media.

JUL: Fireworks with Sue. Decemberists.

AUG: Camping. Victoria. Drive-in movie. Summerland.

SEP: Copyfight. Franz Ferdinand and Great Big Sea.

OCT: Barcamp. Whistler.

NOV: Hopscotch. Bought the hat. San Francisco. Bad things happen to good people.

DEC: UXCamp. We survived Christmas party. Quebec.

I lie to Batman

Thu, 17 Dec 2009 22:16:51 +0000

Note: If you’re following me because you’re a code geek, like I am, and you want only my web design related feed and posts they have their own tag now.

I was asked the other night who my favourite comic book character is and anyone who knows me would answer without hesitation: Batman. They’d be close.

It’s Robin all the way.

Not Dick Grayson, Jason Todd, or Tim Drake - Robin. You know, that colourful target that swings into action next to the dark knight.

I like the idea that Batman needs a little bit of light to balance his darkness. I like the energy, optimism, and ingenuity of a kid fighting in an adult world.

Who’s your favourite?

Maintaining your CSS helps maintain your site

Thu, 10 Dec 2009 12:02:44 +0000

Rather than doing one giant redesign and launch, at BCIT, we’ve been doing small updates for a while now.

Take our footer for example, I got to update all of them using the CSS a few times and then we decided we wanted to mix up the HTML. Templates and applications were updated with the new code in phases. There were a few different ways the CSS for this could have been managed but I chose to have the old code co-exist with the new in the same style sheet and differentiated the two with IDs (let’s say I called them #footer and #fatfooter).

We’ve phased in #fatfooter slowly across the 46ish templates, 3 CMSs, and only Brandon knows how many applications with their own code that make up our website.

We should be done now and, unintentionally, I made it easy for us to check. A quick search of the server for id=“footer” turned up all the stragglers.

Some of the stragglers had been neglected for a while and turned out to need more than just a new footer…

So what’s languishing in your code that you can delete?

Why Abstract Sequential?

Thu, 12 Nov 2009 22:02:24 +0000

Short answer: it’s my thinking style :)

It means I enjoy theory, logic, precision and abstract thought and that I learn best through lecture, independent research, and following procedures. This means I love web design but makes my blog very, very boring.

It’s one of four learning styles as categorized by Dr. Anthony F. Gregorc. (I totally just Googled that). I first heard about my style from my teacher and friend Cheryl Atwater. The thinking styles are actually very useful for figuring out how to deal with people. For example, if you’re discussing something with me you’re more likely to persuade me with logic than heartfelt pleas ;)

The other three styles are: abstract random, concrete random, and concrete sequential. The fun stuff starts once you know which you are or which one that person at work who drives you up the wall is. Floating Neutrinos has a great information page summarizing each style’s learning preferences, strengths, and weaknesses.

You may be able to figure out which one is you just by reading the descriptions, but here’s a good old fashioned pen and paper quiz to help you figure it out.

Imperfect Pitch

Tue, 03 Nov 2009 13:07:02 +0000

There’s been a lot of talk about copyright in Canada lately since we’ve been trying to perfect the updates the Conservatives are pitching to our outdated copyright legislation - so reading about Jeremy’s copyright woes in his recent post Perfect Pitch really struck a chord.

He discovered a page in The Sessions’s discussion form about perfect pitch had been removed from Google search results due to a copyright infringement accusation by a company that makes a product called Perfect Pitch - the page isn’t about the product and, in fact, barely mentions it. So there wasn’t a copyright infringement but fighting it might require someone to show up in a California court room.

The usual method for dealing with DMCA complaints is to contact the ISP, not search engines. So why did this company without a valid complaint go to Google? Well, one goes to Google to get sites removed from search results. Maybe… search results where it is pushing down your company’s results?

We don’t know, we don’t have the full story here, but it wouldn’t be the first time a DMCA has been filed to remove content which isn’t infringing on anyone’s copyrights. It happened to political videos during the US Presidential elections and it scares me.

This is a poignant example of why we need to think our new legislation through very carefully, and why I support a “notice and notice” system instead of the DMCA’s “notice and take down” one.

UPDATE: The Perfect Pitch people contacted Jeremy with an explanation and are attempting to reverse their submission. It was laziness, not malice, which in some ways makes it even scarier.

Quick spam solution for email forms

Fri, 30 Oct 2009 22:23:53 +0000

I’ve noticed spammers tend to try to fill out your whole form before trying to submit their spam. A while ago I tried adding a simple radio button field to the form with the value “this is probably spam”, and then hiding it with CSS.

The spam robots helpfully check the box for you before submitting, and you can set an email filter to trash all all the responses which have it checked.

Remember to label it appropriately so your users with CSS off know what to do with it ;)

Why I follow my heroes on Twitter

Wed, 20 May 2009 22:04:29 +0000

A few of the people I follow on Twitter lately have made blog posts or tweets about their followers trying to tell them how to tweet. They’ve all been asked to stop Twittering personal stuff and keep providing free good advice and the response has been, “If you don’t like it, don’t follow.”

I just want to go on the record and say I like the personal tweets.

I like knowing that despite their mega awesome coding skills they still have problems with clients.

I like knowing that while working on that beautiful design they spent an hour moving something 2 pixels to the left and then 2 pixels to the right, and then 2 pixels to the left..

I like knowing that they still get nervous about giving presentations, lie awake at night wondering which tag would be more semantic, over dose on caffeine or have a sushi addiction.

I like knowing that despite their commitment to user experience design, web standards, and innovation, they all go home at the end of the day to people and things they think are more important than their work - and those aren’t always going the way they want either.

I like knowing that they’re human, because it makes it okay for me to be human too.

In case you’re wondering who I’m talking about: zeldman fraying meyerweb hchamp mezzoblue

Should I stay or should I go?

Sun, 22 Mar 2009 15:08:43 +0000

What should a personal website look like? What should it be for? Am I a person or a business? And what if the latest trend is for your business to be human. Stephaniehobson.ca was supposed to be a personal blog for business stuff but that’s, well, boring for me and for you. So I’m thinking of re-doing it.

I’m going to use this site to bring together all my activities from around the web in one place. Yeah, I know, I always have big plans, but this time I have a deadline (I hope)! I would like it done before I attend @media 2009.

But I’m stalled on starting because I’m caught in a debate between leaving the other sites as the authoritative source and trying to make local copies of everything in case those other sources disappear (yes I kept my bookmarks on magnolia, how did you know?).

The public vs private nature of this space is also a bit of a conundrum. My business contacts and potential employers will see this space first if they Google me. This is my first impression, what does it say about me if I’ve been listening to ABBA and bookmarking lol cats? (Yeah, okay, I could be worse.)

What would you change?

Wed, 14 Jan 2009 10:53:21 +0000

Most companies are fumbling around unsure of how to use this new social media thing to market themselves, and educational institutes are no different. With so much of our target audience using social media it’s particularly important for us.

BCIT’s Marketing and Communications department came to us (Web Services) last year and said - we need to do this, and we need your help. So the two groups came together and What Would You Change? was born.

What Would You Change? is meant to be a place for discussion about change, any kind of change, that you would like to make. There’s a couple tools in place for discussion, recorded videos, short text messages, and a photo mashup generator that lets you paste a picture of what you’d change over the thing you want to change. We’re hoping to integrate with social media better as time goes on - there are plans for Twitter and Facebook app tie-ins and you can already share your creations virtually everywhere :)

I started by adding a window to my office:

What Would You Change?

Stuff I'd like to see Google Reader do

Mon, 15 Sep 2008 16:21:16 +0000

I wish I could filter my feeds like I do my email, marking the news items in my web comic feeds as read automatically and blocking (deleting? marking as read?) feeds originating at certain URLs (some of my friends have different… taste than I do… repeatedly).

I also wish I could share my feeds with different audiences in mind. Right now what I share is pretty bland because my clients, friends, and family all see it. I can’t export only fun shared items to my Facebook profile and only web related shared items to my blog everything I share goes everywhere.

I used to wish I could use the handy bookmarklets to page through my items and have a handy way to share but they solved that with the notes bookmarklet.

That said, I live in Reader these days, I check it as much as I do my email!

Links from An Event Apart 2008 - Day Two

Tue, 19 Aug 2008 16:54:05 +0000

Edenbee: Social networking and carbon footprints by Clearleft.
A Dao of Web Design: Jeremy Keith says everyone must read this. It talks about giving up pixel perfect control of the display of your websites.
Google social graph API: Traces XFN and hCard references to connect your different profiles and find out who you are connected to.
SCRUM: Replacement for the waterfall development method. It’s agile. Recommended by Kelly Goto.
Trulia Snapshot: Data visualization by Stamen - using real estate in San Francisco.
Rescue Time: Track what you spend time doing on your computer.

Links from An Event Apart 2008 - Day One

Mon, 18 Aug 2008 22:21:20 +0000

Bobulate: Can’t remember why it was mentioned but it is about IA and looks interesting.
Wired: Apparently half the people in the room read it. Jason used it as an example of how print can be very cool looking but the web is missing that pizzaz for individual articles.
NY Times articles about Trolls: Don’t feed the trolls. One of the trials of community managers.
Flickr Colouring Contest: Making lemonaid out or error messages as part of community management.
Improve Everywhere: Organizers of no pants day.
A Brief Message: 200 word articles on design.
Iced or Hot: The example website from Dan Cedarholm’s talk. The code is good but the data is not live.
http://dowebsitesneedtolookexactlythesameineverybrowser.com/: It doesn’t look the same in all browsers.
Adobe Labs.: Dreamweaver CS4 Beta.

Also, Jeremy Keith live blogged the whole works from the front row.

New site for my favorite client

Thu, 14 Aug 2008 17:40:06 +0000

Just updated the look of Mum’s campaign website: Barb Hobson | A Strong Persistent Voice for Coquitlam-Maillardville. I changed everything without altering one line of HTML, man do I love CSS (IE6, I still hate you).

Accessibility Problem with Gilder/Levin Image Replacement Method

Mon, 11 Aug 2008 21:03:13 +0000

I have a friend who lives his life in low contrast. He is frequently the inspiration I need to go the extra mile and find an accessible solution to a programing quandary. A few weeks ago I had the good fortune to get to visit him and we cruised around the internet while drinking Rusty Nails so I could walk in his shoes for a bit.

His computer is set up to use one of Windows XP’s high contrast colour schemes and he also makes use of IE’s ability to override a website’s CSS.

He started by showing me his university’s home page and complaining about the large black areas which (on my computer) corresponded to the header and main navigation. After a quick look at the code I got the sinking feeling I knew exactly what was happening, and a quick look at the BCIT home page confirmed it. IE7 was giving any elements with a background image defined a black background regardless of the background colour they were assigned in the element.

The Gilder/Levin method basically positions a span with a background image over top of the text you want to replace. In theory, if images are not being displayed the text beneath will show through the otherwise transparent span. IE gives these spans a black background even though they should be transparent.

The screen cap below show the BCIT home page, with the black areas corresponding to span tags using the Gilder/Levin method to place images. You can also see that we’ve changed all of IE7’s accessibility settings to white in an attempt to figure out which one is causing the change without success:

I tried many things but nothing could be done with CSS to fix it. Considering most image replacement techniques use background images of one form or another I imagine the problem happens quite frequently. My friend was still able to navigate (albeit uncomfortably) by hovering his mouse over the navigation menus and reading the tool tips.

The moral of this story could be something about roads to hell and good intentions, but I think the real lesson here is that all accessibility testing should be done over Rusty Nails. Go buy yourself some Drambuie.

Eight random things

Fri, 02 May 2008 04:30:27 +0000

In the spirit of Jeremy Keith’s post, here’s 8 random things I see about me:

Black queen carved like Raven.
Small brass Buddha.
Wind up penguin.
iPhone.
Microformats pocket cheat sheet.
Salt.
8.5 x 11 print out of the gMail “mvelope”.
Label from a Christmas present: “To Steph Love, Joel, Jim & Mrs. A.”

You’re it.

Bookstore wins a hubbie

Wed, 16 Apr 2008 15:15:10 +0000

Almost a year ago now the BCIT Bookstore let Web Services know that the e-commerce application they used to manage their online sales was upgrading and asked if we’d like to help skin the new site. The department was pretty busy at the time and my manager said we didn’t have time to help out but put them in contact with me so I could direct them to the style guide and technical guidelines.

I had a look at the application and decided we could do better than that so I asked my manager if I could do some follow up and he said it was okay as long as it didn’t interfere with my other work.

I met with the Bookstore intending only to talk about the web app but ended up talking about their static store front just as much. Because of the way their inventory and software work they have not one but three online stores and they have trouble communicating the difference to their customers. They also felt like some of their most important information, like their return policy, was buried.

Skinning the e-commerce sites was relatively easy. The new version of the application was set up logically with good CSS tags and lots of includes. Not only that, the default layout was very easy to transform into the existing template I wanted to mimic.

I started off with this:

And created this:

For the static store front I made some changes to the left navigation based on the most desired pages, created three clear calls to action, placed the catch all action at the bottom of the list instead of the top of the list of options, and separated the two unrelated messages contained in the single page block on the right.

I worked off the side of my desk for a few months on it, meeting with the bookstore a few times, and when I was done they were happy enough with the results to email my manager and thank me in the Campus Update newsletter!

My manger called me into his office to talk about it and I thought, “Uh-oh, what if he’s upset I spent so much time working on this?” But I worried unnecessarily since he proceeded to tell me how it was good interaction design :)

Campus Hub, the third party company who hosts the actual stores liked it so much they’ve been directing people who want to skin their stores to talk to me for advice, and to top it all off, they awarded the store with a “Hubbie” for usability.

Two steps forward, one step back

Tue, 04 Mar 2008 15:34:30 +0000

Tuesday I was a guest speaker at Mrs.A’s gifted class. She’s teaching a group of 9-12 year olds web design and asked if I’d come in an talk for an afternoon.

So I spent 30 minutes talking to them about the basics of user centred design and how the internet works. Then I helped them trouble shoot their table based layouts and font tags.

Web Directions North 2008

Thu, 21 Feb 2008 20:22:53 +0000

Just like last year I thought I’d post my summary of the conference that I distributed to my department. If I have any regular readers at all, it’s probably a little too general to do you any good but I’m happy to answer questions:

Web Directions North is an internationally respected conference for web professionals. This year’s conference was a good high level overview of the new trends and technologies online. Some of these trends are emerging organically and we need to react to them and others are good ideas which need the support of developers to be adopted.

While the talks covered a variety of subjects there was a lot of overlap on these main themes:
Open data: Open data formats like XFN, microformats, and APIs are encouraging sites to share data between them. This allows sites to combine data for display in new ways, to make new connections between data, and to formulate it is more user friendly ways. Users may one day be able to manage their profiles, passwords, and social networks from one central account.
Mobile & Accessible Interfaces: In a few years there will be more people in the world with the ability to access the web with a mobile device than with a computer. Designing for browsing devices challenges designers to consider different contexts and device capabilities. Bright sunlight makes low contrast sites hard to read, common input devices like a keyboard and mouse may not be available. These are the same challenges developers face making interfaces accessible and there are over lapping.
Dynamic User Interfaces: Many websites are providing their users with the ability to customize what information is displayed to them and how. Many more sites which don’t provide these services are being altered by users anyway using special browser add-ons or websites which take data from existing websites and find new ways to display it.

There are also ties between these three trends – open and accessible data is easier to gather for customization with a different user interfaces which take into account different user needs like mobility or accessibility. Some examples:

Ironfeathers: This site uses Google Maps API to display running routes but it has removed the inaccessible Google Map controls and replaced them with their own custom accessible buttons. Try zooming in on the map in Google Maps using only your keyboard – then try it on Ironfeathers.
Everyblock: This site brings together data from government websites for the police and city hall, commercial sites like craigslist and social sites like Flickr in one place where it customizes it to make it more accessible, searchable, and explorable.
Twitter: This site has an open API and presents all its data as microformats. It has made it super easy for spin off sites like foamee. Foamee doesn’t require you to create a new username, password and profile – it just makes use of your twitter one. You don’t login and update foamee from your computer you just text message it.

I also had good conversations with the Microsoft representatives about the version meta tag they are planning on introducing in IE8, the BBC team about CMSs and centralized CSS (we’ve got it easy), and several free lance designers about client management strategies.

It was encouraging to see that BCIT is headed in the right direction with the incorporation of microformats into contacts and VTcal, to get confirmation that standards are still the leading industry concern, and know that our work on the Marqui templates will be moving us in the right direction to create a mobile version of the site.

Keeping up

Thu, 21 Feb 2008 20:19:31 +0000

“From your 77 subscriptions, over the last 30 days you read 809 items…”

No wonder I don’t read any books any more.

Finally figured out what my problem is

Tue, 05 Feb 2008 11:18:38 +0000

I read John Resig’s article Sub-Pixel Problems in CSS a few days ago and found it to very useful information.

And then today I had an “ah-ha’ moment - this this is why I hate coding flexible horizontal navigation menus.

Google Launches Social Graph API

Mon, 04 Feb 2008 13:10:58 +0000

There were several speakers at WDN who spoke about open social networks, portability and consolidating friend information across applications. I found the talks interesting and then, while we were still at the conference, Google announced a Social Graph API aiming to do just what we’d been talking about.

Links to check out from WDN08

Fri, 01 Feb 2008 13:03:54 +0000

JavaScript Libraries Overview: recommended by Cameron Adams as good comparison of major libraries
Twine: called Web 3.0 by Boris Mann
dotMobi Mobile Web Developer’s Guide: by Brian Fling
XHTML Mobile Profile Tutorial: apparently if we know XHTML we know XHTML-MP, almost
OpenID: single sign on for the internet
microformats.org/wiki/social-network-portability: mentioned by Brain Oberkirch’s talk on data portabilty
OAuth.net: mentioned by Brain Oberkirch’s talk on data portabilty
DiSo: Distributed Social networking applications development community
kayak: good example of potential use of portable data
upcoming: I have been instructed to get an account
getsatisfaction: people powered customer service
foamee: doesn’t require account creation, just uses your twitter info
cabspotting.org: live data visualization of cab locations in San Francisco, they don’t lay the data on a map, the data makes it’s own map

Missing table based layouts

Fri, 18 Jan 2008 18:17:35 +0000

There’s only one time where I ever really miss table based layouts: when I’m trying to make a flexible horizontal navigation bar with centred links. Like this or this](http://louisgervais.com) website I made for a Vancouver gourmet catering company. chews on keyboard with frustration

I would live with dial up if it meant I could live here.

Mon, 31 Dec 2007 11:00:29 +0000

One of my bestest friends lives in the middle of no where. High speed internet has not yet come to this island so I’m on dial up today, which is leading to interesting discoveries.

For example, IE6 loads images in the html before it loads background images from the CSS. Very interesting.

Also, turning off the images is not that easy. I wonder how true the assertion that people with dial up turn them off is.

Bonne Annee!

CSS bug in IE 6 with: .class a:hover element

Wed, 19 Dec 2007 14:49:05 +0000

This bug seems to apply to styling elements under a class or id within a link on hover. Stuff like .class a:hover span{} or #id a:hover strong{}. The solution is to define a property on the parent link .class a:hover{} that hasn’t been declared anywhere else in your CSS, like a text indent of 0 or something.

All the work for the solution was done by Tanfa, who wrote an article on IE Pure CSS Pop Ups Bug, I just thought it was worth mentioning that this bug can be generalized to more than the CSS menus.

Here’s what happened to me:

I had some text inside a link, and I wanted some of it to do one thing when rolled over and some of it to do something else. I marked it up like this:

<div class="promo">
    <h3>News</h3>
    <a href="link.html">IE has lots of bugs<strong>read more</strong>.</a>
</div>

It’s sort of a solution to the fact that “read more” makes bad link text. Bad. And I don’t write the copy.

Then I tried to style it with something like this:

/* default link behaviour */
a {
    text-decoration: none;
    color: #8ec3e2;
}

a:visited {
    color: #6d80a8;
}

a:hover {
    color: #c1fcff;
}

/* overrides for this element */
.promo a {
    color: #000;
}

.promo a:hover {
    color: #000;
}

.promo a strong,
.promo a:visited strong {
    color: #8ec3e2;
    display: block;
}

.promo a:hover strong {
    color: #c1fcff;
}

Which did exactly what I wanted it to do… in FireFox but in IE 6 the hover was not displaying properly. After a little tinkering the IE bug alarm bells started going off in the back of my head and Google provided Tanfa’s article on IE Pure CSS Pop Ups Bug in response to my query.

I added float:none to my declaration for .promo a:hover{} and all is now well :)

.promo a:hover {
    float: none;
}

Thank you Tanfa!

These are a few of my favourite things

Fri, 14 Dec 2007 12:55:33 +0000

Comics and web design together at last!

We made the cut!

Tue, 04 Sep 2007 11:50:43 +0000

One of the videos we made the other day made the cut into the final Gmail behind the scenes video. Alistair’s fancy editing shows the three of us morphing between chin up bars with 1:37 left to go.

A second video of ours was chosen as a featured clip. If you got to the page with the final Gmail behind the scenes video and scroll down to the map, our multi monitor video appears if you click the Vancouver icon.

No, wait, I wasn't done reading that!

Sun, 12 Aug 2007 00:23:34 +0000

When I went on vacation a few weeks ago I got a little behind on my RSS feeds. I’d manage to whittle it down from almost 200 unread articles to about 40 over the course of the month, while keeping up with all the new articles, and I was feeling pretty good about it when I went to switch my view from new items to all items and hit “mark all as read” instead.

Noooooooooooo!

This is an unrecoverable error. There’s no undo and there’s no way to mark an article more than a certain number of days (30?) old as unread again even if I open it individually.

A quick visit to the Reader group confirms that I’m not crazy and I’m not the only one who has done this.

What gives Google?

10 seconds of my 15 minutes

Fri, 10 Aug 2007 15:32:34 +0000

Google is having this contesty thingy. Which basically requires you to make 10 second (or less) videos of how gMail gets around the world. The idea is for people to get the “Mvelope” from the left to the right side of the screen.

Yesterday after work Alistair filmed videos with my and Kenzie’s help, three are up on youtube now:

What a great way to start a Monday.

Fri, 10 Aug 2007 15:32:34 +0000

Part of my job at BCIT is providing technical support to our content publishing community. These are the people who provide the text to fill the templates we make and keep that text up to date. Most of them aren’t web developers and are a little intimidated by the idea of working on the website.

Forty percent of our job is providing encouragement. “Don’t worry, it won’t go up on the website until we release it so you can play around all you want.” “We can always undo the changes if you think you’ve made a mistake.” I get my best compliments from these kinds of support calls.

This morning on of our clients told me, “You’ve made me feel so much better about all this now, I’m so glad you called. What a great way to start a Monday.”

What a great way to start a Monday :)

Making the switch

Mon, 30 Jul 2007 23:27:18 +0000

Macs have always struck me as more of a religion than an operating system. A family friend and I have a long history of a friendly Mac vs Windows rivalry. He’s the Mac evangelist and I was, well, I wasn’t a Windows evangelist but I guess I played the part of a disbeliever.

At some point in 2004 he finally won the argument and I promised my next computer would be a Mac. But then I got cold feet and I signed up for a course that required I have a Windows machine and I bought a some assembly required Windows box from one of those cheep no name computer stores that come and go over night. This particular store had been recommended to me a couple times and had stuck around for 5 or 6 years so I figured it was fairly reputable.

A year later the Windows box self destructed. First I bought a new power supply, then a new fan, then new memory, then a new mother board and finally I stopped short of replacing the hard drive and just pronounced the damn thing dead.

Out of excuses to not buy a Mac and very mad at my last Windows machine. I rented a Mac one for a week to see if I could live with it and decided, at the very lest, the whole command vs control thing would not drive me crazy. Once I discovered I got educational pricing (the job would suck if it wasn’t for the benefits!) I couldn’t even argue with the price. At the very worst I could wipe the hard drive, install Windows, and pretend I never bought a Mac. Apple also has a very articulate environmental policy which doesn’t hurt at all.

I bought a 15" Mac Book Pro.

The first week I had it there were a couple times I desperately wanted my money back but after two and a half weeks these are my thoughts:

Text smoothing

As screen technology evolves I’m sure it won’t matter but right now with this screen on this computer I miss the way Windows renders text.

Work flow

Work flow is the thing that has bothered me the most about switching. I find I lose windows other other windows and occasionally have to minimize things to the dock one at a time to find them again. Then I have to un-minimize them because you can’t alt-tab to things minimized to the dock.

I really can’t make effective use of dual monitors any more because the menu bar stays on the main screen no matter what and tool bars and pallets have to be moved individually.

I also dislike the way applications just pile up. Every now and then I go to click on a pallet or a scroll bar and suddenly I’m an another application.

Learning an new operating system

Switching from Windows XP to OS X was as easy as switching from Windows 98 to Windows XP. And, lets face it, even Windows users are going have to learn a new operating system when they buy their next computer and just cuz it’s pretty doesn’t mean Vista is going to be easy to use.

Running Windows

Running windows hasn’t been a problem. I’m playing with Parallels and I’m going to give VM Ware a go before I decide on which to use but I’ll be happy with Parallels.

Buying new everything

When I bought the Adobe creative suite for Windows apparently it came with licenses for Mac versions as well. Suite. Unfortunately I can’t seem to locate CS2 versions of any of the Adobe stuff but I’m happily running all the Macromedia stuff in OS X and the Adobe stuff in Windows for now.

As for other software, hurray for educational pricing.

iPhoto Booth

Damn this is sheer dumb fun.

Quicksilver

Quicksilver looks like it could be the coolest thing ever, but it needs to be customized to be used to it’s full potential and I’ve found the basic documentation to be kind of sparse. The basic idea of being able to do any task ever with a keyboard short cut is very appealing. I am all about not having to use the mouse.

Verdict

When I told my Mum that I was buying a Mac the first thing she did was seek assurances that I wouldn’t become an Mac evangelist like our family friend. I don’t want my money back but I don’t think Mum has anything to worry about just yet.

Searching for an answer

Fri, 29 Jun 2007 17:02:09 +0000

Has anyone else noticed a bunch of really old HTML coding tutorials at the top of their search results when searching for answers to HTML coding questions lately?

I was trying to find out if legend was a required tag in fieldset and I got a tutorial that said not to use legend because Netscape 4 doesn’t support it yet but should soon!

Forming form guidelines

Mon, 04 Jun 2007 16:36:49 +0000

Who knew web design could be so… academic?

Since I got back from @media I’ve been hard at work on a set of guidelines which ideally will one day guide the interaction and styling of all forms on the myriad of BCIT web applications though right now will only be applied to anything in the ‘public web’ look and feel. I don’t think I’ve done this much research since I finished university.

Here’s a bit more information on my quibble with FireFox: the bug report and ensuing argument. Some one who knows what they’re doing should probably read the CSS3 proposals to see if this can be avoided in the future. Also, sadly, I’m down to my last two chocolates from See’s in San Francisco.

This time it's not IE.

Mon, 28 May 2007 13:14:48 +0000

Wow, FireFox does not play nice with styling legends.

FireFox, I’m not mad, I’m just disappointed.

@media links to check out

Sat, 26 May 2007 02:50:53 +0000

This is a list consisting of all the websites and books recommended during the course of the conference that interested me enough to warrant writing down for later evaluation (including links to most of the presentations):

Tim O’Reilly
Delta Tango Bravo
Web Typography
Boxes and Arrows - currently featuring an article on comic books!
Netvibes - normally I’m not a portal person. To be check out in combination with Veerle’s theme.
searchmash
poetpainter
Book: Four Hour Work Week
ma.gnolia.com
Flash aid
Note Tab
digg labs
Book: Concrete by Paul Chadwick
Pingerati
Book: Just Ask
Book: Neuromancer
Article: Tao of Web Design
Book: Pro Javascript Techniques

Presentations:

Missed a few, let me know if you have them.

Dan Cederholm: Interface Design Juggling
Jeffrey Veen: Designing the Next Generation of Web Apps (PDF)
Cameron Moll: Designing for Communication (isn’t working, might not have written fast enough to get the whole thing?)
Andy Clarke: Royale with Cheese
Tantek Celik: Microformats, Building Blocks, and You

@media: Day Two

Sat, 26 May 2007 02:08:34 +0000

Today I got two free books, Jeremy signed Bullet Proof Ajax for me and I snagged an extra Microformats cheat sheet for Brandon. All in all a success.

@media: Day One

Fri, 25 May 2007 10:10:04 +0000

One day I’d like to be able to make the same kind of contribution to the web design world that these speakers have. Trying to find a way to do that is as intimidating as the idea of writing a Master’s thesis. How does one come up with new ideas?

The speakers have all been excellent so far. I always need a few days to process information though so I don’t have much to say at this point.

A few sessions feel like the same information I got at WDN which makes me question just how many of these conferences one needs to go to in a year and makes me feel better about the fact that I won’t be able to attend An Event Apart, mind you I haven’t heard most of their speakers… Are conferences addictive? Either way I’m out of funding sources and would have to pay for that one myself. Since I’m on the market for a new computer that’s not likely.

CADE/AMTECH Conference

Thu, 24 May 2007 01:56:09 +0000

I was in Winnipeg speaking at the CADE/AMTECH Conference last week. The weather was beautiful and I saw an excellent hockey game in which the Manitoba Moose (the Vancouver Canucks’ farm team) played spectacularly only to to be knocked out of the AHL playoffs in a very Canucks way (up 2-0 at the end of the first, lost 2-3 in OT).

As part of the Technology Enabled Knowledge (TEK) initiative at BCIT Danny Catt, one of the faculty, was sponsored to take a trip around South America and Antarctica studying local research and responses to sustainability and environmental issues. Throughout the journey he used blogging, digital photography, virtual lecture software, shared file storage space, and of course e-mail to keep in touch which his students and communicate with the world.

Terry Fuller, the instructional development coordinator that was helping Danny with the project submitted a paper to CADE to talk about “Using the Internet to make Meaningful Global Connections in the Classroom.” I was involved in creating the web page and blog that was the highlight of the project and Terry asked me to talk about the “technical” side of designing the website.

Rather than boring the crowd with PHP, HTML, CSS, CMS and other TLAs. I talked about the rest of the stuff that goes into the design process: user needs, site objectives, functional specifications, content requirements, information architecture, navigation design, visual design, and all that good stuff but for those of you who care the site was driven by Drupal and included a XML driven flash photo gallery, a Google map mashup, and some video and audio recordings, though not as many as we’d hoped - apparently it’s tough to upload media files from the middle of the Amazon - who knew?

The project was a lot of fun and very different my usual daily duties. I’ll post a summary and the slides soon.

Working hard?

Tue, 24 Apr 2007 17:58:15 +0000

Or hardly working?

When the network goes down the whole department starts acting like school kids when the power goes out. We sit around waiting for the power to come back on or the teachers to tell us to go home and the longer it’s out the more trouble we contemplate causing ;)

Styling Our Style Sheets

Mon, 23 Apr 2007 13:15:26 +0000

I’ve been wanting to seriously redo some of the HTML and CSS behind the BCIT site since I came on board here almost a year ago.

Well, I get my wish. We’re going to take some baby steps towards semantic HTML and CSS (POSH if you like) and despite my aversion to being in charge, I’m leading the project.

As a first step I’m trying to write a CSS coding style guide. I can’t necessarily clean up the current mess but I can try to stop any new ones from being made ;)

What I want to do is develop guidelines for:

if and how style definitions should be divided between multiple style sheets
what order style definitions should be listed in (I currently put all my tag definitions at the top of documents and then place my id and class definitions beneath them in the order they’re anticipated to appear on the page)
naming conventions for ids and classes
commenting conventions
what order properties should be arranged within definitions
if and when we should use shorthand properties
formatting guidelines

So far my research has turned up very few examples to help me with the development. This somewhat out dated post is the best I’ve found so far. Part of my problem is that searching for a style guide for CSS is just coming up with guides to styling with CSS.

Do you work with a CSS coding style guide or know any good resources for developing one?

Web Directions North

Wed, 04 Apr 2007 14:11:08 +0000

I thought I’d post my summary of Web Directions North that I distributed to the department a month or so after the conference. I’ve been wanting to write a more technical and personal review of it but it’s pretty clear to me that if I haven’t done it by now, I’m not going to get around to doing it :)

Web Directions North is an international conference for people who work with the web, from project managers to web programmers to web designers. This year it was hosted in Vancouver and a few of us jumped at the opportunity to go and were grateful to have the department’s support.

The conference covered a good balance of theoretical big thinking ideas and practical hands on code ideas and we were fortunate to come home with both things to work towards in the long run and ideas that could be implemented immediately.

These are a few of the “big picture” ideas that stood out to us:

User Experience – It’s the difference between making a website as popular as the SunDisk Sansa MP3 player and making a website as popular as the iPod. Many of the speakers talked about the ways they integrate user experience design and testing into their work early in the project process and what a huge positive impact it has had on their websites.
Web Standards – All the presenters were strong advocates of web standards. They also argued against the idea that all a website needs to meet standards is to be well coded. In their eyes a website with standards has high standards – it should also be accessible, backwards compatible, built using the principles of progressive enhancement, semantic, and have good user experience.
Ajax – There was a lot of discussion about Ajax, what it is, why it has become popular, and where and how to best use it. It was advocated that sites should be built to function perfectly without Ajax and Ajax can be added after to enhance user experience. There were also some user experience issues identified with using Ajax and some solutions proposed.

These ideas touch on difference skill sets and the presenters who talked about project management felt that the ideal web team would consist of a mix of individuals with skills that cross the disciplines of development, design, usability, and content. This structure keeps the team nimble, and promotes rapid prototyping for continuous improvement.

It’s rare that a conference provides information you can act on the next day when you sit back down at you desk but these are ideas we found immediately useful:

Microformats – Microformats are a standardized way to add CSS to XHTML to code standardized information such as addresses and events so that programs such as address books and calendars can import them with a single click if you have a newer browser or the right plugins. The contacts application (bcit.ca/contacts) has been rewritten to use microformats and the new version launched March 6^th!
Mashups – A mashup is when part of a website is integrated into another website. You might have seen a Google Maps mashup like this one: http://blogs.bcit.ca/catttrax2/journey/route. One of the sessions covered what’s involved in beginning a mashup and now a campus map mashup is on the way!
Progressive Enhancement – This is a “big idea” about how to code and a shift from the old concept of “graceful degradation”. The suggestion is that content should be written first and then semantic code, presentation, and behavior should be added on top of it in layers so that the core content is still accessible and intelligible if it is accessed without the presentation and behavior layers. The contacts application was rewritten using the principles of progressive enhancement; check it out with JavaScript or CSS turned off!

If you’re interested in learning more about any of these ideas the presentation summaries and notes are available on the Web Directions North website or you can talk to Brandon, Alan or me :)

Striving for excellence

Fri, 30 Mar 2007 11:51:10 +0000

I just finished my first micoformatted page! When I was writing the information page for HOPE’s spring dinners I coded all the dinners as events and the organizers as hcards :) I did work with Brandon to re-do the BCIT Contacts application to use microformats but he did most of the coding on that project. This is the first time I’ve done it myself.

I didn’t actually tell anyone at HOPE that I’d done it that way since it doesn’t effect the way the page looks and I figure they’ll discover it for themselves if it’s useful to them. However, my friend thinks I should tell them so they recognize just how good a job I’m doing for them.

I don’t really feel like I did anything other than my job. Isn’t it my job to do a good job?

In the last two weeks of February, CBC’s IDEAS aired a couple programs on the ideas of Richard Sennett, a sociologist and author who has studied the organization of work. Among other things he suggests the Western world is obsessed not with the idea of craftsmanship but with productivity. In other words: it doesn’t matter how well you do you job - just how quickly.

The speaker at my graduation ceremony spoke at length encouraging us to “strive for excellence” in everything we do. Not just in the work we do but also in our interactions as part of our daily lives. From answering a client’s e-mail to cooking dinner, he urged us to do our best.

Is doing a good job something society has to be told to do now?

Delicious + FireFox + Snap Links

Tue, 27 Mar 2007 15:06:24 +0000

I keep up on my favorite blogs and web comics by book marking them all in Firefox and then using the “open all in tabs” option that FireFox so nicely includes to open all the book marks at once. That way I can keep track of which ones I’ve read by closing them once I’m done :) Yeah, it’s lazy I know.

I’ve been wanting to have access to my bookmarks when I’m away from my home computer (who doesn’t) so I jumped on the del.icio.us band wagon a few days ago.

I hunted around for an add-on of some sort that would let me open all my delicious bookmarks in new tabs without much success. Turns out I was being too specific. Snap Links is a great add on that will let you select links on your screen by dragging the mouse over them, sort of the same way you’d select icons on your desktop. And it’s smart enough to only open the first link down in the HTML hierarchy, so with delicious you don’t open all the edit / delete links and with search engines you don’t open all the cached / similar pages links.

Edit: It kind of interferes with my mouse gestures if I’m not careful but it’s not that hard to avoid.

Something new today

Sun, 25 Mar 2007 15:20:32 +0000

So apparently we’re supposed to be encoding ampersands when we write them in the href part of anchor tags.

<a href="/file.php?fire=hot&amp;beer=foamy">link</a>;

I'm presenting at a conference!

Tue, 20 Mar 2007 14:01:53 +0000

One of the projects I’ve worked on at BCIT is Catt-Trax2. The website is for Danny Catt who is traveling through South America and Antarctica exploring conservation and sustainability issues and talking to the people in those regions working with those issues daily. He’s taking photos, video, and sound clips of this journey and blogging about his experiences. I helped architect the website and did some design and implementation work on it. We have fun stuff like a Google Maps mashup showing his route too.

The project manager for the project is an Instructional Development Coordinator named Terry Fuller who has done an excellent job pushing the team to give their most while restraining Danny’s overwhelming enthusiasm to keep the project in scope.

She’s asked me to co-present about the project at a conference for distance educators that is happening in Winnipeg in May. I’ve applied for funding to go with her. Our names are already on the website, so I hope I get the funding :)

Where am I going with this?

Wed, 14 Mar 2007 16:05:07 +0000

Vivian is such a great motivator. I’m still sorry to see her go.

I just came out of a performance review where Vivian simultaneously told me what a great job I’m doing and laid out the changes I need to make to my life to have the world laid out at my feet by the time I’m forty.

She said to me that in IT there are kind of two main career paths; one which is super specialized with one specific area of technology and one that sees the big picture and manages.

She thinks I should, and told me I have the right skills and thought processes to, be a manager.

I’m not sure I agree with where she wants me to go but she sure made me feel like I could get there if that’s where I wanted to go :)

Which begs the question, where do I want to go?

Insecurity

Thu, 08 Mar 2007 21:21:29 +0000

All I did was copy the cgi file and change the file name and now it’s not encrypting the e-mails it sends any more.

Hm.

Edit: Yup, the problem was that I changed the name.

Edit 07-03-26: I’ve also discovered that cgi files are not encoded using windows text format so opening them in notepad and saving them again is enough to destroy all functionality.

Border Collapse

Tue, 06 Mar 2007 20:13:22 +0000

I am, for the most part, self taught when it comes to HTML and CSS. I’ve take a few courses to get a piece of paper that says I can do what I say I can do but learned very little from them.

I spotted this little CSS tidbit in a presenter’s code at the Web Directions North conference a few weeks ago and now I’m wondering if this is the sort of thing I missed out on by being self taught:

table {
        border-collapse: collapse;
    }

There are quite a few tables I’ve designed where this would have been very useful.

What's keeping me busy?

Mon, 05 Mar 2007 12:16:18 +0000

Well, outside of my day job I’m:

making my Mum a website
moving hosting servers for digitalphoenix.ca
learning cgi so I can create an auto generated thank you message for HOPE’s donors
taking Mandarin (what was I thinking?)

Hello World

Mon, 05 Mar 2007 01:53:59 +0000

I’ve been wanting a professional blog for a while now. It’s funny how there’s somethings you can tell complete strangers and there’s some things you can’t.

Stephanie Hobson

Dictation is turned off by screen time

Using Tinypng to optimize images from the command line

How to make a chart of your users' window sizes

How to make a chart of browser window widths

The basic idea is:

Working with Google Analytics and Google Sheets the specific steps I used were:

Surprise Emergency Site Migration

How we rebuilt the viewsourceconf.org website

A Static Site

Offline First

Mobile First

SVG

No Script

HTTPS

Do Not Track

View Source

Flipping Tables at CSSDevConf

Links I mentioned in my talk

Writing for Every Reader

Resources I mentioned:

Articles that were helpful to me:

More on accessibility:

The MDN Redesign “Behind the Scenes”

One website with two looks

Bugs our beta testers found

Highlighting

What’s Taiwanese for Slab Serif?

Contrast

What’s next

Who is “we”?

HTTP/2 on MDN

You don’t have to get ready before you start using HTTP/2

Some numbers

Read more on HTTP/2

Next

Flipping More Tables

Google Analytics, Privacy, and Event Tracking

Sometimes this breaks things

What goes wrong?

How we can avoid problems

Respecting our users’ privacy

Configuring Google Analytics for privacy

Respecting Do Not Track (DNT)

Flipping Tables

(Still) Making Websites Better for Everyone

Conference Debrief: An Event Apart Austin 2015

Conference overview

My Favourite Talk

Talk Summaries

How To Debug CSS

Steps

Tools

Other resources

Mobile First Is Performance First

Smashing Conference Whistler 2014

The conference

My Favourite Talk

Talk Summaries

Making Websites Better for Everyone

Intro to Google Tag Manager

What is GTM

Why do we care?

Is it a trap?

Creating an account

What’s all this?

Tags

Triggers

Variables

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

Summary

Accessibility with CSS: Making Websites Better for Everyone

Resources

A Matter of Semantics

Sometimes things get misinterpreted.

With the wrong HTML the other computers will make mistakes.

How to avoid errors.

HTML5 Forms OF DOOM

Resources

Leave