Jul
The Web 2.0 concept has been around for a while (coined by O’Reily Media in 2003) and it’s basically synonymous with community driven accessible web sites / web applications.
One of chief characteristics of Web 2.0 websites is the layout. Web 2.0 design pushes for simplicity, with large fonts and a lot of empty real-estate. The use of colorful icons to spice up the design is common. Another common feature of web 2.0 pages is the obsession with Rounded Corners. As most web developers will tell you, Rounded Corners are a thorn in the backside. They look good in photoshop, but when you need to make variable sized containers with rounded corners against gradient backgrounds (another hallmark of web 2.0 design), things get messy.
The Octabox development team has too sinned the rounded path, incorporating rounded corners into most graphical elements, spending countless hours trying to come up with the ultimate solution to make it work against a background gradient pattern, allowing for drag-and-drop rounded corners windows that will look good over any surface and what not.
Many web articles were written on the subject of rounded corners, some of them offering a JavaScript solution, most offering CSS solutions with images, and even completely CSS solutions.
This post isn’t intended to discuss CSS techniques for rounded corners (personally I recommend this solution for stylized corners or the nifty corners solution for simple rounded corners, like we use on this blog). Rather I would like to make the outrageous claim that web 2.0 is actually (or should be) about Boxes.
I’ll digress for a minute and say that rounded corner graphical elements have their place. They are aesthetically pleasing, and give a slicker, modern look to designs. However, the fact alone that its not supported directly in CSS (at least, not in the still dominant IE6 and it’s sibling, IE7), makes applying rounded corners contradictory to the simplicity that drives web 2.0 design.
Lets have a look at some layouts:
First up is Digg, web 2.0 incarnate:
Digg has a very web 2.0 design, with rounded cornered elements abound. Personally I like Digg’s layout a lot. It’s clean and bright, and since its relatively simple rounded corners can be implemented relatively easily.
Next up we have Octabox Web Platform, Alpha ver. 0.45:
Octabox currently has a very application oriented design. Even so, plenty of rounded corners elements are to be found, giving a more streamlined and slick feel to the interface. Being the one that implemented all of those corners let me tell ya, it was no joy ride. Take a look at this:
Those inverted corners were a pain! and also to make it so a variable number of buttons could go there and everything being all dynamical and whatnot. But Octabox is a much more of an application than a site (and it’s also under some redesign, so things might change).
On the other hand lets see some creative use of both rounded corners containers and boxed divs:
I call this Moving Site 2.0. This is actually a design made by fellow Octabox founder, Adam Benayoun. Some creative use of colors and borders makes the boxed divs look very appropriate, combined with the minimum obligatory rounded corners at the middle.
Lets see some more creative use of borders and colors to spice up boxed divs:
This is a draft for a an art school web administration interface, designed by fellow Octabox founder Tal Zubalsky (we sure get around here at Octabox). I find it very aesthetic and certainly easy to implement using just plain CSS for the containers.
So basically what I’m looking for in design is balance. Rounded corners have their place to spice things up, but they should not end up being the major graphical element in a design. A common content container should generally be a plain old box (with some gentle CSS enhancement of course) and not several nested divs or (Gulp) a table, just for adding some roundness around the edges.
