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 »

Designs of the Week

Wedding sites tend to be filled with flowers and scripty type. This look is a sort of middle ground that doesn’t overwhelm: a more delicate slab serif and purple hues instead of pink.

Here’s a similar look, this time with a shade of Tiffany blue, often associated with weddings. The scalloped edges also seem to be a popular touch for that cozy and romantic feel. And when in doubt, serifs also seem to up the romance factor a bit!

The design gets out of the way, but doesn’t forget to make the browsing experience better with the drop-down menu and the share buttons.

Despite a positioning problem for one line of text in the header, this site looks pretty good. And it needs a bit more contrast with the smaller text below.

Interesting how the header area isn’t very big but attracts attention nonetheless with the floral vines, which is pretty much the only decoration on the site. And by the looks of the screenshot for registered users, the UI looks well done.

Here’s another typical scenario: if it’s a wedding photography site, it’s probably dark. That usually makes the photos pop. You’ll want the design minimal as well.

Or you can go light, remembering to stay neutral. The flowers used here are really pretty; they look almost as transparent as the main box. Love the whitespace.

I think the paragraph text should be darker and bigger. Other than that, I like that lots of elements on the site carry the scrapbook theme well, even the forum icons and calendar dates.

Has the feel of wedding invitation, but doesn’t go overboard. I love the second-level menu.

This one’s definitely a girly look. My problem with this site is it looks somewhat juvenile instead of elegant. Perhaps too sugary?

It looks almost underdesigned. But the fantastic part of this site is this: clicking on the arrows scrolls two panes (one for the images and one for the description) and changes the background to match what’s in the panes. Subtle but brilliant! (Tiny issue though: when you change pages, the default background flashes before it is replaced by the contextual one.)

Love the 3D effect going on below the blurbs, although it looks a little too light.

The odd one out of the group, with a completely different look that doesn’t really scream “wedding”. Looks quite savvy though, which does seem to match the feel of luxurious jewelry. I like how the buttons have a subtle background pattern to them. Then the logo reappears as a large watermark background in the bottom navigation, another nice touch.

Social Media Weekly

Design – Overcoming Creative Block

Accessibility – Social Inclusion for the Web

Programming – Explaining what YQL is to non-technical people

Whatever you personally think of Apple’s iPad, the thing will probably sell like hotcakes. And with wi-fi web browsing as its main feature, you want the sites you design to look great on the iPad’s browser. If they look okay on iPhone screens, just “okay” won’t cut it anymore- not with the large screen on the iPad. Here, some things to keep in mind for iPad-friendly web design:

Fluidity & Flexibility is important.

The iPad has a screen resolution of 1024 by 768- so if you, like most of us, have been designing with 960 pixels (or the 960 grid system), you should be fine. However, it’s important to note that the iPad can and will show your website in both portrait and landscape modes automatically- so having some fluidity or flexibility is a good idea. The multi-touch screen means that visitors will probably put your design to work, pinching and zooming and so forth.

Good Contrast and White Space is important.

Remember: it’s a touch screen. That means people will be interacting with their fingers. Some of these fingers are large- which is why it’s so important to make your clickable links as clear as possible. And use white space wisely- don’t group a bunch of tiny links together. They might be easy to click on with a mouse pointer, not so much with the tip of your finger.

Flash is less important.

The iPad doesn’t support Flash, and probably won’t anytime soon. Create less elements that are wholly dependent on Flash (and hey! We have tips for you!)

Testing is important.

Test, test, test. Until you get yourself an iPad, testing on an iPhone browser or on Safari in OSX is always a good idea. Test that your XHTML and CSS is valid, test whether javascript is supported, and so on.

How important do you think web design for iPads is?