Smashing Email Newsletter Turns Two Years Old: Comment and Win!

Two years ago, we launched the Smashing Email Newsletter. Today, we’d like to reflect on some of the greatest newsletter articles of the past year and celebrate this anniversary with our 100,000 readers with a fabulous book giveaway!

Back then, we planned to launch the Smashing Newsletter only if we had at least 10,001 subscribers who were interested in receiving the newsletter; and indeed, we managed to reach over 17,300 subscribers! Up to the present day, our newsletter is being sent out to more than 100,000 readers and we have promised ourselves to do our best to make their subscriptions worthwhile. Every two weeks, we hunt down obscure blogs, useful tools, valuable techniques as well as quality goodies, and present them to our readers in short bits and pieces in our newsletter issues.

The Smashing Newsletter has been traveling quite a lot in the past two years!

We work very hard to ensure that each and every article featured in the newsletters has a purpose, a value and a meaning—something tangible for our subscribers to take away from each issue. The Smashing Newsletter is a collective effort of the entire Smashing team: the editors, eBook producers, support team, proofreaders—the initials of the team members are what the mysterious signatures at the end of every piece actually stand for. Its our little team project that involves everyone here at Smashing Magazine and is dedicated to the best interest of our dear readers. Also, the feedback that we receive from our subscribers is what truly motivates us to keep up our work and helps us to constantly improve on its quality.

Of course, no birthday bash is perfect without a little fun and games—that is why we have selected a handful of outstanding design books to give away! If you’ve found the newsletter issues useful to you, please feel free to with your friends and colleagues. And in case it still hasn’t found its way into your inbox yet, you can subscribe anytime:

How Do I Win A Book?

It’s quite simple actually. Post your opinion about the Smashing Newsletter in the comments section below. Tell us which of last year’s posts was your favorite, or why someone should subscribe to the Smashing Newsletter, or what you’d like to see featured, or even other newsletters you’d like to recommend. The 6 winners will be randomly selected and announced on the 12th of March 2012.

• PANTONE: A Color History of the 20th Century
  by Leatrice Eiseman and Keith Recker. Chronicle Books, 204 pages.
• The Icon Handbook
  by Jon Hicks. Five Simple Steps, 323 pages.
• Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement
  by Aaron Gustafson. easyreaders, 144 pages.
• Malcolm Gladwell: Collected
  by Malcolm Gladwell. Little, Brown and Company, 768 pages.
• Saul Bass
  by Jennifer Bass and Pat Kirkham. Laurence King Publishers, 428 pages.
• Notations 21: 165 Musicians Visualize Sheet Music in Unusual Ways
  by Theresa Sauer and Mike Perry. Mark Batty Publisher, 320 pages
• Typography Sketchbooks
  by Steven Heller and Lita Talarico. Princeton Architectural Press, 368 pages.
• Street Sketchbook: The Creative Process of Top Graffiti Artists
  by Tristan Manco. Chronicle Books, 272 pages.

Best Of Smashing Email Newsletter: Year Two

Last year, the Smashing Newsletter delivered 183 short articles in total. The ones below were the reader’s favorites:

Cinemagraph: Animated Photography

If you ever feel drained, Jamie might be able to help. Jamie collects vintage cameras and old typewriters, and he makes a living off of his photography in New York City, occasionally using film. From Me To You is his impressive photography blog, a collection of scenes from around the world, memorable events, food, people and small personal universes. The interesting part is that the photos are animated (hence the name); they come to life using good old animated GIFs.

The author’s experimental cinemagraph posts not only seem to come alive, they really do! Your jaw may drop as you scroll through the colorful entries, perhaps catching a model winking at you or seeing those curtains rustled by the wind. Just sit back for a moment and let Jamie take you on a journey. Did a taxi really just drive by? Did this girl in the right upper corner really smile?…

If From Me To You has aroused your interest in the Cinemagraph technique, then pay a visit to the article Positioning an animated gif over a jpg image. His short tutorial explains how to save on bytes when putting GIFs and JPEGs together, without losing too much quality. (sp)

Works Of Art Done Entirely In Light

Light painting is probably one of the most beautiful forms of photography. Using nothing but various lighting tools and a single long exposure, beautiful shapes are created seemingly from nothing. In true light painting, no post-processing or retouching work is done.

David Gilliver creates beautiful light paintings using a variety of light tools. The one shown above, Ribbon Dance, shows beautiful reflections in the water, and bright, vibrant colors. The photographer is “present” in all of his paintings, although he isn’t visible because he wears dark clothing and is constantly moving. Be sure to check out his website and his photostream for even more great light paintings! (cc)

