Smashing Newsletter: Issue #33
This newsletter issue was sent out to 56,020 newsletter subscribers on May 10th 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
01. Bulletproof Font Stacks2
02. Lorempixum: Placeholder Images For Your Designs3
03. Hashify: Store An Entire Website In A… URL?!4
04. Big Collection Of Style And UI Guidelines5
05. Death To Comic Sans6
06. GiftPush: Customer Rewards Creates Loyalty7
07. Open Wireless Networks For Everybody!8
08. Cinemagraph: Animated Photography9
Ffffallback11 is a bookmarklet for Webkit browsers (Safari and Chrome) and Firefox that lets you test different font stacks to find the best result. All you have to do is add the bookmarklet to your browser’s toolbar, load the page that you want to test, and then click the bookmarklet. It will then scan the page’s CSS and create a clone page where you can test and analyze different fallback fonts. (cc)
Hand-selecting and inserting placeholder images in a layout can be a hassle. Lorempixum12 takes care of that task by providing you with placeholder images for every possible usage, whether for Web design or print layout. Using it is simple: visit the website, pick the URL, define dimensions and category, and insert it in the layout. You can use the “Placeholder Generator,” which lets you specify the size, category and color settings of the placeholder image.
Image categories include abstract, fashion, transport, people and food. Seeing how many images Lorempixum has delivered since its launch should convince anyone how useful this little service can be. The provided images are for layout purposes only and each image used for the project is released under the creative commons license (CC BY-SA). (sp)
What if you could store an entire website in its own URL? What if you didn’t have to store anything on a Web server unless the user invoked a script that encoded the URL?… This is exactly the idea of David Chamber, creator of Hashify14. His tool encodes the entire contents of a page in a URL. As you type HTML into the editor on the website’s page, the address bar updates with each key stroke. Only a tiny fraction of all Unicode characters are allowed to be unescaped in a URL. Hashify uses Base64 encoding to convert Unicode input to ASCII output that is safe for inclusion in URLs. Unfortunately, the tool is vulnerable to HTML injection and XSS by design.
The concept itself is interesting, although not very practical at first glance. Still, some unique possibilities exist. For instance, Hashify is an interesting answer to the problem of how to view cached versions of websites. If you added a hash parameter to the URL, Hashify would be able to display the website even if the page was down, and without the page actually being stored somewhere in cache per se. Perhaps you can build something meaningful on top of it? Hashify’s source is available on BitBucket16. (vf)
Every brand needs style and user interface guidelines to inform its designers of how branding elements, colors, and related materials should be used, as well as of any conventions in the user interface. The guidelines prevent confusion among designers, and they make the transition easy when a designer leaves the team and a new one is hired. But coming up with guidelines can be confusing and frustrating. Where to even start?
One place to start would be the big collection of style guides and UI guidelines18. The list includes nearly 60 guides from companies like 3M, Apple, BBC, Nokia, Oracle, SAP, Skype and Yale University, among others. It’s a great reference, and it will give you plenty of ideas on where to start. (cc)
Not a day seems to goes by anymore when you don’t come across some instance of Comic Sans being used completely inappropriately. Police communications, office memos, church bulletins, restaurant menus: the list goes on. For whatever reason, your average DIY graphic designer thinks that Comic Sans is the perfect font for every occasion.
The next time you see someone using Comic Sans inappropriately, consider sharing with them a link to Comic Sans Criminal20, which lays out the reasons why Comic Sans is misused and offers some helpful alternatives. Apparently, the only appropriate uses for Comic Sans are when your audience is under 11 years old, when you’re designing a comic and when your audience has stated that they prefer Comic Sans. (cc)
Every successful company knows how vital customer rewards are. In today’s market, customers are smarter and more demanding than ever, and they are accustomed to getting rewards in myriad forms from businesses large and small. Retaining customers is much easier than attracting new ones, and while rewarding customers does foster loyalty, starting a full-blown rewards program can be a bit much to handle.
Thankfully, GiftPush22 takes the pain out of rewarding your customers with gifts. Put a stop to endless email threads about addresses and shirt sizes. GiftPush does all the hard work, including creating the products, obtaining addresses, shipping the goods and running a dashboard to manage your recipients. You also have the option to send your own promotional gifts. So, you can now keep your customers happy! Unfortunately, the service is invitation-based (although you can request an invitation). An excellent idea with a lot of potential. (ar)
The gradual disappearance of open wireless networks is a tragedy of the commons, representing a perplexing twist in the privacy and security debate. The Electronic Frontier Foundation intends to reverse the degradation of this indispensable component of the Internet’s infrastructure with its Open Wireless Movement23. The movement is meant to remind people that opening their Wi-Fi is a socially responsible act, and it explains that individuals who choose to do so can enjoy the same legal protections against liability as any other Internet access provider.
Fon25 is an initiative with the goal of an open wireless network built by people. Each member of the Fon community agrees to share a bit of their Wi-Fi at home, in return for free roaming at millions of Fon spots worldwide. Why don’t we all contribute a bit to make open Wi-Fi everywhere a reality? (tb)
If you ever feel drained, Jamie might be able to help. Jamie collects vintage cameras and old typewriters, and he makes a living off of his photography in New York City, occasionally using film. From Me To You26 is his impressive photography blog, a collection of scenes from around the world, memorable events, food, people and small personal universes. The interesting part is that the photos are animated (hence the name); they come to life using good old animated GIFs.
The author’s experimental cinemagraph posts not only seem to come alive, they really do! Your jaw may drop as you scroll through the colorful entries, perhaps catching a model winking at you or seeing those curtains rustled by the wind. Just sit back for a moment and let Jamie take you on a journey. Did a taxi really just drive by? Did this girl in the right upper corner really smile?…
If From Me To You has aroused your interest in the Cinemagraph technique, then pay a visit to the article Positioning an animated gif over a jpg image28. His short tutorial explains how to save on bytes when putting GIFs and JPEGs together, without losing too much quality. (sp)
The authors are: Vitaly Friedman (vf), Thomas Burkert (tb), Andrew Rogerson (ar), Stephan Poppe (sp), Cameron Chapman (cc).
- 1 http://www.smashingmagazine.com/the-smashing-newsletter/
- 2 #a1
- 3 #a2
- 4 #a3
- 5 #a4
- 6 #a5
- 7 #a6
- 8 #a7
- 9 #a8
- 10 http://ffffallback.com
- 11 http://ffffallback.com/
- 12 http://lorempixum.com/
- 13 http://lorempixum.com/
- 14 http://bit.ly/dXYxGU
- 15 http://bit.ly/dXYxGU
- 16 https://bitbucket.org/davidchambers/hashify.me
- 17 http://www.theuxbookmark.com/2010/08/interaction-design/a-monster-list-of-ui-guidelines-style-guides
- 18 http://www.theuxbookmark.com/2010/08/interaction-design/a-monster-list-of-ui-guidelines-style-guides
- 19 http://www.comicsanscriminal.com/
- 20 http://www.comicsanscriminal.com/
- 21 http://www.giftpush.com
- 22 http://www.giftpush.com
- 23 http://www.eff.org/deeplinks/2011/04/open-wireless-movement
- 24 http://corp.fon.com/en
- 25 http://corp.fon.com/en
- 26 http://fromme-toyou.tumblr.com/tagged/cinemagraph
- 27 http://fromme-toyou.tumblr.com/tagged/cinemagraph
- 28 http://www.css-101.org/articles/two-layer-image/animated-gif-with-a-jpg-background.php