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

This newsletter issue was sent out to 99,458 newsletter subscribers on Tuesday, February 7th 2012.


Dear Readers,

Last week we had the great opportunity of meeting some of our fabulous Smashing Magazine fans in Basel, Switzerland. Have a look at our photos and videos1  —  we had so much fun and look very much forward to meeting new faces in the upcoming meetup! We’re also busy organizing a CSS Master Class with the one and only Jens Grochtdreis! For those who plan to attend, please note that the regular meetup will take place after the workshop. More details regarding the location will be announced very soon, so be sure to stay in touch via our Meetup site!

In today’s newsletter issue, we’ve tried our best to include various topics to match everyone’s different interests. Be sure to read this issue until the end  —  we have some fantastic tickets to give away! And in case you’ve been wondering where our Smashing Cat is at the moment, you might be surprised to hear that it’s been riding dragons in Japan. Thanks again to Mr.HideMan for the lovely tour around his city!

Table of Contents

  1. Spicing Up Your Navigation Menu With CSS32
  2. Free Font Family: Exo Font Family3
  3. Design Seeds: For All Those Who Love Color Palettes4
  4. Is it The Section Or The Aside? An HTML5 Element Flowchart5
  5. Pain-Free Cross-Browser Debugging And Testing6
  6. Get Inspired With Paul Roger’s Artwork7
  7. WordPress Snippets For Faster Development8
  8. Exploring The Beauty Of Content: Contents Magazine9
  9. The Restart Page: A Tribute To Operating Systems10

1. Spicing Up Your Navigation Menu With CSS3

Do you remember those days when we used nasty JavaScript libraries with onMouseOver effects for “advanced” navigation menus? Comparing those nasty techniques with the simplicity and power of CSS3, we understand how far we have actually come up in our industry over all those years. Mary Lou’s technique for a sliding navigation with images is a vivid example for that.

Spicing Up Your Navigation Menu With CSS311

A very simple CSS navigation technique12 allows you to add an image for every menu item and slide it out on hover. Essentially, it uses very basic HTML, CSS transitions and the nth-child selector. A very simple and useful technique — especially if you are working on a portfolio site, a gallery site or a slideshow. (vf)

2. Free Font Family: Exo Font Family

Free quality fonts always come in handy. However, because creating a rich typeface always requires a lot of time and attention, typographers rarely release them for free — which is perfectly understandable. But there is a way for type designers to actually release fonts for free and still get some revenue for their work.

Free Font Family: Exo Font Family13

For example, Free Exo Font Family14 is a successful Kickstarter project which made it possible for Natanael Gama from Portugal to create and release the typeface publicly. Exo is a comprehensive geometric sans serif font family with nine weights — both in Regular and in Italic. Each font comes with many OpenType features such as small caps, ligatures, alternates, oldstyle figures, tabular figures and fractions. Both OTF-version and source files are available to download for free — now that’s the power of community at play! (vf)

3. Design Seeds: For All Those Who Love Color Palettes

Our universe offers us a huge variety of tones and hues, but we seem to pick similar palettes every time we start a new design. Does this happen to you, too? Then maybe it’s time for you to explore the endless possibilities of color palettes on Design Seeds15

Design Seeds: For All Those Who Love Color Palettes16

In her blog posts, Jessica — a passionate lover of colors and color palettes — features palettes for various situations: travel, fashion, furniture materials, decoration, among others. You can search by color value or the overall theme of a palette. So for your next project (or even your new house) this may be a site worth revisiting for a delightful color combination. (tt)

4. Is it The Section Or The Aside? An HTML5 Element Flowchart

As a relatively new specification, HTML5 still has quite a few myths and misconceptions which lead one to misuse its technology. New semantic elements introduce a better way to define the content of web pages, yet not all of them are very convenient nor straightforward. Do you know exactly when each element should be used (and when not)? Don’t fear, the Doctor is to the rescue.

Is it The Section Or The Aside? An HTML5 Element Flowchart17

HTML5 Doctor has created HTML5 Elements Flowchart18 to illustrate the correct and semantic way of using the new HTML5 elements, such as aside, section or article. Print it out and hang it on the wall for future reference — it will surely come in handy. (ld)

5. Pain-Free Cross-Browser Debugging And Testing

Still doubting whether your web app or website is ready for the public? Or are you still looking for a suitable testing environment? Pay Sauce Labs19 a visit. This service provides useful tools for testing almost anything possibly designed for the Web. OnDemand allows you to run selenium tests of your apps in the Sauce Labs cloud. This testing environment features more than 35 possible browser/OS combinations, supports multiple programming languages or CI servers and even provides video footage or screenshots of your tests.

Pain-Free Cross-Browser Debugging And Testing20

