Flex Your Layout Muscles

As you may or may not have noticed from the (not so recent) blog posts, the DP development team is totally immersed in Adobe Flex these days. We are days away from completing an exciting new project for Mednikow Jewelers that leverages Flex for both the online store experience and the administrative tools that drive the product catalog. I have been extremely pleased at how rapidly we have been able to build out the project.

So now that my brain is “Flexing” all the time, I have recently started to apply the technology to solve problems where traditionally I never would have thought a Flash-based widget would be relevant, not to mention efficient. At DP, we are very big on process and planning out projects thoroughly. Early this year we built out a robust and integrated prototyping module for our CMS, i3SiteTools. With it, we are able to rapidly wireframe an entire web site for a client and capture page-contextual planning notes all from the browser. This collaborative environment has been met with great enthusiasm from our clients.

The one nut left to crack that annoys me to no end is having to manually mock-up HTML displays to represent dynamically created pages. These visuals are really important to non-technical business users because they have no concept of how their press releases will actually display unless we show them, hence the need for grinding out the HTML mock-ups. The problem is, rarely do we have time to offer more than one possible layout for a given data-driven display like press releases and this does not jive with our desire to give our clients many choices.

Today I struck upon what I think will totally change the way we present these layouts. In twenty minutes I built a basic Flex application that we can use as a layout tool. Using the built in Flex components, I created a simple tabbed navigation interface that our clients will be able use to click through various Flex mock-ups of HTML page layouts. Because Flex is capable of using absolute positioning and the Flash player renders its content the same regardless of browser, our planning team can easily use the WYSIWYG design view in FlexBuilder to mock-up any number of variations on a layout.

In an upcoming blog I will embed this new little Flex widget for those of you who glazed over halfway through this entry and were praying for a freakin’ visual ;-)