Images and front-end web development

1 07 2011

Something that I have learned while working as a web developer at a business with tight time tables is that images are a time suck. Avoiding the use of images for things like buttons and navigation will save you time in the long run. Why? Code and text are far easier to update when client revisions inevitably come in.

Opening a 50MB website comp and trying to find the right buttons with all their states and account for all the tiny variations between pages will make you want to die. Believe me, I spent over 2 weeks of 16-hour days (including weekends) doing revisions on a site that was built almost entirely in images. In the blink of an eye, I had gone from being a code monkey to a pixel bitch.

When you develop anything, a website, an application, anything, keep the people who are going to work with it later in mind. Things like sprites, well-written CSS, and jQuery can make your website look good, easy for clients and developers to update, and much more flexible.

Now we have CSS3. I worked with a comp just yesterday that had a very subtle embossed effect on the text in the menu items, but that text was a web-safe font. I thought I was going to have to cut out those menu items as images then I learned about text-shadow, which comes with CSS3. This new CSS effect allowed me to recreate that subtle detail in clean HTML and CSS. That means four fewer images that would have to be cut out again if the client ever decided to change the navigation.

My advice for anyone doing front-end web development would be to avoid using images as much as possible. Your site will load faster, it will be more flexible, and it will be easier to maintain in the future.

Example of text-shadow:
p {text-shadow: 0px 1px #3A3A3A}

In order, those are the values for x-offset, y-offset, and shadow color.




One response

1 07 2011
Dr. Test

I agree 102.3%

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: