Designs of the Week

It’s interesting how despite the chaotic background you can still make out the boxiness. A nice contrast.

I like how the site is designed as this screaming poster for the band. The content for each page is minimal and concentrated in the middle. The style is a bit of old school webdesign with the custom scrollbars and whatnot, but impact looks like the top priority here.

Again, this looks chaotic but at first but you’ll find the screen divided into three: the navigation area, the content area, and the slideshow area. Simple.

I just love how well-integrated the navigation is into the design, which happens to be a bit cheery and not just the usual angsty grunge. Another thing I like: the custom background for the lightbox overlay—a lot of people don’t bother changing that, and here it matches the design.

Truth is, only the background is the grungy part. The foreground is a very interesting folded paper texture, which even influences how the logo looks. Also interesting is the treatment of the portfolio items.

Social Media Weekly

CSS – Progressive enhancement: pure CSS speech bubbles
“Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. This tutorial contains various forms of speech bubble effect created with CSS2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML.”

Usability – 5 Can’t-Miss Usability Tips for Mobile Website Designs
“Because of the instability in a lot of the mobile web design information that is being distributed on the web, a lot of websites have very poor mobile interface designs. Below, we’re going to cover a few simple, yet prominent steps to designing a much more effective interface and increasing the quality of a mobile websites usability.”

JavaScript – The Total Newbie’s Guide to jQuery: Select Elements and Manipulate CSS with jQuery (Part 2)
“If you’ve been wanting to learn the basics of jQuery and start adding some dynamic interactions to your website, this is the place to start. If you’d like to follow along with the code in this article, download the sample, which includes all of the code examples from the book.”

Moderate WordPress Comments

Moderator (Mac, Windows, Linux)

This Adobe AIR app lets you view and manage comments on your WordPress-powered blog. You can choose to accept or delete unmoderated comments, or mark them as spam. The app will also notify you (on your dock or system tray) of the number of pending comments you have. Comes with a WordPress plug-in.

wp-comments-notifier (Windows)

This open-source app works much in the same way as Moderator, but it’s written in QT/C++ and allows you to reply to and edit your WordPress comments as well as manage them.

Write & Manage Blog Posts

Blogo (Mac)

I only blog using my browser (but that’s because I’m a bit of a control freak)- but I used Blogo’s 21-day trial and really, really liked it. Mostly because of its friendly user interface, and its Whiteroom-like “clean screen” for blogging without distractions.

Windows Live Writer (Windows)

For blogging when I’m on Windows, my app of choice is Writer from Windows Live. It supports WordPress, Blogger, LiveJournal and TypePad, works smoothly, and has a good Windows-y feel to it. The best thing about Live Writer, though, are its plug-ins, which allow you to do things like insert content from your existing Facebook or Flickr accounts.

Monitor Your Website(s)

Website Monitor (Google Gadget)

My favorite desktop web monitoring apps are Google Gadgets, and this is one of them. It’s basic, simple to use, and just works, monitoring the response time and content of your website, and automatically notifying you of any problems.

Do you manage your websites from other desktop apps?

Now, of course, I can’t imagine going a day without checking Twitter. Web application developers know this, and as a result we have hundreds of Twitter-related apps available to us out there. Here are my favorite five:

Tweetwally

One of the reasons Twitter can be such a time-sucker is because you usually have to weed through hundreds of Tweets, finding those you’re interested in at any one time yourself. Tweetwally is a nifty little service that makes it easy to track specific tweets based on hashtags, usernames or keywords. That may not sound like much, but Tweetwally has some great search operators, for example:

traffic ? will find tweets containing “traffic” and asking a question.
“happy hour” near:”san francisco” will find tweets containing the exact phrase “happy hour” and sent near “san francisco”.

The Twitter Tim.es

If, like me, you’re a frustrated publisher, you’ll love what The Twitter Tim.es does: it generates a “real-time personalized newspaper” from your tweets. For example, see Tim O’Reilly’s Twitter Tim.es Newspaper.

TweetNotebook

In the same vein, TweetNotebook publishes your tweets in a whole new way- but takes it a step further, generating a real paper notebook that features one of your tweets on each of its pages. Simply submit your Twitter username, select a cover design, and it’s ready to go (cost is 12 euros). I adore this.

Tweeterate

Like to rate stuff? How about your friends’ tweets? Tweeterate lets you rate other people’s tweets as “useful, funny or lousy”- then see a list of your most “annoying” friends based on your ratings, and then choose to hide them if you like. It’s a bit of silliness, really, but I have to admit I clicked through to some of the top-rated tweeters listed here and found a few of them useful.

Tweets of Fury

This one’s even more pointless (it is, after all, brought to you by Pointless Corp.), but can be fun and is certainly one of the more creative Twitter-related apps I’ve seen. You can challenge your friends to a battle, submit “scandalous information about each other”, then play rock, paper, scissors (yay!), and- if you lose the latter- deal with having the scandalous info about you publicly posted on Twitter.

What Twitter web apps do you use?

Designs of the Week

Even several years ago this could be one of the narrowest sites out there, and it stands out because of that. Yet the content isn’t sacrificed.

Needs a bit more refined type, but the overall look is quite pleasant.

This one, on the other hand, mixes a lot of different typefaces and shades of yellow to brown. It may be a bit glaring to some but the detalis are lovely.

This business card-type site looks almost underdesigned but still looks crisp and clean. Again, it’s all in the custom type.

A narrow layout lets striking photo backgrounds define the look of the site. I like that the menu on the left shows the subpages for each link, not just the top-level navigation: instant sitemap.

Same photo background treatment, except it doesn’t change per page.

Great graphic details everywhere, and a very restrained use of color.

Narrow designs seem to have minimalist tendencies too. This one hides away the clutter with a sliding box for the navigation.

A narrow layout can also influence you to do a one-column, one-page site that makes reading and browsing more convenient.

Social Media Weekly

Design – 4 Pixels or Less
“Having too much choice is one of the main obstacles for 21st century designers. With virtually unlimited tools and possibilities at our fingertips in the digital age, our creativity can become clouded very easily. Being inundated with thousands of photoshop brushes or fonts can push the very concept of a design from the forefront of your mind.”

Typography – The Future Of CSS Typography
“In this article, we’ll look at some useful techniques and clever effects that use the power of style sheets and some features of the upcoming CSS Text Level 3 specification, which should give Web designers finer control over text.”

CSS – !important is Actually Useful (in Print Style Sheets)
“So what you need is a way of specifying print styles that can override the inline styles. There’s only one way to do that: !important.”

CSS – Flexible Color Schemes in Layouts with RGBa
“This will be an experiment in transparency. CSS has come a long way over the years, and one of the biggest advancements is the integrated use of transparency.”

There are some great newsletters out there, of course- they’re the ones I always open, because I know they probably a). Look great, and b). Have something interesting to say.

So how to design email newsletters that work well? Here are some tips:

Design at 600-pixel width or below.

It would be wonderful, indeed, if everyone in the world was using widescreen monitors and one email client- but to make sure that even your subscriber with the 12″-screen viewing mail on AOL’s tiny preview pane can read your newsletter, don’t go beyond 600-pixels in width.

Use less images, and always include alt text.

Many email clients- Gmail is one- have images turned off by default, and it’s up to the user to turn them on. I use Gmail exclusively, and I usually only turn images on when the subject interests me. If it’s obvious that all I’ll see are huge promotional give-me-your-money images, I won’t bother. Having alternative text is extremely important, of course.

Embrace tables. That’s right- tables.

Until all email clients portray HTML emails similarly, tables are your best friend when creating newsletters that are design-heavy. You can brush up on your HTML table coding here.

Don’t rely on the external.

Don’t try to load external stylesheets or javascript documents. Instead, use only inline CSS styles. And forget javascript entirely- unless you want your email to be marked as spam.

Be interesting.

Nothing turns me off an email faster than a subject line that reads like a tabloid headline. Subject lines should be well-crafted, reflecting the “style” of the newsletter itself, and intriguing enough so that your readers will want to open the email.

Use a good email service.

Not so long ago, I wrote a post titled 5 Awesome Email Marketing Services. Any of these five services are recommended, but the one I use all the time now is Mad Mimi- not only is their customer support pretty awesome, is it unbelievably easy to craft great-looking, cleanly-coded newsletters in my Mad MImi dashboard.

Have a killer landing page.

After your reader reads the newsletter, you probably want him or her to click on a link that will direct to a page on the web. Work on this page- make sure there’s continuity from the newsletter to the page. You want your reader to feel that their click was worth something.

Test, test, test.

You want to code for all email clients, so try to test on as many as possible. It’s always good practice to send yourself a newsletter before you send it out to hundreds or thousands of people.

What are your tricks for great-looking email newsletters?

That said, I do use handwriting-themed fonts in my projects quite often- and am absolutely delighted anytime I find a good, free one. Here are my top five choices:

JohnLennon

