Thoughts about GUI layout techniques

A remark on Wing IDE wxPython integration page caught my attention today:

"A Caveat: Because Python lends itself so well to writing data-driven code, you may want to reconsider using a GUI builder for some tasks. In many cases, Python's introspection features make it possible to write generic GUI code that you can use to build user interfaces on the fly based on models of your data and your application. This can be much more efficient than using a GUI builder to craft individual menus and dialogs by hand. In general hand-coded GUIs also tend to be more maintainable."

There are two schools of thought regarding GUI layout: manual and automatic layout. Popular programming environments such as VB and Delphi helped to disseminate the notion that manual layout is the way to go. On the other hand, automatic layout tools suffered from a log time, due to the dull results achieved by their application on most situations.

Enter the new generation of Web applications. The clever use of the CSS+HTML+Javascript combination is producing glitzy high performance interfaces that are at the same time efficient, cross platform, and highly usable. Compare that to the now "legacy" web applications -- the same ones that looked so good a couple of years ago; what lessons can we learn from them?

One striking lesson is the relative value of positioning. In layout, positioning is everything. This has led to a school of absolute, fine tuned positioning, that is represented in tools such as Adobe Acrobat and, to a certain extent, in the IDEs forementioned. But the reality of Web design has taught us something important. Due to the differences between web browsers, and also to the inherent limitations of CSS and HTML, it's impossible to bring high precision absolute positioning to the web world. As a result, web designers had to resort to their creativity to achieve precise designs that are mostly based on relative positioning.

The web browser is, for the most part, an automatic layout tool. HTML and CSS have only a limited input here. True high-precision layout engines, such as Adobe Acrobat, could never make as much success due to the very way the web is supposed to work. Relative positioning, as used in today's web design, teach us a valuable lesson: it's possible to strike a compromise between beauty, ellegancy, and functionality in a web world through the concious use of a limited feature set of positioning primitives. In a way, it's the rescue of the automatic layout engines. That leaves us with the question, why don't use the same set of techniques for native applications? That's what I'm studying right now -- how to design native interfaces with GUI libraries (such as wxPython) that use the newest lessons of web design to achieve a good looking, flexible, and high performance result. For it to work, we must go beyond the traditional approach for native frameworks -- automatic positioning, ar at best simple very automatic layouts (vertical, horizontal, or grid) -- towards a vision of the native GUI renderer as a type of "document renderer", that is capable of distributing the visual content in a good layout given a set of layout constraints as based on the document reading flow. We must remember that we're targeting human users; we must design graphical interfaces that read right, and there's no better example of this than the web applications of today.

---

On a related note, it's interesting to note how dated some popular PHP-based applications look today. Countless forums feature PHPforums-based discussions. The default design used by these forums is a tribute to the old style of Web design; cluttered, inefficient, with bad use of white space that forces the user to scroll vertically through long pages to read all the posts. It's funny because a couple years ago PHP-based websites were hot. This is not a problem with the language itself -- I'm sure good designs can be made with it -- but a sign of the speed at which web interface design evolved recently.