For the people, by the people. That’s what Web 2.0 is all about.
As much as Web 1.0 design was concerned with form aesthetics like color, shape, and layout, Web 2.0 is all about function: how the content is organized and delivered, how compatible it is across different browsers and devices, and how valid the code is according to established (yet constantly evolving) technical standards. To drop an overused buzzword, Web 2.0 is about synergy, where a Web site, while standing alone as its own thing, also functions as a cooperative participant in a larger system of other Web sites. Using technology like RSS, the pool of information on the Internet becomes more relevant, readily available, and useful. It’s what the Web was always meant to be in theory.
Things have been moving fast in the WordPress world, with its open source community providing the much needed muscle to code software that takes full advantage of new technologies. Along with plugins that extend the stock functionality, the coolest recent inventions are these little things called, arbitrarily, widgets. They could just as well have been called thingamajigs or doohickeys. A widget is a modular piece of code that does something specific. While their advantages are transparent to the end user, widgets provide tremendous advantages for the publisher, streamlining Web site management by introducing flexibility that we’ve never seen before. To a certain extent, we can now move things around, add new features, and tweak things without needing to go in and hardcode PHP files.
I finally started messing around with widgets the other night. However, I was in a situation where my previous set of template files — which have been live for a few years now — outdated widget technology and rendered my theme “not widget-ready”. This forced me to back up, start from the ground up, and build a theme that was capable of using widgets.
So that’s what I did a couple nights ago. I just jumped in there and winged it with the ultimate goal of getting my widgets on. And it worked.
Then I woke up the next morning and noticed that the result of my work, while now widgetized, completely contradicted my design taste and evangelical opinions on minimalism. There was just way too much going on; I had three columns, I still had my categories and archives up front, and there were things about the code that were less than tight. It already looked old, and it hadn’t even been up for 24 hours yet.
Back to the drawing board. The slight annoyance I felt by looking at the new stuff a day later was enough inspiration to jump back in last night and burn some midnight oil. But this time, while getting widget-ready, I was focusing on a minimalistic approach, tightening things down, keeping things clean and free of clutter. Note that there’s a difference between minimalism and simplicity. While adhering to minimalistic sensibilities, there are still some fairly complicated functions that I wanted to play with.
On the topic of minimalism and Web design, Dave Eggers puts it quite nicely:
What very few designers realize, particularly the younger ones, is that most people would rather read something—actually read the words—than look at all of their lines and arrows and silly pictures they’ve screened back.
When the words finally reach the reader, the designer has, as often as not, rendered them almost unreadable, and so a reader moves on. But we’ve always felt that the words don’t need a whole lot of help—that a piece about searching for tigers in Ireland is not necessarily needing of a picture of tigers or of Ireland, much less blinking or screened-back ones. The words are enough, if the words are good.
True enough.
So starting from scratch, I found a template created by a developer named Chris that promised to serve as a perfect starting point. I was very impressed with his nitpicky convictions about the importance of clean code; they reflect my own personal feelings about grammar.
I spent a few hours hacking the thing to shiz, ending up with something that works in my situation. I started out by setting the thing up in two columns based on the Golden Ratio, with the main column being 1.618 times the width of the sidebar. (Phi.) One thing lead to another, and I ended up needing to shave some pixels off here and throwing them over there and what not. So it’s not exactly 1.618. But it’s close.
What’s new (an unfinished list):
Widgets. All components in the sidebar are now widgetized, making my life way easier. I can move ’em around, I can take them off, and I can add new ones later. New dynamic widgets include Recent Posts and Recent Comments.
Archives. With the monthly archives now reaching the three year point, it’s time to pull them from the main template and throw ’em into their own page and out of the way. Archives can be browsed by both month and topic.
About and Contact pages. Structurally new, giving me more control over their content and how they’re delivered through the template.
Search. This is one of Chris’ custom widgets that’s pretty cool. No button required.
The PHP and CSS code. It’s killer. Chris did an awesome job, focusing on optimized SEO capabilities and spotless, valid XHTML.
Special Post Styling Elements. There are now elegant treatments for traditional in-post styling elements like Unordered Lists, Ordered Lists, Definition Lists, Sub-headlines, Blockquotes, Pullquotes, and Code.
Pullquotes are kinda like blockquotes, but different.
Pullquotes. Cool. The cousin of the standard blockquote, where the quoted text is wrapped up and selectively thrown into a paragraph with the ability to align it either left or right.
em-based sizing. This is new to me, since I’ve always thought of things in terms of pixels. Unlike the absolute values of pixels, em-based sizing is relative, making for an infinitely scalable layout that can accommodate visually-impaired users. Chris also took extreme care with things so that everything strictly adheres to a typographical grid. Very smart design.
Navigation. For each single post, you can browse through Next and Previous posts, with the title of said posts displayed as the links.
RSS feeds. Separate feeds now available for both entries and comments.
So that’s where we are today, with more to come. Ready to rock through 2008 and beyond.
Comments on this entry are closed.