Smashing Newsletter: Issue #76


This newsletter issue was sent out to 129,115 newsletter subscribers on Tuesday, January 15th 2013. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.


eBook testing is always fun. Kind of. You know the drill: take a test device, upload the eBook in ePUB format or Kindle or PDF depending on the device (and eBook reader) that you are testing for. Look out for issues and inconsistencies, discover weird uncontrollable bugs, debug in the dark, re-upload. Repeat. As Tim Brown once so eloquently said, often in the Web we “build experiences by manipulating their shadows.” What holds true for websites holds true for eBooks as well. Yet while there are fantastic solutions for mobile testing2, there aren’t many tools for quick eBook testing.


Over the last few weeks, we’ve been revising and redesigning our eBooks in all popular formats, testing their readability and functionality, improving your reading experience, page by page. In the coming weeks you’ll see the new eBooks in the Smashing eBook Library4, carefully and thoroughly redesigned and rebuilt from scratch for your iPads, iPhones, Androids, Kindles, Nooks and any other devices out there. We’d love to hear your feedback as well as bug reports, and we’ll do our best to fix them right away!

Vitaly, editor-in-chief of Smashing Magazine

Table of Contents

01. 3-D Book Showcase With CSS5
02. Lettering Against Calligraphy: A Decent Fight6
03. Plaaan: Back to Paper7
04. Aware.js: Making Your Site Reader Aware8
05. Colorful Free Font For Your Next Artwork9
06. Inspiring And Exciting Product Videos10
07. FFF: Creative Interactive Web Experiments11

121. 3-D Book Showcase With CSS

Assume you are designing a website to promote a new item for an online shop. Wouldn’t it be nice to give your readers some sense of the depth and other physical qualities of the item instead of a flat 2-D image or photo? E.g. what if we used a series of 3-D transforms along with effects such as rotating, flipping and opening to create a more engaging 3-D experience for the books?

3-D Book Showcase With CSS13

3D Book Showcase14 is an experiment that does exactly that. Using CSS 3-D transforms and three images (front cover, spine, back cover), Manoela Ilic created an example of an interactive book that users can flip, turn by hovering over and even open. The source code is available for free download, and a tutorial is provided as well. Browsers that don’t support 3-D transforms just get the main book cover which is a simple and reasonable fallback for the technique. (vf)

152. Lettering Against Calligraphy: A Decent Fight

Don’t we all enjoy a fine dose of competition now and then? At Lettering Versus Calligraphy16, Berlin-based Giuseppe Salerno and Martina Flor battle out a visual fight between a letterer and a calligrapher. Every day each of the duo creates one letter based on a description provided by a moderator: a “Hedonist E,” a “Subtle K” or a “Lazy “y.” The results are posted on the site, head-to-head, and the visitors can vote on their favorites.

Lettering Against Calligraphy: A Decent Fight17

Both Martina and Giuseppe have worked in the creative industry for more than 12 years, and they met while living in Berlin. Their competition aims to explore and demonstrate the capabilities of the two different technical approaches — the diverse emotions of hand-drawn lettering against the unvarnished passion of the pen. (ea)

183. Plaaan: Back to Paper

New year. New luck. New calendar. The new year is already starting its third week and you’ve realized that you have forgotten to get a new planner? Or you couldn’t bring yourself to buy one, because the ones available don’t fit your needs? With their new tool, the team of Lab Fiftyfive has created a Web app that could help you solve this problem. It takes just a few clicks to create a printable calendar that is not only free but also comes in a nice, sleek design.

 Plaaan: Back to Paper19

The best thing about it: you can customize your planner the way you like. Choose your start and end dates, paper size, portrait or landscape orientation and whether your planner should have a weekly, multi-week or monthly view. When you are done, you can download it as a PDF and print it out, hang it above your desk or stuff it into your bag. Plaaan20 is a nice alternative to typing your dates in on a computer. Sure it doesn’t sync with all your devices. But isn’t planning a creative and expressive act? So get out your pens, jot down meetings and highlight your deadlines! (cm)

214. Aware.js: Making Your Site Reader Aware

