Posts Tagged ‘CSS3’

I recently watched a couple episodes of Holmes on Homes on HGTV. My dad told me about Mike Holmes a few years back but I hadn’t gotten around to watching until now. I really like his philosophy of “Make it Right,” as I have a similar philosophy of doing it right the first time.

If you’re not familiar with the show, he comes into people’s homes and fixes remodeling projects that other contractors seriously messed up. These are people that have spent tens of thousands of dollars and have a half finished (if they’re lucky), poorly done project to show for it. He comes in with his team, rips everything out, and does the whole job correctly – and usually throws in a bonus or two. Along the way he points out what was done wrong and why and then shows you the proper way to do it.

Watching the show made me think about how I approach web design and development. When I start on a redesign project, I typically start by ripping out all of the unnecessary code. Then I start from the floorboards, so to speak, and build it back up the right way.

You might be surprised just how much extra HTML, CSS, PHP, etc. you can find in a website. I recently worked on a WordPress theme redesign that started out with over 500 lines of CSS, custom JavaScript, and custom PHP functions – all for the site’s navigation. The same thing could have been accomplished in about 100 lines of CSS. That’s a big difference!

There are a few reasons why you don’t want all this extra code (i.e. website bloat):

1. Load time – The more code you have on your website, the longer it takes to load. Internet connections are getting faster all the time so you may not think this is still an issue. Consider your website’s users to see if this is really a concern. If you have a lot of dial-up users, you’re going to want the leanest code you can get by with.
2. Search Engines Optimization – Yes, SEO. Search engines don’t like to comb through a ton of code. The more code you have, the less they like your site.
3. Errors – If your website has a lot of code, there’s a greater chance there’s something wrong with it. You may not be so worried about your code validating, but those pesky search engines (again!) sure are.

Yeah, there’s more than that, but you get the idea.

OK, so now we know why we don’t want code bloat. How did it get there to begin with? Here are a few different sources of code bloat:

1. Programs that convert one format to HTML/CSS – Take Microsoft Word for example. You create a beautiful document in Word and you want a web page that looks just like it. So you tell Word to save it as HTML and upload it to your server, right? I will give them a little credit, Microsoft has gotten better with this, but Word still puts a TON of extra code into your file. Code you don’t need.
2. Old and non-standard technology – As technology advances, it allows us to write more cool stuff with less code. Something that may have taken 20 lines of code 5 years ago may only take one line now. With HTML5 and CSS3 emerging, there will be all kinds of things we can do with a few lines of code that take a ton of CSS, images, and maybe some JavaScript to do now. Most designers and developers are still writing for Microsoft’s Internet Explorer 6, which came out in 2001. And, to put it politely, IE6 doesn’t play well with others. Can you imagine the hacks out there just for IE6? (OK, clearly this is an issue that deserves its own post!)
3. Website creators – This goes along with the MS Word example above. Website creators also have a tendency to go overboard with their code. The problem is that they have to account for every scenario, so instead of looking at a particular situation and choosing the best code for it, they hack in a lot of extra to make sure it looks good no matter what the situation.
4. Inexperience – If someone hasn’t kept up on the latest methods and standard or if they are just starting out chances are they are going to add a lot of extra code to get it to look right. For example, they may not know the best way to design a three-column layout so they choose to use tables instead. It’s easy (for them) and it looks this same (again, to them) but it’s not the “right” way to do it anymore.

So I guess at this point it isn’t necessary to mention I code everything by hand, but I do. It’s not necessarily the right choice for everyone, but it’s the best way I know how to do it. And I can tell when someone else does – it’s typically clean and uncluttered. And doesn’t make me want to tear my hair out after 15 minutes of looking at it!