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

This newsletter issue was sent out to 71,978 newsletter subscribers on November 8th 2011.

Hola que tal dear smashing readers and welcome to another fabulous edition of the Smashing Magazine newsletter. I made a lot of new friends in the last weeks. First off, I’ve met SmashingMagazine fan Paula Mariani in Argentina and she showed me around Buenos Aires. Straight back from the airport, I was very busy helping the Smashing Magazine team with their very first Smashing Meetup. We all had a great night  —  we love to meet our fans! So don’t forget to join our group, the next meeting is not far!

And that’s not where we’re going to stop this week; here you can find out how to surf the Web together with your friends from all over the world, how to build a timeline with jQuery and how you can look good in everybody’s inbox. But before you scroll down, you should stop by at our shop today and get our Mobile Design eBook for iPhone and iPad1  —  there you’ll find everything you need from design to coding and marketing!

— Keep rocking! *meow*

Table of Contents

  1. 3-D Animation With JavaScript2
  2. Testing Your Typography Skills3
  3. Recurly: Secure PCI-Compliant Online Transactions4
  4. Surf the Web Together With a Remote Friend5
  5. The Science of Looking Good in the Inbox6
  6. Build Relationships Through Face-to-Face Conversations7
  7. So You Want To Build A Timeline. What’s Next?8
  8. Get Rid Of Tasteless Restaurant Menus9

1. 3-D Animation With JavaScript

Producing 3-D objects and animations for the Web has becoming increasingly easier as new technologies emerge. But actually creating those objects and animations isn’t quite easy. The process can be intimidating and confusing to those who aren’t expert developers.

3D Animation with JavaScript10

Three.js11 is a lightweight JavaScript engine that makes 3-D animation a whole lot easier. It can render with Canvas, SVG and WebGL. One great example of the library in use is the WebGL cars demo12. You can play around with two luxurious cars and drive them around a track. You can change camera views, control one or both cars, switch from day to night view, and enable and disable motion blur. Suddenly, the idea of having games like Need For Speed right in the browser doesn’t seem so unrealistic! (cc)

2. Testing Your Typography Skills

If you are passionate about typography and have fun experimenting with glyphs, then you will certainly like the rather unusual type-design game created by the interaction designer Mark MacKay. This JavaScript-based letter-shaping game is called Shape Type13.

Testing your Typography Skills14

The idea is simple: you get 10 modified letters from various classic typefaces, and you have to try to make them right by dragging curves along their axes. You can hold Shift to snap to an axis and hit Alt for a quick preview. After adjusting a letter, you can compare your results with the original letter and measure their similarity. Once you have passed the 10 levels of the game, you can tweet your final score. It’s an engaging way to explore what makes or breaks a glyph. (tt)

3. Recurly: Secure PCI-Compliant Online Transactions

Creating check-out forms can be quite a hassle, especially because you have to deal with sensitive data such as personal profiles and preferences, shipping addresses and credit-card numbers. The main concern here, of course, is security. How do you make sure that all sensitive data is secure and doesn’t leak to a third party during the transaction?

Recurly.js:  Secure, PCI Compliant Online Transactions15

Recurly16 is a service that manages recurring bills and is also capable of handling credit-card errors and declined purchases. Recurly.js17, the accompanying open-source JavaScript library, enables you to easily embed PCI-compliant order forms. The library performs inline validation and real-time total calculations, and it gracefully handles errors. Customers stay on your website while their billing information is sent securely to Recurly for approval. Because cardholder data is sent directly to Recurly, the scope of your PCI-compliance requirements is dramatically reduced. Along with Stripe18, it’s a quick alternative to the complex approval processes that are often required by credit-card institutions. (ld)

4. Surf the Web Together With a Remote Friend

You know how it is: you can try to verbally explain to someone how a website works, but nothing is easier or clearer than simply showing them what you’re talking about. Surf the Web Together19 now makes it easy to do exactly that. Simply paste the URL of the website that you want to show to your friend into the channel bar, and click “Create Channel.”

Surf The Web Together With Your Distant Friend20