Yes, I’m a fan- and I’ll admit to writing out the lyrics to Imagine using this font when I first got it. Still, there’s no denying this is a great handwriting font- not only are the letterforms well thought-out, it also features a few John Lennon-inspired dingbats, including a facsimile of his signature. Download JohnLennon »

Amandine

It isn’t easy finding handwriting fonts that look both like real handwriting and like art. Amandine, a French-inspired font that makes me think of warm croissants, the Eiffel Tower, and cobblestoned streets, is simply beautiful. Download Amandine »

Daniel

An excellent font that comes in three varieties: Daniel, Daniel Black, and Daniel Bold. Doesn’t sound too exciting, but if you take a look at the full character maps of these variants, you’ll see what makes them special: each one has a distinct look to it, with Daniel being clean and plain, with different pen styles for Black and Bold. Download Daniel »

Luna

I can’t exactly put my finger on what I love about Luna, which is clean and nicely rendered and just a little bit quirky- but I find myself using this one a lot. It looks like handwriting, and yet it so clearly is not. Download Luna »

Santos Dumont

From font genius Billy Argel comes this absolutely lovely handwriting font, perhaps my favorite of the bunch. Great for everything from vintage illustrations to logos to letterheads to scrapbooking. Download Santos Dumont »

Do you use handwriting fonts?

Designs of the Week

Social Media Weekly

Usability – The 10-Second Usability Test
“Is your site usable? Testing the usability of a site is one of the first things to be done during the search engine optimisation process. Keeping tabs on usability is one of the ways to assess how much work your site is going to need to pull it up in the rankings.”

Design – Taking Type to the Next Level with Alternate Characters
“Are you sick of your type looking plain and boring? Many OpenType fonts have alternate characters built into them that can transform your type into a beautiful piece of art. By using these alternate characters you can add things like flourishes and flair to your type with ease.”

Ideas – 10 Principles That May Make Your Work Better Or May Make It Worse
“I was asked to map my own ocean and to document a few of my guiding principles. They may be of assistance to you. They may not. But then again, it’d be a shame if we were all working off the same map, looking for the same treasure.”

Mobile – 10 Great Tools to Create a Mobile Version of Your Site

WordPress, which I use to power about 95% of the sites I design, doesn’t have breadcrumbs built-in, so I usually do one of two things:

Use a plug-in

The quicker method, of course. There are a few out there, but my choice is the Navxt plug-in, which really takes me just a minute or so to activate and start using. You can learn more about Navxt including how to install and start using the plugin here.

Don’t use a plug-in

This page by Dimox from Russia describes how to set up automatic breadcrumbs yourself without using a plug-in. It looks like a lot of code, but the truth is it’s really simple to do, especially if you just copy and paste Dimox’s code. Be sure to read through the comments on his post for some ideas on customizing it to your site’s needs.

You will, of course, want to style your breadcrumbs nicely. For that, I recommend this tutorial for creating Apple.com-like breadcrumbs, or the lovely Veerle’s post on simple, scalable CSS-based breadcrumbs.

Do you use breadcrumb navigation on your sites?

Mom: I’m at this website… and I don’t know what to do next!
Me: What links can you click on?
Mom: Links? How do I search?
Me: Is there a search box? A search button?
Mom: Um, no… oh, wait… not here… or there…
Me: Try scrolling down? Look in the upper right area?
Mom: Okay. Oh! There it is! I found it! Thank you. Why are you so good with computers?

This scenario is more common than you think. Sometimes I feel like my mother is almost oblivious to most site navigation designs- like she just doesn’t see them.

If my mom falls at all into your target audience (and she loves online shopping), here are some tips for site navigation design that might make everyone’s lives easier (especially mine):

Make Buttons Look Like Buttons

They don’t have to be all 90’s-style over-beveled buttons, but they should look like buttons. Thin borders are good, “tab” styles are good, and if they change- even slightly in color- on mouseover, even better.

Be Clear

Mom loves buttons that say “Click Here!” Of course, they aren’t recommended. What you should do is be as clear as possible that if you click here, you will be brought here. The w3 explains this well, and basically you want to:

• Provide information when read out of context.
• Explain what the link offers.
• Don’t talk about mechanics.
• Don’t use verb phrases (e.g. “Tell me more”)

Make Search Prominent

When faced with a confusing-looking site, the first thing Mom does is look for the search box- so make it obvious. On the same subject, make your search results easy to understand as well. I wrote more about search about a year ago.

Don’t Hide Things