A Lyric A Day

Take one lyric from a song every day and create art or shoot a photograph inspired by it. That’s exactly what Lukes Beard has been doing for almost a year now. The result is fascinating: A Lyric a Day is a remarkable collection of artwork, all dedicated to powerful statements in songs and heavily influenced by the music and the designer’s personal mood and interpretation of the songs.

The designer’s commitment to the project is both encouraging and challenging: are you ready to commit yourself to designing something every single day, too? A Lyric a Day is a good example of a creative side project, which in this case helps the designer explore his creativity and imagination and study new ways to connect music, lyrics and visual design. (vf)

Tilt Firefox Extension: DOM Inspection In 3-D

How much time do you spend traversing the DOM in Firebug, exploring the relationships between nodes, analyzing the structure of code and trying to manipulate it with nasty (or not so nasty) JavaScript? Well, perhaps you’d like to try a different approach to DOM inspection for a change. Mozilla’s new tool, Tilt Firefox Extension lets you visualize the DOM tree of any Web page in 3-D. Because the DOM is essentially a tree-like representation of a document, the developers of the tool have decided to layer nodes based on the nesting in a tree, creating stacks of elements, each with a corresponding depth, and textured according to the Web page being rendered.

Unlike other DOM inspectors, Tilt allows for instant visual analysis of the relationship between various parts of the Web page, but it also makes it easy to see obscured and off-page elements. On request, developers can pull in further information on each node’s type, ID, class or attribute, providing a way to inspect (and edit) the inner HTML and other properties. The driving force behind the visualization is WebGL. The latest build of the extension is available for downloading and should work in the latest version of Firefox. Who knows? Perhaps playing with the DOM can be fun after all. (vf)

Thirty-Three Vintage Album Covers

Some people collect postcards, others collect stamps or pencils. The guys behind Jive Time Records, a Seattle-based store specializing in used vinyl, collect — guess what? — vintage album covers. More than that, they group and classify them according to their shapes: circles, dots, squares, lines, stripes or arrows.

The result is Project Thirty-Three, a growing collection of vintage album covers that convey their messages with only simple shapes and typography. The website features over 430 covers and the collection keeps growing. Now, that’s an interesting source of inspiration for your next cover design or poster! (vf)

Things Organized Neatly

Being organized may be very helpful in our everyday lives. Some people are naturally organized, and without noticing it, create patterns and rules for systemizing their objects. In case you’re one of those talented people who makes a hobby out of this mania, you’d certainly like to visit Things Organized Neatly.

In the blog curated by Austin Radcliffe, you’ll observe perfectly harmonized compositions that vary in shape, size, material, color, category and related objects. Some examples are vintage matchboxes, headphones, keys, cups, to name a few. There’s also the possibility of posting one of your compositions, in case you’d like to show your friends that organization can also be an art in itself. (tt)

Art Of The Menu

The days of boring laminated restaurant menus are finally over. The good old UnderConsideration, a legendary website that chronicles the most curious, creative and notable projects around the world, has come up with a new category: “Art of the Menu” which catalogues the underrated creativity of… menus.

Pay the website a visit and discover how scanning a menu in a restaurant or bar does not have to be boring. Does your favorite bar or diner have a menu worth looking at? Submit it, and make it part of this inspiring collection, which covers various cuisines. Hopefully soon, the menus will cover many countries and continents, too; until they do, enjoy the creative outbursts of the field’s pioneers! (sp)

Cutting-Edge Web Typography Experiments

Modern Web technology allows for remarkable interactive and visual experiments with media that used to be static and monotonous. Those times are long gone, and the project Web Typography for the Lonely proves just that. Christopher Clark, creator of the website, celebrates the power and beauty of Web typography through various visual experiments.

The website is essentially an ongoing collection of experiments and writings on Web typography and the possibilities of cutting-edge standards-based Web design. Christopher is pushing the boundaries of what is both possible and practical in Web standards in a way that is compelling and exciting to the visually minded creative. At the moment, five experiments are presented, among them creative works that play with SVG, HTML5 canvas, CSS and JavaScript. All examples are documented, and the source code can be downloaded and studied on GitHub, along with related techniques and resources. (vf)

Fractal: Valid Code In HTML/CSS Emails

CSS support in email clients is all over the map. Some have great support, some have almost no support, and most fall somewhere in between. Figuring out what to use and what to leave out is tricky at best, especially if you constantly have to refer back to charts and graphs that tell you what does and does not work in each client.

