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 #90

This newsletter issue was sent out to 158,808 newsletter subscribers on Thursday, August 8th 2013. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.


Yes. No. OK. Cancel. Whenever you’re designing an interface, you don’t only have to thoroughly think about the visual style of your buttons, but also about the microcopy that will be displayed on those buttons. What words should you choose for the confirmation buttons? What about the checkout buttons, and even the alerts?

Labels on Buttons2

There has been a lot of discussion whether more general or more abstract terms should be used as labels on buttons. The more precise3 the label is, the better. Also, it might be a good idea to use meaningful verbs4 like “Save” or “Confirm”, instead of “Yes”, “No” or “Cancel”. Mailchimp, for example, prompts users to actually type in the word “DELETE”5 when deleting their data and confirm it with a button also labeled “Delete”.

What has worked best for you? Do you have any general tips, ideas or thoughts for button labels? Please share them with us on Twitter using the hashtag #smlabel6.

— Vitaly (@smashingmag)

Table of Contents

  1. Skeuocard: Credit Card Input Redesigned7
  2. Automatic Enumeration With CSS8
  3. Free Icons: Download The World For Free9
  4. Remove Image Backgrounds In The Browser10
  5. Not Your Usual Animated GIFs11
  6. Resolution Independent Background Graphics12
  7. Precomposed Touch Gestures13
  8. What’s Something Most People Don’t Know About You?14
  9. There Is Always Money In The Banana Stand15
  10. Get Better And Smarter: New Smashing Workshops16

1. Skeuocard: Credit Card Input Redesigned

Do you like typing in your data in a credit card input field, do your users? Probably not. That’s why Ken Keiter has decided rethink and redesign the credit card input on Web forms. As you enter your credit card number, Skeuocard 17 matches your information with an accepted card type, like Visa or MasterCard for example. When typing in a CVC number on the back, you are prompted to flip the card to the other side and enter the information once all the information on the front is accepted.

Skeuocard: Credit Card Input Redesigned18

It’s really simple to use — you can compare the card you’re holding in your hand directly with what you see on the screen. Which means less time rereading and double checking the numbers on the screen. And a much simpler design for customers who aren’t used to buying things with their credit card. The project is a work in progress though, and Keiter has said he will add new credit card layouts as they are contributed. (sh)

2. Automatic Enumeration With CSS

Formatting long HTML documents can be very time consuming and frustrating. Frankly, sometimes on the Web, I miss some visual treatments and functions which are standard features in Word, Pages or InDesign. One of these features is automatic numeration. It is common knowledge that automatic numeration certainly can be archived with ordered lists. But what if I need to automatically enumerate headings?

Automatic Enumeration With CSS19

Vladimir Simovic wrote a few simple CSS lines that enable simple numeration for headings — even nested sub-sections and list-types (known from list-elements) are possible! This technique not only works with headings though. You could use it to enumerate other elements like images or tables. It works in all “good” browsers, and IE8 onwards. Furthermore, the technique has successfully been tested for exporting HTML in Kindle format which comes in handy for the eBook publication. You can check out the the JSFiddle by Jens Grochtdreis20 or read the full article by Vladimir Simovic21 (in German). (ml)

3. Free Icons: Download The World For Free

There is now no need to travel to see the Taj Mahal of Agra, the Egyptian pyramids, Rio de Janeiro’s Cristo Redentor or San Francisco’s Golden Gate Bridge. The world is now at your fingertips with the Famous Landmarks Icon Set22 — a free set of 12 beautiful and pixel-perfect mini landmarks from around the world. Each one of them was carefully and tenderly designed by Shaun Dona23.

Free Icons: Download The World For Free24

All of Shaun’s landmark icons are available in three different formats (AI, EPS, PSD). They also come in vector shapes, so you can easily resize them. Licensed under a Creative Commons Attribution 3.0 Unported license, the icon set can be shared, adapted or used commercially. But pease do not redistribute the icon set without the prior consent of the author. (ea)

4. Remove Image Backgrounds In The Browser

Do you usually have simple image editing tasks and can’t afford advanced image processing tools like Photoshop? Worry no more! With Clipping Magic25, there is now a way to easily remove the background from your photos to create masks, cutouts, or clipping paths — all done instantly online in the browser!

Remove Image Backgrounds In The Browser 26

All you need to do is simply drag your image onto the drop zone to upload a picture. Mark foreground areas green and background areas red, and the algorithm takes care of the rest. The background is removed by adding an alpha channel, with a suitably feathered boundary. The tool is still in an alpha phase and the team is working on a better handling of complicated situations like hairy and blurry boundaries. (ml)

5. Not Your Usual Animated GIFs

When we think of animated GIFs, we probably have one-liners27 from famous movies or shows in mind, or perhaps weird images of weird animals doing… weird things. But GIFs don’t have to be just that. If we combine art, illustration and an animated GIF together, we can actually create a different kind of looped animation. In short, the result can look like Bisous les copains28.

Not Your Usual Animated GIFs 29

