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

This newsletter issue was sent out to 167,232 newsletter subscribers on Tuesday, November 5th 2013. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.


You keep running into nasty front-end and UX issues, don’t you? Don’t worry, we’ve got your back! With the brand new Smashing Book #42 almost at your fingertips, you’ll soon explore smart techniques, workflows, tools and best practices that will help you get back into the swing of things. Yes, the long-awaited book is finally being printed and, oooh yeah, it’s going to be quite heavy with 13 chapters and 498 pages fresh off the press!


New Perspectives On Web Design4: The name alone says it all.

Of course, we’ve also prepared something quite… smashing for the release date of the Smashing Book #4! Mark your calendars: A mystery will be waiting for you on the November 26th, 14:00 CET, on the Smashing Magazine front page. The first dozen of readers to solve the mystery will win a very special and unique prize. Excited? Good!

Oh, you’re probably wondering why you’ve received this newsletter on a Tuesday instead of a Thursday. Well, since we’ve missed the issue last week, we’ve now looped back to Tuesdays just like in the good ol’ days.

Have a fantastic week, everyone! :-)
Vitaly (@smashingmag)

Table of Contents

  1. 3D Opening Type With CSS5
  2. Offline.js: Every App Goes Offline6
  3. Float Label Form Pattern For Web Forms7
  4. Color Variables In Photoshop?8
  5. Open Web Platform Daily Digest9
  6. Content Snippets10
  7. A Catalogue Of Type Combinations11
  8. Brandopolis12
  9. Format User Input For Better UX13
  10. So How Fast Do You Type?14
  11. Smashing Workshops: Grüezi, Zürich!15

1. 3D Opening Type With CSS

Ah, the good ol’ CSS hover effects! But have you seen the 3D opening type CSS effect16, yet? It was created by Diego Pardo but was actually inspired by Edenspiekermann’s Open Type project17 for the Kröller-Müller Museum. Hover over the letters to see how they fold up creating an unusual and visual effect!

3D Opening Type With CSS18

The technique is simple. Combine a couple of transitions and transformations with rotations and skew in CSS and… voilà! The white letters become visible as the letters fold upwards and the shadow changes, indicating the movement, only enhancing the effect. Nifty. (sh)

2. Offline.js: Every App Goes Offline

Usually when we think about usability, we care about what users experience while they are actually visiting our websites. But what happens if the connection is shaky or the user is commuting when visiting your site? Offline experience is often an afterthought, but it’s a part of the overall experience as well. And here is a good tool that we can use to improve it.

Offline.js: Every App Goes Offline19

Offline.js20 automatically detects when a browser is offline. It monitors Ajax requests looking for loading failures and confirms the connection status by sending a tiny request. It automatically grabs Ajax requests made while the connection is down and repeats them after the connection is restored.

This library works in common browsers such as Chrome, Firefox, Safari and IE8+. To use it, just include the JavaScript and attach handles to respond to the network conditions. Your readers will appreciate it. (sh)

3. Float Label Form Pattern For Web Forms

Let’s talk about labels. On mobile devices, they either take a lot of vertical space or (when used as a placeholder) simply disappear, leaving users clueless of what the input field was all about. Isn’t there a solution for this, you ask? Yes, there is. Matt D. Smith has come up with a Float label pattern21 that integrates micro-interactions to animate placeholder text and turn it into an actual label on the fly, so users don’t lose the context.

Float Label Form Pattern For Web Forms22

In his article, Matt describes the ideas behind the pattern, and collects a couple of different implementations of this particular technique. Also, Brad Frost has recently written a detailed article about the pattern23 which is worth reading, too. Is this going to become a common interaction on all mobile forms? (vf)

4. Color Variables In Photoshop?

Let’s say you have your neatly organized layer groups and hierarchies in your PSD files, but then at some point you’d like to have a global color scheme. How would you do it? A lot of folks have a hard time updating color themes of a style guide (or design atmosphere) without having to update each and every design element individually.

Color Variables In Photoshop?

In the DN Color Variables Thread, Marc Edwards shares a couple of options that allow you to update color themes of any layout in no time. In fact, there are quite a few available options ranging from layer tags and gradient maps, to smart objects and slice sheets. Problem solved! (vf)

5. Open Web Platform Daily Digest

Staying up to date with what’s happening in the Web design industry is quite a challenging task. But what if we told you that you’d need to spare only five minutes every day? Yes, five minutes! Open Web Platform Daily Digest24 features a daily review of the latest front-end tools, techniques, articles and resources — just for you.

Open Web Platform Daily Digest25

