Wednesday, May 13, 2009

Building HTML Proto

There are number of ways you can gather requirement. Prototyping is one convenient form of capturing requirement. Most of the time client get more ideas and opinions when they actually gets to see the application. While building proto they get to see how the final application would look like. As against other approaches, some of the non-functional requirements are also captured - e.g. look and feel, user experience, navigation As it applies to any other mode of requirement gathering, it has some limitation as well.

It will be useful to finalize a few things before we start building html wireframes. I have tried to list down a few below.

Development Tool

We would use Macromedia Dreamweaver for developing this prototype. We would use the template feature of the macromedia to build UI templates and build the pages based on the UI templates. This would ease development effort when changes are required to be made.

Dev Toolbars - for IE, Firefox (firebug, YSlow), Chrome and Safari must be installed

Standard
  • All page MUST be XHTML compliant. Use below DOCTYPE,
  • Since the DOCTYPE is XHTML, you are likely to face issue with the javascript body while validating HTML. To avoid any issue with the javascript, need to mark the javascript body using CDATA as below sample.
<script type="text/javascript">

//<![CDATA[

function helloworld(){
}

//]]>
</script>

Directory Structure
(below is my style, you can ofcourse define whichever makes sense to you guys)
ROOT
-- _styles
-- _scripts
-- _images
-- _templates
-- <modulename>
-- index.html

Source Control

It is important to decide, configure and enable source control before even we start anything.

Compatibility Requirement

It is important to start worrying about the browser compatibility from day zero. In my project below was the documented decision.

MUST BE COMPATIBLE with major browser list below

  • Safari.
  • IE - 6,7,8
  • CHROME
  • FIREFOX

Important this make decision early as this would have severe impact on the testing as well.

Reset CSS
This can be handy when we are looking for cross browser consistency.
Javascript LibraryMake 3rd party library calls earlier and start using in the proto itself. Probably we can reuse some of the code blocks.


  • We would use JQUERY