Just take a look at this wordless version of Yahoo’s website:

This is great, this is a way designers should look at webpages to know how their layout is working out. Yahoo is obviously pretty cluttered, no surprise there, but it doesn’t necessarily mean that it is a bad design. What it does tells you is that there’s a risk of clutter, and that’s something.

Looking at the web without words is more or less suitable for different sites. For instance, I think it works better with CNN.com than with Yahoo above.

What You Can Learn From Web Without Words

The thing to take from Web Without Words is a different way to look at websites. You get a very honest picture of your sites layout, the actual wireframe of the site. Web Without Words creator Paul Armstrong explains his site like this:

web.without.words started simply as a way for me “practice what I preach” — to visually represent my core belief that hierarchy, grid systems and uniformity ultimately lead to a more natural user experience — to show the overall structure of any website, by striping away all the distractions of text and ads and images and showing a site for what the eye unconsciously perceives. I dissected CNN.com (primarily as a way to recuse myself from all the political grandstanding), cobbled together a website and showed a few friends

It is pretty spot on, but even if you just don’t buy the obsession of grid systems and things like that, it can still be a good idea to look at Web Without Words in general, and applying it to your design in particular.

Now if someone would please build me a service where I can just put in an URL and get it rendered in Web Without Words style.

Just like when TechCrunch redesigned, John Chow’s readers have voiced a lot of comments, 227 of them as I’m writing this. Nothing gets the readership involved like a brand new design!

The Good

• I like the fact that they got rid of the car in the header. Nice balance between logo and the 468×60 pixel ad as well.
• The logos for ad and affiliate networks that John pushes aren’t obtrusive, thanks to being in grayscale until you hover them. This is nicely done, since they should be annoying just because of their placement under the main menu.
• The RSS and subscription functionality in the top right column blends nicely.
• Good spacing in the ad segment, under Blog Sponsor.
• The Featured Video box works nicely together with the ad below, and the recent photos, and the about box. 
• I like the navigation links below the entire site, even though it is a bit illogical to have them below the copyright type.

The Bad

• The JC logo is bland and boring.
• The site lacks color, it is basically just white, light grey, and a very tuned down blue, which makes it look corporate and stale.
• The Recent Photos block is pretty nice, but it needs to be better aligned with the width of the column, now it is 20 pixels less wide than the other elements in the middle column on the front page. If the plugin used won’t solve it for you, then put it in a box or something.
• The categories part of the footer is decent enough, but the rest of it is a bit messy. I’d also do the copyright text in a different color, font, or whatever, to cleanly part it from the content in the footer.
• The about page isn’t optimized for the design at all, sporting too little content to fit with the right column, and a photo that is too small. Same goes for the contact page, really.

The What Now?

• Contextual keyword ads in posts are one thing, but why are they in the featured articles slide?! Same goes for the listings of blog posts on the front page. Really, that’s too much.
  

Final Thoughts

I can’t say that I’m thrilled about the new John Chow design. My main issue with it is that it feels like a corporate website rather than something from “a Dot Com Mogul”. At the same time, there are some really good layout decisions here, and I especially like the way the header manages to not feel littered with ads.

One other color to work against the stale look would do a lot to lift this design.

What do you think about the new John Chow dot Com redesign?

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

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?

• Smaller laptops/netbooks with decent resolution, like the Asus Eee PC or any screen under 12″ basically.
• Smaller devices with a screen size at 5-7″, sporting a resolution at 640-800 pixels horizontally.
• Mobile phones or similar with sub-640 pixels horizontal resolution, possibly with a vertical focused screen size ratio (like the iPhone).

That last one is easiest, they more or less require special treatment. Sure, you can use Opera on a mobile phone, or Safari on the iPhone, and surf the regular full-grown web well enough, but if you want it to look good and really work for the screen, it’ll need special adaptations. That is usually a completely different version of you standard site.

The Netbook Issue

The original Eee PC by Asus

