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 Aires1. Straight back from the airport, I was very busy helping the Smashing Magazine team with their very first Smashing Meetup2. We all had a great night — we love to meet our fans! So don’t forget to join our group3, 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 iPad4 — there you’ll find everything you need from design to coding and marketing!
— Keep rocking! *meow*
Table of Contents
02. Testing Your Typography Skills6
03. Recurly: Secure PCI-Compliant Online Transactions7
04. Surf the Web Together With a Remote Friend8
05. The Science of Looking Good in the Inbox9
06. Build Relationships Through Face-to-Face Conversations10
07. So You Want To Build A Timeline. What’s Next?11
08. Get Rid Of Tasteless Restaurant Menus12
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.
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)
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?
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 Together22 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.”
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)
Emailology24 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.
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)
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. Ohours26 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.
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)
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.
One option is jQuery Timelinr29, 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 simple30 or more advanced CSS timeline31.
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 Menu33: 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.
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 http://www.flickr.com/photos/68892449@N05/6322565166/
- 2 http://www.meetup.com/The-SmashingMagazine-Meetup/
- 3 http://www.meetup.com/The-SmashingMagazine-Meetup/
- 4 https://shop.smashingmagazine.com/smashing-ebook-mobile-design.html
- 5 #a1
- 6 #a2
- 7 #a3
- 8 #a4
- 9 #a5
- 10 #a6
- 11 #a7
- 12 #a8
- 13 http://alteredqualia.com/three/examples/webgl_cars.html
- 14 https://github.com/mrdoob/three.js
- 15 http://alteredqualia.com/three/examples/webgl_cars.html
- 16 http://shape.method.ac/
- 17 http://shape.method.ac/
- 18 http://js.recurly.com/
- 19 http://recurly.com/
- 20 http://js.recurly.com
- 21 https://stripe.com/
- 22 http://channel.me/
- 23 http://channel.me/
- 24 http://www.emailology.org/
- 25 http://www.emailology.org/
- 26 http://ohours.org/
- 27 http://ohours.org/
- 28 http://www.csslab.cl/2011/08/18/jquery-timelinr/
- 29 http://www.csslab.cl/2011/08/18/jquery-timelinr/
- 30 http://mattbango.com/notebook/web-development/pure-css-timeline/
- 31 http://coding.smashingmagazine.com/2009/11/23/6-useful-coding-solutions-for-designers-and-developers/
- 32 http://timekiwi.com/
- 33 http://clearmenu.com/
- 34 http://clearmenu.com/