Inspired by a recent comment on my last blog, I've taken David up on the webpage wireframe and prototype tutorials he found. Both of the articles seem to be geared towards actual graphic designers or user interface designers that have very little or limited knowledge of javascript; and almost no knowledge of the server side of their applications. But nonetheless, there was some really good info in there.

From what I gather, a wireframe is just that a wire-frame. It should purely consist of a layout, with the possibility of some actual production CSS in the page. The articles suggested that there are two main ways to do this:

  1. Create a page for each "flow" of your application.
  2. Create one page with a "stacked flow" of your application.

Basically, a flow is the various screens/interfaces that the end-user will be presented with. They give a nice "login" example (one which I actually made one of my own as well) with a "stacked flow" wireframe. You can see my example of that here. Comments are welcome, but keep in mind:

  1. I'm not a graphic designer
  2. This is my first crack at this
  3. It's 2am... and I'm making wireframes...


Wireframe Maddness!

Needless to say, that's kind of how I feel at the moment. The actual prototype, which I plan on using YUI for will probably come out tomorrow or sometime next week.

The reason I actually went through and made a wireframe, is because I'm attempting to get some sort of side project going for myself (yet again...) so I can play around with some new things. These things being YUI; as mentioned above, Python; which I've been somewhat getting into and web frameworks - namely Pylons. So tonight at least I got some wireframes done for the login, the next step will be to learn some YUI and get some fake data going for the prototype.

Lastly, I (possibly re)learned some interesting things today regarding CSS. As you can see in the source for my wireframes, I'm actually using display: table. Insane! I've never actually used that, ever. I initially had a pretty descent layout, but when looking at it on my Nokia N800, it looked completely borked! So the only way was to make div's within my login box actually span set percentage widths.

Now you're probably saying, whoa! Just set a width on that puppy and your good to go. Wrong! Since I wanted somewhat "tabular" data, consisting of two rows, and two colums. Each row being 100% the width of the box and each column being 50% of the row, there was no way to do that using pure css and not using tables. This is for two reasons:

  1. Div elements are initially set as display: block. This means there is a line break before and after the element. So there's no way to have two "columns" side by side.
  2. Inline elements (or elements set to display:inline!) do line up side by side; however!, they will only take on as much width as they need, and don't respond to width: styles. They may use the width attribute in some browsers, but not what I was testing it in (FireFox 2).

So I came across an article talking about using display: table. And really, it couldn't be simpler. Parent element needs to be set as display: table. The children of that needs to be set as display: table-row. And the children of the rows need to be set to display: table-cell. The only downside, is there is absolutely no support for colspan or rowspan in css or the markup. Even if they did work, it looks like the CSS for those will be depricated in CSS 3 and replaced by some other multi-row/column attribute.

So all in all, a night of learning pylons, which I'm really starting to like. And hopefully I'll keep cranking out these wireframes/prototypes and get good enough at them so I can actually use them in my daily work. And although I'm posting more now... I hope I don't make a habit of posting at 2:30am : (. Next time I'll hopefully have some stuff on prototypes to discuss.