warning: Creating default object from empty value in /home/kourge/ on line 34.

Flayout: Flexible Degrading Layout

Some time ago, I read an article that described a smart dynamic layout mechanism for web pages that would gradually hide and collapse certain elements of the page as the browser window is resized. Unfortunately I can no longer find the article (I'd appreciate it if someone points out where it is), but I thought the idea was great. In this era of awesome JavaScript libraries, it's trivially easy to implement this mechanism. So I took the liberty to do just that on this site.

On a resize event, it would check the viewport width and height, and, depending on what range it falls in, it would hide or collapse elements accordingly, gracefully degrading the layout. A technique that I dubbed "intelligent switching" was used to determine which range the width and height falls in, elegantly. To me, that means not resorting to a chain of if statements. I'll talk about intelligent switching in another article, but for now, below is the list of ranges and what happens when the viewport dimensions fall in that range.

When Width Is Below (px) This Happens
875 Right sidebar disappears.
700 Service links disappear.
550 Pine trunk on the right collapses. The navigation and breadcrumb bars disappear.
When Height Is Below (px) This Happens
500 Breadcrumb bar disappears. Navigation bar shortens and floats to top right. Header region collapses.

When the viewport dimensions move out of range the changes reverse. Flayout is working right now, live on this site, so try it out and see for yourself how it works. This has been tested and known to work under Firefox, Opera and Safari, and it isn't working under Internet Explorer, yet. I have yet to debug this under Internet Explorer. Someday, I'll do it.

Syndicate content