Episode 5: Coding
For those of you just joining us, over these opening episodes of the Tunnel 7 podcast I’ve been exploring the different components that go into building a successful website. To date, we’ve covered website standards, information architecture, visual design and content. Now if you’ve missed any of these episodes I encourage you to check them out on the podcasts page.
By now you should be getting the picture that a website project is built layer upon layer and each layer is very important and builds upon the other. As I mentioned previously building a website is like building a house. A weakness in any component will cause the finished product to suffer. Today the component we talk about is coding.
After all the designs are finalized and the content is well on it’s way to being completed we get down to the nitty gritty of actually making a functional website from the work we have done. In the coding phase I work with html and cascading style sheets (css) to create the actual web pages. Unlike the previous stages that were largely collaborative efforts with the client, the coding of a website falls firmly in the lap of your website designer. While this phase does not have the glamour of the visual design stage and is largely done behind the scenes it plays a no less critical role. Decisions made during the coding phase of a website project have far reaching implications to accessibility and future growth.
So what exactly goes into the coding of a website? I’m glad you asked!
Structure and URLs
During the coding stage I always start with defining a structure for the pages and directories of the website. This will closely follow the information architecture we defined previously, however there are still logical questions to be answered.
A website, when you get down to it, is simply a collection of files organized into directories. A good organization is essential. At the very least I always have a root directory which contains the top level pages (homepage, etc.), a directory for images that will be used on the website, and a directory for shared components of the website (header, footer, navigation, scripts, etc.) For a larger website I tend also to create directories for each of the main sections to keep them logically organized. For example if there is an about section that has a number of sub pages a directory named “about” will be created. Now you may be asking - why should I care how you organize the files and directories? You should care because this directory structure ends up being the URL of your website pages. This structure is more than just something created to satisfy your designers sense of organization. It helps to create a logical flow to the website and defines the website address that will appear in the browser’s address bar.
It’s worth noting the this URL is also taken into account by search engines when ranking your website. A URL of www.domain.com/index.php?id=334232 is hard to make sense of but www.domain.com/services/web_design makes more sense both to the human reader and also to search engines. These types of decisions are made early on in the coding phase. They may not be glamorous but the do provide the foundation for all work that will follow.
When thinking through structure and URLs I’m also planning the website for future growth. Planning in advance for tomorrow today is always wise because websites do grow over time. As a rule of thumb I try to minimize the number of levels deep a website can go. Two maybe three levels should be plenty in most cases. We don’t want to bury content several levels down but we don’t want the website to be too rigid to not allow for this future growth. Each project is different but spending time thinking this through is critical.
Standards compliant code
With our structure and URL plan ready it is time to actually start coding the pages. Web pages are coded in html. Now I’m not going to go into great detail about the benefits of web standards (check out episode 1 for a detailed discussion about the benefits of standards) but this is the area where they really shine. All coding that I do separates design from content and is semantically correct. What does that mean? One of the major tenants of standards based design is that web pages elements should be coded to be what they are. This has benefits both in terms of accessibility and a residual search engine benefit. If a block of content is a paragraph it gets wrapped in paragraph tags, if it’s a list it gets a list tag ... sounds simple enough, right? It is but I can’t tell you how many folks in my line of work don’t abide these web standards. Those relying on WYSIWYG editors to write code for them or building pages with old table based layouts that combine design and content aren’t doing you any favors. There is no reason in today’s environment why standards should not be followed.
Now you may be asking: What possible risks are there for not following standards? By not creating standards compliant html code you are throwing up unnecessary roadblocks for handicap visitors and search engines alike. By using non-standard code you also run the risk of having your website break as newer browsers are released. Not long ago I did some work for one of the larger companies in our area and they invested a lot of time and money into a portion of the website that used proprietary, non-standard code. With the release of Internet Explorer 7 none of the forms built on this code worked and the website was crippled. This doesn’t happen with standards based code. Browser manufacturers today closely follow the established standards when building their browsers. It only make sense then that your html code does the same.
Cascading style sheets
With our html coded it is time to give that html the look and feel we have established in the design. Whereas the html code holds all the content of the website, the style sheet controls all aspects of the design. Fonts, colors, background images, layouts ... that’s right the style sheet is very powerful. But it can be powerful only if it is acting on the semantically correct html code that I mentioned (ah, now you see why I make such a point about semantically correct, standards based code!). If html code does not make a clean separation of content and design and is riddled with design elements it will override the definitions in our style sheet and greatly limit the power of the style sheet. Instead of making a change to a few lines of code in our style sheet that will affect the entire website we will now need revise each page where the design has been merged with the html code. You can see that this complicates maintenance of the website exponentially. This is not a good thing. It severely restricts the power of our style sheet and also severely complicates maintaining the website making it tedious, time consuming and expensive.
I would be remiss if I didn’t also mention the organization of the style sheet. Every designer has his or her own preferred method of writing style sheets. I myself have tried many methods but the key is keeping the style sheet file well organized (not unlike the structure of our website ... perhaps you are seeing a pattern here?). A well organized style sheet is one that any designer (including the person who wrote it!) can read through, make sense of and quickly make any required changes.
How do I know if my code is good code?
Well, that’s a very good question. All code that is written for a website should be validated against current standards. The W3C is the organization that defines standards for websites and they provide validation tools to check the compliance of any page (and css style sheets):
You should make a point of asking your website designer how they are going to build your website. Make sure they are abiding by current standards. A design can be taken and coded in a standards based way and a non-standards based and look exactly the same but it’s what’s underneath the hood that counts in the eyes of search engines, screen readers and validation services. Admittedly it’s a bit technical but I strongly encourage you to make sure that the code being written is standards based code. In fact, if you make only one requirement for your website project make it be that all code used has to be standards based and validate (both the html and the css).
I also want to make a point about code reusability when it comes to redesigning a website. A couple weeks ago I was reviewing an older website for a potential client that was written with old, outdated non-standard based code. In reviewing it I told the potential client that there was nothing that could be reused. With the standards based approach this is never the case. If content is coded with semantically correct html code and design elements are confined to the style sheet the only thing that needs to change is the style sheet to give the website a completely new look and feel. All the html code can easily be reused. During the recent redesign of the Tunnel 7 website I didn’t change any of the html code. All I did was write a new style sheet that redefined the look and feel of the website while relying on the old, semantically correct html code. The whole redesign took me less than two weeks because I had that solid foundation to fall back on. This fact of code reusability is often overlooked but it will save you a lot of time and money when it comes to redesigning your website down the road.
Content management system deployment
A content management system (CMS) allows you, the client, to edit the website directly without having to know html. Now I would be remiss if I didn’t at least mention CMSs at this point. If your website is going to be using one it is during the coding phase that it will be deployed. Now there are literally hundreds of different CMSs out there and I’m not going to get into the pros and cons of each. I will say that CMSs are notorious for adding non-standard code to a website in their efforts to simplify use for the client. Be careful about choosing a CMS. Personally, I like ExpressionEngine because it does not do this. It allows me, the designer, to plug in the exact code that I’ve written and know that this code will not change within the system. It also provides you, the client, an easy to use interface that also produces standards compliant code. To me this is the best of both worlds! I mention this because many other CMSs define a structure for you in advance. This limits the design possibilities for your website and also starts the project off on the wrong foot with non-standards code. A CMS is a big decision to make and I would argue having one that will support standards based coding while still being easy to use will serve you best.
I hope I have made the impression on you that how a website is coded is just as important as how it looks. I will admit that I am somewhat biased when it comes to standards based code, however I am so because I know it has tremendous benefits for my clients and their websites.
While not the most glamorous part of the website design process coding is no less important in the ultimate success of a website. Making sure that the structure of your website is strong and can accommodate future growth, that your naming conventions are logical and that all code (both html and css) is compliant will maximize your website’s accessibility and search engine friendliness. It will also minimize your maintenance costs and improve the forward compatibility of your website. And all of this will pay big dividends today and down the road.