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

This newsletter issue was sent out to 53,823 newsletter subscribers on March 15th 2011.

Every other week our editorial team works on short, entertaining and (of course) relevant articles for the upcoming issue. The newsletter is sent out on Tuesdays, and contains unique tips and tricks for designers and Web developers, written by us exclusively for our email subscribers. You can subscribe to the e-mail newsletter1, of course.

Table of Contents

  1. Method & Craft: The DVD Extras of Web Design2
  2. User Interface Patterns for Android Apps3
  3. Giving Credit Made Easy4
  4. A Framework for CSS3 Buttons5
  5. Showcase of Vinyl Records6
  6. The Digital Wallet7
  7. jQuery Waypoints: Scroll-Based jQuery Functions8
  8. Famous Objects From Classic Movies9

1. Method & Craft: The DVD Extras of Web Design

Looking into the methods (and sometimes madness) of other designers can be fascinating and insightful. And reconsidering our own work habits after observing the habits of others sometimes results in higher productivity or better results. Finding that kind of information in a single place, though, is challenging at best. It often requires going to a bunch of different blogs, each of which focuses on a different designer.

The DVD Extras of Web Design10

Enter Method & Craft11. Describing itself as “the DVD extras of design,” it offers a behind-the-scenes look at different designs, including how they were achieved, the techniques used and how the designers have grown in their professional careers. It offers articles, interviews, videos (showing designers at work) and notes (offering short tips and links). Eight authors are currently contributing to the website, all with varied design backgrounds. (cc)

2. User Interface Patterns for Android Apps

Design patterns, which are basically reusable solutions for recurring problems, can be found in many design niches; recently they have also turned up in user interface designs for Android apps. Android Patterns12 publishes a comprehensive set of interaction patterns that can help you design Android apps.

User Interface Patterns For Android Apps13

The website is built mainly for interaction designers who want to design Android applications that work well. The collection includes examples for navigation, screen interaction, user input and more. Each pattern is demonstrated in a wireframe and accompanied by descriptions of when and when not to use it, pros and cons, and screenshot examples. Designers of iPhone and iPad applications will appreciate pttrns14 and Mobile UI Patterns15, which was featured in the last issue of this newsletter. (tb)

3. Giving Credit Made Easy

Sharing and using free third-party content is widespread. It’s great that so many authors of source code, images and icons allow the Web community to use their creations. In return, we as users should give those authors credit. Thanks to a recent nifty tool, doing that is easy.

Giving Credit Made Easy16

With Open Attribute17, you can easily find any Creative Commons-licensed content and copy and paste the correct attribution for it. The add-ons for Firefox and Chrome work just fine, but there are problems with the Opera add-on, and a Safari version is still under construction. (mm)

4. A Framework for CSS3 Buttons

CSS3 presents so many new opportunities for the visual design of elements on your website, and creating GitHub-style buttons is just one example. Michael Henriksen’s CSS3 Buttons18 framework helps you create these buttons quickly and easily, using sprites to add icons to buttons.

A Framework for CSS3 Buttons19

Included are styles for regular buttons, primary buttons, negative buttons (which turn red when you hover over them), grouped buttons, buttons with icons and big buttons. The buttons work in all modern browsers (obviously, CSS3 features don’t work in IE8 and earlier). Using the code snippets is simple, with just a few lines of code to copy over. (cc)

5. Showcase of Vinyl Records

It’s always nice to have your attention drawn to something you’ve never really noticed before. Remember vinyl records? The label in the center is where all the relevant album information is located. But that’s not all. Center labels more often than not include beautiful artwork, interesting typography and fun plays on words.


Center of Attention21 is a website dedicated to these little works of art. Set up and maintained by Web designer and ex-record collector Simon Foster22, the website is simple in concept, made up of center labels from different albums. Looks like we’ve found yet another illustrious source of design inspiration, full of interesting colors, shapes, graphics and typography. (kse)

6. The Digital Wallet

Venmo23 is a new idea in the push to mobilize payment methods. Leave your cash and credit cards at home; all you need to take on the road is your mobile phone (iPhone or Android). Add money to your Venmo account, and then use that balance to quickly pay back friends via SMS for, say, lunch. For example, punching in “Pay 6468639557 5.75 for a sandwich” would send $5.75 to the user with the account number 6468639557, and “Pay Ted 5.75 for a sandwich” would send $5.75 to the account holder with the user name Ted.

The Digital Wallet24

The method for charging friends and other accounts is similar. Texting “Bal” gives you your current account balance, and you can charge up to $2.500 per month to Venmo through your credit card. The service is currently available only in the US, and support for more smartphones is on the way. Now you can use your phone to split restaurant bills, bar tabs, lunch, groceries, cab rides, tickets and what not. (sp)

7. jQuery Waypoints: Scroll-Based jQuery Functions

Creating custom functions with jQuery based on the scroll position of the page just got a whole lot easier. Waypoints25 is a jQuery plug-in that makes it easy to execute a function when the user scrolls to a particular element.

jQuery Waypoints: Scroll-Based jQuery Functions26

Possible uses are infinite scrolling, sticky navigation, scroll analytics and more. Examples are included on the Waypoints website, as is the full documentation. The full source is only 15.4 kB, with minified and GZIP versions at 1.2 kB and 2.7 kB. (cc)

8. Famous Objects From Classic Movies

Have you ever noticed how certain objects remind you of certain movies? For example, if you were to see a picture of the Empire State Building, which movie would you think of? Or an apple? Or a ring?

Famous Objects from Classic Movies27

Famous Objects From Classic Movies28 is an online game with over a hundred examples of famous objects. You can also suggest an object to be added to the game, along with the name of the movie in which it appears. The project was designed by three movie lovers based in New York: Ji Lee, Daniele Codega and Cory Forsyth. (ik)

The authors are: Thomas Burkert (tb), Manuela Müller (mm), Stephan Poppe (sp), Cameron Chapman (cc), Katrin Svana (ks), Iris Kopic (ik).


  1. 1
  2. 2 #a1
  3. 3 #a2
  4. 4 #a3
  5. 5 #a4
  6. 6 #a5
  7. 7 #a6
  8. 8 #a7
  9. 9 #a8
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  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

↑ 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

    There is a bug with jQuery Waypoints on iPad and other iOS Safari browsers:
    If you reload a scrolled page with Waypoints implemented it doesn’t fire an event. So if you fade in your content it will just stay invisible after such reload – till the next scroll event. I found no fix for that on the net, so made my own one.
    I detect iOS devices. Once detected, I fire all the Waypoints events on page load. That fixes the bug on mobile and keeps te Waypoints working on desktop.
    The code to detect is:


    var isiPad = navigator.userAgent.match(/iPad/i) != null;
    var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
    if (isiPad || isiPhone) {
    // here I fire the events

  2. 2

    I think other site fast payday loan proprietors should take this web site as an model, very clean and
    wonderful user genial style and design, let alone the content.
    You’re an expert in this topic!


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