Fractal is a tool developed by Campaign Monitor that validates your HTML and CSS and lets you know which clients your email will and won’t work in. Fractal gets even more useful, though: in addition to flagging the parts of your code that are unlikely to work, it also gives you suggestions on how to fix the problems. You can even contribute your own fixes to make the app even better. (cc)

HTML5 Canvas Vector Graphics Scripting Tool

HTML5′s canvas opens up whole new opportunities for creating vector graphics right in the browser. You can work with the canvas directly, of course, but using a wrapper has added benefits. Paper.js is more than just a wrapper, though. It’s a full library with a lot of highly useful tools that canvas alone doesn’t provide.

These tools include highly optimized and accurate mathematical calculations for bezier-related manipulations (such as bounding-box calculations) and a well-designed scene graph and DOM. Paper.js makes it easy to create paths and add segments, and it comes with handlers for mouse and keyboard interaction and assets such as symbols (which let you place multiple instances of an item in your project). Some useful Paper.js tutorials are available, too. The library is being developed by Jrg Lehni and Jonathan Puckey and is distributed under the permissive MIT license. (cc)

DesignersMX: What Tunes Keep Designers Rolling?

Music. Design. Inspiration. The three have gone hand in hand ever since homo sapiens have walked the earth. DesignersMX is dedicated to finding out which tunes keep designers around the globe rolling and get their creative juices flowing. Blake Allen and Josh Sullivan kept it simple: just sign up, log in and share your own compilation of fresh beats and bright tunes. Let the world out there know what music is worth playing during those brainstorming sessions and periods of focused concentration.

Every featured compilation consists of 10 tracks. All of the tracks are playable on the website, so you can cycle through the playlist or enjoy the entire compilation. Last but not least, the designers’ reviews of album art are worth a glance or two. (sp)

David Rumsey’s Map Collection

David Rumsey’s Map Collection is a large collection of maps of the world from 1700 to the 1950s. The project was started over 25 years ago and contains over 26,000 high-resolution images of maps, with new ones added regularly. A good number of historical maps are also mapped to Google Earth and Google Maps. so you can track them on current geographic data.

The project provides access to carefully catalogued high-resolution images of maps, as well as a variety of tools for comparing, analyzing and viewing items in new and experimental ways. The website is updated monthly. (il)

Mr. Stacks: On-the-Fly Layer-Comp Storyboarding

For us designers, an effective workflow is all about having a solid collection of little time-savers, each of which eliminates some mundane task and helps us focus fully on more pressing and creative responsibilities.

Mr. Stacks is a tool that helps exactly with this. It is a small Photoshop script that can quickly generate storyboards, stacks and PDFs for project CDs, client presentations or anything else — right from the Layers Comps in your Photoshop file. The script would be useful for a series of animations, storytelling elements in a design and advertising.

You can take any normal-sized banner and spit out paneled storyboards in just a few clicks; or you can use it to email the latest PDFs of your work to clients (although an installed version of InDesign is required for that). To use the tool after installing it, go to “Scripts” in the File menu in Photoshop and select “Mr. Stacks.” Unfortunately, the script works only in Photoshop CS5. (vf)

Method & Craft: The DVD Extras of Web Design

Looking into the methods (and sometimes madness) of other designers can be fascinating and insightful. And reconsidering our own work habits after observing the habits of others sometimes results in higher productivity or better results. Finding that kind of information in a single place, though, is challenging at best. It often requires going to a bunch of different blogs, each of which focuses on a different designer.

Enter Method & Craft. Describing itself as “the DVD extras of design,” it offers a behind-the-scenes look at different designs, including how they were achieved, the techniques used and how the designers have grown in their professional careers. It offers articles, interviews, videos (showing designers at work) and notes (offering short tips and links). Eight authors are currently contributing to the website, all with varied design backgrounds. (cc)

The Current State of HTML5 Forms

HTML5 has many new features intended to make the process of creating websites easier and to improve people’s experience in using those websites. Among the features are many enhancements to Web forms. Because HTML5 is fairly new and not all of its features have been worked out yet, not every browser supports HTML5 features the same way.

On Wufoo’s HTML5 Forms website, you can explore all of the new features to learn which browsers support which features and to what extent. The list of browsers includes various versions of Firefox, Safari, Chrome, Opera and Internet Explorer. Unfortunately, IE9 is far from wide HTML5 support in terms of HTML5 Forms. (tb)

Moshik Nadav’s Typography

