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.

Editorial

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

01. Skeuocard: Credit Card Input Redesigned7
02. Automatic Enumeration With CSS8
03. Free Icons: Download The World For Free9
04. Remove Image Backgrounds In The Browser10
05. Not Your Usual Animated GIFs11
06. Resolution Independent Background Graphics12
07. Precomposed Touch Gestures13
08. What’s Something Most People Don’t Know About You?14
09. There Is Always Money In The Banana Stand15
10. Get Better And Smarter: New Smashing Workshops16

171. 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 18 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 Redesigned19

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)

202. 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 CSS21

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 Grochtdreis22 or read the full article by Vladimir Simovic23 (in German). (ml)

243. 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 Set25 — 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 Dona26.

Free Icons: Download The World For Free27

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)

284. 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 Magic29, 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 30

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)

315. Not Your Usual Animated GIFs

When we think of animated GIFs, we probably have one-liners32 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 copains33.

Not Your Usual Animated GIFs 34

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)

356. 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. SVGeneration36 is a good place to automate this work for you.

Resolution Independent Background Graphics37

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)

387. 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 Gestures39 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 Gestures40

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)

418. 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?42

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 4243 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)

449. 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 Stand45

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 tribute46. 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)

4710. Get Better And Smarter: New Smashing Workshops

We cannot emphasize enough the importance of quality. With our full-day workshops48 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 Workshops49

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 workshops59 — you won’t be disappointed! You can also subscribe to the Events List60 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).

Footnotes

  1. 1 http://www.smashingmagazine.com/the-smashing-newsletter/
  2. 2 http://ux.stackexchange.com/questions/9946/should-i-use-yes-no-or-ok-cancel-on-my-message-box
  3. 3 http://ux.stackexchange.com/questions/9946/should-i-use-yes-no-or-ok-cancel-on-my-message-box
  4. 4 http://www.usabilitypost.com/2008/08/30/usability-tip-use-verbs-as-labels-on-buttons/
  5. 5 http://kb.mailchimp.com/article/how-can-i-delete-my-list-or-clear-my-subscribers-from-a-list
  6. 6 https://twitter.com/smashingmag/status/365422870068854784
  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 http://kenkeiter.com/skeuocard/
  19. 19 http://kenkeiter.com/skeuocard/
  20. 20 #
  21. 21 http://jsfiddle.net/Flocke/LJ66t/
  22. 22 http://jsfiddle.net/Flocke/LJ66t/
  23. 23 http://www.perun.net/2011/12/07/css-automatische-nummerierung-von-ueberschriften/
  24. 24 #
  25. 25 http://tympanus.net/codrops/2013/07/31/freebie-famous-landmarks-icon-set-ai-eps-psd/
  26. 26 https://twitter.com/shaund0na
  27. 27 http://tympanus.net/codrops/2013/07/31/freebie-famous-landmarks-icon-set-ai-eps-psd/
  28. 28 #
  29. 29 http://clippingmagic.com/
  30. 30 http://clippingmagic.com/
  31. 31 #
  32. 32 http://giphy.com/
  33. 33 http://bisouslescopains.tumblr.com
  34. 34 http://bisouslescopains.tumblr.com
  35. 35 #
  36. 36 http://svgeneration.com/
  37. 37 http://svgeneration.com/
  38. 38 #
  39. 39 http://areuswade.com/precomposed-touch-gestures/
  40. 40 http://areuswade.com/precomposed-touch-gestures/
  41. 41 #
  42. 42 http://indexfortytwo.com/
  43. 43 http://indexfortytwo.com/
  44. 44 #
  45. 45 http://thereisalwaysmoneyinthebananastand.com/
  46. 46 http://thereisalwaysmoneyinthebananastand.com/
  47. 47 #
  48. 48 https://shop.smashingmagazine.com/workshops/
  49. 49 https://shop.smashingmagazine.com/workshops/
  50. 50 https://shop.smashingmagazine.com/smashing-workshop-atomic-design.html
  51. 51 https://shop.smashingmagazine.com/smashing-conference-workshop-dan-mall-just-my-type.html
  52. 52 https://shop.smashingmagazine.com/smashing-conference-workshop-luke-worblewski-mobile.html
  53. 53 https://shop.smashingmagazine.com/smashing-workshop-shipping-your-product-freiburg.html
  54. 54 https://shop.smashingmagazine.com/smashing-workshop-lea-verou-demystifying-regular-expressions.html
  55. 55 https://shop.smashingmagazine.com/smashing-workshop-sketching-interfaces.html
  56. 56 https://shop.smashingmagazine.com/smashing-workshop-responsive-design-clever-tricks-and-techniques.html
  57. 57 https://shop.smashingmagazine.com/smashing-workshop-nodejs-knowledge-smash-and-grab-berlin.html
  58. 58 https://shop.smashingmagazine.com/smashing-conference-workshop-dan-rubin-design-ux.html
  59. 59 https://shop.smashingmagazine.com/workshops/
  60. 60 http://www.smashingmagazine.com/the-smashing-conference-list-join-in/

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!

Advertising
  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!

    0

Leave a Comment

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!

↑ Back to top