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

This newsletter issue was sent out to 157,808 newsletter subscribers on Thursday, July 11th 2013. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.


While you still can leave a trace of yourself to posterity2, that’s probably not everything you ever set out to do with your life. You want to get better at what you do, and you want to improve your skills and your workflow. So why not stop for a second and think about how you work, the tools that you use and the techniques that still exist deep in your boilerplate code?

TED Talk on “Anatomy of a New Yorker cartoon” (Image source3).

And just in case you’d like to get new perspectives on how respected designers and developers design, work, create and play, we’ve prepared a whole library of lovely eBooks — for you4, your company5 or your teaching class6. You won’t be disappointed, we promise.

We suggest you grab a cup of tea or coffee before you start reading today’s issue — it’s an unusually long one! It’s warm and sunny (actually almost tropical) here in Freiburg, and we’re working on a special tasty Ice Cream newsletter edition which will be sent out next week. Yep, ice cream, and yes, next week — so be sure to stay tuned!

See you soon, and don’t forget to look outside beyond your screens from time to time!

— The Smashing Editorial Team

Table of Contents

  1. Little Sketches For Little Delights, Every Day7
  2. Trojan Horse In Your CSS8
  3. Seeing The World Through Each Other’s Eyes9
  4. Music Meets Flat Design10
  5. Read This Message Fast! Before It’s Eaten…11
  6. DiagnostiCSS: Visually Explore Invalid Or Inaccessible HTML Markup12
  7. Beautiful High-Resolution Images For Your Project13
  8. One Thing I Know14
  9. Science With A Literary Twist15
  10. Space Invaders, The 404 Way16
  11. Where Have All The Wildlings Gone?17

1. Little Sketches For Little Delights, Every Day

Have you ever wondered how to optimally adjust your daily caffeine intake or how to effectively control a cueball? Probably not, at least I haven’t before. But now that these questions arose, aren’t you curious? Sketchplanations2018, a personal project of UX designer Jono Hey, provides answers to issues like these. The idea behind it is as simple as it is fascinating: Jono took the challenge of explaining something with a sketch every day (actually as a way to improve his drawing skills) — be it how to perfectly twist your spaghetti or how to post-process portraits.

Little Sketches For Little Delights, Every Day19

The results are black and gray sketches, sometimes accompanied by a tad of red or green, recorded in a Moleskine sketchbook. All of them are spontaneous uncorrected sketches, neatly numbered and tagged with a keyword. Be prepared to stumble across explanations on a potpourri of topics ranging from design, lifehacks and science, to food. Sketchplanations2018 is a great stop for every visual person out there and an impressive reminder of what good design is all about: Simplicity! (cm)

2. Trojan Horse In Your CSS

Especially if you are working with pattern libraries for your interfaces, you know how tedious it can be to quickly scale a component up/down while keeping all the proportions intact, e.g. by increasing the widths, heights and border-radii, you can make a button larger. Wouldn’t it be nice to just change one single value and let the component grow or shrink automatically?

Trojan Horse In Your CSS21

Simurai has come up with a simple yet clever CSS strategy22 to achieve this result. The idea is to sneak a so-called “Trojan horse” into your components and use it to control all the size-related CSS properties — with Trojan being the font-size property, hooked up to em units. Essentially, for every CSS property that has a direct impact on the component’s size, you use only the em unit (e.g. .button), and apply a font-size to a parent element (.component). Now you can easily rescale everything by changing the font-size of the parent element and keep all the proportions intact. Simple, and helpful! (vf)

3. Seeing The World Through Each Other’s Eyes

Together with her mom Ulli Maier, Nisa Maier has been to some of the most beautiful and extraordinary places around the globe. If you’re looking for inspiration for your own next adventures or dream of walking the Great Wall of China, or even of discovering giant mysterious shells near the Cook Islands, then you’re bound to find Let’s Travel Somewhere23 more than just interesting.

Seeing The World Through Each Other's Eyes24

But because “a single traveller can’t live to see it all”, you’ll not only see the world through Nisa’s eyes but also get insights to places all over the world from other folks who have travelled to different places as well. You are also invited to contribute, if you like! (kv)

4. Music Meets Flat Design

What do you do when you can’t afford to indulge your obsession? Illustrate your own collection of course! And that’s exactly what music lover, David Navarro did. Since flat design is trending right now, FlatGuitars25 was created as an illustration tribute to the guitars that are just out of Navarro’s reach. He took up the challenge to capture the essence of each famous guitar and render a simplified version of it.

Music Meets Flat Design26

The website is beautifully put together by Ingamana27. His plan is to produce a new illustration each week, so follow along to see more. If you’d like to see your favourite guitar illustrated in this gallery as well, simply get in touch with Navarro28 and he promises to do his best! (sh)

5. Read This Message Fast! Before It’s Eaten…

We all have information which is sensitive. May it be our credit card information or a simple “I love you”. It’s not meant to be disclosed to the wide public. It’s private. And we want to keep it this way. Yet, on occasions we need to share a piece of sensitive information with a second party. No wedding without a proposal, right? So, how do we transmit information? How do we transmit really sensitive information? Unless the receiver is directly with us, most of us will use email (or a phone call or short message). I’m not talking about encrypted email; we all know the ordinary user doesn’t bother to encrypt their emails. I’m talking about simple, standard email. Pretty unsafe, isn’t it? In times of spies, how can we be safe? Help!

Read This Message Fast! Before It's Eaten...29

