Dear Friends,
Hold on a second... Why exactly are you reading this? A few sentences written by someone out there, sent out every other week for the last few years. With a few notes on the shiny beautiful web, a few techniques on how to craft better interfaces, and an occasional goodie for your toolbox. Sometimes even with a typo, or a missing comma, or even a misspelled sentence. Just a regular email newsletter — one of thousands out there!
Remember how it all started? The Smashing Newsletter Challenge back in 2010. Good ol' days!
Well, this newsletter is very special for us. We sent out our first newsletter five years ago, and every single time we're about to push that shiny "Send" button, we look forward to greeting our dear readers and seeing emails stream into email clients across the globe. We feel connected, and since the team works hard on crafting those little newsletter articles, it's something with which the entire team can relate to. Well, it kinda makes us all a little Smashing Family.
We want to thank you for your trust and respect, for your curiosity and interest, and for your valuable time for reading those sneaky, lengthy Smashing Newsletter issues with lengthy introductions. We just hope that you love and enjoy reading our newsletters as much as we do. Thank you all for your wonderful support, and here's to another 5 years!
– Vitaly (@smashingmag)
Table of Contents
1. Crafting Delightful Animations
Good animations are subtle and functional. The purpose of animation should not be to make users take note of how delightful it is, but rather connect the dots between states by creating bridges that make an interaction smooth and seamless almost invisible. You might think that those animations are superficial and unnecessary, but they could serve as a powerful tool to make task completion more comfortable.
Twitter's fave animation is a lovely example of a fast-paced animation that does just that by creating an illusion of movement. The effect is similar to the old Zoetrope devices, which present a series of illustrations in sequence around a cylinder. But instead of a cylinder, Twitter displays a flat series of images inside of an element and uses the CSS animation steps timing function to make it work. A lovely detail that makes quite a difference, wouldn't you agree? (vf)
2. Clever Front-End Experiments
When it comes to CSS, doesn't it feel like every single time we have to push the boundaries even harder of what we thought we knew so well? Obviously, laying out a few columns isn't such a big deal, and tabbed navigation nor a form with a few input fields either; we can manage them. However, every now and again, we have to find a workaround to make things work the way they should — sometimes with a little bit of JavaScript along the way.
So what about animating highlighted text or creating a 3D Plane Hover effect? Obviously, you must have dealt with a responsive animated SVG Polygons Lion at some point or a flexible folded corner or a flappy modal dialog? And now that we've come so far, perhaps you've always wanted to manage your anger by closing a few modal windows every now and again? A few nifty little techniques that you might find useful in your next project. What else have you stumbled upon recently? (vf)
3. Pseudo-Responsive Email Layouts In Gmail
Yup, the title says it all. Just enough to start a headache, right? Well, complaining about how evil responsive email layouts can sometimes be, as well as avoiding them as much as possible isn't going to get us anywhere. Thankfully, Julie Ng decided to conduct a case study and take a closer look at one particular newsletter and how it's portrayed on different email clients and devices.
When it comes to the Gmail app, she notes that instead of having Gmail guess what a mobile layout is supposed to look like, it's better to explicitly dictate it. In fact, mobile-first works better for email, too, although there are some quirks to keep in mind for Yahoo! Mail. Obviously, Gmail (and all Gmail apps) do not support media queries, so they won't deal well with responsive layouts. Julie has provided the screenshots of how things look like with a bit of CSS here and there. However, Gmail does support a small subset of CSS inside style tags. The trick is to make judicious use of CSS's structural selectors: the descendant, adjacent, and child selectors.
Also, if a mobile-first approach is kept in mind, everything should actually work quite well across most email clients. In doubt, use an alternative workaround for Gmail and Outlook, avoiding media queries altogether. (il)
4. Remove That Keyboard Layout Already!
How annoying switching keyboards can be! Especially, if you have customers and clients around the world, and you happen to speak a few languages, so you decide to install custom keyboards: perhaps German, Spanish, French (in addition to English, obviously). Of course, each keyboard layout has slight differences in the position of its characters, or accents, or dashes, or special characters. You may also have extensions like TextExpander running in the background, adding a new keyboard layout, too. And every single time you have to write that email or chat with someone on Skype, you have to switch to the right keyboard layout, and then back to English again, and then switch back again in a few minutes... Oh, what a drama!
Well, what if you removed all of the keyboards except the one that you used most? And perhaps used extensible tools to manage those sneaky accents via your main keyboard layout? Well, you could just type accents on Mac with the option key (and the left Alt key on Windows). Alternatively, you can find more advanced tools like USGerman Keyboard Layout or coDE, for example, to communicate in German. If you feel like you're upto an ultimate key remapping session, Karabiner will be just what you need. The result? Typing much faster without getting annoyed, but you would need a bit of time to get used to it. (vf)
5. The Future Of Design
Although there's a lot of high tech around us, graphic design is still firmly rooted in the fine arts, and mostly based on principles inherited from the printed page. However, the way we design is about to change fundamentally, shifting away from this rather artisanal practice towards a more technical approach: meta-design. Instead of creating an artifact (a static logo, for example), a designer creates a system which then can create endless variations of a design. The result? Products that are more dynamic and adaptable!
One of the thinkers who discuss this evolution of the design profession is Rune Madsen. He has written a very interesting blog post about it, in which he envisions meta-design to work in the intersection between art, design, and computation, but also help developers become a creative class in the design world. An essential read. (cm)
6. Keep Calm… And Attend A Smashing Workshop!
With so many techniques, tools, libraries, design patterns, strategies, abstractions, frameworks and boilerplates available nowadays, what do you really need to know to keep your workflow fast, smart and efficient? That's exactly what our front-end and RWD workshops are all about: practical front-end + RWD workshops that will help you become better front-end developers and designers, today.
Full-Day Workshops in Los Angeles, USA: (April 27, 30)
Upcoming Online Workshop: (June 30)
You can also check more workshops coming up later this year. Or, if you'd like to run an in-house workshop at your office, feel free to get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you're facing and would like to solve. Don't worry about the costs — we'll find a fair price for sure. Get in touch — it's that easy! (vf)
No comments:
Post a Comment