Laptops and similar larger, but still small, devices are harder. The popular Asus Eee PCs started out with a 7″ screen with 800 pixels width, that’s too small for most sites today, usually optimized for a 1024 pixel horizontal limit. Some sideways scrolling is OK, I suppose, but fluid designs or smart choices could probably at least minimize the occurrence of that. However, your traditional site could work, if you laid it out in a reasonable fashion.

It gets worse when we’re talking 5″ or 6″. The resolution won’t be 800 pixels width, it’ll be something like 640 or less. That more or less makes any site designed for 1024 pixels width a nuisance to read. Everything will look like crap, basically, and we won’t want that as a designer. Visitors on small screens like that should be getting special treatment, probably with a completely different version of the site altogether.

Add Vertical Issues

a little bit of vertical scrolling isn’t really an issue

Web designers often concern themselves with a site’s width. It is indeed important to fit everything, from content and images, to ads and links and whatnot, in the Perfect Column Setup. Compared to that, a little bit of vertical scrolling isn’t really an issue when having access to decent screen real estate. I’d venture so far to say that the blogosphere helped push this forward, it is OK to scroll down again, although advertisers still yap about being above the fold all the time. That may be as it be, but what might be a little scrolling on a normal sized screen, say 768 pixels height (1024×768 being the most common screen resolution), or perhaps even more, but it’s not as fun if we’re talking 480 pixels height in screen real estate.

It is not that there’ll be a lot of scrolling per se, it is more an issue of the small amount of actual content being displayed. Take a site like this, and a post like this. Lots of text, which is fine and pretty easy on the scrolling factor after all. But add big strong graphics, add a powerful header image, add ads breaking up the post, and you’ll get a mess. Then take that to a really small screen, and you won’t be stuck surfing the web as much as you would otherwise.

This is a tough nut, however, because while we can optimize for less width to play with, the vertical scrolling is necessary on most websites today. There are solutions, some better than others, but the one thing they have in common is that they will probably not fit the big screen, just the smaller one. In other words, while vertical scrolling isn’t as big an issue as horizontal one, you might be better of optimizing for it.

Back to the Roots: Mobile Websites

This concept would work on a mobile phone (showing The Onion anno 1997)

Mobile phones are getting more and more web friendly, with the iPhone leading the charge. What they have in common is that they are vertical aligned, meaning that there is more height than width to play with in your design. The fact that a mobile phone, or similar device, shouldn’t be too bulky is actually a good thing here. It means that it’ll be easier for us to do fluid designs, having text wrap from left to right, no fixed layouts or anything.

Like it was, once upon a time. Only prettier.

One thing is for sure though, these sites need special treatment. There are plugins for publishing platforms, and several services that repackage your content, and optimize it for mobile phones, and that’ll help us along the way. However, we do need to consider how we lay out these sites as well, and how we can design them to connect to their older siblings (being the traditional website, should you not be a fan of metaphor). After all, if you do have a special website for mobile devices, it should feel like a natural adaptation to the smaller screen, right?

Are you designing for the smaller screen, and what do you do to make it easier for visitors to your site using smaller devices?

I will, however, give a sneak peak as to what you can expect from Devlounge once the redesign is rolled out. I’m talking about the new categorization of our content.

Brand New Categories

Today’s categories doesn’t really work well with how Devlounge have evolved. I’m sure the plan behind the current layout is both cunning and brilliant, but things change over time, no matter how well you plan them. A good and logical categorization of content for such an editorial site as Devlounge is crucial. I repeat: it’s crucial!

That’s why these will be our new main categories, replacing the old ones.

• Code focusing on PHP, CSS, XHTML and similar, tutorials and snippets
• Design on trends, web 2.0, inspiration, critique and praise
• Opinion being commentary on the web from the staff, will probably delay this one for focusing reasons
• Publishing blog platforms, forum systems, open source applications as well as paid ones, things you need to publish a website, basically
• Strategy for launch and relaunch, monetization and SEO, things to help you succeed
• Webapps is about online tools, necessities, desktop replacements, cool apps, things like that

