Just about the time it’s become almost trivial to create rounded corners, Facebook suddenly decides to go back to its originally boxy, “razor cut” look. In the announcement, the Facebook design team reveals its priority:
Since we introduced rounded corners to Facebook, their consistent use has been spotty at best. The corner radii vary, and it sometimes feels arbitrary which corners are rounded and which are not. Additionally, they add an extra layer of complexity to the code (note: IE, please add support for border-radius).
As part of the effort to simplify our visual style, the design team recently decided to go back to our square corner roots. In doing so, we hope to champion cleanliness and the razor cut look that Facebook is known for.
That’s choosing consistency over the popular choice to go with rounded corners just because it’s a recommended design pattern. Not everybody would have the guts to do that.
Heck, it takes guts for Facebook to keep tweaking its interface, because at each turn it’s spurned so many protesting groups that keeping track of which one is against which feature becomes futile. For all we know, new groups protesting this rollback will surface yet again.
But Facebook always knows what it wants, it seems, and always sticks to its guns. Given the current design trends—from “Web 2.0″ gradients, candy colors, large fonts, and rounded corners, to Apple-inspired interfaces, to the highly detailed grunge and Victorian textures—would you, as a hypothetical head of the Facebook design team, have come up with something like its current look? Or would you have changed it? Save for the already-gone rounded corners, people wouldn’t have pegged this site for a spawn of the Web 2.0 era. It didn’t feel the need to look like one. Its features already spoke volumes.
Let’s talk feature redesign. The most controversial one so far, which put the status updates on the homepage, has also redesigned the social networking design pattern as a whole. It’s not just a copycat of the Twitter or FriendFeed (which it just acquired) interface, but emergence of the Real Time Web had a lot to do with it.
Back in the glory days of MySpace and Friendster, Facebook had a chance to copy its ability to ultra-customize profiles with custom CSS and background images. And there was a time when FB’s apps messed up profiles that things almost looked as horrible as any MySpace or Friendster page, but Facebook once again swept in and prioritized consistency. Over total freedom.
Facebook always seems to be choosing the unpopular, unconventional path, but it’s now the most popular social network on the planet, and the 3rd most popular site in the world second only to Google and Yahoo! They must be doing something right.
In the left corner: Tyler Tate’s 1KB CSS Grid, a lean framework sporting 14 classes and the familiar conventions for enforcing a visual grid via CSS.
In the right corner: Vladimir Carrer’s 1-line CSS Grid, an experimental framework sporting a single class to cut nested column widths in half. The solution is mindblowingly brilliant, but does it work? Design tends to work in thirds, not halves. You decide.
Whether or not it’s a coincidence I chanced upon these two extremely simple CSS grid frameworks just days apart, news of these two solutions makes the CSS framework “scene” a lot more interesting. And accessible. I can imagine many front-end developers shying away from heavyweight frameworks because there are too many features, most of which won’t be utilized, and there are too many conventions, most of which aren’t easy to remember.
I’m not even going to get into how using these frameworks leads to unsemantic, presentational class names and lots of <div> soup reminiscent of <table>-based layouts. Let’s just be glad people are streamlining the application of design principles for the Web, namely grid layouts. When a better way comes out—maybe it’ll be display:table, maybe it won’t—we’ll adjust then.
In the meantime, we need to let our arsenal evolve. Balance out the spectrum with lightweight frameworks like these. Then add diversity as well. Look at the Javascript libraries—the tiny moo.fx, the venerable Prototype and Scriptaculous, and the designer darling jQuery—each one caters to a specific need. What other kind of grid frameworks do we need? Fluid? Do-it-yourself? Highly reputable? Unobtrusive? Oh, what will they think of next?
All the hoopla over Everything You Know About CSS Is Wrong!, a book by Rachel Andrew and Kevin Yank (see also the Digital Web article) is making me feel uneasy.
We’re not wrong; the title is wrong
I detest the title of the book. No, I don’t think “everything” I know about CSS is wrong. I “know” about the display:table technique for months now (thanks to Sitepoint, again).
Neither do I think it’s a good idea to go around belittling people by telling them they are wrong, whether in printed book or online article format. It’s harsh and misleading.
We’ve got issues
As for the CSS Tables technique presented in the book, these are some of the issues plaguing it:
- tag soup
- lack of source order control
- the question of semantics and presentation vs. content: is making
<div>s behave like tables/table cells any different from using tables as layouts?
- IE6 and IE7 incompatibility (no surprise there!)
And not too long after the uproar, the authors have addressed the above problems:
Andrew Tetlaw responds to #1 and #3:
No one is negatively affected by the overuse of structural div tags. The same can’t be said for the use of HTML tables for layout.
And here’s an interesting quip which points out the very valid woe of web developers, who have had to adjust to all these changes in coding conventions because of our “flakiness”:
Congratulations on years of punishing web devs for using common sense. Finally the circle turns, but somehow you think that you were ‘right all along.
Matthew Pennell of Digital Web has this to say about those who question semantics and standards:
I must say that I’m surprised that an audience of (presumably) conscientious, standards-aware developers are almost all declaring that they will not use new features of CSS when they are available and supported. Are you all so short-sighted that you cannot see any application for the techniques discussed here beyond wholesale replacement of site layouts?
And Rachel has written this regarding #4:
Some commentators have suggested that we shouldn’t have put a book out about a technique that can’t be used immediately, that will require workarounds to still provide support for older versions of Internet Explorer. I disagree. Something I point back to in the book is how the web community began to use CSS for layout even though support in Netscape 4 was limited and buggy. If those of us who were building CSS layouts right in those early days had said, “nah, it doesn’t work in Netscape, can’t do it”, then our recent history would look very different.
Are we hesitant about change and innovation?
In a sense, browser usage does “cripple” our ability to look towards a future of web design innovation (and bliss) when IE6 is finally disappears. But are things right now are exactly the same as when Netscape Navigator 4 was the stumbling block?
More importantly, will the CSS Tables technique actually push our level of innovation by a significant degree? The past few months of new websites tell me innovation is not too hard to come by still.
And what about next-generation HTML5, which will have new structural tags like <header>, <section>, <article>, <footer>? Can one not feel guilty using all those <div>s in the midst of these elegant new tags? Perhaps that’s another debate for another day—in 2022.
I’ve written about emerging gallery-style websites like image bookmarking and information design. Here’s yet another trend: niche web design inspiration galleries. Here are examples of those classifications:
Most of these sites aren’t really new, except that enterprising webmasters are coming up with new categories more often—seemingly every week!
Do we really need new sites for all these categories? I would say yes. Despite the presence of categories and tags, custom search engines powered by Google, gallery aggregators like Most Inspired, you can never have an excessive supply of inspiration.
Plus, visual search using mere keywords is still ineffective. Usually because there isn’t enough care given into describing images. You can never really tell how many tags you can add to properly describe the look and feel of a website.
In fact, since websites are basically interfaces and not just 2-dimensional designs slapped onscreen, showcases and galleries should also focus on their interactive elements. That’s probably where pattern galleries like Pattern Tap comes in.
This comes as a surprise. Aux of Cogent Metal is vehemently against webpages that have narrow layout widths. And I thought web designers are now more worried about the opposite: the wide layouts that whip out the horizontal scrollbars in resolutions narrower than 1024×768.
This is another proof that you can’t guess every possible reaction to a design pattern. In this case Aux would rather have wide layouts because it would mean a larger area to present content. But what can you do about someone just like Aux, but who believes the complete opposite?
more