With smartphones and tablets, the way we read online has changed and new habits have developed. We often take out the tablet in the evening, lean back and catch up on what’s new. Now wouldn’t it be nifty if the sites knew what we have already read and where we left off? The Austin-based design and development company XOXCO has developed a tool that does exactly that.

 Aware.js: Making Your Site Reader Aware22

Aware.js23 is a jQuery plugin that personalizes the display of content according to a reader’s behavior — without log-in, authentication or any server-side processing. The plugin uses cookies and localStorage to identify different classes of users and assign appropriate CSS classes in the DOM. It then tracks the time between their visits and uses the information to alter the layout of a page, accommodating different reading scenarios.

First-time visitors could get a special introduction, repeat visitors see the newest content highlighted and readers who haven’t stopped by lately find a recap of the top stories. Aware.js is released under the MIT Open Source license and is free to use. On XOXCO’s test site24 you can see it in action. A little tool that makes reading online so much more comfortable. (cm)

255. Colorful Free Font For Your Next Artwork

Are you on the hunt for an exciting typeface to pimp up your next project? Multicolore Free Fonts26 might be just what you are looking for — a cheerful free font which will look pretty darn good in a headline, on a poster, or in any other artwork. If it could speak, it would probably say: “Don’t you just want to create something cool and shiny with me?”

Colorful Free Font For Your Next Artwork27

The beautiful rounded glyphs were designed by Ivan Filipov28, a self-proclaimed typography aficionado from Bulgaria. The font is available in the .otf font format (black-and-white version) as well as .eps and .ai vector formats (colored versions). Wonderful for private projects, Multicolore can be used in commercial work as well. (ea)

296. Inspiring And Exciting Product Videos

We all are always on the lookout for inspiration and interesting stories. As designers, in fact, we are storytellers, finding meaningful ways to tell stories of our clients to their website visitors. But do you always know how to tell a story effectively? What if you had a new product that you had to present in a video?

Inspiring And Exciting Product Videos30

Well, you might want to dig into the Inspiring Product Videos31 round-up on Gimme Bar. It features well-done product announcement videos showing extraordinary ways of telling stories and infusing emotions. The videos are a hodgepodge of everything, featuring successful apps like Paper by FiftyThree, Flipboard and Path, sites like Behance, businesses like start-ups and restaurants, as well as other obscure and well-known brands.

The creative approaches presented in the videos are as mixed as the products themselves. There are artsy camera-pannings, entire worlds created out of paper-cuts and wooden blocks and even illustrations of bears in flannel shirts sharing their love for ricotta sandwiches via social networks. Giving some examples of how designers think outside the box, this collection will certainly fuel your own creativity. Definitely a must-see: Behance’s “An Ode to Creative Work32.” (cm)

337. FFF: Creative Interactive Web Experiments

What happens if you combine WebGL, HTML5 Audio and CSS3? Maybe sprinkle a bit of extra JavaScript goodness here and there, HTML5 canvas and localStorage? Now we are getting somewhere! If you also spend weekends playing around with Web technologies — working on your little side projects, demos or just weird experiments — a side project by Jongmin Kim could be worth checking out.

FFF: Creative Interactive Web Experiments34

FFF: Form Follows Function35 is essentially a collection of interactive experiences. It contains creative experiments with various technologies, each having its own unique design and functionality. Typographic Rain? Check. Campbell’s Soup in 3-D? Check. Colorful Surface Waves? Check. The experiments are beautiful and inspiring, and quite entertaining, too. If your portfolio isn’t quite full yet, perhaps you could put your experiments online as well. If that’s not a good way to impress your potential clients, what is? (vf)

The authors in this newsletter are: Esther Arends (ea), Cosima Mielke (cm), Iris Lješnjanin (il), Vitaly Friedman (vf), Sven Lennartz (sl), Christiane Rosenberger (research), Elja Friedman (tools), Clarissa Peterson (proofreading).


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5 #a1
  6. 6 #a2
  7. 7 #a3
  8. 8 #a4
  9. 9 #a5
  10. 10 #a6
  11. 11 #a7
  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 #
  26. 26
  27. 27
  28. 28
  29. 29 #
  30. 30
  31. 31
  32. 32
  33. 33 #
  34. 34!/main
  35. 35

↑ Back to top Tweet itShare on Facebook

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