View Full Version : Layouting web applications

11-21-2008, 02:17 PM

There is a lot of articles/tutorials/threads about layouting web sites, but I couldnt find solutions how to layout web applications.
By web applications I mean highly dynamic(javascript, ajax) web applications which looks like typical desktop applications. By web sites I mean sites like information portals, company home pages etc..

Someone could say that this is the same problem (since we have the same toolbox: html, css, java script) but in my opinion threre are few differences which are important and makes this two things different:

1)web sites are less dynamic then web apllications
2)one of the most desirable feature when building web apllications are components (form components, layouts, panels, etc). This components should be used the same way no metter of context (context=if parent component is div, table, is is floating or not, how is it positioned etc..). This components should be reusable across many web pages in single web application and across different web applications. They should be independed from parent components.
3)there are many good reasons why not to use tables for layouting web sites which are unadequate for web applications (accessability, search engines support, mixing semantinc and presentation content, etc...)

Of course there is more diffrences beetwen layouting this two types of web pages (web application and web sites) but I think this 3 are the most important.

I would like to ask you, do you think that web applications should be layouted(or is it possible) with the same guidlines as web sites ? Why Im asking ? Because after few days of tryouts Im close to belive that it is imposible.

The biggest problem(for me) is with replacing tables with divs.I understand benefits (most of them has no value when talking about web applications) of using divs but I think that thay dont have few of table (table cell) properties wchich are extremaly important in highly dynamic web applications.
What properties Im talking about ? Positioning and sizing.

I dont want to go into details but as a example: how to build border layout component with divs (without Javascript).This component can be nested inside other layout components and should work in 3 modes:
-fixed size in pixels
-fixed size in percentage
-autosize to content

Whats more, center 'panel' is the most important and if other panels (left, right, top, bottom) are empty it should take whole free space, but if we add/change size (with Java script) of some component from other panles center panel should take back some space to this panel.
Tis is extremely easy to achive with table (3 rows, 5 cells, with height=0% and width=0% set to panels different then center) and almost imposiible to achive(for me) with divs without JavaScript.

This is only one of many issues Im struggling when I want to build web components with divs and I started to wonder if abonding tables in this case has any sense.

Waiting for your opinions.
Regards Daniel

11-21-2008, 03:33 PM
I only scanned your post but it looks like you are saying you still advocate tables for web applications because it's easier or not possible with positioning.

I disagree from the point of view of one who creates web applications. Positioning of elements, or styling of elements, has nothing to do with content for the most part. One can create a graphical layout of a web page before coding even begins. I prefer to see the graphical layout before I start coding because it shows me the requirements of the page. I only have to keep in mind groups of elements when they need to be kept together but, even then, one can take any element and position it anywhere on the screen, and even change that without any change in the dynamic coding.

Tables, however, fix elements to a predefined grid and make it difficult, nay impossible, to move then without recoding of the application. A lot of difficulty can arise when the coder is trying to make his program code do the layout rather than concentrating on the interaction alone.