Posts Tagged “web design”

Maintaining your CSS helps maintain your site

Stephanie10th Dec 2009webdesign, , , ,

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?

What would you change?

Stephanie14th Jan 2009webdesign, ,

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?

Accessibility Problem with Gilder/Levin Image Replacement Method

Stephanie11th Aug 2008webdesign, , , , , , , , ,

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:

Accessibility Problem

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.

Bookstore wins a hubbie

Stephanie16th Apr 2008webdesign, , , , , , ,

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 interfear 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:
BCIT Bookstore Store - Original
And created this:
Bookstore Store - New Version

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.

Original BCIT Bookstore
BCIT Bookstore with some touch ups

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 interacting 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.

Links to check out from WDN08

Stephanie1st Feb 2008webdesign, , , , , ,

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.

Stephanie18th Jan 2008webdesign, , , , , ,

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. *chews on keyboard with frustration*

These are a few of my favourite things

Stephanie14th Dec 2007webdesign, , , , ,

Comics and web design together at last!

Women in IT, a response and an observation

Stephanie2nd Aug 2007webdesign, , , , , ,

A few weeks months ago Jeffrey Zeldman posted a summary of the results of an An Event Apart fact finding mission on women in IT (web design was deemed too liquid a field to study). Jeffrey’s blog post sure sparked a discussion and a few basic ideas came up:

  • is there is something about IT that doesn’t attract women?
  • do men and women contribute different things?
  • do women self promote? do men do it more? how is it perceived?
  • how much of the above is cultural or learned behaviour?

In response to all of that I can say: I think men and women are fundamentally the same and any differences in our behaviour is cultural or taught. This is based on any number of my own personal observations the most relevant of which are: no matter what the stereotype, there is always an exception to what is considered typical or biological behaviour and that around the world the typical traits of each gender are different things in different cultures.

If there is a difference in the number of women doing something (a career in this case), it follows that there is some learned behaviour responsible for that disparity.

I’ve been talking these ideas over with my friends and I think the most interesting new piece of information to come out of this discussion, for me anyway, is the idea that men and women communicate in different ways and communicate with each other in different ways. So while a man might demand a raise and be respected a woman might not even phrase a request for a raise as a demand. The idea that the lingering pay disparity might be because women just haven’t asked for a raise is kind of a new thought for me.

I spent a few weeks thinking women needed to learn to be more aggressive and then at one of the panels at the CADE-AMTEC conference on gender in online discussion one of the other audience members (the only male in the room) suggested that maybe men needed be socialized to be less aggressive. The idea that maybe women have it right was a new idea for me too. I suspect the ideal path lies some where in the middle and is, at any rate, not the decision for one person to make anyway since a society changes only when the majority of the people who comprise it change.

I wrote most of this within two weeks of Jeffrey’s blog post and I was going to delete it rather than posting it but, well, some new information came up so I thought I’d post the two together.

Also mentioned in the discussion in response to the blog post was the idea that many of the women doing web design don’t think of themselves as web designers and aren’t in IT, they’re women in pink collar jobs who are doing design as part of a slew of other duties they have.

Last week we had a meeting with the leaders of our distributed web publishing community. These are the people who are in charge of ensuring their entire department or school is following our guidelines before a change goes public. They evaluate pages for good IA, UX, adherence to coding standards and writing style guidelines, and nitpicky details too. It was a room full of very talented women, all women, who contribute to the web site as a small part of their other job duties.

This whole gender thing really makes me think.