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

This newsletter issue was sent out to 104,895 newsletter subscribers on Tuesday, April 17th 2012. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.


A couple of years ago, we received a lengthy email from one of our readers in South Africa. Back then, he was teaching digital communications and design in one of the local universities. The main difficulty of teaching, he explained, was the lack of up-to-date teaching materials, i.e. textbooks as well as exercise books were missing. For that reason, he would wake up earlier every single day, browse through the articles on Smashing Magazine, print out one of them, distribute copies at school, and discuss the topic of the article with his students. This was his way of introducing the concepts of design, and more specifically, Web design, to his students.

The moment after we read this email, it changed our lives forever. We clearly understood that what we do here at Smashing Magazine inspires and helps people all around the world, and would like to encourage you to make a difference today! Share your favorite tip or technique via social media, say a “Thank You!” to people who have helped you become better at what you do today, or just look out for friends and relatives who use a legacy browser and prompt them to upgrade—or upgrade the browser for them yourself.

Let’s make a difference today. In the end, if it’s just one single person who has sent you an email like the one we’ve received, it will be enough for you to know that you are changing the world for the better—one step at a time.

Once you’ve done this, please feel free to share your stories on Twitter using the hashtag #smchange and let us know how you use Smashing Magazine in your work and how we can help you. Of course, you can also contact us via our contact form2.

We look very much forward to your feedback!

Yours sincerely,
The Smashing Team

Table of Contents

  1. Startups, This Is How Design Works3
  2. Text Your Own Old-School Digital Movie4
  3. Client Side Caching For JavaScript5
  4. Nostalgia Strikes Back: Reinventing The Slideshow6
  5. No More Banding In Photoshop!7
  6. Easy Batch Image Resizing8
  7. Create Your Own Font Icon Bundles9
  8. Fluid Line-Height (Or Molten Leading)10
  9. Lists, Numbers And Data You May Need For Your Work11

1. Startups, This Is How Design Works

Good design requires time, patience, skills and attention to detail. Yet, what if you’ve got a nice idea and would like to test out your design skills? Or what if you’re about to launch a startup but want to make sure that it has a top-notch design, too? How can you spot a good designer among a dozen of job applications? And what does a good design mean anyway?

Startups, This Is How Design Works12

Wells Riley has prepared a comprehensive guide for startups13 about what design actually means and provides resources to help you find outstanding design talent—a handy reference for your friends, your colleagues and even for yourself. Among many other things, this guide explains the different kinds of design, important design qualities, and places where you can find great designers. It even features useful interviews with successful founders—a handy resource worth bookmarking and sharing! (vf)

2. Text Your Own Old-School Digital Movie

Do you remember when the peak of high-tech gaming was a game of ping pong simulated with a few dozen pixels? How many hours could that have been spent playing outdoors, developing a bit of athletic ability? Well, you can relive the days of two or three digit pixelation by watching (or even making) your own 8-bit movies on

Text Your Own Old-School Digital Movie

The creators of this online 8-bit television have given the users an opportunity to text their own movies. Through 130 characters, each frame is encoded as text, so making your own little pixel movie is not necessarily that hard—but definitely laborious and time-consuming. With this idea, the project is joining the pixelation movement. So if you are really into pixels as well, you might get lost in them by watching movies on the site—most of them can be exported and reused as GIFs, too! (jc)

3. Client Side Caching For JavaScript

Server caching is useful for quick response times, but sometimes, especially when you are developing a Web application, you migh need to cache objects client-side rather than server-side. Maybe you need to cache something for offline use, or for reuse later.

Client Side Caching For JavaScript14

That’s where locache.js15 comes in. It’s a JavaScript caching framework for client side caching in the browser using localStorage. The library has a memcache-similar API, no dependencies and is very small. And the best part: locache gracefully degrades when the browser doesn’t support localStorage. So users with IE6 and IE7 will not get any errors, but as developers say, “caching attempts will be silently dropped and lookups will always appear to be a cache miss.” You can provide an expiration time for cached objects as well. (cc)

4. Nostalgia Strikes Back: Reinventing The Slideshow

Long before Facebook, Flickr, and the Web in general, we used to congregate at a friend’s or family member’s living room to watch slides of our most recent vacation, wedding or other photo-worthy event. You would watch those pictures for hours, while somebody told you the stories that they depicted. In some cases, the memory of ‘”the good old days” is better than the actual slideshow was, but that’s nostalgia for you. Now Johannes Wagener and Katharina Birkenbach brought it back with a Youtube-style twist.

Nostalgia Strikes Back: Reinventing The Slideshow

