Beauty on the Inside

A website that’s beautiful on the outside is important. But beauty on the inside as well as out is a mark of a true craftsman. Lift the hood on some websites and it can be a frightening sight (site). But well-planned, well-structured and well-written code can be a beautiful thing.

Why good coding matters

Behind the curtains on every website is code. Simple choose “view source” and you’re starting at lines and lines of HTML. While this can be a terrifying experience for a technophobe, and a boring experience for the rest of the us, it’s important to anyone who owns and runs a website. While most human beings are only looking at the visuals and content on their computer, the browsers are only looking at the code.

If the site looks like you intended, across multiple browsers, then congratulation are in order. That’s no easy task. Your site’s code is working. But there’s more to it that. How well written is the code your site is using? The goal isn’t just to make it look good to the end user. It has to look good in the code too. Why does that matter?

Updating

At some point, you will want to update your site. Add new content, new features, new designs, and so on. How easily this can be done depends on a lot of things (your time, budget, ideas, etc.), but one important factor is the code. Well structured and properly written code makes updates easier. Easily identifying what is going on in the code, where to modify it, and predicting what will happen when it is modified.

Developer Friendly

Not everyone will work with the same designer and developer for the rest of their lives, or websites’ lives. Things change, people move, bad freelancers disappear, staff changes, etc. If your web developer wrote code that followed recommended standards, and it’s well structured, easy to read, and (this is important) includes comments about what’s going on in the code, along with the reasons for certain coding choices, it makes it easier for another developer to step in and make updates. Simple things like naming the header “header” and not something out of the blue, like “the big top”, make it easier. Cleanly separated sections within the code, easy to understand labels, makers where sections begin and end– these all go a long way towards helping the next developer. Or even the original developer, if enough time has passed between updates.

Accessibility, Usability, SEO

Properly coded websites can be beneficial for your users and search engines too. Even if most or all of your current audience doesn’t require any special accessibility to view your site (e.g.- text readers for the blind), why not make your site as accessible as possible. By labeling your images, using properly structured heading tags, and separating design markup from the content, you’re not only making your site more accessible to a broader audience, you’re also making it more search engine friendly. Search engines are reading the code, not looking at the design, and the more your code follows recommended standards, the better your results will be.

Ready for Changes

Browsers change over time. Very, very slowly, but they are changing. They are adding support for new features and new ways of doing things. You may have heard of HTML 5 and CSS 3. While these aren’t terribly new versions of code (they’ve been in the works for years), browser are finally starting to support them. And old ways of coding will eventually fall the wayside, along with browser support for them.

Is your site’s code up to date? Does your developer stay current and follow recommended coding standards? Or does he/she still code like it’s 1999? It’s hard for the average non-coding person to know the difference. But there’s one test you can do that’s free and will give you an idea of your developer’s coding skills. Validation. Give it try on your site and see how you do.

Hacks and Customization

Working with open-source tools such as WordPress, Drupal, ZenCart, and the like, it’s easy for a number of people to put together sites without any knowledge of coding at all. But invariably there comes a point where some customization is needed. And only a skilled developer knows what customization to do, how to best carry it out, and how it best fits within the program. Each program has a preferred method for editing the code and making customizations. These need to be respected if you want to continue taking advantage of future updates to the software. Hacking your way to a solution may fix things for now, but it leaves a murky future for your website.

I’ve seen plenty of sites put together by offshore outfits that on the surface look just as good as any other site (well, they can look ok). But look at the code, and you can see how hacks were made to the site’s core features without regard to future updates. Doing updates to these sites, or logging in to ‘figure out what’s wrong’ can be an eye-opener. It’s akin to an electrician coming to a house, opening the circuit box, and a pile of unlabeled cords just fall out. Where to begin?

Start Out Right

Build your site with a solid foundation of standards-compliant code (HTML and CSS). You may not see the difference on the surface. But as your site changes over time, and the Web changes over time, you’ll find it much easier to get along.

Additional Reading

Why Clean Markup Matters
http://www.webdesignerdepot.com/2009/05/why-does-clean-markup-matter-in-...

Why Validate?
http://validator.w3.org/docs/why.html

What are web standards and why should I use them?
http://www.webstandards.org/learn/faq/

What Beautiful Code Looks Like
http://css-tricks.com/what-beautiful-html-code-looks-like/

Accessibility and SEO
http://www.outcome3.com/blog/why-web-accessibility-important-seo

• Random Thoughts
• Search Engines
• Web Design