Every single week Guillaume Kurkdijan, who lives in Nantes (France), designs his very own GIF animation which is a scene from a life of virtual characters living in their own little world with their own rules, principles and even laws of physics. The attention to detail is remarkable, and every animation is an artwork of its own. Not your usual animated GIF now, is it? (vf)

6. Resolution Independent Background Graphics

In times of multi-sized screens and resolutions, graphics aren’t that easy to handle anymore as they used to be. Imagine you want a background graphic for a website that still looks crisp on a large monitor; you’ll have to put up with huge high-resolution images. A great, but still pretty underused, alternative is of course SVG. If you aren’t looking for photographic background, you might solve this issue with just a few lines of XML, and they can easily be adjusted to your needs. SVGeneration30 is a good place to automate this work for you.

Resolution Independent Background Graphics31

Featured patterns can be customized to your needs by easily adjusting everything from widths and heights to borders, paddings, and of course, colors right in the browser. The result is displayed live in the background and (once you’re happy with it) can be exported and embedded directly in your own project. As the graphics are licensed under an MIT Licence, using them doesn’t require any credits, but some sort of “thank you” for the efforts is nevertheless appreciated! (cm)

7. Precomposed Touch Gestures

Got any presentations coming up or product demos that have to be designed? Well, we’ve got something just for you then. Pre-Composed Touch Gestures32 by Areus Wade is a set of basic precomposed touch-device gestures that are available as raw Quicktime animations. Tap, swipe, flick, pinch — you name it!

Precomposed Touch Gestures33

The set is basically free, and you can pay for the files with a tweet or by donating $2 to AFSP. The gestures are available as QuickTime animations which will work in a video editor as well as Photoshop. You can also subscribe to file updates and receive notifications via email. (sh)

8. What’s Something Most People Don’t Know About You?

You may be a big fan of some developers, designers, writers or speakers, but how much do you really know about them? Of course, you know how their faces look like, you know about the work they do, also what inspired them in their careers, and so forth. But imagine you bumped into one of these people in person. Imagine they invited you for a drink and you had half an hour to talk to them. What questions would you ask?

What's Something Most People Don't Know About You?34

You would probably ask them about the work they do and what has inspired them in their careers. But really? Don’t you already know this?! The chance is high, that the person has already shared this information online. When INDEX 4235 gets a chance to ask people questions, they don’t bother asking them questions about work. INDEX 42 asks people intimate questions like “What do you need most right now?” or “What do you want to remember forever?”. Now that’s a nice change! (ea)

9. There Is Always Money In The Banana Stand

After only three seasons that were released 2003 to 2006, an unexpected family reunion took place in 2013 with Netflix airing season four of Arrested Development. As you probably now, the show depicts the life of a rather dysfunctional family Bluth that find itself forced to bond together in difficult circumstances. Good news: the family was now back for another season and might be for more in the future.

There Is Always Money In The Banana Stand36

Even though critics are torn between critical acclaim and dismal ratings, Arrested Development fan and artist Nigel Evan Dennis felt compelled to give the show a graphical tribute37. Next to a display of all the main characters, you’ll also find quite a few graphic visualisations of long-running inside jokes that the Bluths are famous for. (kv)

10. Get Better And Smarter: New Smashing Workshops

We cannot emphasize enough the importance of quality. With our full-day workshops38 in Germany, we aim to bring together only the best experts from various fields of Web design and development. And if these workshops won’t help you get better and smarter, what will?

Get Better And Smarter: New Smashing Workshops39

Here’s a quick overview of workshops taking place in Berlin and Freiburg in the upcoming weeks:

Haven’t had enough? Check out our full list of Smashing workshops47 — you won’t be disappointed! You can also subscribe to the Events List48 to stay updated and find out where the next workshops may take place. Who knows, there may be one in your neighbourhood soon! (vf)

The authors in this newsletter are: Shavaughn Haack (sh), Melanie Lang (ml), Esther Arends (ea), Cosima Mielke (cm), Iris Lješnjanin (il), Kristina Vogt (kv), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7 #a1
  8. 8 #a2
  9. 9 #a3
  10. 10 #a4
  11. 11 #a5
  12. 12 #a6
  13. 13 #a7
  14. 14 #a8
  15. 15 #a9
  16. 16 #a10
  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
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48

↑ 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. 1

    That Skype screen shot is superficially nice, but if you stop to think about using it, it’s actually pretty terrible…. the presence of the question “are you sure…?” gives a very mixed message: “Okay, reject it, I AM sure” is an obvious response, but from second part of their text, you see that they maybe want you to press Cancel to reject it.

    Perhaps it was intended to illustrate the pitfalls but it isn’t clear if this is an example you like or not.

    That aside, it’s a great mini article!

  2. 2

    Awesome article, thank you so much for being such a valuable resource on the web. You guys always post genuinely helpful articles and tutorials.

    P.S. Guillaume “Kurkdjian’s” last name is misspelled as “Kurkdijan” instead of “Kurkdijan”

  3. 3

    I’ve found to be the best option for removing pics From the background. And it’s much cheaper than any tool I’ve come across.


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