Tutorials (13 articles)
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
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
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
Create a stylish accessible form
There are a stack of different ways to lay out a form, but honestly sometimes I’m undecided on which way is better. Some say there’s nothing wrong with using a table to position your form elements, but I reckon that makes it semantically meaningless. Forms have admittedly always been a field (bad pun, sorry) of HTML that I've not paid as much attention to as I should have, but I ...
Read full article | 13 comments , most recent by A Novice
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
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
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
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
Quick and dirty rounded corners on an image
I got to a certain stage during the development of this blog when I realised I was going to want rounded corners on the article images. I was first reminded of a complex div/gif arrangement, and then my mind shifted to just simply Photoshopping them when needed. Neither are desirable so I came up with this quick and dirty solution. Before you get too excited bear in mind this method is only goo...
Read full article | 15 comments , most recent by Carlo