Nov 26, 2009 by Matt | Posted in Design
Don’t miss this amazing Smashing Magazine article: 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.
Nov 17, 2009 by Matt | Posted in Design
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:
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:
Now your preformatted text will wrap down if the line is just too long.
Nov 9, 2009 by Matt | Posted in 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 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.
Nov 6, 2009 by Matt | Posted in Design, Featured
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.
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:
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 →
Nov 5, 2009 by Matt | Posted in Design
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.
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 →
Oct 30, 2009 by Matt | Posted in Design
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.
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.
Oct 28, 2009 by Matt | Posted in Design
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.
Continue reading →
Oct 14, 2009 by Matt | Posted in Design
Here’s a neat project of Chris Coyier’s that I had forgot about: 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 you’re into books, there’s also Quotable Books, over at BookAdvice.net.
Oct 9, 2009 by Matt | Posted in Design
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+.
Next you include the minified Cúfon script, and the font JS file, then call the Cufon.replace() function.
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.
Oct 1, 2009 by Matt | Posted in Design
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.
Continue reading →