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

webdesign

Accessibility with CSS: Making Websites Better for Everyone

Last night I spoke at the Style & Class Meetup about Accessibility and CSS. Posting the slides here for posterity: Accessibility with CSS: Making Website Better for Everyone Resources Intro to Accessibility WCAG Validator Intro to ARIA :Focus and keyboard accessibility High contrast CSS Sprites Bullet Proof Accessible Icon Fonts The Offscreen Class Floating Form […]

A Matter of Semantics

Adapted from a blog post on Web Services’ blog at BCIT, the audience was our content community: people who contribute content using the CMS, with little to no technical experience. Once, as part of a “getting to know you” activity at summer camp, I played a game where I was given a drawing and another […]

HTML5 Forms OF DOOM

I spoke at an HTML5 Code Camp the other day on HTML5 forms because HTML5 forms are cool! They’re so cool you can use most of them today anywhere you have a text field to increase functionality for your users! HTML5 Forms OF DOOM from stephaniehobson Download the slides. Sample form. Finished form (no peeking). […]

Leave

I’m taking a one year leave of absence from my job at BCIT beginning June 1st, 2012. Right now it kind of feels like I’m doing this because I’m crazy. I’m really doing it because there’s stuff I want to do. I want to build something cool. I want to learn something new. I want […]

Print Styles Are Responsive Design

Print styles are the original responsive designs. Using media queries we pare down the content, focus on readability, and design with different device capabilities in mind but when was the last time you took a good look at your print styles? Yes, people still print web pages. Extrapolating from these numbers about 10,000 pages are […]

CSS Loading Spinner

I needed a loading spinner for a side project the other day but I was too lazy to steal someone else’s off the internet or try to re-learn making an animated GIF so I just coded my own in CSS (CSS is my hammer). On the bright side it works on any background colour and […]

A style tag counts as a :first-child

EDIT 2011-09-15: All of this applies to <script> in the body as well. I have some bad news and a fix (I hesitate to call it good news). HTML5 introduces a way for us to include <style> elements on the page, we just need to give them an attribute of scoped. So, for example, if […]

Perfect Stranger

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

A Dull April Fool’s Day

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

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

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. […]

← Before After →