July 6, 2010 / admin

The programming phase of website development is usually the longest one. Before putting that design into code form, I suggest several preparations.

Know what you need

Knowing what you’ll need is important because it will help in mapping out the time frame. Of course, you’ll have HTML and CSS to work on, but you’ll probably have some dynamic portions of the site as well. Will you have to use Javascript or PHP? Almost undoubtedly. What about Flash and Flash components? What about widgets, APIs, and other tools?  Once you know what you need, you can begin to see what portions of the project will take more time than others, whether that’s research or programming.

Figure out your divs

Now it’s time to figure out your div tags. Looking at your potential site, you probably have several different page designs. Of course, each of these page designs will have a different coding structure. Repeatable code is the coders best friend. You can spend less time tweaking margins and padding and more time tackling the actual layout. Also, a consistent and clear naming convention is important, not only for you but also for anyone who looks at your code later. The most popular high level div naming convention seems to go wrapper > container > content. But, use what works for you while making it as understandable as possible.

Figure out your CSS

Using the divs discussion as a jumping-off point, many of the same rules apply to CSS programming. Clear and consistent names are important, and this is where your planning reveals its effectiveness. Your site-wide, high-level styles should not apply to just one page. If that has happened, planning has not been adequate. If your adding classes to each paragraph tag, for instance, you decided on the wrong highest level style for your paragraphs. It’s time-consuming and sloppy to tack a class onto any element that doesn’t fit the design or your preference. Plan your styles out beforehand. Sometimes this means making a “bold” class. Sometimes this means making a high-level item bold and removing the “boldness” on a per element basis. The latter option is only applicable if most elements of that kind are bold on most pages, and you only need to remove the bold attribute a few times.

CSS page organization is your preference, but make sure you have one. It makes finding and editing your styles later much easier. You can have your main, site-wide styles at the top, then separated according to webpage as you work on each one. Many people separate typography, forms, headers, and other elements by their aforementioned category. It’s up to you. This may go without saying, but label each section with a commented header. You can make it as decorative as you desire, maybe an ASCI flower is your style.

Programming for different browsers (warning: could get technical)

Just wanted to mention this quickly, you will have widely divergent looks in many web browsers (usually Internet Explorer). I try to blend preparation and procrastination for these bugs or inconsistencies. Certain bugs can be foreseen, and some of those are worth preparing for such as a div’s tendency to flatten if it contains floated elements or IE6’s inability to understand the hover pseudo element outside of a tags. Basically, if it’s not going to distract you from your main goal of a workable website in as timely a fashion as possible, a short detour to circumvent a later time commitment to fixing a bug is not a bad idea.

Posted In: Blog, Programming