Design Focus

Friday Focus 08/29/08: Texture and Personality

This week on Friday Focus: websites with a fair amount of texture and a lot of personality.

Designs of the Week


One good way to draw attention to the works in your portfolio is to make everything else grayscale or muted. That way the colors in your showcase really pop.

Långgatan 3a

The background texture takes a backseat to the colorful and carefully designed illustrations on this blog. It does, however, tie in well with the general feel of land and sea, maps and navigation, kitsch and cozy.

Ollie Kavanagh

Now this site seems to be the complete opposite of the previous two—it’s dark, it’s bold, and it’s got a lot of stuff going on. Yet nothing is out of place, and the use of transparency adds an interesting twist to the familiar formula of splatters and handwritten text to represent grunge.

Social Media Weekly

Design75 Powerful Adobe Fireworks Extensions – It really can be as Great as Photoshop!
A long list of add-ons that can transform Fireworks into an even more powerful graphics program.

Replicate the famous parallax effect with the help of jQuery and this script. Check out the delightful demo for more information.



Design Critique: The TechCrunch Redesign

Michael Arrington’s web 2.0 startup news blog TechCrunch isn’t just a huge success, making Arrington the poster boy of the tech blogosphere, it is also a very prominent leader in the blogosphere. When TechCrunch changes something, other bloggers look at it, and sometimes copies it. It was like that with the 125×125 pixel button ads, the de facto industry standard in the blogosphere right now, which I daresay got big because of Arrington’s design change in 2006 (from this version, I might add, to the previous one, screenshotted in this post).

And now they sport a new design, which in turn have sparked a lot of commentaries in the blogosphere, as well as 300+ opinions voiced in their Yep, We Redesigned post. Everyone’s got an opinion, it seems, as always when it comes to something as personal as design.

In other words, I won’t shut up either.

Screenshot of the new TechCrunch design

Screenshot of the new TechCrunch design

The Good

  • I like the whitespace, the easy colors, and the choice of fonts.
  • Front page using excerpts tightens the design a lot, toning down the need to scroll, and brings a better overview. I don’t care if the main reason is to get more pageviews, this adds to readability in TechCrunch’s case.
  • Top story on front page works, although I would’ve wanted some more schwung to it perhaps.
  • I like the middle column in the front page, only present for as long as needed. It works surprisingly well and almost gives the stories left of it a sort of a sub-top-story feel to it. Almost…
  • Previous/next post links on single posts are always good.

The Bad

  • The far right ad column is cluttered. Also, ads aren’t ideally aligned/placed, however, this isn’t something that is easily resolved, and ads are always the great EVIL of a design, so I won’t say more about it.
  • The site looks pale on high resolutions with maximized browser windows. Granted, that’s hard to do anything about if you want a clean and sober look.
  • The footer is simple, which is good, but I would like something more there. Especially on short posts with few comments, where the right ad column is a lot longer.
  • The subscribe element on the top of the right column is confusing. I expected some sort of tabbed box, instead I got links. I also miss the RSS icon (available in the footer), since it is something I think should be pushed.
  • A network menu is good, but it is not obvious that it is a network menu, it could just as well be a TechCrunch menu.

The What Now?

  • Why do you have previous/next post links on top of single posts? Sure, they might come in handy with short posts, but I find them unnecessary.
  • A blog like TechCrunch could really use a little more elaborate archives page. This one is just lazy.
  • No dates on the front page. While this is something I normally think is OK, the news orientation of TechCrunch makes me think it should be there.

Final Thoughts

Among the criticism of the new design is the fact that it isn’t “TechCrunch green” enough. The previous one certainly was. Personally, I think it does alright on that area, with a simple green bar in the absolute top of the browser window, green links and green hovering on headlines, and so on. It works, sure, it could’ve been picked up a bit more had they wanted to, but I don’t think there is any actual need for it, really.

Also, while clean, sober, and whitespaced, the design is a bit boring. I should like it, and I do, but it is a bit too corporate for my taste. That is a fine line to thread, and I think the real issue there is the use of images. Just doing logos, and always having them on the same spot, certainly doesn’t help with de-corporatifying the design. Then again, it is a business focused blog, so it isn’t necessarily a bad thing. After all, trying to be something you’re not isn’t something for the faint of heart, so why go out and about trying to look like a magazine, when you’re a news blog about startups?

My verdict: A step up, clean, sober, suitable, I like it overall. Good.

What do you think of the new TechCrunch design?



WordPress Tip: Group Posts by Date in Listings

Some of you might be furrowing your brows at this one. What does he mean, add dates to listings? They are right there, in my post meta section, so what’s this nonsense? And since posts are chronological, they are already listed together with other posts with the same date, or the closest one at least.

That is true, in some themes each post got a date, and that’s fine. However, perhaps you’d like to group your posts by date in your listings, adding a divider to show that a new day has started. Like we do over at The Blog Herald, for instance. There, in listings, you’ll see a little divider telling you that the posts below are of this and that date, and when you’ve read them all, you’ll find another little divider with the next date, and so on. One date can have one or several posts under it, the important thing is that the actual date is only displayed once.

This is actually really easy to make happen, with the_date WordPress tag. Here is how.

How the_date Tag Works

Some WordPress versions ago, the_date tag changed. Suddenly, you couldn’t use it to display the date of each posts, because it would only output the results once per page and date. So if you had two posts on one date, only the first one would see any output from the_date tag. Theme designers solve this by using the_time instead, if they want to make sure that there is a date on every post in listings.