There might or there might not be room for sub-categories. With tags, I personally think that pinpointing a post’s topic is better left to the tags, the fewer categories you can get away with, the better.

I’d say that the categories Code and Design are the most important ones, the primaries, with Publishing being secondary, and the rest being less frequent on the site. How does that sound to you? Let me know in the comments.

Since Twitter is addictive, lots of bloggers have decided to start importing Twitter content into their blogs. It’s nothing new, with several plugins available, the most popular one might be Alex King’s Twitter Tools, but I don’t know for sure. Either way, it’s a sure way to make your blog totally uninteresting, ugly, and boring. Think about it, who wants to read your tweets in a bullet list, hours after they happened? Chances are, most people don’t want to read them at all, especially when you’re offering a discussion with some friends, interesting only to those involved, but nevertheless cluttering your blog in a most hideous manner. Don’t take that last link to seriously by the way, Jeremy came to his senses…

Still, your tweets are content, and maybe you want to attract the people who actually do care about what you have to say on Twitter to your account. Then integrate it smoothly, like Twisted Intellect, the most beautiful example of displaying tweets on a site to date:

Pretty huh? I’m sure there are several others who’s doing this right as well, but I was actually quite blown away by this today. I’m a fan of serifs though, especially classy work with italics, so the site pretty much appeals to me.

The Rules of Twitter on Your Blog

Follow these rules when integrating Twitter on your blog or site, and you’ll be fine.

• Don’t treat tweets as regular content! Put them someplace to the side, by themselves. Posts are content, tweets are, well, tweets.
• Don’t give your tweets too much space! Think about it, does they really add that much to your blog to begin with? Shouldn’t you push your real content with that space instead?
• Don’t show too many tweets! Really, how interesting are they after a while? Better to show just a handful, than to push out a RSS feed from your Twitter account containing 10 tweets, where 7 are from days past.
• Don’t integrate Twitter unless you use it! What’s the point of displaying your tweets if they are not up to date? I’ll tell you right now, there is none.

Ready to follow that? OK, then please, please, please ask yourself yet again if your tweets actually add value to your blog. Maybe a link to your account is good enough? Chances are, for most of us, it is.

Have you seen other great integrations of Twitter content on sites and blogs? What’s your take on all this? Tell us in the comments, I know I’m dying to know.

Seriously, it’s time to crank up the pace a bit. I’ve tried the previous mockup design on numerous contacts, friends, and designers this past week, and there’s a consensus that it is good. So I’m moving onwards with it. That doesn’t mean that it is a final design, it’s still just a mockup, but this is the basic style we’ll be going with.

First Single Post Mockup

So with the front page somewhat specified, here’s the first front page mockup design. It is lacking comments at the moment, and I’m not happy with the box below the post either, it needs some flare and overall TLC. I haven’t touched the sidebar at all, see below.

Anyway, here’s the mockup.

Thoughts On The Sidebar

Today’s Devlounge is using the sidebar on single posts to promote the blogger with a short author bio, a picture, and for pushing for RSS signups. While I like the author bio box and all, I’m not a great fan of this, since it can confuse the users. If you’re used to find certain things in the sidebar, and it isn’t there on all pages, then the user might be disoriented. Not a big deal, perhaps, but still.

In short, I prefer to not alter too much in the sidebar. What are your thoughts on this? Looking forward to hearing them, and of course your thoughts on the mockup as well. As always, they’re much appreciated, so share!

Fancy Borders Using Photoshop

Save this new version of your image as something else, that way you still have your “untouched” original intact.

Open any one of your images in Photoshop and resize the original image to something manageable. Save this new version of your image as something else, that way you still have your “untouched” original intact. My rule of thumb on sizing graphics is as follows: If I plan to use the photo on my web sites or blogs, I usually size them down to about 450 pixels wide by 338 pixels tall. For web, make your image resolution 72 ppi. If I you are not using your image for the web, then I suggest you make your image 200 to 300 ppi in size so it can be used in print media or whatever else. Anyway, enough of this resizing - that’s a whole other blog subject!

