OMA: One Month App

Simplifying the interface

As I started to build out the initial design mockup into HTML/CSS, I realized that I was going to need to simplify a few things in order to accomplish everything I wanted to do with the interface. I wanted the interface to have a flexible width to accommodate different screen resolutions but mainly to give room for cash flow charts with big numbers and longer income and expenses titles. In deciding upon a flexible width, I realized in order to so with the rounded corners and gradient background, I was going to have to have a ridiculous amount of markup. Also, to be honest, in order to make the layout "bulletproof" I'm not even sure it would be possible. (If anyone wants to try, I'll gladly provide the PSD file.) Here's a screenshot of the revised interface buildout.

From the above graphic, you'll notice that we got rid of the rounded corners, and I shortened the gradient background to just the header. This gave a much cleaner look while making the markup just a mere few lines for the main template:

The layout did loose some prettiness, but I think with the simplification of the interface and markup it was worth it. What do you think?

Next up, I plan on writing a post on some of the finer details of the markup in regards to the main cash flow chart. I had to freshen up my knowledge of tables on this one!