I love Google, but the way they hide their top navigation bar unless you mouseover it is not cool with Mom- she doesn’t browse like I do, with one hand on the mouse, moving the cursor around constantly. She sits back and says, “What now?” So, if Mom is your target audience, go easy on the hiding.

How do you simplify your site navigation style?

Designs of the Week

Not only do we have a light on dark design here, but a glowing light on dark design. It’s colorful too, because of the thick demarcations color-coded by content type. My only wish is for the search bar to be part of the fixed area; I think that’s just as important a navigation element as pagination.

Interesting choice of content in the fixed area: name and contact info (very important), quick links to portfolio items grouped by year, and quick links to additional info about the designer. Overall, neat and nicely organized.

Another split, one page site. Cool hover effect on the brain graphic, and interesting combination of background patterns (one ornate, one techie).

Brilliant effect on the blue markers, telling you exactly where you are on the page and keeping things dynamic.

A custom font makes a big difference. Big, bold, boxy, but not overwhelming.

Not so exciting fixed area (they’re more for utility anyway) but does well in presenting the portfolio.

More than half of the page is fixed—narrow content areas isn’t quite dead yet!

I like how you start with a practically blank screen when you load the site. Then you get a simple yet dramatic transition animation to load each section’s content.

Another thing that isn’t dead: left-aligned layouts. No skimping on the amount of whitespace either.

The thing about changing backgrounds is the foreground has to match, and amazingly enough, this site pulls it off. Other than that, graceful details everywhere.

I like the three different shades of blue in three different columns. Not too thrilled about the use of the drop shadows and inner shadows here though.

I love endless scrolling. I’m on the fence about the stark black icons, although they give a quirky feel to a text-filled site.

What really sets this design apart is the carefully chosen and crafted custom photos for each post, everything blends well. Not to mention custom type everywhere.

Social Media Weekly

Usability – Why Not a User

CSS – CSS gradients for all web browsers, without using images

CMS – 10 Simple and Light Weight CMS Solutions

Montastic

I’ve been using Montastic for several years now. I like how it’s simple to use, and does exactly what it says: monitors your sites for downtime. Its free version checks your website every 30 minutes, which is fine for most of my needs. Checking is made from many (US) locations, and the IP numbers of their checkers change “on a regular basis”. A good and solid choice.

Mon.itor.us

I only recently discovered Mon.itor.us, but have already embraced its powerful (and free!) service wholeheartedly. Its interface isn’t too pretty, but when I said “powerful” I meant it- Mon.itor.us will track your site’s uptime (including averages), response times, and visitors. You can build widgets to place on your website, as well.

LinkPatch

There are lots of similar services out there, but LinkPatch is hands down my link checking service of choice. It constantly monitors your site(s) for 404 page views, including links from external sites and out-of-date links you forgot to redirect. It also takes into consideration things like common user misspellings, then automatically emails you details on who got the error, where they came from, and what they were looking for in the first place. Plans start at $10/month, but there’s a free plan if you only need the service for one site.

How do you monitor your sites?

Twitter Buttons

I’ll admit my bias here: I designed many of these buttons, with a wide selection of styles from boxy to glossy to girly. These aren’t meant for downloading- simply input your Twitter ID, hit “Go”, and copy the code directly beneath the button(s) of your choice. Visit Twitter Buttons »

Social Icons Hand-Drawned

There are quite a few “hand-drawn” style buttons out there. These, released on by TheG-Force on Deviant Art, are my favorite. They’re hand-drawn, but still stay true to the social media logo colors, making them easy for your visitors to find on your page. Get Social Icons Hand-Drawned »

Social Bookmark Iconset

I find myself using this one over and over, especially when a particular project could use (or, let’s be frank, a client insists on) a small injection of that Web 2.0-gloss-and-reflection-style. They’re well made, and include most of the popular services today. No Twitter, though- but for that, see Twitter Buttons above. Get Social Bookmark Iconset »

Aquaticus Social

Next to the Iconset above, I use this the most. With 30 buttons to choose from, there’s one for nearly every social media service you can think of- from Twitter to Facebook to Vimeo. Because they’re hip-to-be-square, they require less space than round icons, and when you’re pixel-counting, that’s a very good thing. Get Aquaticus Social »

Cheers

Finally, I couldn’t list my Favorite Five without including Smashing Magazine’s contribution to the free social media icon world. From a RSS beer mug, to a shot of StumbleUpon, to a champagne flute of Twitter- these may not be suitable for every project, but they certainly belong in any designer’s button collection. Get Cheers »