Boom, here comes our hero: Noteshred30, the Robin Hood in the age of information sensitivity. Noteshred is a website and tool which enables you to send a secure message in less than 30 seconds, with no registration required, and 100% free. You don’t even need to go into your email account. You can create a note directly on the website and assign it a password. The note is automatically secured by a strong AES 256bit encryption algorithm with a variable key based on your password. The best thing is, your note will “shred” itself. And only you can decide when this happens. (ea)

6. DiagnostiCSS: Visually Explore Invalid Or Inaccessible HTML Markup

I can’t read out of mathematical expressions easily, and I don’t prefer long lines of text. My brain is all about visual information sparked up with simple and easy keywords. If you’re anything like me, you will love DiagnostiCSS31. It’s a handy new tool that visually detects any potentially invalid or inaccessible HTML markup.

DiagnostiCSS: Visually Explore Invalid Or Inaccessible HTML Markup32

DiagnostiCSS highlights several problems within the markup. These include inline styles, invalid links, empty elements, elements missing required attributes and deprecated elements. It proudly supports Rails and any other Rack-compatible framework. Simply drag the link to your bookmarks toolbar and you can apply it on any page. (ml)

7. Beautiful High-Resolution Images For Your Project

“A picture is worth a thousand words,” we say. But finding that one perfect image that underlines your message and tops everything off can be a real challenge. However, sources can be very limited — especially if you’re on the look out for free high-resolution images. That’s where Unsplash33 comes in. The Tumblr blog collects beautiful atmospherical photos that you can use to your heart’s content. The collection (maintained by the team behind the creative community ooomf34) mostly includes landscapes, and is constantly growing. Every ten days, ten new photos are added to it.

Beautiful High-Resolution Images For Your Project35

To make sure that you don’t miss out on anything, you can also subscribe to the site and receive newest additions directly in your inbox. You want to give back to the community? Perfect! Anyone can submit a photo with a minimum of 1500 pixels wide. If it is accepted, you will be credited on the website and your piece will be distributed under a Creative Commons license. (cm)

8. One Thing I Know

Starting your own business is exciting, pioneering, but also rather scary. Creative businesses are started by passionate, driven people but sooner or later, issues that you did not anticipate crop up, leaving you underwhelmed. That’s where One Thing I Know36 gets handy! One Thing I Know offers advice from creative entrepreneurs who’ve been through it all already. Whether it’s dealing with clients, your strategy or just pondering the future of your business, someone’s learnt the lesson and wants to share it with you.

One Thing I Know37

You can also find opportunities and programmes for launching out in creative industries here38. The site also has a beautiful aesthetic and is dominated by fun illustrations for us designer types. If you’re in the creative industry, you’ll definitely want to bookmark this one! (sh)

9. Science With A Literary Twist

Science magazines are traditionally jam-packed with a vast variety of different topics and hard facts, but not Nautilus4139. The new online science magazine moves off the beaten track, doing things entirely different than its predecessors. Nautilus concentrates on only one single topic a month and explores it from a scientific, cultural and philosophical point of view to finally create the big picture that connects to our lives. Past issues, for example, get to the bottom of uncertainty or approach the puzzle of human uniqueness.

Science With A Literary Twist40

What’s special about Nautilus4139 is that it is developed gradually with a new chapter of the story being released every Thursday. With its literary look and feel, Nautilus is not described as “a New Yorker version of Scientific American” for nothing. A print version will be launched quarterly starting from this September! (cm)

10. Space Invaders, The 404 Way

Are you a) a fan of classic arcade-style video games, b) always annoyed when you come to a 404 page, where the website management has decided to implement a supposedly amusing little image (possibly of a cute kitten) to make you forget that they screwed up somehow, c) just want to waste some time at work while still seeming busy? If you’ve checked d) all of the above, you’ll love this 404 page.

Space Invaders, The 404 Way

Mass:werk42‘s error page is at the very least a little piece of fun nostalgia. And if you get bored with the big 404 in the middle of the screen, you can change it and play with an exciting new number as an alien bomb shelter. It may not be complex, but it imbues the 404 page with a little bit of playfulness. (jc)

11. Where Have All The Wildlings Gone?

Love and passion is what fueled Chicago artist Nigel Evan Dennis to create Where have all the wildlings gone?43 — a graphical tribute to Game of Thrones, which I bet many of you know. For the ones who don’t: We’re talking about an American fantasy TV series based on the first first novel in “A Song of Ice and Fire” by George R. R.Martin. The story takes place in the Seven Kingdoms on the fictional continents of Westeros and Essos, where seven noble houses fight a civil war for control of the Iron Throne. The fearsome members of these houses made it onto Nigel’s site, so have a look and meet them there. And, learn about their timeline, allicances and the different faiths they believe in.

Where Have All The Wildlings Gone?44

If these characters are the nobles, then who are the wildlings? And, where have they gone? The wildlings are the people who live north of the Wall, a 700-foot-high, 300-mile-long barrier of ice, stone and magic. The Wall protects the Seven Kingdoms from the Northern wilderness beyond it. If you want to get a better taste of the wildlings and the rough life they live, I recommend to watch Inside the Wildlings45, a spicy little video featuring behind-the-scenes footage along with context from the cast and crew. (ea)

The contributors to this issue are: Vitaly Friedman (vf), Iris Lješnjanin (il), Esther Arends (ea), Cosima Mielke (cm), Shavaughn Haack (sh), Jan Constantin (jc), Kristina Vogt (kv), Melanie Lang (ml) and Christiane Rosenberger (research).


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7 #a1
  8. 8 #a2
  9. 9 #a3
  10. 10 #a4
  11. 11 #a5
  12. 12 #a6
  13. 13 #a7
  14. 14 #a8
  15. 15 #a9
  16. 16 #a10
  17. 17 #a11
  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
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45

↑ 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