Moshik Nadav’s true love is typography and typeface design. He sees typography as a distilled form of design. He is currently a fourth-year student in Jerusalem specializing in typography. Below is only one of the many great experimental type designs that he exhibits on his website and that are worth checking out.

Nadav’s portfolio is full of inspirational typographic artwork and creative projects. Especially interesting is his project “Playful Ampersand” which features hundreds of experimental designs of the traditional Ampersand sign. Moshik worked for two years as a graphic artist at a prominent advertising company in Israel and now works as a freelancer, practicing typography and typeface design. (ik)

The Art of the Title Sequence

This Web resource of film and television title designs from around the world is free to the public and updated monthly. The Art of the Title Sequence is dedicated to the brief history of title design, and it features opening titles for film and television. High-resolution thumbnails from the titles are presented, the works are extensively cataloged, and the variety of tools allow you to compare, analyze and view items in new and experimental ways.

The works, which are intended to foster creativity, are accompanied by stills and video links, interviews, creator notes and user comments. Also, check out A Brief History of Title Design Video, a short film that features some memorable and remarkable title designs. Hats off to all the designers who have created and are still creating excellent title sequences! (il)

Diptych, Triptych and N-tych for Photoshop

Every photographer and Web designer who has spent time arranging images and photographs knows that scaling and resizing takes time. But even existing templates are unnecessary when you try out Reimund Trost’s latest little Tych Panel for Photoshop. It completely automates the n-Tych creation process, and it has a lot of layouts to choose from. “Tych Panel comes with a fresh aroma of speed and feel of simplicity.”

Here’s how it works. After installation, the panel is available through the Adobe extensions manager. Once open, just select the images you want to use, tell the panel your target width for the whole Tych, and then select the quality of the automatically resized images and whether you want the single images to be saved separately. Each image will be opened in a separate layer, and the document will be ready to be tych’d!

Pick a Tych variant, and you are ready to go. Applying the script repeatedly will add further rows and columns to your layout. (sp)

A Paper Record Player

There are some sleek invitation cards out there, and this is surely one of them: a wedding invitation with a paper record integrated in it that amplifies the sound of a sewing needle moving along the grooves of a flexidisc record. Kelli Anderson and her boyfriend Daniel have come up with a remarkable way to invite Karen and Michael’s loved ones to their wedding.

Not only did they design a fine cover for the invitation card, but they managed to bring the simple paper card to life with Karen and Michael’s wedding song, which they composed themselves. And to think this is only a taste of what’s to come. (il)

Death To Comic Sans

Not a day seems to goes by anymore when you don’t come across some instance of Comic Sans being used completely inappropriately. Police communications, office memos, church bulletins, restaurant menus: the list goes on. For whatever reason, your average DIY graphic designer thinks that Comic Sans is the perfect font for every occasion.

The next time you see someone using Comic Sans inappropriately, consider sharing with them a link to Comic Sans Criminal, which lays out the reasons why Comic Sans is misused and offers some helpful alternatives. Apparently, the only appropriate uses for Comic Sans are when your audience is under 11 years old, when you’re designing a comic and when your audience has stated that they prefer Comic Sans. (cc)

PayPal Fee Calculator: I Wonder What I’ll Be Left With…

If you haven’t heard about it, it’s about time: PPCalc is what you need on days when you shoot money over the Web via PayPal. If your clients pay your invoices via PayPal or you are an active eBay’er or just a regular online shopper, you might want to know PayPal’s fees in advance before making a transaction. PPCalc shows you the exact amount you would have to charge a buyer if you wanted to sell your item for, say, $100, and not $100 minus the $3.20 PayPal fee, which would leave you with a net $96.80.

This PayPal fee calculator supports different PayPal rates, including the standard and merchant rates, as well as different countries and currencies. It even lets you calculate the 2.5% currency conversion fee due in some multi-currency transactions. The MassPay File option allows for up to 5000 simultaneous payments, charging the fee to the sender, not the recipient. PPCalc comes with a button generator for any possible call to action you might need on a commercial website. The online mobile version of PPCalc might also be helpful.

If you have been wondering why the money you receive via PayPal tends to vary, check PPCalc before accepting your next payment. Thanks to Ryan Olbe for his development efforts. (sp)

Sprite Cow: Generate CSS For Sprite Sheets

When it comes to optimizing the loading times of pages and reducing the number of HTTP requests, CSS Sprites is one of the most popular techniques to use. With sprites, you store small images in a larger master file and then “grab” them using the background-position property in CSS. The technique is often used for icons, user interface design elements and buttons in various states. However, manually calculating the values of the background-position property can be quite tiresome. There has to be a better way.

