Smashing Newsletter: Issue #96
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!
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! :-)
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
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!
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.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.
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.
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.
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.
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.
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.
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)
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.
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.
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.
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
|54||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
|57||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
|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
Workshops in Zürich, CH
|64||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
|67||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
|70||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
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).
- 1 http://www.smashingmagazine.com/the-smashing-newsletter/
- 2 http://www.smashingmagazine.com/books#the-smashing-book-4
- 3 http://www.smashingmagazine.com/books#the-smashing-book-4
- 4 http://www.smashingmagazine.com/books#the-smashing-book-4
- 5 #a1
- 6 #a2
- 7 #a3
- 8 #a4
- 9 #a5
- 10 #a6
- 11 #a7
- 12 #a8
- 13 #a9
- 14 #a10
- 15 #a11
- 16 #
- 17 http://codepen.io/diegopardo/full/GqEho
- 18 http://edenspiekermann.com/projects/kroller-muller-museum
- 19 http://codepen.io/diegopardo/full/GqEho
- 20 #
- 21 http://github.hubspot.com/offline/
- 22 http://github.hubspot.com/offline/
- 23 #
- 24 http://mattdsmith.com/float-label-pattern/
- 25 http://mattdsmith.com/float-label-pattern/
- 26 http://bradfrostweb.com/blog/post/float-label-pattern/
- 27 #
- 28 https://news.layervault.com/stories/9281-ask-dn-color-variables--photoshop
- 29 https://news.layervault.com/stories/9281-ask-dn-color-variables--photoshop
- 30 #
- 31 http://webplatformdaily.org/
- 32 http://webplatformdaily.org/
- 33 #
- 34 http://www.contentsnippets.com/
- 35 http://www.contentsnippets.com/
- 36 http://www.contentsnippets.com/
- 37 #
- 38 http://www.typ.io/latest
- 39 http://www.typ.io/latest
- 40 http://typewelike.wirsindsmyk.de/
- 41 http://fontsinuse.com/
- 42 http://justmytype.co/
- 43 #
- 44 http://www.distilled.net/brandopolis/
- 45 http://www.distilled.net/brandopolis/
- 46 #
- 47 https://github.com/firstopinion/formatter.js
- 48 http://firstopinion.github.io/formatter.js/demos.html
- 49 #
- 50 http://phoboslab.org/ztype/
- 51 http://phoboslab.org/ztype/
- 52 #
- 53 https://shop.smashingmagazine.com/workshops/
- 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 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 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 https://shop.smashingmagazine.com/smashing-workshop-adaptive-interfaces-london.html?pk_campaign=Workshops-Mailing-31-10-2013&pk_kwd=aaron-gustafson
- 58 https://shop.smashingmagazine.com/smashing-workshop-adaptive-interfaces-london.html?pk_campaign=Workshops-Mailing-31-10-2013&pk_kwd=aaron-gustafson
- 59 https://shop.smashingmagazine.com/smashing-workshop-adaptive-interfaces-london.html?pk_campaign=Workshops-Mailing-31-10-2013&pk_kwd=aaron-gustafson
- 60 https://shop.smashingmagazine.com/smashing-workshop-web-typography-london.html?pk_campaign=Workshops-Mailing-31-10-2013&pk_kwd=marko-dugonjic
- 61 https://shop.smashingmagazine.com/smashing-workshop-web-typography-london.html?pk_campaign=Workshops-Mailing-31-10-2013&pk_kwd=marko-dugonjic
- 62 https://shop.smashingmagazine.com/smashing-workshop-web-typography-london.html?pk_campaign=Workshops-Mailing-31-10-2013&pk_kwd=marko-dugonjic
- 63 https://shop.smashingmagazine.com/workshops/#London
- 64 https://shop.smashingmagazine.com/smashing-workshop-responsive-design-zurich.html?pk_campaign=Workshops-Mailing-31-10-2013&pk_kwd=vitaly-friedman
- 65 https://shop.smashingmagazine.com/smashing-workshop-responsive-design-zurich.html?pk_campaign=Workshops-Mailing-31-10-2013&pk_kwd=vitaly-friedman
- 66 https://shop.smashingmagazine.com/smashing-workshop-responsive-design-zurich.html?pk_campaign=Workshops-Mailing-31-10-2013&pk_kwd=vitaly-friedman
- 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 https://shop.smashingmagazine.com/smashing-workshop-planning-building-front-end-zurich.html?pk_campaign=Workshops-Mailing-31-10-2013&pk_kwd=harry-roberts
- 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 https://shop.smashingmagazine.com/smashing-workshop-andrew-clarke-responsive-web-design.html?pk_campaign=Workshops-Mailing-31-10-2013&pk_kwd=andrew-clarke
- 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 https://shop.smashingmagazine.com/smashing-workshop-andrew-clarke-responsive-web-design.html?pk_campaign=Workshops-Mailing-31-10-2013&pk_kwd=andrew-clarke
- 73 https://shop.smashingmagazine.com/workshops/#Zurich
- 74 https://shop.smashingmagazine.com/workshops/
- 75 mailto:vitaly[@]smashingconf.com