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 newsletter 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?
There has been a lot of discussion whether more general or more abstract terms should be used as labels on buttons. The more precise the label is, the better. Also, it might be a good idea to use meaningful verbs like “Save” or “Confirm”, instead of “Yes”, “No” or “Cancel”. Mailchimp, for example, prompts users to actually type in the word “DELETE” 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
— Vitaly (@smashingmag)
01. Skeuocard: Credit Card Input Redesigned
02. Automatic Enumeration With CSS
03. Free Icons: Download The World For Free
04. Remove Image Backgrounds In The Browser
05. Not Your Usual Animated GIFs
06. Resolution Independent Background Graphics
07. Precomposed Touch Gestures
08. What’s Something Most People Don’t Know About You?
09. There Is Always Money In The Banana Stand
10. Get Better And Smarter: New Smashing Workshops
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 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.
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)
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?
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 Grochtdreis or read the full article by Vladimir Simovic (in German). (ml)
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 Set — 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 Dona.
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)
Do you usually have simple image editing tasks and can’t afford advanced image processing tools like Photoshop? Worry no more! With Clipping Magic, 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!
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)
When we think of animated GIFs, we probably have one-liners 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 copains.
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)
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. SVGeneration is a good place to automate this work for you.
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)
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 Gestures 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!
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)
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?
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 42 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)
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.
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 tribute. 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)
We cannot emphasize enough the importance of quality. With our full-day workshops 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?
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 workshops — you won’t be disappointed! You can also subscribe to the Events List 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).
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!
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!