Tips (21 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
Mobile web design: What I've learned
Just like designing for the desktop screen, designing for mobile devices comes with its own set of hurdles and considerations. Not all mobile browsers are created equal, and you'll need to be aware of their positive aspects and failures alike. Some mobile browsers allow you to zoom in and out of a page for easy access to links, some don't. Some allow you to change the aspect ratio and some don'...
Read full article | 2 comments , most recent by Harkiman
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
CSS3 features you can start using now
Although CSS3 isn't mainstream enough that we can adopt it wholly without regard, we can however start using it knowing that it will degrade gracefully enough with minimal impact on our designs. Aside from beginning your familiarisation process with CSS3, another advantage is that as more browsers start to support it, users with supported browsers (Firefox and Webkit based browsers at time of t...
Read full article | 12 comments , most recent by That Web Guy
Absolute positions are absolutely your friend
In an ideal world, we shouldn't need absolute positioning for anything, but sometimes relative positions don't get us any closer to solving some design issues or have unexpected results in different browsers. During the olden days of web design when many designs were justified left of the browser, so using absolute positions was an exercise in no-brainery: simply position all elements to a top...
Read full article | 9 comments , most recent by That Web Guy
5 good programming fonts
A little while ago I changed the code colouring in Dreamweaver after becoming too tired of the default offering, and last week I thought I might delve into the possibility of using an alternative font to compliment the new theme. There are several advantages to coding with an alternative font, the most notable, depending on your selection, is being able to see more code along the horizontal axi...
Read full article | 11 comments , most recent by Sidnei
The Forgotten Timesaver: Photoshop Droplets
Many moons ago Adobe saw fit to include a feature that would make batch processing images faster and easier. Droplets are a very handy thing to have, especially when a client sends over a disc full of images that need processing. In this tutorial I'll demonstrate at it's simplest form how to create your own droplet. These instructions are for Photoshop CS3 but if I remember the previous versio...
Read full article | 5 comments , most recent by JJ Mason
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
A few good tools for design testing in Internet Explorer
Love the fact or hate it, we all have to use Internet Explorer in our design testing. Having to make sure our sites work on all 3 versions of Internet Exploiter Explorer is a clear indication that Microsoft should really drop support for at least one of them - IE6 comes to mind first. It's the only time I will ever use said browsers, but luckily there are a few tools available to make the trou...
Read full article | 4 comments , most recent by komodo
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
Staying in the right headspace
I can't speak for every designer, but my role sees me jumping in and out between different design projects almost daily. And that is usually a mix of coding, Photoshopping and In-Designing. If you've ever been in this situation then you can testify to how difficult it can be to get into and stay in the right headspace. 'Headspace' is an odd term but it basically means being properly focuse...
Read full article | 3 comments , most recent by Katey
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
A few good accessibility resources
I'm mid way developing a new web site for a client who has a large percentage of disabled users, this includes people with motor disabilities, blind, colour blind and deaf. Although accessibility is somewhat of a personal passion of mine, I seldom get the opportunity to develop sites for that particular audience. But I thought it might be beneficial to others to share some of the resources I us...
Read full article | 3 comments , most recent by That Web Guy
An easy introduction to version control
While most of us use some form of version control at the office, I find few have it at home. Not for lack of wanting though, the main problem is that setting up version control that's going to be accessible anywhere requires you have root access to a remote server. And setting up a suitable app like SVN is no easy task, one which most designers would be forgiven for not knowing. I certainly fa...
Read full article | No comments
A web dev studio in your pocket
If you're anything like me, you occasionally forget to do something on a web site you just deployed or you need to do make a quick edit. I can honestly say that on more than one occasion I've been out and about and for one reason or another I've needed access to my web site to make some changes. This web site is an example, as only hours after going live I was on a friends computer when I notic...
Read full article | 7 comments , most recent by Arpad Szasz
A dark code view theme for Dreamweaver
I don't know about you, but sometimes I tire of looking at a bright white code view all the time. Dreamweaver has a great coding environment but the default colour scheme isn't always suitable, especially when your coding in the dark. Luckily you can change the default code view colour scheme, although it's a bit time consuming and there is a lot of trial and error. But if you're feeling partic...
Read full article | 54 comments , most recent by That Web Guy
Give your clients style-ability with FCK Editor
Something that used to annoy me immensely was deploying a beautiful web standards compliant harmony of XHTML and CSS, only to have a client deface it by adding all sorts of nastiness to the content in the CMS. Pink fonts with yellow backgrounds? Seriously, what are they thinking? It's not the clients fault though. They don't have a clue about design and will idly edit the content of a web page ...
Read full article | 6 comments , most recent by Json
Why mention Dreamweaver on your CV?
In a recent article I made a throw-away comment regarding Dreamweaver and its (lack of) importance in web design. During the beta phase of this site one of the testers queried me on why I felt that way. Buckle up, because this might hurt some feelings. I don’t have a problem with Dreamweaver per se, and I still use it (although I’m constantly looking for a suitable alterative) bu...
Read full article | 16 comments , most recent by That Web Guy
How to win that web designer position
Hiring a new designer isn't always easy. No matter how specific I make the requirements in a job advertisement I still receive countless CVs from people who have several years LAMP development experience but none in front end design. What's that all about? Anyway, this article is intended to shed some light on what it's like to be at the other end of the table, scrutinising your every respons...
Read full article | 3 comments , most recent by That Web Guy
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