If you’re looking to thoroughly test a website, be sure to check out Scout. It provides developer tools for more than 35 browser/OS combinations, gives you an incident report at the end of each session and offers 45 minutes of free testing each month. If you want your website and app to be bulletproof before launching it, Sauce Labs could be the right solution for you. (sp)

6. Get Inspired With Paul Roger’s Artwork

Artistic inspiration can arise from different channels: music, sports, work, leisure. But when it comes to graphic art, the majority of people will get their ideas through visual stimuli. If you are among those who need daily creative input, you might find what you are looking for among these illustrations by Paul Roger21.

Get Inspired With Paul Roger's Artwork22

These posters are beautiful examples of vintage style graphic design mixed with a refined metaphoric spice. And if you’re looking for carefully curated collections of inspiration, take a close look at designworklife, a side project by the creative minds behind the design agency Seamless Creative. (tt)

7. WordPress Snippets For Faster Development

WordPress is arguably one of the most powerful CMSes out there, not to mention the most popular. And it’s no wonder considering just how much you can do with it. Between plugins and custom coded themes, you can make WordPress do virtually anything you want.

WordPress Snippets For Faster Development23

WP-Snippets24 make it easier to find the custom codes that you need to make your WordPress site do what you want it to. The snippets offer everything from disabling all comments, adding support for post formats, and adding multiple custom menus. There are also more advanced functions available for both the front-end and admin area of your site. (cc)

8. Exploring The Beauty Of Content: Contents Magazine

Instead of presenting useful tidbits of knowledge, many sites force the reader to glean cunningly hidden information through a mountain of visual data. This often exhausting exercise of reading online often results in a tossed salad of diverse information, where an article on postmodern art seems to somehow be related to dating (or whatever current popular pop-up ads endorse).

Exploring The Beauty Of Content: Contents Magazine25

So, if you’d like to learn about conten and content strategy practices, take a look at Contents Magazine26. You’ll find inspiration, motivation and a good visual example of how to integrate content strategies into visually pleasing, non-distracting frameworks. They showcase helpful notions and interesting articles on the role of content in Web development. (jc)

9. The Restart Page: A Tribute To Operating Systems

Now, this one brings back memories: do you remember restarting your good ol’ Windows 95 in MS-DOS mode, with HIMEM testing for extended memory? If not, The Restart Page27 provides a great opportunity to relive those magical moments.

The Restart Page: A Tribute To Operating Systems28

The site allows you to fully interact with the windows from a shutdown system, whether you prefer to restart the computer, leave it on standby, or run it on MS-DOS mode. Furthermore, the original sounds are provided as well. Certainly not very practical, but quite a nostalgic project to play with during a lunch break! (vf)

Thank You For Reading!

As always, we sincerely appreciate your time and support. As mentioned above, we’re giving away two tickets to the upcoming Web-5 Conference in France. Web-5 is going to take place in April 2012. If you want one of those tickets, feel free to send us an email29  —  we’ll be drawing the two lucky winners by the end of the week!

Stay tuned for more giveaways and prizes in the upcoming newsletter issues! The next one is due on the 21st of February. See you then!

Yours sincerely,
The Smashing Family

The authors of this newsletter are: Stephan Poppe (sp), Talita Telma (tt), Vitaly Friedman (vf), Iris Ljesnjanin (il), Lisa Lang (ll), Cameron Chapman (cc), Luca Degasperi (ld), Jan Constantin (jc).


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

↑ 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

    The links for #2 bring up “fatal error” … :(

  2. 2

    Why use <center> for all content? I’m reading your newsletter in Gmail and every line of content is centered!

    • 3

      Vitaly Friedman

      February 7, 2012 10:36 pm

      There was a mistake in the code, it will be fixed in the next issue. Sorry for any inconvenience.

  3. 4

    Great selection of sites, I especially love designseeds! But I’m sure I will find Content Magazine really useful too!

  4. 5

    Yup. I can confirm I also got the “Fatal error” when trying to get to the free font. Curses!

  5. 7

    I came across Scout the other day. Works very well. I haven’t subscribed yet but there’s a good chance I will.

    • 8

      Thanks for giving us a try Elke. We need to do a better job publicizing that there’s a full-featured free version that meets the needs of most users.

  6. 9


    Thanks for the great write up on our service. It would be very much appreciated if the post could be updated to spell our company name as “Sauce Labs”. But again, thanks for the terrific coverage.

  7. 10

    Christen Bouffard

    February 7, 2012 10:01 pm

    I just wanted to send some appreciation for this and other newsletters Smashing has sent me. I usually burn through my inbox and don’t waste time reading newsletters, ads, updates, and the like, but the Smashing newsletter has consistently interesting and relevant links to articles and resources I draw a lot of value from.

    The editor of your newsletter gets a big kudos from me. Thanks!


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