Your friend on the other side of the world will be able to see the website you are talking about exactly as you see it, and you’ll see each other’s cursor movements. Now you can show them those rollover effects and hovers that they couldn’t find on their own. The service is a great way to learn new languages together, discover and listen music together or just pick out a sweater online that your significant other won’t hate! (sp)

5. The Science of Looking Good in the Inbox

Emailology21 has taken on the fight against the deterioration of HTML email newsletters when rendered by some nasty email clients. Emailology’s design guide offers bulletproof code, packed neatly in an email boilerplate, for dealing with all kinds of rendering problems. You can consult the boilerplate to get the bulletproof basic layout for HTML newsletters.

The Science of Looking Good in the Inbox22

Apart from the boilerplate, the website provides tips and tricks for working with popular email clients, along with useful advice on using CSS with different viewports and mobile devices and the possible pitfalls there. The standards guide provides an overview of universally supported HTML and CSS tags and properties. Last but not least, you can use the character converter to switch the special characters in your content to HTML entities. Follow these guidelines to make sure that your emails aren’t ripped up in your subscribers’ inboxes. (sp)

6. Build Relationships Through Face-to-Face Conversations

If you get a lot of requests to meet up with young professionals who want advice or want to share their latest ideas, then this is the tool for you. Ohours23 helps you connect with people who are looking to network or want to share their expertise and interests, without the awkwardness of wandering around networking events.

Build Relationships Through Face-to-Face conversations24

Ohours makes scheduling office hours a walk in the park, because we all know how time-consuming it can be to coordinate schedules. Simply sign up via Twitter, Facebook or LinkedIn, and start scheduling in blocks of time in various increments. Other users will then be able to see when you are available to meet. This tool is nifty for networking, finding likeminded connections or just building face-to-face relationships in person or by video chat. (ar)

7. So You Want To Build A Timeline. What’s Next?

So you want to create a timeline for your company’s website. How to do it? Do you want a static layout, or will you try to integrate some nifty interactive features? Well, you have quite a few options.

So You Want To Build A Timeline. What's Next?25

One option is jQuery Timelinr26, a jQuery plugin that displays a timeline as a slider and that supports horizontal and vertical layouts. It also allows you to specify parameters such as speed of transitions and level of transparency. If you’d like to have more flexibility in your designs, you could consider building a simple or more advanced CSS timeline27.

And alternatively, you could use the service TimeKiwi28 which allows you to generate a clean timeline of your Twitter, blogs and photos automatically. (ld)

8. Get Rid Of Tasteless Restaurant Menus

Do menus on restaurant websites really have to be so terrible? All you want is a quick peek at a menu to see whether the establishment serves something to your liking… and you end up just getting lost. The folks at Unit Interactive have a simple mission with Clear Menu29: to demonstrate how easy it is? ?to create a menu page that works on any screen size, that is easy to update, but that delivers a consistent and delightful experience.

Eradicate Tasteless Restaurant Menues30

This little project showcases three examples of responsive HTML/CSS/JS-based restaurant menus. Unit Interactive encourages restaurant owners and marketing managers to demand better from their Web teams, and it shows Web designers how easy it is to provide useable, contextual, branded experiences to their clients. Learn how to accent and highlight correctly in order to make a restaurant menu clear and striking. And above all, never stress out a hungry user! (sp)

The authors in this newsletter issue are: Stephan Poppe (sp), Cameron Chapman (cc), Talita Telma (tt), Luca Degasperi (ld), Vitaly Friedman (vf), Andrew Rogerson (ar) and Lisa Lang (ll).


  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
  29. 29
  30. 30

↑ Back to top Tweet itShare on Facebook

The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

  1. 1

    Great collection of new things. thanks for sharing.

  2. 2

    Peter Cartouche

    November 8, 2011 1:00 pm

    The Clear Menu project is as good a treatment of its subject as I have I ever seen. Brilliant stuff.

  3. 3

    I tried the “Surf The Web Together” link ( It doesn’t seem to work on any of the browsers (Safari, Firefox). Maybe the traffic is too high for now. Just the fact that it is mentioned on Smashing Magazine, you know the site has to be getting bombarded, because SM is a global phenomenon!!!


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