Once you have saved this new version of your image in Photoshop, immediately move over to the right of your screen with your mouse pointer and locate the Layers palette that is usually docked in the right side of your Photoshop work space. You will see the little icon that represents your open photo, which is usually named “background.” Put your mouse on that little square representation of your photo and drag it down over the New Layer icon at the bottom of the layers palette (it is the little square next to the trash bin). This will duplicate your background layer and create a new one called “background copy.”

Next, move your mouse pointer down to the New Layer icon again and just click on it once. It will create a new blank layer. Click on the new blank layer and drag it between the other two background layers. Make sure your default color picker colors are set to black and white (type the letter “d” to reset to your default color scheme in Photoshop). With the new blank layer active (it will show as highlighted), click Alt+Backspace (on Windows), this fills that empty new layer with the color white. Your layers palette should look like the example below if you’ve done these steps correctly:

Now, while you are still in the layers palette, click on the background copy layer to target that layer and make it “active”. Click the rectangle marquee tool (the tool on your vertical toolbar that is at the very top left) and click and drag a selection area that is just inside the edge of your image, probably around 1/8″ in size thereabouts. See example:

Click on the Layer Mask button at the bottom of the layer palette menu (third button from the left – a grey square with a white circle in the center). If you have done this correctly, you should now see a little white border appear all around your photo as in the example below:

Next, click the Filter menu at the top of your document work space, then click Brush Strokes from the drop down menu that appears, and choose Sprayed Strokes from that menu. The filter gallery will open up and show you a blank, white photo image area with that particular effect you just chose applied to it as a black, jagged looking border. To adjust the effect in the filter gallery, make the stroke length about 6 and the spray radius around 15, this looks really neat. Experiment with what amount of effect you like best. Next, just click OK to approve of the effect and close the filter gallery. Voila, looks cool doesn’t it? Also, while you are being creative, go to the Layer Palette again and click on the effects icon (black circle with a script ‘f’ in the center of it) and choose Drop Shadow just for fun! That’s what I did in my example here:

To finish out your border, just click the Image menu and choose Flatten Image (or Save For Web in the File menu) so that you can save your file as a .jpg, and you are ready to go! Easy wasn’t it? Experiment on your own by using a black background fill next time, or some other color… it’s all up to you and your own creativity!

Finished image example:

The Second Mockup

Some notes about the second mockups:

• It’s still the front page.
• I’m not too fond of the three top feature listings, due to dragging too many images around and changing too much. To put a long story short, it should look better than it does…
• Editorial info should be added to the sidebar.
• The footer isn’t done! I just took the one from the next Wisdump for now.

Here we go!

There you have it. Do compare with the previous mockup, which this one is built directly upon. Have I tackled the problems like you wanted? Please let me know what you think in the comments!

You can position images however you like, of course, but a nice feature is to have the floating to the left or right, with the text flowing around them.

Like the one on the right here, using the following code:

Nice huh?

Well, it could be better. You see, using the align="right" floats the image to the right, but the vspace and hspace values are around the full image, which looks a little weird with the right side of the image not being in line with the content's right side.

Like so:

What you should do is use CSS to float your images instead. Add these classes to your stylesheet:

The margin will make sure that there's no space where it isn't needed, in other words, you won't get that nasty spacing problem like the one in the image above.

Use it like this:

While we're at it, why not add this to the stylesheet as well:

Now you can add the frame class to your images for a nice looking border around your images. So if we want to float an image to the right with a border, we'll do it like this:

Take a look to the right. There you have it, floating correctly and all, looking a lot better than the first one, right?

You know what the best part with this is? If you're a WordPress users, this is version 2.5 compliant code. They've finally switched to using CSS for aligning images, about time I'd say.

There you have it, easy handling of images, looking a little better, and being a lot more flexible should you want to change spacings, border colors and such.