Best Practices (14 articles)
A few good practices for optimising your CSS
Like any programming language, CSS can be used in many ways while still achieving the same result. And although sometimes there isn't necessarily just a single 'correct' way to achieve a certain goal, one thing we can all agree on is that clean optimal code is always better than bloated code. With this in mind I thought I'd share some of the techniques that if you aren't already practising them...
Read full article | 2 comments , most recent by That Web Guy
Fixing the 'read more' problem
In my continuing journey to be as anal as humanly possible regarding web standards, I thought it about time to look at one of my pet peeves - the 'read more' link, also commonly known as 'more info' and sometimes 'keep reading'. You know what I'm talking about of course. The links like you see on the homepage of this very blog, where content is truncated and followed by a 'read more' link lead...
Read full article | 16 comments , most recent by That Web Guy
Demystifying Google's text-indent mystery
Once upon a .com boom time, back when search engines predominantly ranked sites based on keywords alone, there was a common practice in SEO carried out by every web designer and his dog - something called 'cloaking', a form of keyword spamming. This practice at the time was allegedly the Holy Grail of ranking highly in search engines, and usually consisted of spamming your page with keywords th...
Read full article | 8 comments , most recent by ScottFoley
Regarding Semantics
Semantics (n) The meaning, or an interpretation of the meaning, of a word. Now that's out of the way, what do semantics mean in modern web design? Depending on who you ask you could get a varied response, but if anything is certain it's that the concept of semantic mark-up isn't difficult to grasp. Note: This article is about semantic mark-up, not the semantic web (which will allegedly be web ...
Read full article | 10 comments , most recent by Angelina
Use structural naming conventions
How much thought have you ever put into what you name your classes and ID's? If you're like me, your probably guilty at one time or another of assigning a name to a div that describes where it is or what it looks like. While doing this isn't detrimental to your site, it's better practice to use a naming convention that describes the structure, not the appearance or position. Here's a typical...
Read full article | 13 comments , most recent by That Web Guy
CSS 101 - Using images in headings
Today I stumbled on a blog with a gorgeous design and what appeared to be some nice code. I won't mention the site name in the interest of not upsetting anyone, but looking closer I noticed something I've often seen used for headings. Considering the job done on that site was excellent otherwise, this was very surprising. Using images for headings often provides the nice extra bling that standa...
Read full article | 3 comments , most recent by That Web Guy
Resetting your CSS and your sanity
Did you ever notice how browsers seems to have slightly different ideas on how certain HTML elements are displayed? If you're like me then you once lost the same amount of time it takes for breakfast cereal to go soggy before you figured out what was going on. The image below perfectly demonstrates the small inconsistencies between elements in different browsers, yet these are often more than e...
Read full article | 9 comments , most recent by Josiah
Making the transition from px to em
Like it or not, there are times when your readers will want to resize the on-screen text for what ever reason. I find myself doing it often because I run a high resolution monitor and some web designers still believe in tiny fonts. But that's another story. So what should you be using to display your fonts? Em or Px? That depends who you ask, but first a brief lesson on the differences. Em,...
Read full article | 15 comments , most recent by Teegee
Avoiding div soup
When I first made the transition from tables to divs for layout (yeah, I was that guy once upon a time!), I clearly remember being frustrated at how difficult it was to achieve my goals without over using the div tag. My main problem aside from still finding my CSS feet was I had completely ignored what the div tag was intended for. I was using <div> as if it were the holy grail of achie...
Read full article | 8 comments , most recent by That Web Guy
CSS rollover buttons, sans JavaScript
While scoping for a new designer I recently read through over 50 resumes and consequently looked at over 50 online portfolios. What struck me as frankly surprising (shocking) was the high number of designers who still use oodles of JavaScript to create a simple image hover effect, usually in the navigation. I have a simple rule: If it can be accomplished with CSS, then do it with CSS. Unless it...
Read full article | 5 comments , most recent by Edwardo
Don't use target=_blank
Despite what you may have heard from your boss who doubles as a 'usability expert', people actually like to have control over their browser. One of the most infuriating ways to annoy web surfers (me included) is to make decisions for us, and if you're forcing external links into new windows or tabs, then you're doing it very very wrong. The thing is, I know how to use my browser, and so do othe...
Read full article | 20 comments , most recent by That Web Guy
Considerate Accessibility
When I got my first web development job more than 10 years ago I had only a vague clue what the term 'accessibility' meant, and no clue what it meant to develop for it. Like many other web developers these days we know what's technically required to achieve an accessible web site, but there are some other things to consider post launch. If you're going to hand a CMS controlled site over to your...
Read full article | 8 comments , most recent by Teegee
Boycot the underline
To many people the humble underline has been used as a form of emphasis, and while once upon a time it was OK, the advent of the web browser has made this practice a usability no-no. When we're online, the underline is indicative of a link, a way to communicate to the user that this is something that is actionable - in this case being to reveal more information. How the information is revealed ...
Read full article | 8 comments , most recent by Jeff Chapman
To GIF, or not to GIF?
I'm frankly surprised to see that in this day age, many designers still don't know when to use the right image format for the right job. Before I get stuck into this, here's a quick primer for beginners. The most common image formats for the web are: GIF: Limited colour range, single colour transparency JPG: Large colour range, no transparency PNG: Large colour range, full transparency ...
Read full article | 3 comments , most recent by Diso