This digest is run by Šime Vidas and is indeed quite a useful and valuable resource for Web designers and developers. The information on the site is available to everyone for free, but you can also voluntarily subscribe for $6 a month. Now you have all the information you need — all at one glance! (sh)

6. Content Snippets

Having trouble finding the words to say? Code Snippets is a godsend for those of you who are responsible for good content on a site, or simply want to improve the copy of a landing page. This resource provides a collection of specific copy examples from other websites and apps.

Content Snippets

Many successful sites are built around carefully crafted words. The copy on your site has to communicate your ideas clearly and effectively, thus providing a seamless and engaging user experience. Whether it be an error message or just some “sign up” copy, or even merely instructions on what to do next, Content Snippets is definitely a resource worth bookmarking and coming back to! (sh)

7. A Catalogue Of Type Combinations

Do you ever find yourself collecting interesting type pairings from websites, newsletters and brochures? Well, the folks at Typ.io26 have decided to do it on a large scale and have featured a collection of various type treatments for everyone to see. You can browse through, upload a sample or even search for a specific typeface.

A Catalogue Of Type Combinations27

The designers have also tallied up the most popular typographic choices, both for headings and body copy. A great way to explore the pairings that you’d never thought would work together. Not enough? Well, you might want to check out Google Web Fonts We Love28, Fonts in Use29 and Just My Type30 for more beautiful type pairings. (sh)

8. Brandopolis

Digital marketing can be a rather tiresome field and with everything taking place online — videos, blog, infographics — it doesn’t get any easier. Will Critchlow, co-founder of Distilled, noticed a shortage of information from brands themselves, so he set up Brandopolis31, an in-depth study of content strategy of some of the most well-known brands. This project presents you with not just the tactics, but more importantly, insights into how and why but also why not.


A series of insightful articles provides details into what makes good content, but also a good digital strategy and branding. A good project with quite a few practical takeaways, learnings and case studies. (sh)

9. Format User Input For Better UX

Nobody loves filling in Web forms, and it’s no fun designing them either. To provide a smooth transition between input fields, it’s common practice for designers to minimize the number of input fields as much as possible. To help users go through Web forms quickly, a specific input pattern can also help clearly distinguish the different segments of the input given. Especially when it comes to long input such as credit card data or international phone numbers, having clearly defined patterns might be a good idea.

Format User Input For Better UX33

Formatter.js34 is a library that allows you to define an input pattern and choose whether the formatted characters should always be visible or appear as users type. The library is available as a vanilla JavaScript and as a jQuery plugin. Sometimes it can be an overkill, but more often it can be quite useful indeed. (vf)

10. So How Fast Do You Type?

How are your typing skills? Why not put them to the test with Z-Type35, a game that’ll have you fervently typing away at your keyboard to proceed to the next level. This game was created by Dominic Szablewski and can measure your accuracy as well as the number of words you can type per minute. All you need to do is, well, type characters on your keyboard to shoot the words you see floating towards you.

So How Fast Do You Type?36

A word of caution though: this game is quite addictive, so if you are running late behind a project, perhaps you should give it a try tomorrow. You’ve been warned!

Pssssst, what’s your score? (sh)

11. Smashing Workshops: Grüezi, Zürich!

We’re proud to announce another round of Smashing Workshops37 now available in yet another country. These full-day workshops will be taking place in Zürich, Switzerland, next month. And we also have a couple of workshops waiting for you in Berlin as well.

Workshops in London, UK

More workshops in London →47

Workshops in Zürich, CH

All workshops in Zürich →57

Besides, here is an overview of all available Smashing Workshops58 as well. In case you’re having a hard time convincing your boss to give you a day off to attend one of these workshops, don’t hesitate to drop an email to Vitaly at vitaly[@]smashingconf.com59 and we’ll personally get in touch and sort it out. Also, thank you to everyone who has helped us to spread the word about the workshops — we sincerely appreciate it! (vf)

The authors in this newsletter are: Iris Lješnjanin (il), Vitaly Friedman (vf), Shavaughn Haack (sh), Christiane Rosenberger (research) and Elja Friedman (tools).


  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 #a8
  13. 13 #a9
  14. 14 #a10
  15. 15 #a11
  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
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59 mailto:vitaly[@]

↑ 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

    Chris Valdivia

    November 5, 2013 5:08 pm

    Love the newsletter! One small thing – the first hyperlink under “Content Snippets” reads “Code Snippets”. (Not bad things in and of themselves mind… but probably not what was intended.)

    Keep up the great work!

    — Chris

  2. 2

    Great work !, just wanted to ask how did you make the subject (smashing book) inverted.

  3. 3

    I like that little flat underpants icon :D


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