10 points to be covered when converting a design to html

10 points to be covered when converting a design to html:

1. Site Architecture should be well communicated among
   
   • Stakeholders
   • Designers
   • Developers
   • QA Dept.
2. Define those modules which are repeating all over the website more than 1 time and write styles for those modules with “id” instead of applying classes on them

   Reason: This distinction will help you to keep the views different because as we studies about id’s and classes that id’s we should and can use once in a page and classes can be used many times. So every different id will refer to a different style and layout.

3. Use <ul>/<ol> and <li> tags for listings, good practices now a days for even header menu, categories menu and footer menu too.
4. Don’t forget to start your html with “wrapper” div and style “margin: 0 auto”. The reason is resizing of browsers will not affect the website’s position.
5. Either you have to use background for input buttons, don’t use hyper links for this purpose. Prefer to use <input type=”button” .
6. Try to maintain hierarchy among important and less important headings, even sub-headings respectively.

   e.g.

   <h1> Most important or the main one

   <h3> Less important or the second one and so on up to available tags

7. Never be specific about height and width of the inner div’s but the outer div’s because if ever you will change your outer div so inner div will require clerical job again to set them accordingly. It is suggested that use unique specific height and width once and then use one of the following to continue further:
   • width: inherit
   • height: inherit
   • width: 100%
   • height 100%

etc.

8. Never forget special cases which can change your layout in development process. For that situation you have to either ask your team about the length required for home page, left menu, right menu or bottom content modules. Mostly proposed design does have a specific length and gradient applied rounded corner box which doesn’t justify its existence and can’t be extended according to more text.
9. Try to avoid putting classes or ids on html tags every time. Like if you are working on contact us page so make a div with id=”contact_us” and then target each html input field and even labels with reference to the above mentioned id.e.g.

   #contact_us input

   {

   ..some styles

   }

   #contact_us label

   {

   .. some styles

   }

   #contact_us #submit

   {

   ..some styles for submit button etc.

   }

   It will give convenience to the developers when they will increase or decrease the no. of input fields. Instead of applying particular classes or ids to every input field. Suppose you have a 20 input fields form then?

10. Finally for the images, it is suggested that
    • Set border:0px for all over the website as general class.
    • Use alt tags, better practice while writing html so developer will fill it as well
    • Gallery images or any other content area images should be with one of the following tags
      • min-height:100px;
      • min-widht:100px;
      • max-height:200px;
      • max-width:200px;

Reason: Because if you will implement square dimensions to all images, it will either give an old fashioned look like we had websites in 1997 or will lead towards client’s dissatisfaction.

Suggestion: It is suggested that you create a nice background for images. So images will fitted in it either small, large, vertically large or horizontally wide.