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.

Editorial

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!

Editorial3

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

01. 3D Opening Type With CSS5
02. Offline.js: Every App Goes Offline6
03. Float Label Form Pattern For Web Forms7
04. Color Variables In Photoshop?8
05. Open Web Platform Daily Digest9
06. Content Snippets10
07. A Catalogue Of Type Combinations11
08. Brandopolis12
09. Format User Input For Better UX13
10. So How Fast Do You Type?14
11. Smashing Workshops: Grüezi, Zürich!15

161. 3D Opening Type With CSS

Ah, the good ol’ CSS hover effects! But have you seen the 3D opening type CSS effect17, yet? It was created by Diego Pardo but was actually inspired by Edenspiekermann’s Open Type project18 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 CSS19

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)

202. 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 Offline21

Offline.js22 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)

233. 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 pattern24 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 Forms25

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 pattern26 which is worth reading, too. Is this going to become a common interaction on all mobile forms? (vf)

274. 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?28

In the DN Color Variables Thread29, 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)

305. 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 Digest31 features a daily review of the latest front-end tools, techniques, articles and resources — just for you.

Open Web Platform Daily Digest32

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)

336. Content Snippets

Having trouble finding the words to say? Code Snippets34 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 Snippets35

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 Snippets36 is definitely a resource worth bookmarking and coming back to! (sh)

377. A Catalogue Of Type Combinations

Do you ever find yourself collecting interesting type pairings from websites, newsletters and brochures? Well, the folks at Typ.io38 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 Combinations39

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 Love40, Fonts in Use41 and Just My Type42 for more beautiful type pairings. (sh)

438. 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 Brandopolis44, 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.

Brandopolis45

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)

469. 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 UX47

Formatter.js48 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)

4910. So How Fast Do You Type?

How are your typing skills? Why not put them to the test with Z-Type50, 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?51

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)

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

We’re proud to announce another round of Smashing Workshops53 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

Addy Osmani54 Front-End Warrior by Addy Osmani55
Front-end tooling can dramatically increase your productivity. In this workshop, you’ll learn how to automate repetitive tasks, automate the setup and improve your workflow. Read more…56
Aaron Gustafson57 Adaptive Interfaces by Aaron Gustafson58
Learn the ins and outs of crafting rich Web experiences that adapt to the capabilities and peculiarities of our customers and their devices, while maintaining your sanity in the process. Read more…59
Marko Dugonjić60 Web Typography by Marko Dugonjić61
This workshop will take you through a combination of presentations, practical discussions and hands-on exercises that will cover the essentials for creating robust typographical experience. Read more…62

More workshops in London →63

Workshops in Zürich, CH

Vitaly Friedman64 Responsive Design by Vitaly Friedman65
In this workshop, Vitaly will present practical techniques, clever tricks and useful strategies from real-life projects that you will definitely find quite useful when working on any responsive design project. Read more…66
Harry Roberts67 Scalable Front-End by Harry Roberts68
From code organization and structure to naming conventions, performance tips to effective usage of Sass, this workshop will help you start building huge front-ends from the ground up. Read more…69
Andrew Clarke70 CSS & RWD by Andrew Clarke71
Learn how to make the most of CSS3, so your websites and applications will be faster, more fun and fashionably flexible. You’ll walk away with a full set of resources and example files, too. Read more…72

All workshops in Zürich →73

Besides, here is an overview of all available Smashing Workshops74 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.com75 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).

