Webpage layout giving you headaches? Then get rid of it!

Jeremy Pratte
December 16, 2011
User Experience Design

responsive design layoutNo, you did not read that headline incorrectly. Yes, I am actually advocating ditching layouts altogether. No, I have not recently sustained any type of head trauma. Am I crazy? Maybe. But that’s a subject for a different post.

To understand why I’m saying this, let’s look at the current situation in the web design and development world. Cross-browser support, first of all, has long been the bane of a web designer’s existence. Netscape, Internet Explorer, Mozilla/Firefox, Safari & Chrome (Webkit), and yes sometimes Opera; we’ve had to support them all, and at times several different versions of each. This is nightmarish enough, even with Opera support rarely a requirement and Netscape being dead. And do not even get me started on IE6. Anyway, we’ve fought a long and hard campaign against this foe and finally we began to see a light at the end of the tunnel with standards becoming more and more… well, standard; most of the few bugs we still encounter with this in Internet Explorer, most of them in versions 7 and 8.

And then something changed. Just as we were making progress on that front a new enemy began attacking us from behind: DEVICES! Yes, while we were finally getting the browsers all browsed, our floats floating, our fluid layouts laid out, and experiencing the ecstatic joy of web fonts and JQuery, along came the army of smart phones. Then when we got our bearings and started fighting back, this new enemy cruelly sent another wave – tablets. And with yet another wave frighteningly perched at the cliffs above us – internet-ready video game consoles and DVD players – we need a radical new strategy or we’ll be slaughtered.

It’s always been hard to keep up with all the current practices and technology in this biz, it’s the nature of the beast. But Moore’s Law is starting to kick our rear ends. The faster technology moves ahead, the faster it moves ahead as new innovations build on previous ones. Responsive Design is the latest and probably best try at a solution as web pages need to be tailored for smart phones and tablets as well as still keeping desktops and laptops in mind, even though web surfing is moving at an exponential rate away from those and to mobile devices. The quickest way to sum that up is basically making your layout responsive to the devices through using percentages and media queries and fewer fixed sizes. Included in and/or related to this are issues of whether or not to make separate mobile versions (or trying to listen to those saying “There IS no mobile web!”), or separate tablet versions, or just making minor adjustments to a normal layout to make it more mobile-friendly. The point of mentioning all this is things are quite unstable lately; it’s hard to settle on a strategy or set of practices for a significant period of time.

As I was thinking of this problem recently, a pattern emerged. In each and every one of these tried and not entirely successful solutions, the root problem was the same: the layout. Different layouts, responsive layouts, tweaked layouts; it’s all about the layout. This is the foe we keep stepping into the ring to wrestle with. I say, let’s abandon the pile-driving, put down the folding chairs, and stop fighting it. I really am starting to think it’s not worth it. We keep pitting our layouts against the layouts of the device browsers and we’re either losing or barely maintaining a stalemate. It’s eating up energy, time, and budget.

Those of you who are still with me and haven’t rolled your eyes and went back to tweeting and Facebooking might be saying “Well, OK, maybe you have a point, but how the heck do you get rid of the layout?! What does that even MEAN?”

First of all, this probably doesn’t mean actually getting rid of a layout entirely. Yes, I tricked you a tiny bit to prove a point (you might have a very minimal layout in two rows, one at the top with a logo and everything else in a second one). The best way to nuke the layout that I’ve thought of that has the most potential (people smarter than me might come up with something better) is to utilize free-floating list items. In this scenario, you design the elements, not the layout, and let whatever browser or device lay it out as it pleases. You might want to set the width of each element to the smallest screen size or resolution you want to support, or perhaps keep some semblance of the responsive design strategy in the form of a few media queries for tweaking – or do both. List items are actually pretty powerful tools at your disposal for a variety of solutions to web design problems. Long ago we discovered that throwing enough CSS at them made them perfect for navigation – much better than table cells. You could have even used them for entire column layouts.  But what I’m proposing here is using their natural ability to order themselves to replace a layout.

For anybody still skeptical I want to emphasize a point I’d made earlier: it’s about designing the elements rather than designing the layout, whereas each element would represent a different message, or call-to-action, or content piece, or navigation item... or each item in its entirety could be clickable to a page or modal with more information. I could go off on a tangent here about other ideas like designing the content or nixing the idea of navigation completely, but let’s stay on track.

The key to this working well is having a great theme strategy, nice patterns, and a killer branding strategy and an eye for how these elements will play and look together whether they’re laid out by the browser in two rows of three, three rows of two, or one in each row as might be the case on a phone, or whatever, depending on how many elements there might be. This is where you still might want to employ a few media queries for tweaks as you might end up with imperfect margins or padding, depending on the screen. This may sound very difficult, maybe even impossible to some because of the fear that you’d be sacrificing coherence, but I say think of it as a creative challenge.

What I’m proposing is indeed practically a totally new way of looking at things. The paradigm shift could be traumatic for some – maybe you should keep a paper bag nearby to breathe into just in case. And it may not even be feasible depending on what your clients – or bosses – want. You’d have to convince them that it could save time and budget and please the mobile and tablet users, who are ever-increasing in number.

But before you try to convince them, first you must convince yourself.

comments powered by Disqus