So the_date can only output every individual date once per page. Let’s use that!

Wait! Why Would I Want to Do That?

My main reason for using the_date like this is to avoid cluttering the page with the same date over and over again. I’m also reminding the reader of how often we update, and how many stories we actually publish every day. It is a way to help readers see your update schedule. Think about it, a small little timestamp in your post meta section will either be completely overlooked, or just not read since the reader already know that it is there. That is a good thing of course, you’ll want to check the date on posts sometimes, but I think it is a bit of an overkill in listings on some sites and blogs.

avoid cluttering the page with the same date over and over again

By using the_date like this, I make sure that the reader just sees the date once for each day and page, and since that means that it appears irregularly, it will have a greater impact. Again, that reminds the readers of the frequency of updates in a way a small timestamp never will.

However, you shouldn’t remove all your date formatting just because of this. Having dates printed on single posts is still a good thing, and if you’re not updating as often as, say, The Blog Herald, it might even look bad when there are several days between updates, which then will be very visible since the date pops out in listings. Use with care, and use when appropriate.

Group Posts by Date in Listings

So we have the front page of The Blog Herald, right? I want to output the date once, using a small little divider, get the posts for that date below it, and then output another divider. Like so:

Illustration for the_date use in The Blog Herald listsings

Illustration for the_date use in The Blog Herald listsings

You want that on your blog? It is easy, just put the_date in the appropriate spot, and it will spit out the date, just once. In the case of The Blog Herald, it is within the loop:


‘, ‘

‘); ?>

Filed as with


Tags: ‘,’, ‘,’

‘); ?>


Something similar is used in every WordPress theme, since it is the loop that makes the magic happen. You should have no problem finding it in your theme’s files, just remember that different pages might use different files, so you might need to edit both home.php and index.php, as well as category.php, search.php, and so on. It all depends on your theme.

Let’s take a look at the_date part of that, shall we?

‘, ‘

‘); ?>

That’s a bit more than just the basic the_date call, right? It is quite simple, this is how it works:

the_date('date formatting', 'stuff before the date', 'stuff after the date')

Edit the bold parts, or just use the_date without any special options, it is your call. As you can see, for The Blog Herald, I’m outputting a p tag with the class the_date, and a span, before actually printing the date, and then I just close these tags after it. Since I don’t want to litter the page with this code when there is not date outputted, I’m using the tag to output it, hence it won’t be there if there is no date to output for that particular post.


Friday Focus 08/22/08: Playful One-Page Sites

This week on Friday Focus: one-page sites that sure to tickle your design tastes. They’re both playful and well-made, so enjoy!

Designs of the Week

tap tap tap

Every element in this site is just so fresh—from the sushi concept to the way the content slides out. My only tiny suggestion is to add some sort of visual cue when hovering over the iPhone-inspired icons. Even filling in the title attribute for tooltips will suffice.

Paper Switch

Despite the grunge feel, you can tell the makers of this site cared about details, and were not just forcing a certain style all over the place by splashing some Photoshop brushes around. The gray backgrounds for the forms in each of the sections appear to be unique (when they could have recycled images for consistency). And then there’s the scrapbook-inspired paper cutouts for the work showcase. Finally, there’s a very cute illustration of a bird perched on a tree that still looks grungy.

Stad Tam

Perhaps I should’ve also included this site in last week’s “eye-catching headers” batch since the top of this site, which basically half of the whole thing, is the blurb slash header area. The lower half shows and hides content using collapsible headers. The same goes for the inverted tabs at the top. Everything is compartmentalized, which keeps things neat and uncluttered.

Bananas and Coffee

There’s not much on this site but a bunch of graphs, but they’re done very nicely, with the help of some nifty CSS and JavaScript. The colors come from the two stars of the site: yellow for the bananas, and brown for the coffee, and make you feel raring to read what would otherwise be boring old charts!

Social Media Weekly

Design35 Greatest Works of Reverse Graffiti
Graffiti that’s environmentally-aware but still quite rebellious.

ProgrammingAn Experiment in Rounded Corners
Jonathan Snook creates a workaround for achieving rounded corners natively in Internet Explorer.



Site is Down, Reddit Style

Granted, I’m not a dedicated Reddit user, but that being said, this is the first time I’m getting the “reddit is currently offline” page. It is nothing like the fail whale of Twitter fame, more of an ironic, appropriately geeky, kind of message you get. Like so:

Is this a good way to tell people you’re currently offline? What do you think a good offline page should contain? Tell us in the comments.



Hide Table Rows with onChange()

On occasion, a developer will require that certain elements of a page stay invisible to users while others become visible, depending on a user’s action. In this case, the user makes a selection on a drop-down menu and the selected table row becomes visible while the rest remain hidden.

First, we establish the script and begin to define the function:


Advertise on Devlounge

  • Browse the Site

  • Code tutorials and snippets covering PHP, CSS, XHTML, Ruby on Rails ++
  • Column commentary on web related stuff, voiced by the Devlounge staff ++
  • Design design trends, web 2.0, inspiration, critique and praise ++
  • Extras themes, plugins, and templates for WordPress and more on our extras page ++
  • Friday Focus a weekly look at some unique and interesting designs ++
  • Interviews talking to web designers and developers to learn more ++
  • Publishing blog platforms, forums, open source and paid services, hosting ++
  • Strategy getting it right online, marketing, monetization, launch and relaunch ++
  • Webapps online tools, necessities, tips and tricks, desktop replacements ++