Footnotes

  1. 1 http://www.smashingmagazine.com/the-smashing-newsletter/
  2. 2 http://www.smashingmagazine.com/books#the-smashing-book-4
  3. 3 http://www.smashingmagazine.com/books#the-smashing-book-4
  4. 4 http://www.smashingmagazine.com/books#the-smashing-book-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 http://codepen.io/diegopardo/full/GqEho
  18. 18 http://edenspiekermann.com/projects/kroller-muller-museum
  19. 19 http://codepen.io/diegopardo/full/GqEho
  20. 20 #
  21. 21 http://github.hubspot.com/offline/
  22. 22 http://github.hubspot.com/offline/
  23. 23 #
  24. 24 http://mattdsmith.com/float-label-pattern/
  25. 25 http://mattdsmith.com/float-label-pattern/
  26. 26 http://bradfrostweb.com/blog/post/float-label-pattern/
  27. 27 #
  28. 28 https://news.layervault.com/stories/9281-ask-dn-color-variables--photoshop
  29. 29 https://news.layervault.com/stories/9281-ask-dn-color-variables--photoshop
  30. 30 #
  31. 31 http://webplatformdaily.org/
  32. 32 http://webplatformdaily.org/
  33. 33 #
  34. 34 http://www.contentsnippets.com/
  35. 35 http://www.contentsnippets.com/
  36. 36 http://www.contentsnippets.com/
  37. 37 #
  38. 38 http://www.typ.io/latest
  39. 39 http://www.typ.io/latest
  40. 40 http://typewelike.wirsindsmyk.de/
  41. 41 http://fontsinuse.com/
  42. 42 http://justmytype.co/
  43. 43 #
  44. 44 http://www.distilled.net/brandopolis/
  45. 45 http://www.distilled.net/brandopolis/
  46. 46 #
  47. 47 https://github.com/firstopinion/formatter.js
  48. 48 http://firstopinion.github.io/formatter.js/demos.html
  49. 49 #
  50. 50 http://phoboslab.org/ztype/
  51. 51 http://phoboslab.org/ztype/
  52. 52 #
  53. 53 https://shop.smashingmagazine.com/workshops/
  54. 54 https://shop.smashingmagazine.com/smashing-workshop-the-front-end-warrior-workshop-london.html?pk_campaign=Workshops-Mailing-31-10-2013&pk_kwd=addy-osmani
  55. 55 https://shop.smashingmagazine.com/smashing-workshop-the-front-end-warrior-workshop-london.html?pk_campaign=Workshops-Mailing-31-10-2013&pk_kwd=addy-osmani
  56. 56 https://shop.smashingmagazine.com/smashing-workshop-the-front-end-warrior-workshop-london.html?pk_campaign=Workshops-Mailing-31-10-2013&pk_kwd=addy-osmani
  57. 57 https://shop.smashingmagazine.com/smashing-workshop-adaptive-interfaces-london.html?pk_campaign=Workshops-Mailing-31-10-2013&pk_kwd=aaron-gustafson
  58. 58 https://shop.smashingmagazine.com/smashing-workshop-adaptive-interfaces-london.html?pk_campaign=Workshops-Mailing-31-10-2013&pk_kwd=aaron-gustafson
  59. 59 https://shop.smashingmagazine.com/smashing-workshop-adaptive-interfaces-london.html?pk_campaign=Workshops-Mailing-31-10-2013&pk_kwd=aaron-gustafson
  60. 60 https://shop.smashingmagazine.com/smashing-workshop-web-typography-london.html?pk_campaign=Workshops-Mailing-31-10-2013&pk_kwd=marko-dugonjic
  61. 61 https://shop.smashingmagazine.com/smashing-workshop-web-typography-london.html?pk_campaign=Workshops-Mailing-31-10-2013&pk_kwd=marko-dugonjic
  62. 62 https://shop.smashingmagazine.com/smashing-workshop-web-typography-london.html?pk_campaign=Workshops-Mailing-31-10-2013&pk_kwd=marko-dugonjic
  63. 63 https://shop.smashingmagazine.com/workshops/#London
  64. 64 https://shop.smashingmagazine.com/smashing-workshop-responsive-design-zurich.html?pk_campaign=Workshops-Mailing-31-10-2013&pk_kwd=vitaly-friedman
  65. 65 https://shop.smashingmagazine.com/smashing-workshop-responsive-design-zurich.html?pk_campaign=Workshops-Mailing-31-10-2013&pk_kwd=vitaly-friedman
  66. 66 https://shop.smashingmagazine.com/smashing-workshop-responsive-design-zurich.html?pk_campaign=Workshops-Mailing-31-10-2013&pk_kwd=vitaly-friedman
  67. 67 https://shop.smashingmagazine.com/smashing-workshop-planning-building-front-end-zurich.html?pk_campaign=Workshops-Mailing-31-10-2013&pk_kwd=harry-roberts
  68. 68 https://shop.smashingmagazine.com/smashing-workshop-planning-building-front-end-zurich.html?pk_campaign=Workshops-Mailing-31-10-2013&pk_kwd=harry-roberts
  69. 69 https://shop.smashingmagazine.com/smashing-workshop-planning-building-front-end-zurich.html?pk_campaign=Workshops-Mailing-31-10-2013&pk_kwd=harry-roberts
  70. 70 https://shop.smashingmagazine.com/smashing-workshop-andrew-clarke-responsive-web-design.html?pk_campaign=Workshops-Mailing-31-10-2013&pk_kwd=andrew-clarke
  71. 71 https://shop.smashingmagazine.com/smashing-workshop-andrew-clarke-responsive-web-design.html?pk_campaign=Workshops-Mailing-31-10-2013&pk_kwd=andrew-clarke
  72. 72 https://shop.smashingmagazine.com/smashing-workshop-andrew-clarke-responsive-web-design.html?pk_campaign=Workshops-Mailing-31-10-2013&pk_kwd=andrew-clarke
  73. 73 https://shop.smashingmagazine.com/workshops/#Zurich
  74. 74 https://shop.smashingmagazine.com/workshops/
  75. 75 mailto:vitaly[@]smashingconf.com

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!

Advertising
  1. 1

    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

    0
  2. 2

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

    0
  3. 3

    I like that little flat underpants icon :D

    0

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