The Web Development Process

One topic that I feel gets very little attention or coverage is the issue of the web development process. When I first started out in web development, one nagging issue that was never quite clear to me until I gained more experience was the process of development.
Hopefully this short article will help clarify some of the fundamentals essential to the successful development of a website.
Planning
Every good website begins with a solid plan. You or your client, needs to know in advance what you intend to accomplish from the site. Because the development of a website can quickly become complex, it’s a good idea to know what you want from the site. Divide your site content into logical sections and create a hierarchy. Your main focus during the planning phase should be site structure. Don’t worry too much about the graphical implementation yet. You could use this hierarchy to create global menu links and often it is what should be used to create your main site navigation.
The Design
Most web designers use Photoshop or fireworks to create a design of the site. The designing of the site is the best place to make changes as this is the most flexible and pliable phase. It’s easier to change the position of elements inside of a graphics editor like Photoshop than it is to make those same changes after the html structure of the page has been completed. While designing the graphical elements, pay special attention to how they are constructed and how they relate to each other on the page. Understanding CSS and HTML really help a designer design better and more efficiently.
Slicing and building the structure
A common practice that web designers/developers use is to use take a completed design in Photoshop for example and slice the graphical elements on the design into logical sections. Each section or portion of the graphic is optimized for file size. You’d generally take each image and attempt to find areas that can be duplicated programmatically. For example gradients and areas of solid color, could be reproduced by using CSS. Next you lay out the plain html structure by naming your div tags and maintaining a consistent naming convention. Please don’t use tables for web page layout. This is really 1990’s and should be avoided as much as possible unless you are displaying tabular data. Maintain a separation of style and structure as far as possible. This makes for leaner code, faster loading web pages and also aids with future site maintenance.
Once your structure is complete, you can now begin applying graphics to your skeleton HTML document. Test as you go along so that you will have a better chance of finding bugs in your code when you incrementally test in this fashion.
More on Structure
One very important thing to try and get in a habit of doing is creating a good folder structure. Deciding on which folders you will need in advance will help you plan for sections of the site that are not built yet. There is nothing wrong with having empty folders, as this forces you to thing logically about your site structure throughout the project. For example if you know that you plan to have a dynamic php site then go ahead and create an includes folder even though you may have just started working with getting the HTML and CSS in sync.
Try to also keep your folder names meaningful as well as your file names. Keeping them relevant to the content that they will represent will help your SEO down the road. Always think about the future of this site. Use external style sheets as well as external JavaScript. Using external references to these will make your HTML less bloated and also allow for greater flexibility. Since browsers cache your CSS files for example, it makes rendering your pages much faster after it has been loaded for the first time.
Testing
Test your site in as many browsers as you can. Decide ahead of time which browsers you will support. The rule I generally apply is to test in standards compliant browsers first. For example, I develop in Firefox and then get everything working just how I want it in this browser, after which I check Safari, and then IE7. These browsers will have slight rendering differences and fixing subtle differences later rather than sooner is important because you will usually end up with cleaner code. If you start off coding for IE6 for example you might get your site to look good in IE6 but when you test in more standards compliant browsers you will end up having to fix problems on both ends. So, code and test for newer browsers first, then accommodate older buggier browsers by adding conditional style sheets.
So this is just a basic overview of a much more complex process that deserves greater in-depth study. The net is littered with hundreds of examples on how to properly debug and test as well as how to structure your web pages for better SEO. Always remember to validate your documents as this plays an important role in your SEO too.