Layout Flexibility – Still A Requirement?

Is having a flexible layout required anymore?

It is second nature for me to command + while testing out my XHTML and CSS to make sure the text scales nicely and the layout is flexible to wider and longer content. Firefox 3 has been my default browser since it’s been out of beta and I still increase the text-size to check if my layout is adapting correctly. Doing this in Firefox 3 has a different effect then what I am used to and I’m constantly reminded, “Oh yeah, Firefox now does that full-page-zoom thing”.

On a recent project I was working to get an Adobe Fireworks design “sliced” into XHTML and CSS; this time I remembered about the Firefox 3 full-page-zoom. Thinking about what Firefox 3 does, I also remember that IE7 does something similar but not as well as Firefox. Now launching Safari 3.1…, ready, set, command + …aww bummer, just normal text-resizing.

So which browsers are doing the full-page-zoom and which are doing just text-resizing?

Full-page-zoom:

• Firefox 3
• Opera 9
• Internet Explorer 7
• Internet Explorer 8
• Safari 4 beta

Text-resizing only:

• Safari 3
• Google Chrome 1
• Firefox 2

Where’s IE6? It doesn’t really have either type of resizing support. There is a menu option to change the default text size between small, medium, and large, but it isn’t that useful. IE6 still has a significant enough market-share so we have to make sure it works okay, but I don’t think it is vital to make it behave the exact same with respect to flexible layouts (this is possible, but just requires too much time).

With the newer full-page-zoom can we go back to writing our CSS box-model dimensions in pixels instead of calculating the ems? Note: font-sizes should be specified in percentage and em units.

There is an awesome discussion on full-page-zoom over at Dave Shea’s blog, mezzoblue. I would recommend reading this post and going over the comments, there are good points made to the discussion Shea posed. An important note in Shea’s post, WebKit is planning full-page-zoom support.

I’ve been pretty hard-core about emulating full-page-zoom via the text-resizing feature in modern browsers (during the heydays of Firefox 2 and Safari 2) and using ems in box-model dimensions. My hard work was always degraded by the fact that images couldn’t scale, or zoom, unless I did something undesirable.

Here we are, late 2008 looking out to early 2009, where the latest versions IE, Firefox, Safari, Google Chrome, and Opera will support full-page-zoom. I say go for it! Start implementing your (X)HTML and CSS layouts to expect full-page-zoom support in browsers.