Smashing Newsletter: Issue #1

• By Smashing Editorial
• March 2nd, 2010
• Newsletters
• 1 Comment

Welcome!

Hello, and welcome to the first issue of the Smashing Newsletter. You wanted it, so you get it! Subscribe here to the Smashing Newsletter if you’d like to receive our newsletters and keep uptodate with the latest trends, tips and tricks for designers and Web developers. The newsletter issues are written exclusively by our Smashing Editorial Team — for you!

This newsletter issue was sent out to 17,321 newsletter subscribers on March 2nd 2010.

Table of Contents

01. Browser Details for Tech Support
02. Sliding jQuery Labels for More Usable Web Forms
03. CSS Killswitch
04. Photography Showcase: The One Who Got Away
05. Compare Photoshop PSD Files Layer by Layer
06. Get Inspired: Vintage Letterhead Design Blog

1. Browser Details for Tech Support

As the operator of a website or online service, you know the problem: a gruff complaint to customer support because nothing works. And the customer, in his frustration, unfortunately forgets to provide further details.

Where does an admin or programmer begin when all they have to go on is “does not work” or “is broken”? You need details: about the customer’s browser and its configuration. A reasonable approach to the problem would be to start with some queries, which the non-specialist would be able to only partially answer: “Which browser? Well, uh… this Mozzarella.” “Cookies? I haven’t baked in years.”

When in doubt, send your customers to the website Support Details. Their data will be automatically read out of the browser (including Flash version, operating system, cookies, JavaScript status, screen resolution, browser size and more) and can be copied, sent directly to you via email or saved. The free service uses Flash but can also complete its task without it. (sl)

2. Sliding jQuery Labels for More Usable Web Forms

At first glance, using labels in input fields sounds like a good idea: the form is shorter and the user isn’t distracted by the labels he has already dealt with. But what happens if the user forgets the question he was asked? Or if he wants to double-check the question? Or if he absent-mindedly clicks on a field before deciding to fill in other fields first?

In such cases, the form becomes unusable, which is why placing labels above the input field instead is common practice. But now there is an alternative: sliding labels. Tim Wright came up with a jQuery technique that presents labels in input fields by default but then slides them to the left (or up) rather than removing them on click. If JavaScript is turned off, the labels are displayed above the input fields. The small jQuery snippet works in all major browsers and can be used for input and textarea elements. (vf)

3. CSS Killswitch

Have you ever had that demanding customer who wants a completely unconventional Web design, fancy animations, dynamic style sheets and all the rest of it, who phones you every other minute requesting alterations that keep you busy day and night… but when it comes to paying the bill they are, at best, reluctant?

Well, if that sounds familiar, don’t worry: now there is a solution. Ever heard of CSS Killswitch? Have a look at this “inconspicuous and innocuous” little tool, as its author puts it. When the client has ignored your reminder to settle the invoice for the eighth time, just make a simple click and activate a ‘killswitch’ stylesheet on the problem client’s website. This will sure bring you two back onto speaking terms and put you in an advantageous position. After you’ve received payment, deactivating your little helper is just as easy.

So, give your new friend a try. But remember never to take things too seriously. (mm)

4. Photography Showcase: The One Who Got Away

Some people enter our lives and then exit, leaving a hole in our heart. Whether they are a friend or something more, and whether they are absent a year or for the rest of our life, all that’s left is our memories and sometimes a picture of them.

Throw in a few sentences and you’ve got “The One Who Got Away,” a series of powerful stories by various people who all try to capture their memories of people missing from their lives. Take a look at this moving showcase, because even though each one of us has our own past, we all have memories that just don’t fade. (jb)

5. Compare Photoshop PSD Files Layer by Layer

Sometimes with big Photoshop projects, we end up with multiple files that have only slight variations between them. Or we’ll save separate versions in case we want to revert to an earlier one. But then we wind up with six different versions and can’t tell the difference between them.

ComparePSD lets you compare two Photoshop files side by side and see every little difference. Look for differences by layer or by effect. You get a scaled view of the files, so you can see them next to each other and pick out differences more quickly. ComparePSD is available for Windows only and is free to download and use. (cc)

6. Get Inspired: Vintage Letterhead Design Blog

How many boring and uninspired letterheads have you come across? The world is full of predictable, bare and even ugly letterhead designs. If you’re looking for some inspiration, then head on over to Letterheady.

You’ll find fancy designs, popular letterheads and inspiration for your own creations. You’ll also find out which letterhead designs were used by Elvis Presley and The Star Wars corporation in 1976.

Also, feel free to submit your own works, add comments to other designs and discuss them with other users. It’s only a matter of time before you start feeling letterheady yourself, that’s for sure. (cs)

The authors in this newsletter are: Vitaly Friedman (vf), Sven Lennartz (sl), Christina Sitte (cs), Cameron Chapman (cc), Jessica Bordeau (jb), Manuela Müller (mm).