Smashing Newsletter: Issue #87
If you’ve been following Smashing Newsletter for a while, you’ve probably been wondering where your copy of the Smashing Newsletter got lost two days ago. Of course we haven’t forgotten about you; and no, we didn’t forget to set our alarm clocks either. Busy Mondays in our office tend to produce stressful situations which could eventually reflect on the quality of our newsletters sent out to you.
Apart from producing the magazine and newsletters, we also publish books and eBooks. The Mobile Book3 is a carefully crafted hardcover book (available as an eBook as well) with useful tips, tricks and techniques on mobile. Isn’t it lovely? Image credits: Trent Walton4
You see, just like you, we don’t like stress. We don’t like hasty decisions. And we like to stand behind everything that we do at Smashing. That’s why we decided to start sending the newsletter later in the week which would give us more time to prepare, write, edit and proofread everything without the pressure of a tight deadline. That’s why we’ll be filling your inbox with useful tips and tricks on Thursdays from now on.
We hope you enjoy today’s issue!
The Smashing Editorial Team
Table of Contents
01. The 100 Meter Scroll6
02. Caption Hover Effects7
03. Explore, Create, Repeat8
04. Inspiring Six Seconds Of UX Transitions And Animations9
05. “Oh My God” Posters10
06. Enhancing Usability Of In-Field Form Labels11
07. The Biggest Lie On The Web12
08. A Productivity Goldmine13
09. The Secret Handshake14
151. The 100 Meter Scroll
Do you have what it takes to be the fastest mousewheel scroller on the Internet? The 100 Meter Scroll16 has been created to answer just that question. The creators at Mom! Look what I made were inspired by Usain Bolt’s astonishing 100-meter dash in 9,58 seconds and created a game where you scroll down a 100-meter track (or 283.500 px). Let’s see how well you do:
182. Caption Hover Effects
We are used to featuring Codrops’ tutorials every now and again, but when quality is right, mentioning a site multiple times isn’t really an issue. This time, in her article on Caption Hover Effects19, Mary Lou teaches you how to integrate interactive caption hover effects that can be used for a gallery, grid or even for your portfolio. The idea is to reveal a caption including title, author and a link button when hovering over the item. The effects are based on CSS, transition as well as 3-D effects.
The article presents seven subtle possibilities for styling but you probably can come up with even more interesting effects. You can fork the project on GitHub21 and create your own library of beautiful effects. And if it’s not enough, make sure to check creative button styles22 and nifty modal window effects23 as well. (ml)
243. Explore, Create, Repeat
Now here’s an online magazine that provides loads of insight and inspiration to the creative community. Explore.Create.Repeat.25 features topics in the range of business, inspiration, skill development, as well as useful tools. Also, the interviews featured are fresh, interesting and spicy — with edgy and offbeat questions that are formulated differently in each interview.
The interviewees are remarkable personalities such as David Talley, a 20-year-old photographer from Southern California. A great source of inspiration for everyone, but particularly for photography lovers and practitioners! (ea)
274. Inspiring Six Seconds Of UX Transitions And Animations
The Web is constantly in motion — nothing stands still. There are millions of movements taking place, triggered by millions of users who are clicking, hovering over, dragging, dropping, and so forth. Every second, millions of transitions take place, which also transform user interfaces. The lifespan of a transition on the Web is pretty short, as they tend to die right after being brought to life (well, not all of them). At SIX UX28, some of the millions of transitions are captured in the form of 6sec videos. Lucky them!
Saved from death: A navigation that slides down like a garage door, a drop-down menu that starts bouncing, exciting icon and page transitions, and a whole lot more! So, what’s the deal with these? SIX UX is meant to be a place for inspiration and reference. For example, a UX designer who wants to show one of such UX movements to their clients or developers. If your browser can’t cope with all videos running at once, check out the archive30 where you can see them all one by one. SIX UX is designed and curated by Andreas Popp31. (ea)
325. “Oh My God” Posters
Here is one for you: if you had to design a Greek god, what visual qualities would you give it? Spanish design studio Hey33 have created an interesting series of geometric posters depicting the gods, heroes and creatures of Greek mythology. The character designs all have a fresh and unique quality with a clean and sophisticated aesthetic. The bright and simplistic use of color creates a fun and friendly feeling to the series.
The characters are depicted like the superheroes of the era — each with their own background stories. The qualities of each “god” is incorporated into the design and the bold use of flat color speaks of the nature of each character. The viewer is easily able to identify and differentiate between the “good” and the “evil” characters. (sh)
356. Enhancing Usability Of In-Field Form Labels
Do you like in-field labels on forms or do you hate them? In-field labels often help to craete a nice and tidy overall look, but viewed from a usability perspective they do also have their downsides. Not only can the text inside the field mix with the user’s input not be removed, but a user also loses track of the field’s purpose once it’s active. The team behind design and strategy agency Viget wasn’t satisfied with the common ways of encountering these issues. They went one step further and played around with possible solutions36 for in-field labels.
So what came out of it? A tooltip approach placing labels above the input field once it’s focused. Viget’s senior UX designer Jackson Fox describes the team’s different attempts including the pros and cons in an insightful post on their blog38. The ideas and experiences collected there might come in handy when you find yourself faced with the question of form field labels again. And in case you like the idea of tooltips, there is even a write-up with implementation details39 waiting for you. (cm)
407. The Biggest Lie On The Web
Three small words that almost no one really reads but agrees to all the time: Terms of Service. We know we can’t have access to our dream app, program, device nor website if we don’t first “agree” to the terms of service. Most users just don’t have the time to read the 50-or-so pages of abstract legalese. So, while we sign or click on “agree”, we send a little prayer that it’s not any kind of scam.
The folks at Terms of Service; Didn’t Read42 (also known as ToS;DR), had decided it was time to remedy the lack of transparency of online “terms” and “privacy policies”. Even though the terms are always much too long to read, it is important to know what they say. ToS;DR have set up a rating system that informs users about the pros and cons of certain websites. There is even a browser add-on43 that grants you a quick look at the rating of the website you’re currently visiting. (jc)
448. A Productivity Goldmine
So you’d like to improve your productivity and get more stuff done in less time, but how do you start? Should you review your tools? Or perhaps start with revising and rethinking your design processes? Well, what if you print out a list of little time-savers, and memorize one little time-saver every single day?
If you are using a Mac, Hidden OS X features or tips and tricks46 will turn out to be a real productivity gem, full of dozens and dozens of useful little tricks to make your workflow just a bit quicker and smarter. You could also check Windows 8 tips and tricks47 as well as iOS tricks48 and Android tips49. Now if this won’t improve your productivity, what will?(vf)
509. The Secret Handshake
Success is not just about talent and practice, it is also about presenting your work and (most importantly) yourself. A terrible first impression can be a deal breaker. Nowadays, big companies make sure to have online guidelines so that applicants (hopefully) meet at least the basics required for a particular job position. Courses on how to apply for a job are a popular topic at universities, but too often they’re only targeted at getting a usual corporate firm job and less at the creative industry.
The Secret Handshake52 is there to fill this gap and provides you with useful application tips from people that actually work in the creative industry. It is a beautiful online resource for young creatives between 19 and 25 that also offers an expanding collection of do’s and don’ts. Also, actual professionals share what they would look for in an ideal application. If you are a professional yourself, you might be able to share some useful advice with the next creative generation. Make sure you also check out the event series53 and learn something beyond the screen. (ml)
The contributors to this issue are: Vitaly Friedman (vf), Iris Lješnjanin (il), Esther Arends (ea), Cosima Mielke (cm), Shavaughn Haack (sh), Jan Constantin (jc), Melanie Lang (ml) and Christiane Rosenberger (research).
- 1 http://www.smashingmagazine.com/the-smashing-newsletter/
- 2 https://shop.smashingmagazine.com/the-mobile-book.html
- 3 https://shop.smashingmagazine.com/the-mobile-book.html
- 4 http://trentwalton.com/2013/02/11/the-mobile-book/
- 5 http://www.smashingmagazine.com/books/
- 6 #a1
- 7 #a2
- 8 #a3
- 9 #a4
- 10 #a5
- 11 #a6
- 12 #a7
- 13 #a8
- 14 #a9
- 15 #
- 16 http://the100meterscroll.com/
- 17 http://the100meterscroll.com/
- 18 #
- 19 https://github.com/codrops/CaptionHoverEffects
- 20 https://github.com/codrops/CaptionHoverEffects
- 21 https://github.com/codrops/CaptionHoverEffects
- 22 http://tympanus.net/codrops/2013/06/13/creative-button-styles/
- 23 http://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/
- 24 #
- 25 http://explorecreaterepeat.com/
- 26 http://explorecreaterepeat.com/
- 27 #
- 28 http://sixux.com/
- 29 http://sixux.com/
- 30 http://sixux.com/archive
- 31 https://twitter.com/supersoon
- 32 #
- 33 http://heystudio.es/oh-my-god/
- 34 http://heystudio.es/oh-my-god/
- 35 #
- 36 http://viget.com/inspire/making-infield-form-labels-suck-less
- 37 http://viget.com/inspire/making-infield-form-labels-suck-less
- 38 http://viget.com/inspire/making-infield-form-labels-suck-less
- 39 http://viget.com/inspire/making-infield-form-labels-suck-less-2
- 40 #
- 41 http://tosdr.org/
- 42 http://tosdr.org/
- 43 http://tosdr.org/downloads.html
- 44 #
- 45 http://apple.stackexchange.com/questions/400/please-share-your-hidden-os-x-features-or-tips-and-tricks
- 46 http://apple.stackexchange.com/questions/400/please-share-your-hidden-os-x-features-or-tips-and-tricks
- 47 http://www.techradar.com/news/software/operating-systems/50-windows-8-tips-tricks-and-secrets-1028220
- 48 http://iphone.appstorm.net/roundups/developer/40-secret-iphone-features-and-shortcuts/
- 49 http://www.techradar.com/news/software/operating-systems/50-android-jelly-bean-tips-tricks-and-hints-1113114
- 50 #
- 51 http://learnthesecrethandshake.com/
- 52 http://learnthesecrethandshake.com/
- 53 http://learnthesecrethandshake.com/events/