Constraint Based Layouts THE TEST!

Ok, I just started yesterday to layout the template or backbones of the Mamma's Hands website. The current site and design can be found here http://mh.realwebstrategy.com and because I am no graphic designer I kept the graphics in tact mostly. I added a background image and kept everything else intact, even the stretch to fit your screen layout that I prefer for sites that tend to have a lot of content.

Here are the stats:
Old HTML/CSS style

• HTML index page: 75 lines of code, some very long lines
• Supporting css file: 91 lines of code, difficult to manage
• Compatibility: Most new browsers support the styles, some problems and tweaks for ie
• Time in creating code: 10+ hours counting all the revisions for compatibility issues

New Flex style

• Flex MXML file: 46 lines of code, very short lines and easy to read, I did most editing in WYSIWYG mode that made the process very quick and painless
• Custom ActionScript Component 30 lines of code (I will cover this next post)
• Compatibility: Once the user downloads FlashPlayer 9 100% compatibility for 9 and all future versions of flashplayer (even Apollo)
• Time in creating code: 3-4 hours very low considering this is the first flex application I have crated and actually cared about the look.

Obviously I was really impressed by the ease of laying components out on the page, Flex Builder 2 includes lots of useful containers such as vboxes and hboxes (for very-much improved html table layouts). These containers as well as the wealth of styles available for each component and container made this project quick, easy and rewarding.

Here is the completed layout if you want to take a look:
http://mh.realwebstrategy.com/flash/first.html
Here is the original
http://mh.realwebstrategy.com