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 #17

This newsletter issue was sent out to 40,563 newsletter subscribers on September 14th 2010.

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. Sqetch, an Illustrator Wireframe Toolkit2
  2. :select[ivizr]: Make CSS3 Work in IE6 to 83
  3. Design Kindle: Free High-Quality Design Files4
  4. Never Wonder About Time Differences Again5
  5. WobZIP: Uncompress Your Archives on the Fly6
  6. Clever Bookmarklet: Notes for Later7
  7. Typecasting: Period Typography in Movies8

1. Sqetch, an Illustrator Wireframe Toolkit

Does it ever end? Every now and again, we find ourselves in the situation where clients do not understand wireframes and assume that they are ”kind of” final mock-ups. Some clients might even prefer to do the wireframing themselves, because they see no reason to pay a designer to “push some boxes around.” However, understanding the difference between a wireframe and the final design is essential to having a constructive discussion about the development process and information architecture… and helpful for avoiding unnecessary remarks about color and font size.


This is how Sqetch10 comes in handy. Sqetch is a free Illustrator wireframe toolkit with high-quality vector drawings, consisting of several templates and elements: browser, iPad portrait, iPad landscape, smartphone, GUI elements and form elements. The toolkit elements are attractive and “sketchy,” so wireframes that are built using them appear more like sketches than final products. The toolkit is free to use for private and commercial projects. A credit link is appreciated if you use it on a website or in a printed publication. (vf)

2. :select[ivizr]: Make CSS3 Work in IE6 to 8

CSS3 pseudo-classes allow us to do remarkable things with our website designs without resorting to graphics, workarounds or scripts. And yet versions 6 to 8 of Internet Explorer just don’t support most of them, so you have to either add conditional statements, use hacks for older browsers or leave the pseudo-classes out altogether.


:select[ivizer]:12 is a script that works with seven of the leading JavaScript libraries (including jQuery, MooTools and Prototype), providing support for 19 CSS3 pseudo-classes, two pseudo-elements and every attribute selector for older versions of Internet Explorer. It works right away and requires no knowledge of JavaScript. (cc)

3. Design Kindle: Free High-Quality Design Files

So many free Web design resources are out there, but the truth is that a lot of them aren’t very good. Many excellent resources are out there, too, but most of those aren’t free or they come with restrictions on how and where they can be used.


Design Kindle14 is different. It offers a ton of free high-quality design files that you might actually want to use, all without restrictions on personal or commercial use. Everything from design elements to images to full themes is included. Design Kindle doesn’t have a big library of files just yet, but more are sure to be added soon. (cc)

4. Never Wonder About Time Differences Again

The Web has made us all global citizens. We often work with people in different countries, and we have friends and colleagues halfway around the world. And because most of our communication with these friends happens via email, the time where they are doesn’t really matter… until, that is, you have to have a phone conversation or online chat with them. Then, scheduling can be a nightmare.


Every Time Zone16 shows an interactive chart of the time in various cities around the world. While it doesn’t show every time zone, it shows enough for you to figure out the time in Glasgow or Los Angeles or Sydney based on your local time. It also includes a slider to see the time in a particular zone at any time of day. (cc)

5. WobZIP: Uncompress Your Archives on the Fly

With the growing number of computer platforms and especially file formats, we are often confronted by a huge variety of compressed files. Besides the omnipresent ZIP, RAR has become quite popular, but there are other popular formats, including TAR and 7z. As a Web worker, you receive all kinds of archived files from customers and business partners, and installing each and every decompression software is a pain in the butt. One online solution helps you out: WobZip.


With this online tool, you can uncompress a wide variety of archives on the fly. Currently supported: 7z, ZIP, GZIP, BZIP2, TAR, RAR, CAB, ISO, ARJ, LZHCHM, Z, CPIO, RPM, DEB and NSIS. Choose your file, click the “wobzip!” button, and your uncompressed files appear below the search box. You can either save them one by one in their original format or download all the files as a ZIP archive. It works fine for all supported formats, as long as the file size doesn’t exceed 100 Mb. (mm)

6. Clever Bookmarklet: Notes for Later

This friendly service is one of many aids for self-organization. In this case, it helps you leave nothing behind when surfing. Interesting information, text and links must be somehow stored and read. And because no one today wants to write on a notebook while at the computer, service providers have stepped in with their own tricks. Notes for Later17 is a bookmarklet that works right in your browser. If you have not heard of it before, check this older Smashing article18 for an explanation.


Here is the clever part: just select some content, click on your bookmarklet and receive the content by email. If you select nothing, you still get the current page’s URL and a time stamp. And what can we say? It actually works. Whether it’s useful for your daily work, we cannot say, but trying it out won’t do any harm. Registration is quick and painless; the service just needs to know your email address. (sl)

7. Typecasting: Period Typography in Movies

Let’s talk about typography in older movies. A number of well-known movies are period pieces. Script writers and directors always want to create a unique testament to a particular era by using period locations, languages, costumes, hair styles and so on. In these films, period typography is more than a superficial gimmick.


The article “Typecasting: The Use (and Misuse) of Period Typography in Movies21” provides a good overview of how period type has been used in different ways. The typeface of a film title, for example, usually reflects the era in which the film takes place. Beyond titles, every movie depicts a wide range of props and set pieces, such as newspapers, brochures and sign boards. How can one distinguish between a well-made film and junk?

The performances of the actors are not the only criterion. To the alert eye and the type fans, a suitable typeface counts, too. In this article, written by Marc Simonson, star ratings are given from one to five, indicating how well type is used in the each film. We were surprised by how we remember many films as being more perfect than they really are. (cs)

The authors are: Vitaly Friedman (vf), Sven Lennartz (sl), Christina Sitte (cs), 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
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21

↑ 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