Design Focus

Friday Focus 06/27/08: Cute, Cheerful, Horizontal Scrolling Sites

This week’s picks are cute, cheerful, and all scroll horizontally. Let’s see how they pulled off this layout technique.

Designs of the Week

Dean Oakley

It seems that creating a horizontal-scrolling website need not require too much graphics, just a background that can stay fixed all throughout.

Daniel Stenberg

I like that the vines growing around each item in the portfolio are subtle rather than overpowering. It’s pretty common these days for illustrations, especially nature-related ones, to be simply staggering in appearance, but not here.


A full-on Flash site for a corporate brand that went for horizontal scrolling as its navigation. There’s a lot of stuff going on, and all the elements come together in a quirky way. Notice how the color pallette is similar to that of Dean Oakley’s site. Muted, “retro” colors are a good way to instantly change the look and feel of your site.

Social Media Weekly

DesignThe Web Time Forgot
A global network of computers envisioned long before the Internet was invented.

DesignWow! 10 Awesome Interactive Websites
What makes an interactive website stand out from the rest? This article may have the answers.

ProgrammingThe Greatest Invention in Computer Science
What’s the most important invention in the field of Computer Science, apart from computers? You might be surprised.

ProgrammingEpisode 4: Scaling Large Web Sites with Joe Stump, Lead Architect at DIGG
A podcast that discusses how the top 100 websites were built to scale.



CSS: Fun With Floating in the Grid

Sometimes for bigger design projects that will need to be pretty flexible, I tend to use several CSS classes to make it easy to maintain from a design and layout perspective in the long run. If you’re a fan of grid-like design, this is most certainly things for you to consider.

Flexible Floating

To make it easier to position elements in a design, from actual content areas (like columns and sidebars), to images and boxes, I employ a set of CSS classes that can be mixed together easily enough.

The core of these classes are:

.left { float:left; }
.right { float:right; }
.frame { border: 1px solid #aaa; padding: 5px; }

This means that any element I’ve given the left class will float to the left. If I add the frame class, it will get a grey 1 pixel border, with some padding between the content and the actual border, to make it look better.

Now, to make sure that images get the necessary spacing to the left or right when being floated, I also add these additional classes:

img.left { margin: 0 15px 15px 0; }
img.right { margin: 0 0 15px 15px; } 

This will make sure that images floated to the left will get a 15 pixel spacing to the wrapping text to the right, and below. The same goes for images floated right, but to the left and below of course.

So how would this work?

<img src="myimage.jpg" alt="My image" class="right" />

This image will float right, with a suitable spacing to the wrapping text. Well, let’s add a border to it to make it look better:

<img src="myimage.jpg" alt="My image" class="right frame" />

imagefloatdemo.gifI just add frame to the class attribute to make this happen, not hard at all. In fact, I have in the explanatory image to the right just here.

The really nifty thing, however, is that I can use the classes left and right anywhere, which can be convenient.

If you’re a WordPress theme developer then you might want to add the classes alignright and alignleft to your CSS declarations. These are the default classes used by WordPress’ image uploader/inserter, so it might be a good idea to support them.

Practical Layout Uses

Nothing fancy so far, right? Well, as I said, by doing it this way, I can easily arrange my layout as well. Let’s say I have this 970 pixel wide design, following the grid with three columns of 310 pixels each. You might recognize the concept, it’s the new Devlounge design. What I do is that I define the column, like this:

.column { width: 310px; }

No float or anything. I can also add a wide column, spanning over two columns (310×2=620 pixels), and add the spacing I have between each column in the design, being 20 pixels, bringing it to a total of 640 pixels.

.widecolumn { width: 640px; }

So let’s have a wide (double) column to the left, and a single column to the right. Simple:

<div class="widecolumn left">My wide column's content</div>
<div class="column right">My right column's content</div>

For clarity’s sake, here’s an overview of the Devlounge layout, with the columns marked:

It can be convenient to keep the float attributes free of the actual content containers. As you remember, the classes left and right are global stuff that I can pull out whenever I want.

The whole current Devlounge design is built like this, using columns and separate classes as much as I could. I could optimize it a lot more (and I am, whenever I have time), but this suited this build.

Do you use this technique, and if not, why not? Share your thoughts in the comments!


Design Focus

Friday Focus 06/20/08: Retro Robots and Rainbows

It’s all retro this week on Friday Focus—robots and rainbows on the design horizon. You’re sure to have a blast with the designs below. Enjoy!

Designs of the Week


Excellent color combination, although the smaller text could have used a darker shade of blue. This site is enjoyable simply because there’s a giant purple robot on it. Without it, this would be just another nicely-designed website without any personality to it. And what could be quirkier than robots?


I like that the lines are skewing in all directions, but not in a chaotic way. Cheerful colors and illustrations plus some snappy JavaScript effects. Everything says “bake a cake, bake a cake, bake me a cake as fast as you can!”

General Robots

This site is so interesting not only because of the design, but because of the premise: it’s an online shop for all things robots. I would have loved a bit more kitschy-ness to the ecommerce design elements, not just the surrounding layout, but this is a fun look nonetheless.


You’ll have a good time navigating this site. The grunge effects are subtle (they look like real dirt!), and everything’s just arranged nicely.

Social Media Weekly

Design2008 Design Trends
Web Designer Wall has come out with its annual list of design trends. Click to find out.

ProgrammingUsing CSS to Fix Anything: 20+ Common Bugs and Fixes
Writing CSS is never painless. This list is a must-read.

Oh, and speaking of robots, download Firefox 3 already and type about:robots into the address bar.



Optimal Includes for Movable Type

As far back as I can remember, Movable Type has always had the ability to include one template (or a file) in another template. You do it like this:

<mt:include module="footer">

But, there are problems with this method. First, it can slow down publishing, as the MT engine traverses all the included templates in each page it publishes. And if you’re publishing static files but including something that should be kept up-to-date (like your Action Stream), then you can end up with pages that look stale.

What I like to do is output the fragment I want to include to a text file, then pull that text file into whatever page on my site I want. But different pages publish differently, so it’s sometimes tricky to include the same file on all those pages. I handle this with a little snippet of MT template code. Let’s start by taking a look at that code:

<MTIf name="is_php">
    <?php include($_SERVER['DOCUMENT_ROOT'] . '/actionstream.inc'); ?>
    <MTIf name="system_template">
        <MTInclude file="/actionstream.inc">
        <!--#include virtual="/actionstream.inc" -->

Our first line checks a is_php variable. We have to set that ourselves on any page we output as PHP — a contact form, for example. So let’s assume we have a Contact template that publishes to contact.php. At the top of that template we would add this:

<mt:setvar name="is_php" value="1">

When this variable is set, our code will use a standard PHP include to pull in the file:

<?php include($_SERVER['DOCUMENT_ROOT'] . '/actionstream.inc'); ?>

If it’s not a PHP page, we then check the system_template variable. This is already set in all the default system templates, so we don’t have to set it ourselves. System templates are served via CGI — they’re not published to static files, they’re displayed dynamically. Search results and comment previews use system templates. In this case, the standard MT include is the best option:

<MTInclude file="/actionstream.inc">

Notice we’re using the file attribute rather than the module attribute. This tells MT to look for a file on your web server.

Finally, if neither of the first two conditions apply, we use a Server Side Include (SSI):

<!--#include virtual="/actionstream.inc" -->

You will have to configure your server for SSI, but if you were able to install MT, you should be able to set up SSI.

Now that we know how to do our includes, let’s create something we can reuse whenever we need to do a file include. Create a new Template Module, name it Include, and put in the following modified version of our code above:

<MTIf name="is_php">
    <?php include($_SERVER['DOCUMENT_ROOT'] . '<mt:var name="includefile">'); ?>
    <MTIf name="system_template">
        <MTInclude file="$includefile">
        <!--#include virtual="<mt:var name="includefile">" -->

Now, anywhere we need to do a file include, we just put two lines of code:

<mt:setvar name="includefile" value="/actionstream.inc">
<mt:include module="Include">

The <mt:include> has access to any variables set before it’s called, so we can set includefile to the file we want to include, then call our Include module.

You’ve probably seen the <mt:var> tags before, but this might be new to you:

<MTInclude file="$includefile">

Here, we’re using an MT variable as the value for a tag attribute. This can be done on any MT tag, just append a dollar sign to the beginning of the variable name.

Again, this is really useful for things that don’t need to be part of the MT publishing process. In particular, any time you’re using an external API (Twitter, Flickr, etc.) to put content into your sidebar. In those cases, it’s more efficient to set up an external process to write that content to a file, then pull it in with our optimal include. As your site grows, you’ll be grateful for any time you can save on the publishing process.


Design Focus

Friday Focus 06/13/08: A Dark Friday the 13th

It’s Friday the 13th, so let’s celebrate this eerie date with some dark designs.

Designs of the Week

Bright Creative

Web design guru Dave Shea is behind this redesign (it’s his company, after all) that’s turning heads. Excellent effects using jQuery, and that accent image in the welcome blurb is reminiscent of 31three.


From brown to green, another textured design. This one’s a hybrid portfolio site since it incorporates blog posts and social media widgets, namely, ma.gnolia and Flickr. Brownie points for a 100% fluid layout!


Love the use of depth here, as well as the trusty jQuery for switching between featured portfolio works. It’s gray but it’s not boring. That’s hard to pull off.


This one’s a little out of place since it’s not dark enough and uses a drastically different color scheme, but this is a popular design this week. The footer, although not shown here, also gives the illusion of depth.

Social Media Weekly

Design10 Hollywood Designers To Watch Out For
Whether or not you think Hollywood films are crap, the worlds they have created just blow the mind and should be more than enough inspiration for you.

Programming10 SEO Rules for Designers
Even if you’re a designer, it’s important to know even just a little about related skills. Knowing SEO adds value to your work as it helps your clients become more findable online.

ProgrammingjQuery UI – ThemeRoller
Generate a consistent look for your webapp interface by choosing style and color options, then downloading the theme.



Getting Gravatars on your Single Posts in WordPress

Gravatars are global recognizable avatars, being avatars hosted at Gravatar.com, a service run by Automattic, creators of WordPress and WordPress.com, these days. Since version 2.5 of WordPress there’s built in support for Gravatars, using a template tag to display the appropriate avatar, or a placeholder. The default WordPress theme, being Kubrick renamed as default, uses it in comments, which is the common usage of gravatars.

However, with the recent redesign of Devlounge, I decided to use gravatars rather than theme-bound avatars for displaying the author’s pretty face. You can’t just pull the gravatar code from comments.php to do that, you need to work a bit with the template tag.

First, to display a gravatar you need to register an e-mail with the Gravatar.com service. There, you connect an avatar with the e-mail address. The key is the e-mail address, that’s important to remember.

Displaying the Gravatar

The code used here on Devlounge, for the avatar on the top of the single post pages, is the following:

<?php echo get_avatar( get_the_author_id(), 40 ); ?>

So what does it mean? The get_avatar() is the WordPress call the Gravatar functionality. As you can see, I’m using the template tag get_the_author_id() to fetch the singe post’s author ID, which will tell get_avatar() what e-mail to use to look for. I could use other template tags to fetch the correct e-mail, but I went with the ID one.

40 is the width and height of the avatar in pixels. 16, 32, 48 or 64 are more common uses, but 40 pixels fits the design for me.

If you wanted to, you could add a path to the default avatar URL, so that not the default one from Gravatar.com is displayed for people not having registered an avatar. In this case, I’m going with the default one because people are used to it, and when they see that a gravatar can be used, they might be more inclined to get one.

For comparison, in the comments the gravatar code looks like this:

<?php echo get_avatar( $comment, $size = '32' ); ?>

Here $comment calls the comment in question’s author e-mail is used to fetch the appropriate avatar, and that one will be 32×32 pixels in size. As above, I could have added a path to a default avatar.



Headline: The New Devlounge

Introducing the New Devlounge



Welcome to the New Devlounge

Welcome to the new version of Devlounge. I have revamped the design to make things easier for the people involved in running this site. The previous version, being a nice piece of work for sure (I doubt Splashpress would’ve bought it otherwise!), had been around for a while, and it’s always good to redefine oneself every now and then.

So here we are, with a new version of Devlounge, for all the right reasons, I hope.

More importantly, it was necessary for us to redesign so that Devlounge would fit better in the Splashpress network (which isn’t fully integrated yet), as well as find its new voice. You have probably noticed that we have experimented a bit with various types of content during the past month or so, and spoken directly to some of you to make sure that we’re reading things right. It’s always hard to butt in as the poor bloke in charge of a recently acquired site, especially when you haven’t bought it yourself.

So here we are, with a new version of Devlounge, for all the right reasons, I hope.

So What’s New?

Besides a visual overhaul, still pretty true to the Devlounge look and feel I’d say, the big news is the way the content is categorized. In the backend, a lot of old things and choices still lingered, which is fairly common for sites in constant evolution actually. The key is to focus it so that you can have actual use of things like categories, tags and so on. It’s only natural that things are piling up, so this week will involve me re-categorizing a lot of content to fit our main categories. These have been described earlier, in the sneak peak post, but here they are again:

  • 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

The reason is of course to make it easier for the readers to find what they’re looking for. I have chosen to put the menu to the right, in favor of the descriptive type, otherwise I’m a fan of horizontal menus.

So category listings with relevant content will be coming along during the week, as will a dedicated archive page, an author archives at that.

The front page is new as well. It’s not the version I showed in a concept mockup way back, but a more straight forward one, displaying the latest articles straight up, but having space for more visual pushes at the top. I expect to tweak this a bit, to find the way to manage it and use it. It’ll be one of those elements where you have to find your way.

What About the Content, People?!

Yes, I’m getting to that. The whole purpose with a redesign is to elevate the content, and I’ve had the feeling that we needed to do that all along. There’s a lot of cool features planned, including my promised ones on bbPress, and I’ve got some promising writers on the way in as well. The idea is to up the publishing schedule, and offer a solid mix of articles and posts in the topics described above.

The whole purpose with a redesign is to elevate the content

I’m also hoping to be able to look through and update the WordPress themes offered here on Devlounge, with better support. Still working on how to solve that.

And yes, the previous Devlounge design will be released for free! Just don’t expect it right away, there’s probably a lot of hacking and customization to do to get it download-worthy. After all, it was made for Devlounge, and not general use.

We’ll offer more downloadable content as well, as we get back into our groove. Expect cool stuff coming out of the article series planned for this Summer… Tease, tease indeed!

This Week Might Be Rocky

Finally, I’d like to warn you all that this week might be rocky, as I take the time to manage the content as well as clean up a few things. I wanted to get this version out in the open, for feedback (the comments are wide open for you!) and reflection. The idea is to make Devlounge great, and that will take some effort for sure.

Expect a follow-up post on the progress late this week, or (probably) early the next.


Design Focus

Friday Focus 06/06/08: They Just Work

Here’s a larger-than-usual Friday Focus for this week, featuring simple yet beautiful designs that just work. Four site types (blog, portfolio, static, e-commerce) that do a standout job of making an impression.

Designs of the Week


90% of this site is made of varying shades of gray, but the black and hot pink header is what makes it infinitely more interesting. I’d say the body text color needs to be a bit darker for optimal contrast, but other than that I like it. See what you can do just by simple lines, shapes, and colors.


Utterly simple site, but the implementation is fantastic. The four sections below are actually clickable tabs that contain the whole site. Check out the blog tab—I particularly enjoy its layout even if there’s only one post right now. I wish I could say it’s fluid, but when I resize my browser to 1024 or 800 pixels wide, the ugly horizontal scrollbars appear.

White Water

Delightful use of the rafting motif, from the splashes of water to the boat ropes to the icons to the blue buttons. The site makes rafting seem like such great fun—even if I don’t understand a word that’s written on it!

Red is White

This site is pretty busy compared to the rest of the designs featured here, but it doesn’t get too crazy. I absolutely love the navigation. And the hues aren’t bad at all. I feel the “Red is White” logo doesn’t feel like it fits into the design because the funkiness of the font doesn’t seem to repeat elsewhere, but the big, chunky, headers make up for it!

Social Media Weekly

DesignHow To: Make the Viget Inspire Background
The Viget Inspire blog design is a thing of beauty and is one of the few painterly/watercolor-y designs I actually like. If you’re wondering how they did it, the step-by-step process has arrived!

DesignIcon Design Tutorial: Drawing A Pencil Icon
Vu Tran and Min Tran of Frexzy also write a detailed walkthrough on icon design.

DesignColorFlip.com by Rafaël Rozendaal, collection of Sébastien de Ganay
A virtual flipbook of random colors, with animation and sound effects to boot. There’s technically not much to this page, but those looking for some color inspiration—or perhaps some interaction design inspiration even—might consider this a godsend.

ProgrammingDid Rails Sink Twitter?
An interesting look at Twitter and the framework it is built on—Ruby on Rails. Making applications scale is an important goal for backend programmers, and with Twitter and Rails as an example, this should be a good read.

ProgrammingPresentation Layer Best Practices
A look at the best way to write HTML, CSS, and JavaScript. It’s one thing to know how to code, but it’s another to know how to write beautiful code.