Indeed, there is. Sprite Cow is an online tool that helps you get the background-position, width and height properties of sprites from a sprite sheet as a nice bit of copy-able CSS code. To get the CSS code, just upload the master sprite, click on the image in the sprite that you’re interested in, or select an area by clicking and dragging. The tool also works with master files that do not have transparent backgrounds, but to use them you’ll need to select the color using the “Pick background” feature.

Overall, a quick, simple and useful time-saver. The tool currently works in Chrome and Firefox, but doesn’t play well with Safari on Mac due to a lack of HTML5 File & FileReader support; hence, you might want to consider alternative tools, such as SpriteMe, Sprite CSS Generator and Smart Sprites. (vf)

GreatAster: The Online Art Boutique

Museums around the world stockpile the great works of art, making them inaccessible to most people. GreatAster has chosen to grant the world access to its fine collection of historical and contemporary art. High-resolution scans of illustrations from antique textbooks, as well as engravings and renowned masterpieces make up this treasury of art. Simply search the collection by entering your query, and specify the desired size and resolution prior to purchasing.

If GreatAster is unable to find your desired style, theme or technique, it will put all of its wheels in motion to get it for you. You can subscribe to the RSS feed to get constant updates on the collection. If you are a true art lover, you can not only download, but purchase pieces as wall art. GreatAster also has a “Free for web” section in which the owners of the project allow to freely employ any available images from their gallery but require a link back to the site. The whole collection is updated constantly, so check back daily. The website might at least trigger your creativity anew. (sp)

Meeting Notes Made Easier

Take the hassle out of creating meeting notes with minutes.io. This is a neat little Web app for creating and sharing notes quickly and effortlessly. We all know how writing down ideas and suggestions from meetings can be time-consuming, and yet the best time to note those comment is either during the meeting itself or right after it has ended.

This tool can be used at both times very easily. Minutes.io essentially gives you a detailed template in which you can track attendees and record agenda items, with due dates and owners. Once the meeting has finished, you can email the notes to all of the attendees before they get back to their desks. The tool uses HTML5 local storage, so your drafts are saved in the browser even if you are offline, waiting to be sent when you’re online again. You can even use keyboard shortcuts for quicker notes. (ar)

So, You Think You Can Build A Website?

We all know how it works: you have a great idea, get all worked up about it, only to realize moments later that you would have to recruit just about every freelance programmer, designer and copywriter you know to get it done. That’s when disappointment strikes. But there is a solution (well, kind of).

Vitamin T has come up with a handy flowchart “So, You’ve Got an Awesome Idea for a Website?” to determine whether you’ve got the drive and talent to launch that rocket and make your idea fly. Simply start in the center and work your way through the question filters. It sounds a bit dry but is actually quite entertaining once you start recognizing yourself in some of the answer paths. You’ll end up with advice either on who could greatly enrich your project or to consider bartending. Let’s hope for the former: go try to be the next Web sensation! (sp)

World Time Buddy: Simplified Coordinated Universal Time

Companies with collaborators around the world, as well as people who live far away from their dear ones and people who simply have many friends abroad can now count on a new tool. World Time Buddy is a tool that helps you coordinate time zones. Choose a home zone, and add up to nine other places. The interface is easy to use and shows concise information: the days and times of the locations you have selected are conveniently listed in a column.

To help you avoid scheduling a video conference at 3:00 am, the hours of the day are differentiated by color. Working hours are shown in light yellow, early morning and evening hours are in light blue, and nighttime hours are in dark blue. Once you’ve decided on a time by clicking on the relevant column, you can send it via Gmail, insert it in your Google calendar, copy it to your clipboard or share a Web page that lists the details. Another simple idea that works. (tt)

More Than A Facelift For Browsers

The conceptual design of browser windows has not changed much over the last decade. Address bars are where they have always been, unnecessarily taking up space at the top of the window. How wonderful would a real native full-screen view of a website be? Inspired by the recent release of Mac OS X Lion, and in an attempt to address the complications that arise with mixing old and new interaction paradigms, Henrik Eneroth took on the challenge of developing a mock-up of a new browser concept.

Henrik suggests getting rid of address bars and combining some of the functions found in existing browsers that have not matured enough to conquer a spot in the minds of users. Henrik has grouped related tabs together, applying name tags that describe the contents of the groups. The user also has the option to save groups. Do you have suggestions of your own, or do you find the topic especially interesting? Join the discussion and help innovate the browsing experience! (sp)

