When I begin a new project, there are many preparations I make before I go to code the first page. First, what does the client do? What types of audiences are they trying to appeal to? What message are they trying to get across? What response from their audience are they looking for? Do they have a sensible product or service? What sets them apart from their competition (and how can I incorporate that into their website)?
Second, what kind of layout should I develop? What’s the first thing(s) visitors will do when they arrive? Is there really a need for a large banner on the index (home) page? How open of a layout can it have without losing its professionalism? What colors (in hex form) are they using? And if it’s over 5, how can I simplify the scheme?
Third, I focus on word choice. Whether it’s a pet store or a law firm, clearly stated messages and simple word usage continues to remain king. (Beautiful design being queen, of course) What words will trigger these particular clients or visitors? How simplistic of wording do I need to use? Corporate speak vs. “Down-to-earthness” language is always something I fight myself over. How long does my client want their visitors on each page? What should the links be called? (i.e. Learn Hypertext Markup Language vs. Make a Website) Also, I make sure my copy doesn’t stretch too far on the page as most people begin to exhaust at over 50 words per line.
Fourth, I focus on the overall picture, simple vs. complex, flash vs. html, etc. A website that features a simple design and user interface, loads fast, is easy to use and even easier to maintain is the key to any good web design. When it comes to web design, the best websites have messages that are clearly written and conveyed, and coupled with intuitive functionality for both the client and the visitor.
After all of that, and only after all of that, I begin the design. Most of the time, I’ll begin without a computer. Sketching and evaluating rough layouts has proved key for me.
Then, I design the layout in Fireworks. Begin working on the copy and style the site pages in Dreamweaver and CSSEdit. I would say, in order to successfully (and efficiently) style a website with CSS, it’s best to finish the PHP/HTML pages with all of the content first, that way the classes are much more organized and simplistic.Although not all of my sites are a product of this, I would strongly suggest attempting completely table-less design. By that, I mean no table, no tr and no td. It’s hard at first, but as you work with CSS more and more, you learn what is what and you begin to realize the simplicity of the language.
When I have finished all of my preparation, copy writing, styling and finishing, I make sure my code is tidy. And to verify my work, I run all the pages (manually, at the moment) through the W3C validators both for valid, standards-compliant XHTML pages and CSS pages.
And finally, manual browser/resolution testing. While validating your markup is the best way to make sure the site is at its maximum accessibility and usability, it’s still a good idea to test the site to make sure it views well at a 1024×768 and 800×600 screen resolution. Pull up IE, Firefox, Opera, and Safari and make sure the site looks how you want it to look.
