I’ve been developing websites since 1998; I was there during the days of full-blown table-based layouts and have made the transition successfully – if I may toot my own horn – to CSS-based layouts. During a training session last week, I was reminiscing about table-based layouts and spacer GIFs. A co-worker chimed in – “Spacer GIF? What is that?!” As I wistfully explained it to him, I started thinking about all the things I have learned in my 10+ years in Web Development.
This one is a no-brainer, but it was a very important lesson for me. You only need to create a template page that is used for a 50-page website, complete the job in record time, and then discover a validation error in every single one of your pages once before you add “validation” to your pre-flight checklist. It’s easy, especially when you have been in the industry for so long, to forget this seemingly small task; granted, I know what to look out for so that validation errors are kept to a minimum, but it’s still an immensely important task.
Some recommended validation tools
- http://validator.w3.org/ – for validating HTML
- http://jigsaw.w3.org/css-validator/ – for validating CSS
- http://validator.w3.org/checklink – link checker, also very valuable
Coders are like snowflakes — no two people do anything in the same way. Most coders recognize that they will not be the sole worker on any one project; they understand the need for code readability. Indenting and including comments in your code so that it is easy to follow is a best practice, and minimizes the disorientation you feel when you edit an HTML page and are immediately hit with the, “Hey, I didn’t code this,” feeling.
Change in the game
Just when you think you’ve got a handle on everything, the game changes. A coder’s learning is never done. Never underestimate the importance of constant research and keeping up on recent developments in front-end trends and techniques. The good thing is, when things change, you have all the necessary tools with which to create your own solutions. Your experience does the rest.
Testing, testing, testing
No matter how superb your skills are, cross-browser testing, like code validation, is a no-miss task. Even though I’d like to forget about it, testing sites in Internet Explorer 6 is still a must for many clients.
Math is actually required outside of school
I was so glad to get out of college because I mistakenly thought I would never need to use math again. Wrong-o. There is so much math being used on a daily basis out there in the “real world,” especially when coding websites. One miscalculation can break the entire layout. Math is also important when dealing with relative font sizes and understanding why nested elements may have inconsistent font sizes. Count your widths, etc., carefully and use the “cascade” in cascading stylesheets (CSS).
The order of development is important
The order of development is important if you want to write semantic HTML, and trust me, you do. By definition, the word “semantic” implies “meaning”. So for HTML, it means using the HTML tags for what they were originally intended, not just for how they make the page look. Examples include using heading tags [
, etc.] for headings (instead of font tags or styled paragraph tags), lists [
] for indented quotes. Using a
tag just for indenting a paragraph of text is not a properly semantic use of the tag, since it’s not quoted material.
Semantic code is important on many levels: in HTML, by using the code semantically, there should be less markup on the page. Updating styles should be a breeze, where one change in the CSS will update elements across the site, and you won’t have to go into every single page to update your HTML. It is also important for search engine optimization because it gives meaning to your content, and Google, in particular, likes meaningful content. Finally, semantic HTML is important for those people using speech browsers for the same reason — it gives elements meaning. This is especially important if you cannot visually see the rendered HTML pages. Having header tags marked up correctly gives them meaningful identification as headers and subheaders, not as just some random piece of text.
Now, on to why the order of development is important.
When marking up a web page, focus on the HTML before adding any CSS. This will ensure your HTML is semantic because you’re not focused on what the page looks like until the proper markup has been applied. By starting with unstyled HTML first, you’re concentrating on building a solid foundation — think of it as a house. Build the structure first, then use CSS for accessorizing.
Marking up interior templates before the home page is important because the majority of your CSS will be shared between both interior and home pages. Even though you may still have separate home and interior page stylesheets, if the necessary CSS is already in place for the interior pages, home page development happens much faster.
Finish a layout in a standards-compliant browser first, such as Safari, Firefox or Internet Explorer 8, and then tweak for older browsers like Internet Explorer 7 and 6. That way you’ll know it’s the older browsers making mistakes, not your code.
7. Slow down
Taking your time when marking up a website will prevent many problems in the future. Use the cascade. Although it’s not immediately apparent, developing slowly and methodically saves much more time in the long run than having to continually correct problems introduced by hasty development.
8. Debugging process
When hit with a layout issue, it helps to have a well-formed debugging process. Following a step-by-step process will help with exposing causes of layout problems much faster than guessing will. A typical debugging process could involve code validation, tag isolation either by putting a border around the tag or giving by it a color, and/or commenting out sections of code to determine where on the page the offending “bug” might lie.
One would think that after so long in the business, I would have more insights than this. The truth is, these are simple tasks, but they will forever remain important. By following these suggestions, you will become more efficient and streamlined in your code writing and will save your clients time and money.