Bad usability – how to notice it on your site
It’s often easy to get carried away with criticizing what’s wrong with a website, because what’s wrong manifests itself in our personal user experience of that site. In order to understand good usability you have to train yourself to recognize it. When you’re at a great site, you usually don’t think “wow this is a really good user experience”, you just enjoy the site. When it’s a bad experience however you usually end up getting frustrated. Both these types experiences are valuable learning tools.
Blog redesign, take 2
It’s finally up, and I am pretty happy with it so far. My new blog design has been in the works for well over a month now.
If you forgot what the old one looked like or had never even seen it, here is a shot of it. The old designed served it’s purpose, but now I want to make my site more accessible, and I’ve started with the Featured Topics on the side. Eventually I would like to get some free stuff on here, and possibly even a WordPress plugin I have been toying about for awhile. I will also release the old template for anyone who wants it in the near future, I just have to round up the PSD files and clean it up a bit.
I also must say that Internet Explorer never ceases to amaze me with how incredibly bad it is. I spend at least one full day battling IE7 bugs. As it stands I still have random disappearing backgrounds every now and then, so there is still a bit of tweaking to be done. While I was working on the redesign I found this incredibly huge list of IE bugs. One of the bugs even makes IE7 crash! So far there are 134 bugs listed here. Some of the blog quotes are fantastic, they are interspersed throughout the list.
Anyway, I hope everyone enjoys the redesign.
How to center Google AdSense ads
It took me awhile to figure out how to center Google AdSense ads. Searches showed that many other people were running into the same issue, so I thought I would share my method for centering.
At first I tried things like margin:auto, center and padding in a <div> wrapped around the ad, but nothing seemed to work. The reason for this is the AdSense box is absolutely positioned. The easy fix for this is to create a CSS class or inline style as shown below.
CSS class
.adSenseCenter {
position:relative;
width:120px;
margin:auto;
}
Container <div>
<div class="adSenseCenter"> adSense code goes here </div>
Or quick and dirty inlines style.
<div style="position:relative; width:120px; margin:auto;"> adSense code goes here </div>
Don’t forget that the width of the <div> must equal the width of the adSense ad. Now you can center your ads.
Email html design and deployment quick tips
I create a lot of emails campaigns on a regular basis. Creating emails that work in all the mail clients can be a daunting task, if not sometimes impossible. Unlike web pages, you have many more combinations of email clients and browsers that may view your email. Add the fact that many email clients are blocking images, stripping CSS, or just outright ignoring all the great web standards we have worked towards for years, and you have a real mess.
There are some simple rules you can follow which should make life a lot easier. Testing of course is still required and many strange anomalies will pop up. Web based clients change without warning, so constant testing before every email deployment is a must. Below is a quick list of things to watch out for.
Neato site of the month – The Steampunk Workshop
I’m going to start posting a neato geeky site every now and then and the site I’m posting now definitely fits the bill. It’s The Steampunk Workshop. The sites description is…
“Wherein the craftsman demonstrates the construction of artefacts from an age of steam and brass.”
The site contains a lot of modern gadgets that are redesigned in a steam and steel era design. When the site was brought to my attention it was a link to a keyboard mod. It contains photos and a step by step guide of a computer keyboard that is meticulously transformed into an old fashioned type writer.
The site is full of videos and step by step walkthroughs of how the steampunk gadgets were created. A quick search on the term steampunk brings up an interesting Wikipedia entry on the origins of the term. It usually refers to modern technology appearing at an earlier time when the world was run on steam power. It also goes on to say that steampunk is often associated with cyberpunk, but with an obvious time period difference.
This site is definitely surf time well spent, as is the wiki entry and who knows, it might inspire you to create something yourself, I know it got me thinking.
Blanket rules
Why is it that we, designers and developers alike have to constantly face blanket rules mandated by people with little to no technical knowledge? What I mean by blanket rules are rules that someone, probably near the top of an organization, has made with little knowledge or understanding of the stance they have taken. It’s usually on a technical issue, and it’s probably something someone has told them or something they heard on the news somewhere. It may even be something you told them!
Case in point, I create a lot of solicited e-newsletters where I work. Some of our designs get pretty crazy considering we are trying to make these things work in every mail client from Hotmail to Outlook. Designing for email is far harder than a standalone web page in my opinion.
Anyway, one of the companies we work for has now stipulated no background images in emails. Where did this come from and why? Well, probably because background images are stripped out of some new clients, but so are hundreds of other elements we use in email every day. The key with email is to layer everything you know, with the hopes that some of these layers will come through, and the rest will gracefully degrade.
Decisions like these should be made by the people creating these newsletters, people with the expertise to know what should and should not be used. We stress a lot of live type, so background images can be very useful since you can put live type on top of them. As a standby you can use a background colour if the image does not come through. With this method, we have created many possibilities of achieving the design and usability goals. Everyone should get the text message. Some people will get the image, and some people will get the background colour. By making a blanket statement like “No Background images ever!” you have just effectively eliminated a tool in the developer’s arsenal. We developers are constantly testing and watching email and web compatibility issues day by day, year by year. We make technical decisions based on the goals and targeted demographic. In a lot of cases a background image is a bad idea, but in a lot of cases it’s a great idea.
The point is, let Designers design, and let Developers develop. If you are hiring a good team they will probably know what’s best. There’s no need for non-technical minds to get involved in compatibility and delivery issues.
So how can YOU help change people’s minds? Just remember, it was probably something someone like you said that created the situation in the first place. Be careful what you say to people, a comment like XYZ won’t work in this situation could mean that further down the road you may see a mandate to never use XYZ, when really it was just in that situation that it should not have been used. Sometimes the situation will be out of your control, and you will just have to grit your teeth and design and code your way around silly rules.
Happy designing / coding.
Click Here!
This has to be the bane of my online experience. Okay, that’s probably a bit strong, and there are plenty of other web taboos, but this one is so easy to avoid. Don’t use click here. It means absolutely nothing.
Anyone surfing the web longer than a few days has the look of an html link ingrained into their head. Highlighted or highlighted and underlined text, this is common day web link and it comes with a little cursor pointer to boot. A lot of us scan type, as we do this links will usually be stronger than the surrounding text. When we see click here, there is no context associated with the link without reading the text describing what the link is.
Here is an example.
Your privacy is our priority. To view our privacy policy, click here. To unsubscribe at any time, click here.
Try scanning these links and you will get no context at all. This could be reworded.
Your privacy is our priority. View our privacy policy now. You can unsubscribe at any time.
The second line has much better scanability and just makes sense. Users do not need to be told where to click. As a designer I find myself constantly telling editors not to use click here. Not only does it look silly it’s also bad usability. Remember, links should be able to be read out of context and still make sense.
Blog redesign
I spent the day creating a new theme for my WordPress install. It wasn’t quite as easy as I thought it would be, but still pretty straight forward considering. I probably still have a few bugs to iron out though. All total it took about one day from start to finish.
Anyway, I know it’s not a very techy type design, but I figured I wanted something new and different, since I can’t usually do that, and what a better place then here. Hope you like the new design.
