Smashing Newsletter: Issue #27

This newsletter issue was sent out to 49,539 newsletter subscribers on February 15th 2011.

Every other week our editorial team works on short, entertaining and (of course) relevant articles for the upcoming issue. The newsletter is sent out on Tuesdays, and contains unique tips and tricks for designers and Web developers, written by us exclusively for our email subscribers. You can subscribe to the e-mail newsletter, of course.

Table of Contents

01. Friends of Type
02. Magical jQuery Layouts With Isotope
03. Start an HTML5 Project in Seconds
04. Climb Up Those Search Results
05. Treesaver: Smart Design for eReading
06. Death to Captchas
07. 750 Words, Every Single Day
08. tar Wars, Episode IV: Retold in Icons

1. Friends of Type

Friends of Type helps you discover great fresh visual content. Four creative fellows are responsible for the project which features type artwork from artists around the world, yet mainly their personal work. The project values typographic design and serves as a sketchbook, archive as well as dialogue.

Friends of Type

All the creative posts are mainly meant to log ideas and aid you with daily inspiration. The posts are sketches and ideas around visualized language: a habit born out of the real-time collaboration among type artists. Don’t forget to drop by every last week of the month, when a guest designer is featured. (ik)

2. Magical jQuery Layouts With Isotope

jQuery can be used not just to add some interactivity to a website, but also for more profound tasks such as building layouts. In fact, jQuery can add functionality (not to mention animation and user-friendliness) to your layouts that would be lacking with just CSS and HTML.

Magical jQuery Layouts

Isotope is a useful jQuery plug-in that enables you to create dynamic, intelligent layouts that can be rearranged dynamically. Items included in an Isotope layout can be sorted based on just about anything: be it filtering, sorting, infinite scroll and various layout modes. For instance, Isotope’s versatile layout engine can accommodate multiple layout modes. Vertical layouts react to changes in browser width. Horizontal layouts react to browser height. Don’t forget to check out demos. The plug-in was developed by David DeSandro. (cc)

3. Start an HTML5 Project in Seconds

Starting a new project always requires a bit of set-up and preliminary coding. And because some designers aren’t too familiar with HTML5’s specs yet, a new project can require a lot of cross-referencing to make sure everything is standards-compliant. This is especially true for projects with heavy demands (such as jQuery, special server configurations, etc.).

Start an HTML5 Project in Seconds

Enter Initializr, a new tool that creates a customizable template based on HTML5 Boilerplate. Decide whether you want sample content, choose between JavaScript and jQuery, and specify your compatibility and server configuration needs, and then hit “Download.” You’ll get a template based on key features of Boilerplate to start your next project. (cc)

4. Climb Up Those Search Results

Don’t know the basics of SEO or how to optimize your website? Have you ever wondered how you made it into the top 20 search results on Google but not even the top 100 on Bing? SEOmoz’s “Beginner’s Guide to Search Engine Optimization (SEO)” gives you an in-depth tutorial on how search engines work, and it covers the fundamental strategies for making websites search-engine friendly.

Climb Up Those Search Results

SEOmoz has put the free guide together to give designers and developers some insight into the magic of “being found.” The 10 chapters offer an introductory explanation of how search engines operate, how people interact with them and why one should optimize their website. There are four chapters on search-engine–friendly design and keyword research and on how usability, experience and content affect both ranking and link popularity.

The three last chapters give useful advice on tools and services, some myths and misconceptions about search engines and info on how to measure and track your success in optimization. You don’t necessarily need to hire an agency or professional to move up into those top 20 search results: a couple of hours’ time and a few simple steps might do the trick! (sp)

5. Treesaver: Smart Design for eReading

Magazine layouts that are dynamic, readable and attractive on any given platform or device tend to be a nightmare for Web designers and app developers. But if you are keen on smart multi-column layouts containing text, pictures and video, then you’ll love Treesaver. It’s a JavaScript framework for creating magazine-style layouts that dynamically adapt to a wide variety of browsers and devices.

Treesaver: Smart Design for eReading

Columns, headlines, headings and images are automatically converted or adjusted to the device’s viewport. The framework is free for all uses and available under the MIT and GPLv2 licenses. You’ll find detailed documentation and a step-by-step walkthrough on how to use Treesaver. Notice that in order to develop and test Treesaver pages on your own machine, you must access them via a local server. (mm)

6. Death to Captchas

Many websites use Captchas to prevent spam. They’ve long been the standard to sort the spammers from real people on Web forms. But are Captchas really the best solution? The post “Death to Captchas” by Tim Kadlec discusses the negatives of using the Captcha system and specifically why reCaptcha isn’t any better.

Death to Captchas

The article tackles Captchas from a usability and accessibility standpoint, arguing that putting the onus of spam prevention on the user is not fair and that spam should instead be dealt with strictly on the receiver’s end. He also discusses the effectiveness (or lack thereof) of Captchas for blocking spambots from submitting online forms. Do you and your colleagues agree? The article is a well-argued piece and is definitely worth keeping in mind. (cc)

7. 750 Words, Every Single Day

750 Words is a well-known idea brought to life on a website for those of us who just can’t seem to get away from the keyboard and screen. The idea is that by starting the day writing out three pages of whatever is filling your mind, you will clear your mind for ideas to flow the rest of the day. You simply write. Anything and everything.

750 Words, Every Single Day

It’s personal, just as it should be. You can see some statistics on your progress, including fun little information, such as what emotion you might be feeling based on your entry for the day. And then there are those mysterious badges that pop up out of the blue. You can share your statistics with other users and earn points as you add to your 750 words every day. Now go tick-tick away on your keyboard. (sp)

8. Star Wars, Episode IV: Retold in Icons

Images can say more than words alone, and they can be a powerful tool for storytelling. Images engage and involve, they visualize data, and they condense large chunks of information in a compact and memorable way.

Star Wars is a legend. The story has been used for decades in a variety of ways: be it theatre performances or monochrome LEGO bricks, it still has a large and growing fan base. So while some fans are waiting for a new 3D version, there is now a convenient short form of the first part (which is the episode IV). And the best thing: it actually fits in this newsletter.

Star Wars: Episode IV. Retold in Icons

Wayne Dorrington’s Star Wars: Episode IV presents the whole story of Star Wars: Episode IV in… icons! Not a single word is used in the design. A nice example of vivid, creative and original artwork. It’s also just fun to remember a great movie this way. (sl), (vf)

The authors are: Vitaly Friedman (vf), Sven Lennartz (sl), Iris Kopic (ik), Stephan Poppe (sp), Manuela Müller (mm), Cameron Chapman (cc).

The Smashing Newsletter Team prepares bi-weekly newsletter issues with lots of love and appreciation for the good ol' Web with the latest tips and tricks for designers and Web developers. Vitaly Friedman, Smashing Magazine's editor-in-chief, started this project back in early 2010. Today, we can't imagine a better way of informing and communicating with our fans and readers!

  1. 00

    No comments have been posted yet. Please feel free to comment first!
    Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top