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 newsletter 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 #4 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 Design: 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! :-)
01. 3D Opening Type With CSS
02. Offline.js: Every App Goes Offline
03. Float Label Form Pattern For Web Forms
04. Color Variables In Photoshop?
05. Open Web Platform Daily Digest
06. Content Snippets
07. A Catalogue Of Type Combinations
09. Format User Input For Better UX
10. So How Fast Do You Type?
11. Smashing Workshops: Grüezi, Zürich!
Ah, the good ol’ CSS hover effects! But have you seen the 3D opening type CSS effect, yet? It was created by Diego Pardo but was actually inspired by Edenspiekermann’s Open Type project 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)
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 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.
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 pattern 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 pattern which is worth reading, too. Is this going to become a common interaction on all mobile forms? (vf)
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 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)
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 Digest 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)
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.
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)
Do you ever find yourself collecting interesting type pairings from websites, newsletters and brochures? Well, the folks at Typ.io 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 Love, Fonts in Use and Just My Type 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 Brandopolis, 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)
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.
How are your typing skills? Why not put them to the test with Z-Type, 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)
We’re proud to announce another round of Smashing Workshops 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.
|Front-End Warrior by Addy Osmani
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…
|Adaptive Interfaces by Aaron Gustafson
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…
|Web Typography by Marko Dugonjić
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…
|Responsive Design by Vitaly Friedman
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…
|Scalable Front-End by Harry Roberts
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…
|CSS & RWD by Andrew Clarke
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…
Besides, here is an overview of all available Smashing Workshops 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.com 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).
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!
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!