Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Smashing Newsletter: Issue #87

This newsletter issue was sent out to 157,157 newsletter subscribers on Tuesday, June 27th 2013. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.


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.

The Mobile Book2
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.

In the meantime, feel free to check a couple of our very own Smashing Books5 that we carefully crafted and edited just for you. No pressure — just sayin’ ;-)

We hope you enjoy today’s issue!
The Smashing Editorial Team

Table of Contents

  1. The 100 Meter Scroll6
  2. Caption Hover Effects7
  3. Explore, Create, Repeat8
  4. Inspiring Six Seconds Of UX Transitions And Animations9
  5. “Oh My God” Posters10
  6. Enhancing Usability Of In-Field Form Labels11
  7. The Biggest Lie On The Web12
  8. A Productivity Goldmine13
  9. The Secret Handshake14

1. The 100 Meter Scroll

Do you have what it takes to be the fastest mousewheel scroller on the Internet? The 100 Meter Scroll15 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:

The 100 Meter Scroll16

If you’re on a laptop, you’ll probably need a mouse for this one. Once you’ve reached the finish line, you will more than likely want to play again and again to improve your score. You can even share it with your friends and challege them to play. The game magically turns into a swiping competition on smartphones and tablets, since it’s built on nothing more than simple HTML/CSS and JavaScript. So you can even compete when you are on the move! (sh)

2. 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 Effects17, 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.

Caption Hover Effects18

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 GitHub19 and create your own library of beautiful effects. And if it’s not enough, make sure to check creative button styles20 and nifty modal window effects21 as well. (ml)

3. Explore, Create, Repeat

Now here’s an online magazine that provides loads of insight and inspiration to the creative community. Explore.Create.Repeat.22 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.

Explore, Create, Repeat23

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)

4. 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 UX24, some of the millions of transitions are captured in the form of 6sec videos. Lucky them!

Inspiring Six Seconds Of UX Transitions And Animations25

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 archive26 where you can see them all one by one. SIX UX is designed and curated by Andreas Popp27. (ea)

5. “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 Hey28 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.

Oh My God Posters29

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)

6. 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 solutions for in-field labels.

Enhancing Usability Of In-Field Form 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 blog. 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 details waiting for you. (cm)

7. 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 Biggest Lie On The Web30

The folks at Terms of Service; Didn’t Read31 (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-on32 that grants you a quick look at the rating of the website you’re currently visiting. (jc)

8. 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?

A Productivity Goldmine33

If you are using a Mac, Hidden OS X features or tips and tricks34 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 tricks35 as well as iOS tricks36 and Android tips37. Now if this won’t improve your productivity, what will?(vf)

9. 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 Handshake38

The Secret Handshake39 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 series40 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. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6 #a1
  7. 7 #a2
  8. 8 #a3
  9. 9 #a4
  10. 10 #a5
  11. 11 #a6
  12. 12 #a7
  13. 13 #a8
  14. 14 #a9
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40

↑ Back to top Tweet itShare on Facebook

The Smashing Editorial 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!

  1. 00

    No comments have been posted yet. Please feel free to comment first!
    Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top