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

  1. Bulletproof Font Stacks2
  2. Lorempixum: Placeholder Images For Your Designs3
  3. Hashify: Store An Entire Website In A… URL?!4
  4. Big Collection Of Style And UI Guidelines5
  5. Death To Comic Sans6
  6. GiftPush: Customer Rewards Creates Loyalty7
  7. Open Wireless Networks For Everybody!8
  8. Cinemagraph: Animated Photography9

1. Bulletproof Font Stacks

With support for Web fonts now widespread among modern browsers, designers are embedding more and more typefaces in their designs. However, in some contexts, a browser might be too old, or JavaScript could be disabled, or the fonts in the font stack are not available on user’s machine. This is when you need to think of meaningful and bulletproof fallback fonts.

Bulletproof Font Stacks10

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)

2. Lorempixum: Placeholder Images For Your Designs

Hand-selecting and inserting placeholder images in a layout can be a hassle. Lorempixum 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)

3. Hashify: Store An Entire Website In A… URL?!

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 Hashify12. 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. Store entire websites in... URL!13

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 BitBucket14. (vf)

4. Big Collection Of Style And UI Guidelines

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?

Large Collection of Style and UI Guidelines15

One place to start would be the big collection of style guides and UI guidelines16. 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)

5. Death To Comic Sans

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.

Death to Comic Sans17

The next time you see someone using Comic Sans inappropriately, consider sharing with them a link to Comic Sans Criminal18, 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)

6. GiftPush: Customer Rewards Creates Loyalty

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.

GiftPush: Customer Rewards Creates Customer Loyalty

Thankfully, GiftPush 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)

7. Open Wireless Networks For Everybody!

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 Movement19. 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.

Open Wireless Networks Are Socially Responsible20

Fon21 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)

8. Cinemagraph: Animated Photography

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 You 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.

From Me To You

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 image22. 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. 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

↑ 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. 00

    No comments have been posted yet. Please feel free to comment first!
    Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!

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