Dynamic layouts with adaptive columns
Posted on December 31, 2005
Screen sizes are becoming increasingly diverse as mobile computing increases. While wide-screen formats are becoming more common-place in desktop monitors, with horizontal resolutions beyond 2000 pixels, mobile devices rely on much smaller portrait format screens, and run much less capable clients than their desktop cousins.
Designing for multiple devices is all about future-proofing. It's highly unlikely that mobile clients make a significant impression on your log-files, if any. However, it is undeniable that they will do in a couple of years from now.
It makes sense to develop sites now that'll need extensive coding two years down the road. The internet has proven to be a long-lived medium; temporary sites hang around for years, "coming soons" abound. Here are a couple of techniques that move towards designing backwards-compatible, future-proof documents for multiple devices, with an example of an adaptive document layout.
Bottom-up design means designing for the lowest common denominator. Make sure that all target clients have access to the information and navigational elements being offered.
Use semantic mark-up.
Format using standard HTML elements. Use lists for menu items. Use
h3 for headlines and sublines. Basically, avoid "divitis" - using divs where there is a perfectly applicable HTML element. A
span) element tells us nothing about the meaning of it's content, unlike an
em element. HTML clients without CSS capabilites will still be able to translate this meaning to the user (accessibilty zealots: think screenreaders).
Use well-formed XHTML mark-up.
Even if your document is being delivered using a
text/html mime-type (and the chances are good that it is, even with an xhtml DTD), it makes sense to use well-formed XHTML, and to avoid deprecated HTML 4 elements. Clients will interpret it as HTML with a handful of odd closing tags. When the time comes the mime-type can be changed without having to adapt the bulk of the mark-up. When exactly the time will come is of course open to debate. Explorer 7 won't include support for the
Separate style from content.
Once the basic mark-up is defined and is making sense in a stand-alone context, add all the style you want using CSS. Keep it as simple as possible, which doesn't mean keep it plain.
Avoid hacks - they may cause you headaches later.
The content is split into one "row" div containing three "column" divs. These elements have no semantic meaning and are used only for layout, and have no effect on the layout when CSS is disabled.
adaptLayout.js an object called
adaptLayout is created with the following public methods:
addRow passes an object that defines the row and columns. "container" is the id of the containing div. "columns" is an array of objects containing the column information. "id" is the id of the column. The second attribute is either "mw" for a minimum pixel width, or "fw" for a fixed pixel width. A minimum width column will share the available horizontal space equally with other minimum width columns if it's portion of that width is above it's designated minimum. Otherwise the last column in the row is "wrapped" to a new row. Fixed width columns, as you would expect, maintain a fixed width, unless they are alone in a row; then they take up all available space.
The adaptLayout is initialised using the
init method, which adds on onresize handler to the document.