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.
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.
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
Design – 75 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.
Programming – jParallax
Replicate the famous parallax effect with the help of jQuery and this script. Check out the delightful demo for more information.
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
- 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 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.
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?
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.
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.
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
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
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:
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.