TileMill: A Map Design Platform

The guys over at MapBox have come up with something that will save many of us the hassle of making maps look good. They’ve created TileMill, a modern map design platform that enables designers to easily create map designs using custom data. The tool is built on the open-source map-rendering library Mapnik and covers a variety of maps, from globe to street level.

Selecting exactly what TileMill should display is easy. Styles, markers, heat maps, you name it: TileMill will render them accordingly. The instant preview allows you to target specific areas and styles using styles.mss and labels.mss, which is the intuitive Carto language (similar to CSS). You can export your maps to PNG, PDF and MBTiles formats. The tool can be used on Mac OS X, Linux and Windows (using VirtualBox). How much more useful can it get? (sp)

Open-Source Exchange Rates and Currency Conversion

So, you’d like your customers to be able to purchase your products in various currencies, but how exactly do you build this functionality into your product? Sure, there are plenty of free currency conversion services, but finding a free and reliable API for developers to access the rates data is darn hard.

Joss Crowcroft has created an Open Source Exchange Rates API, which provides up-to-date, flexible and portable currency-conversion data that can be used in any application, framework or language (not just JavaScript). It has no access fees, no rate limits, no nasty XML: just free, hourly updated exchange rates in JSON. Even better: Joss has also built money.js, a JavaScript currency conversion library that can be easily integrated in any website. A demo playground and detailed documentation are provided on the website, and the source code is available on GitHub. (vf)

Format Dates And Times With Moment.js

Properly formatted dates and times are often a common headache when it comes to websites where users have to provide either a specific date (time) or a date (time) range. Of course, your interface should be forgiving and accept all meaningful input that your users provide  —  independent of the format they choose to use. But what you need apart from that is a fine-tuned control and the ability to manipulate how they’re formatted.

Moment.js makes it easy to do just that. It’s a lightweight JavaScript library which lets you format, parse and manipulate dates. You can add or subtract dates from one another, as well as parse things like Unix Timestamps. Display options include formatted dates, time from now, difference, time from another moment, native date, support for leap years, and much more! (cc)

Easier Number and Currency Formatting

Proper, consistent formatting of numbers and currency is a tiny detail that makes a difference in design. But you can’t always count on those who update the content to adhere to the preferred style. Some will use numbers with commas, while others will leave them out; some will use the proper currency symbols, and some will not; and some will add more than two decimal places. You end up with a mess that someone has to go in and manually fix.

Not so if you use Accounting.js. This simple, tiny JavaScript library will solve your currency and numbers-related formatting hassles, and it even includes optional Excel-style column rendering to line up symbols and decimals. It will make all of your numbers and currencies look much more uniform and professional than they would if left to many content creators. (cc)

jQuery Credit-Card Validation Plugin

So, you have to integrate credit-card validation in your next project? Where do you begin? Should you break out that trusty book on regular expressions? Should you look up the numerical structures of various credit-card types? And how many credit card providers are there anyway? Good news: it doesn’t have to be that difficult.

Smart Validate is an off-the-shelf solution that ensures users have entered a valid credit-card number before processing the transaction. The plugin supports American Express, MasterCard, Visa, Diner’s Club and Discover. Now, that’s a plugin that will save you headaches in your next e-commerce project! (vf)

Typing With Style Requires Inspiration

Typography is one of the most important elements of design. It can make all the difference, turning your product either into a useful, usable delight or the audience’s worst nightmare. Rather than commit the common mistake of setting type randomly, why not study and explore resources on typography offered by Typetoken?

Typetoken offers not only examples of good typography, but also interviews with designers, discussion on typography, visual language artwork, typefaces, and book announcements. It certainly is a goldmine for explorations in typography for your next design. (tt)

The Web Developer’s Wonderland

We love to create wonderful things for the Web. But as in any other profession, Web development comes with truly enjoyable, creative tasks and some mundane, boring ones. Probably the most frustrating task is having to reload the browser page during development or debugging every time you make a change to the page. It doesn’t have to be this way.

LiveReload — a “Web developer’s wonderland,” as the authors describe it — is a desktop app that monitors changes in your file system. As soon as you save a file, the file is preprocessed as needed, and the browser is refreshed. Also, every time you change a CSS file or image, the browser is updated instantly without you having to reload the page, which might save you some time that you could invest in more meaningful tasks. The tool supports CoffeeScript, SASS/SCSS, LESS, Stylus, HAML and Jade, and it ships with all of them included. A great useful time-saver for every Web developer’s toolbox. LiveReload is currently available only for Mac. (ld)

