Get it All

I think that there is a natural and inevitable tension in web design between the designer’s desire to control how information looks and the constraints of browser vagaries and inconsistencies. Those of us who have been designers for a while already know the story: browsers built with flexibility and error-correction in mind created a web world where even playing by the rules doesn’t always mean getting what you want from your design out of all browsers. The solution in many quarters of the Internet – and this little website, no less so – has been to fix the borders of the website and eliminate the elasticity of HTML as a possible threat to consistency. Recently, however, I’ve begun to think differently on the issue of elastic web design and thought I’d post a little some of my ruminations on the subject.

It is an irony that, as the Internet and computers have grown up and evolved together, web design seems to have grown apart from its parent technologies. “In the Beginning…” as the phrase goes, web pages were nothing more than a digital expression of standard print text. Browsers were meant to “browse” documents like those out of an online library that were largely text-only works and HTML was designed to be fluid in its rendering. Pages were expected to be able to flow across the screen…. all 640×480 pixels of it.

Computers have gained in complexity since then. Internet web pages have gained enormously. Most experts credit each with pushing the other: computers would not be what they are today without the Internet and the Internet could not exist in its current state without computers and Internet connections that could support it. As the web has become more and more of a visual, graphical medium, it has become more and more commonplace to see sites designed with fixed widths. Some of the biggest names on the Internet, from Twitter to Yahoo to FaceBook, all use fixed width pages to deliver their content to their customers.

But the reality of the fixed-width page is that it is now directly at odds with the current state of technology in computers, and has been at odds with it for some time. Whereas in the past, monitors all used the exact same proportional dimensions, today monitors can be quite different from system to system. I’m currently writing this post on a computer with a 20″ widescreen monitor, 1600×900 resolution. My wife’s computer behind me is a standard-size monitor running at 1024×768, the resolution generally most common on the Internet and the one most commonly designed for. Should a web page really demand a single proportion? A single resolution?  Does that thinking really make sense given the huge variation of screen sizes and resolutions currently available? Why would an Internet that has always pushed the bounds of what my computer does leave me hanging with all that wasted graphical space? When I view FaceBook, I get the impression that I wasted a third of my money on extra screen I’m not using.

And so while this specific blog does not currently match my new thinking, the home page of this website definitely reflects what I consider to be the next new reality in web design: that designers aught not to be responsible for robbing their viewers of the monitor space they paid so much money for. I think it’s time to open up the margins of our web pages and find new ways to express our creativity that conform to the new world. Creating bigger pages with wider margins is not adequate; the real answer is to build for fluidity.

My home page is built around the idea of the two major graphical elements of the page seeming to flow from outside the margins of the screen. The white curvy thing with the blue border and the grey box both extend beyond the page. But if you prefer a border to your site – they’re nice for adding a bit of null-element color to make the content pop – then the choice is to use a percentage width or else a block main element with both left and right margins (margin: 5px 20px; for example). There are many more solutions available for the ingenious web designer.

Fixed widths and backgrounds are not going away. But I think that if you consider it, you will come to the conclusion that the courteous use of the space given to you by your audience makes good usability sense and good viewer relationship sense.