Story Wheel lets you create your own old-fashioned slideshow and record a story (audio) for it. In the fold of SoundCloud Labs, Story Wheel lets people share their Instragram picture stories on the Web. Whenever you feel nostalgic for those days of the clicking slide projector, you can just go on Wagener and Birkenbach’s website and wallow in other peoples’ slides (or even produce your own little themed story). (jc)

5. No More Banding In Photoshop!

Designers that work daily with Photoshop have frequently some annoying experience with gradient banding in a 16bit color mode. Thinking about a solution for this problem, the designer Jeff Broderick developed a technique that may also be useful for you.

No More Banding In Photoshop!16

The No More Banding Photoshop action17 is a free action that will help keeping the beautiful gradient effect you had in mind for your design. The document size will increase, but if you’ve been wondering on how to get rid of the banding effect, the result is definitely worth the inconvenience. (tt)

6. Easy Batch Image Resizing

You can batch process images in Photoshop, but that method is fairly resource-intensive, isn’t it? What if you are on the go and don’t have your machine nearby? Why not use a simple app that’s designed specifically for the basic processing of images—tasks such as cropping and resizing, adding borders, and adjusting JPEG quality?

Easy Batch Image Resizing18

That’s exactly what B.I.R.M.E.19 (Batch Image Resizing Made Easy) does. Just choose your settings for size, cropping dimensions, crop alignment, auto-height/auto-width, border thickness and JPEG quality, and then drag and drop your images to begin. It’s quick, easy and works perfectly in any browser! (cc)

7. Create Your Own Font Icon Bundles

Some fonts just don’t offer you the icons necessary to keep your project simple and straightforward—wouldn’t it be so easy if just one font would include all desired icons? Fontomas20, the “iconic font scissors”, does just that in three simple steps. First, load the icon fonts you want to combine. Then piece together the characters you need. Finally, rearrange the icons to fit your keyboard however you wish, and save the font—done!

Create Your Own Font Icon Bundles21

Fontomas is released under the MIT license and does not have to be credited. The generated fonts are intended for Web usage, and should not be considered or distributed as independent artwork. However, it’s always a good idea to mention the original fonts as well, even if it’s not required. (sp)

8. Fluid Line-Height (Or Molten Leading)

So far, in our responsive designs, we tend to focus on adjusting layouts for available horizontal screen size and changing font size and the line length of type, but we haven’t quite discovered the possibilities of vertical adjustments, e.g. line-height. In his short article, Molten Leading (or, Fluid Line-Height)22, Tim Brown suggests to explore a more comprehensive solution for responsive Web typography.

Fluid Line-Height (Or Molten Leading)23

The line height, line length and font size should behave responsively as well, yet it’s quite difficult to achieve. In fact, adjusting any one of these elements without also adjusting the others is a recipe for uncomfortable reading, which is one reason designers have such a difficult time with fluid Web layout. According to Tim, what we need is a fluid way to set line-height. Web designers should be able to define line-height as a range, like we do with min-width and max-width. So one of the solutions is to set a minimum width at which the adjustment starts, a maximum element width for where it stops, and a minimum and maximum line-height to adjust it through.

Of course, manually adjusting line height for optimum readability across a bunch of media queries is time-consuming. The updates in the post provide some practical solutions, implemented with JavaScript. What would you be able to do with man/mix-width range media queries? (cc)

9. Lists, Numbers And Data You May Need For Your Work

Whenever you are designing a website that requires some input from users—be it Web forms, delivery addresses, or sign-up forms—you need data. Usually all information has to be in a specific format and language, which makes your work not so easy.

Lists, Numbers And Data You May Need For Your Work

Sasa Stamenkovic has prepared a list of all the countries in all languages in the various formats—plain text, JSON, YAML, XML, HTML, CSV, SQL, PHP. The result is a large downloadable list of all countries. When used for your forms you’ll save a lot of time.

Another useful source is the Brighter Planet data sets. The available data covers raw data from various sources; different industries and sciences, such as the automobile and flight industries, ZIP codes, census data, climate data, etc. If you need some data samples for your upcoming project, you can surely find some useful data to work with using these resources. (jc)

The authors in this newsletter are: Stephan Poppe (sp), Cameron Chapman (cc), Talita Telma (tt), Jan Constantin (jc), Vitaly Friedman (vf), Iris Ljesnjanin (il).


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

↑ 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. 1

    George Hedges

    April 17, 2012 5:58 pm

    I love item 6 – B.I.R.M.E.
    it is super quick and really easy. I teach digital media at college and this will be a very handy tool for when my students need some quick and simple resizing. Final file sizes are pleasantly small too.
    Nice one



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