CSS Tilt-Shift Technique and Animated Background Patterns

CSS is powerful. Just when you think nothing else can be done with CSS, a creative front-end developer comes along and develops a striking new technique that shows the possibilities of the technology and pushes its limits.

Simon (“Simurai”) has been experimenting with various CSS properties for a while now, and his experiments are certainly worth checking out. In his CSS3 tilt-shift technique, he uses text-shadow and adds a bigger offsetY and blur-radius to the top and bottom edges, so that the text appears to have a lens blur that is typical of the tilt-shift effect. There is also some rotate, rotateX and skewX to make the text match the perspective of the background image. This is a great example of what can be achieved with text shadows and rotations when properly used. Also, last week Simon created animated CSS3 background patterns using Webkit keyframe animation and radial gradients and dozens of background-image properties. Have you experimented with CSS recently, too? Let us know on Twitter or Facebook!
(ld)

HTML5 Whiteboard Magnets

There are a number of ways to produce wireframes or just to discuss the structure of a design or of code at an early stage of development. You could use a whiteboard, paper, wireframing kits… or you could combine them all. Cameron Moll has produced HTML5 Whiteboard Magnets which can be used on a whiteboard to show and discuss mark-up and to explain and communicate design decisions.

It’s very simple, too. Just buy magnetic sheets that are compatible with any inkjet printer, or print labels for magnets. Put them on your whiteboard with enough space for hands-on HTML5 instruction and for writing the actual mark-up. You can download Cameron’s AI files for the magnets, and add your own HTML5 (or CSS, JavaScript, etc.) elements if you wish. A very simple idea that could prevent misunderstanding and confusion. (vf)

A Curiosity a Day

Did you know that Apollo 11 had only 20 seconds worth of fuel left when it landed? Or that the tone for an incoming message on a Nokia phone is “SMS” in morse code? Or that the first smiley ever written was in 1982? Or that Pablo Picasso was accused of stealing the Mona Lisa? If you are eager to learn more curiosities like these, you should check the website Learn Something Every Day.

Two years ago, the designers of Young studio started gathering information about various areas of interest, such as popular personalities, the natural sciences and worldwide curiosities. Every day until August 2011, they published a new illustration, presented as a humorous comic with a vibrant colorful illustration. You can check out most of them online, but they are also released as special paperbacks. A simple idea, yet so many surprising facts. (tt)

CSS3 Image Styles

Did you know that if you apply CSS3′s inset box-shadow or border-radius property directly to an image element, the browser won’t render the style perfectly? But if you apply the image using background-image, then you can add any style to it and it will render properly.

Nick La’s article “CSS3 Image Styles” shows you the possibilities of using the background-image CSS property to create basic circles, a card style, an embossed style, a cut-out style, morphing and glowing, a glossy overlay, reflections and a feather circle. And to make it dynamic, you can use jQuery to wrap the background image dynamically for every image element. The techniques work in every browser that supports border-radius, box-shadow, :before and :after. Unsupported browsers will fall back to the image without any styling. (ld)

Useful Document Templates for Web Designers

Whether you’re a seasoned veteran or a newcomer to the Web design industry, various documents are a vital part of your day-to-day business, everything from contracts to invoices to client worksheets. In practice, though, we usually don’t spend enough time refining them in order to improve our workflow.

DocPool aims to change that by sharing commonly used documentation, created and submitted by designers and developers worldwide. So far, the website offers examples from a variety of designers, including a business planning template, an invoice template, an estimate worksheet for Drupal consultants, and a financial planning spreadsheet for startups. You can use them as is or adapt them to your needs. If you have a document that you’d like to share, you can do that, too! (cc)

Battle of Drawings Between Designers

What began as a game between two designers went in directions and acquired dimensions that no one expected. In the game, one designer draws a powerful character. Then, the other player has to draw a character whose powers can overcome the first character’s strengths. And repeat. The game eventually turned into a collection of heroes and villains. You can relive all of the battles by checking the website The Superest.

You will get to see how Opus Rumpus vanquished Antler Enchanter and was in turn defeated by Vic Hume. Seeing the contestants’ drawing talents and creativity in inventing new heroes for every situation is a rather engaging affair. The result of this ongoing drawing game between illustrators Kevin Cornell and Matthew Sutter was not only hundreds of drawings: in 2009, they turned the concept into a printed book. As designers say, “The battle is over, but there are still scars to show and stories to tell.” Perhaps it would be worth finding time for a similar game in your design lab, too? (tt)

