Preplanning how to effectively structure your site design begins with a pen and a paper.

So you have your website design finalized. Now what?

Whether you are designing or redesigning a website, it’s a good practice to dissolve what you think may have worked for all of your previous sites and ask those underlying questions again while holding a pen and a paper. It gives you an excuse to incrementally improve how you utilize your markups for function and design.

Perhaps you started your design on screen or on paper. Nevertheless, when you are ready to take apart that final design for structural markup, it’s a good idea to take a step back and outline how you want to code a particular component of your site design. It may be a parental outline of the site or isolated instance of a component, but the following questions have been for me a revolving and a necessary requirement for coding with good semantics and creating a baseline for good balance of adaptive and specific style control. 

First order of questions:

• What are you trying to accomplish?
• What are the requirements?
• What does it need to do?
• How can you accomplish it?
• What’s the best approach?
  

Second order of questions:

• Does it need to scale with content?
• How does it scale? Vertically, horizontally or both?
• Will the component be used in multiple instances throughout the site?

Third order of questions:

• How much style control does it require?
• What are the common denominators?
• Which set of markup tags is best for that component? (e.g. DL-DT-DD vs. UL-LI, TABLE or DIV.. etc.)
• What CSS name conventions should you use to allow portability as well as specificity?

CSS Tip: Allow as much global control as possible using predefined markups without having to add instance specific CSS selectors to a particular item to keeps both your style sheet and structural markups manageable.  By doing so, you allow all inheritance to take action and leave the option to selectively apply specific styles as needed.