Tag Archives: Design

The Death of the Boring Blog Post

Don’t miss this amazing Smashing Magazine article: The Death of the Boring Blog Post.

The Death of the Boring Blog Post

What if bloggers published less articles, but spent a lot more time on them? This is something that has been recommended by blogging legends such as Vitaly Friedman and Darren Rowse for quite some time now. But what if they did more than just write? What if they learned from magazines and changed up their designs a bit, bringing concepts from print design into the digital realm? That’s the whole idea of the post.

CSS white-space Property

Here’s an interesting and little-mentioned CSS property: white-space. With it you can prevent an element’s contents from line wrapping, create pre text, even pre text that wraps when necessary.

The syntax is like this:

#mydiv {
white-space: nowrap;
}

The above example is fairly self-exaplanatory; it prevents the text inside the #mydiv div from wrapping. If #mydiv had a fixed width, the text would spill out of the container. However, there are practical uses for this behavior. Have you ever wanted to have an inline element (perhaps a span containing the category a blog post is assigned to) automatically move down to the next line instead of appearing across two if it were too big? Give the element nowrap.

The other major value for white-space is pre, which forces the text to appear as it was entered, leaving spaces, carriage returns and tabs intact. The counterpart is pre-wrap, which works the same way, except it will wrap the text if the containing element is too narrow. So if you use code samples in <pre> elements on a regular basis, but want to keep long lines from spilling out of their containers and creating horizontal scrollbars on your page, you can just use this:

 pre {
 white-space: pre-wrap;
 }
 

Now your preformatted text will wrap down if the line is just too long.

The Brads: A Web Comic About Web Design

The Brads is a weekly web comic about Brad Colbow and Brad Dielman, two web designers in Cleveland Ohio. I’ve been following it for a few months now, and it’s pretty good. The site’s design looks great–er, wait–this isn’t a Design Spotlight post…

The Brads Comic

The comics are generally funny in a geeky sort of way. The subject matter ranges from designers’ pet peeves to Twitter silliness to Apple/Microsoft pokes to swine flu lampooning.

Learning CSS Sprites

What exactly is a sprite? It’s a CSS technique that can make your website load faster. Instead of having a dozen images that are included on every page of the site (one for your logo, one for an RSS button, a few fore social media links, etc.) you combine them all into one big image. You can then use CSS to display just the portion you need in any given spot.

How does this improve loading times? The major bottleneck in the loading of a web page today isn’t download speeds so much as concurrent downloads. A web browser will only download two files at once from a web server. After the HTML is downloaded, the browser has to grab CSS, JavaScripts, and images from your server. You might have a lot of those secondary files, and only two will be loaded at once. If you combine your template’s images into one big file, they all get downloaded at once, instead of two at a time. Also, you may shave off a few kilobytes of file size in some cases, but that’s not as important.

Now how does this trickery work? Let’s use Apple.com as an example. They keep their header navigation in a sprite that looks like this:

Apple navigation header sprite

As you can see, the buttons are laid out in a row, with their alternate states underneath them. A sprite starts out as something just like that: an image full of little images. The real trick is making it spritely.

Continue reading →

Smashing Magazine Redesigns and Launches a Network

Smashing Magazine has redesigned again, further evolving their visual style rather than throwing away the old completely, but still bringing some new and interesting features into play.

Smashing Magazine November 2009 Redesign

It’s still as ad-heavy as before, but that can be expected. At a glance, the navigational header present in the previous incarnation is bigger and more pronounced, and the search box has been moved there to be more prominent.

The classic “We smash you with the information that will make your life easier. Really,” line has  been removed from under the logo. I’m not sure if there is any significance to this other than making things look a little cleaner, but it will be missed.

Now one of the biggest changes in the redesign is the front page. Smashing Mag’s posts aren’t the only ones displayed there now. “What?” you may ask. Let the folks at Smashing explain it for you:

Continue reading →

XKCD Honors the Closing of Geocities

In case you missed it on October 26th, the webcomic XKCD changed their design in mourning (or celebration?) of GeoCities‘ closing. Geocities was the first major free web host, giving users 15MB of space for their HTML and image files. They were sort of the Blogger of the time, and the original MySpace. In the mid to late 1990s, they hosted a lot of websites, most of which looked rather putrid. XKCD pulled the look off quite well, with the ugly imagery, “under construction” graphics, multicolored comic sans type, and broken HTML code.

XKCD's Geocities-style page

It’s funny, in the geeky way characteristic of their comics, but let’s hope that retro web “design” doesn’t become a trend in the future.

In mourning or celebration (you pick) of Geocities' closing, XKCD has changed their design up a bit

Design Spotlight: Grooveshark

Grooveshark not only has a cool design, but is an interesting service as well. It lets you search for music and play it, streaming through the Flash player. Artists can submit their music directly to Grooveshark, giving them a promotional platform, as well as monetary compensation.

Anyway, to the design.

Grooveshark

Continue reading →

Quotes on Design

Here’s a neat project of Chris Coyier’s that I had forgot about: Quotes on Design.

Quotes on Design

Basically it displays a random design-related quote, and you can load more by pressing the AJAX-ified “Get Another!” button. You can submit ones you like, and search for ones you’ve seen before. (Perfect for when you’re writing a blog post and need to find that quote from that one designer…)

If that wasn’t cool enough, there’s an API. It’s not a full REST setup or anything, just a simple JavaScript bit you can include on your pages, but I think that might be enough to do some interesting things with. I’d like to see a screensaver that displays random design quotes…

If you’re into books, there’s also Quotable Books, over at BookAdvice.net.

Cufón JavaScript Font Replacer

Cufón is a neat font-replacement script that has been gaining popularity of late. It’s easy to set up, and works in modern browsers, and IE6+.

Cufon on ProBlogDesign.com

To use a custom font on a web page, you first run a TTF or OTF font file through the generator on the Cufón website (or your own instance of the generator), which will convert the and generate a JavaScript file named after the font.

Next you include the minified Cúfon script, and the font JS file, then call the Cufon.replace() function.

<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Copperplate_600.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1');
</script>

Easy enough. The only downside is that the text won’t be selectable after the replacement.

You can read more about Cúfon in the documentation.

Design Spotlight: Envato Marketplace Redesign

Envato launched the redesigns for their marketplace sites last Sunday. They all look pretty much the same, save for some color and logo differences, so I’ll just focus on ThemeForest here.

ThemeForest Redesign

Continue reading →