Easy Scheduling With Doodle

The name may be familiar, recalling that famous search engine, but the product is different. Doodle is a tool that helps you pick the best time to schedule a meeting or event. There are no restrictions if you are a sporadic user and want to invite friends over for the occasional barbecue. Choose a name for your party, suggest a date and time, add a location, and then invite your friends (via email) to choose a time slot. The address is conveniently linked to Google Maps.

There are other options for those who need daily organization support. MyDoodle is the free account for frequent users. MeetMe allows you to coordinate meetings with other users. And Doodle Mobile connects your account to your iPhone or Android. One can also combine the Doodle Calendar with Google Calendar, Outlook Express, Exchange, Lotus Notes and other calendars. A simple and useful tool than can save you a lot of time and frustration. (tt)

3-D Animation With JavaScript

Producing 3-D objects and animations for the Web has becoming increasingly easier as new technologies emerge. But actually creating those objects and animations isn’t quite easy. The process can be intimidating and confusing to those who aren’t expert developers.

Three.js is a lightweight JavaScript engine that makes 3-D animation a whole lot easier. It can render with Canvas, SVG and WebGL. One great example of the library in use is the WebGL cars demo. You can play around with two luxurious cars and drive them around a track. You can change camera views, control one or both cars, switch from day to night view, and enable and disable motion blur. Suddenly, the idea of having games like Need For Speed right in the browser doesn’t seem so unrealistic! (cc)

ASCII Character Pronunciation Rules

Most programmers would recognize ASCII characters on a website and know how to use them in their own work. But how many know what to call all those characters? Could you have a conversation about those characters with another programmer and actually be able to understand each other? Do you know what a quadrathorpe is? What about a scratchmark? Prime? What about square and unsquare? Did you even know there were so many varied words to describe all those common ASCII characters?

ASCII Pronunciation Rules for Programmers gives a pretty thorough rundown of common and not-so-common names for ASCII characters. It’s a useful guide if you’re ever at a loss when listening to another programmer speak about coding. (cc)

Testing Your Typography Skills

If you are passionate about typography and have fun experimenting with glyphs, then you will certainly like the rather unusual type-design game created by the interaction designer Mark MacKay. This JavaScript-based letter-shaping game is called Shape Type.

The idea is simple: you get 10 modified letters from various classic typefaces, and you have to try to make them right by dragging curves along their axes. You can hold Shift to snap to an axis and hit Alt for a quick preview. After adjusting a letter, you can compare your results with the original letter and measure their similarity. Once you have passed the 10 levels of the game, you can tweet your final score. It’s an engaging way to explore what makes or breaks a glyph. (tt)

Get Rid Of Tasteless Restaurant Menus

Do menus on restaurant websites really have to be so terrible? All you want is a quick peek at a menu to see whether the establishment serves something to your liking… and you end up just getting lost. The folks at Unit Interactive have a simple mission with Clear Menu: to demonstrate how easy it is? ?to create a menu page that works on any screen size, that is easy to update, but that delivers a consistent and delightful experience.

This little project showcases three examples of responsive HTML/CSS/JS-based restaurant menus. Unit Interactive encourages restaurant owners and marketing managers to demand better from their Web teams, and it shows Web designers how easy it is to provide useable, contextual, branded experiences to their clients. Learn how to accent and highlight correctly in order to make a restaurant menu clear and striking. And above all, never stress out a hungry user! (sp)

Food Illustrations By Lana Porter

You’ve most probably seen a great variety on food artworks, such as paintings, drawings and even photograps. If you’ve had fun exploring these possibilities of food art, you will certainly provide your eyes with a treat by checking out this postcard exhibition by Simplifood.

With quite simple shapes and colors, Lana Porter manages to show the everyday items we usually have on our menus by adding little details which help differentiate a bagel with cream cheese from a slice of pineapple or a hot dog from a bratwurst. The perspectives and colors used are also very appetizing, so mind the warning: you might get very hungry by the end of the album! (tt)

An Animated CSS3 And jQuery Calendar

When it comes to the design of small elements such as breadcrumbs, pagination and calendars, having some techniques that are ready to use when you actually need them is handy. One CSS3 and jQuery calendar was started by Jepija as part of a larger project to create a shared calendar-subscription service. It includes a lot of useful features for designers and developers, including elegant animations and color-coded event markers. You can customize the color, length and padding of events with CSS.