Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

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 newsletter1, of course.

Table of Contents

  1. Friends of Type2
  2. Magical jQuery Layouts With Isotope3
  3. Start an HTML5 Project in Seconds4
  4. Climb Up Those Search Results5
  5. Treesaver: Smart Design for eReading6
  6. Death to Captchas7
  7. 750 Words, Every Single Day8
  8. tar Wars, Episode IV: Retold in Icons9

1. Friends of Type

Friends of Type10 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 Type11

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 Layouts12

Isotope13 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 demos14. 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 Seconds15

Enter Initializr16, 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)17” 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 Results18

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 eReading19

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 Captchas20” by Tim Kadlec discusses the negatives of using the Captcha system and specifically why reCaptcha isn’t any better.

Death to Captchas21

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 Words22 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 Day23

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 Icons24

Wayne Dorrington’s Star Wars: Episode IV25 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).


  1. 1
  2. 2 #a1
  3. 3 #a2
  4. 4 #a3
  5. 5 #a4
  6. 6 #a5
  7. 7 #a6
  8. 8 #a7
  9. 9 #a8
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25

↑ Back to top Tweet itShare on Facebook

The Smashing Editorial 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

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top