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 newsletter anytime.
While you still can leave a trace of yourself to posterity, 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 source).
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 you, your company or your teaching class. 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
01. Little Sketches For Little Delights, Every Day
02. Trojan Horse In Your CSS
03. Seeing The World Through Each Other’s Eyes
04. Music Meets Flat Design
05. Read This Message Fast! Before It’s Eaten…
06. DiagnostiCSS: Visually Explore Invalid Or Inaccessible HTML Markup
07. Beautiful High-Resolution Images For Your Project
08. One Thing I Know
09. Science With A Literary Twist
10. Space Invaders, The 404 Way
11. Where Have All The Wildlings Gone?
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? Sketchplanations, 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.
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. Sketchplanations is a great stop for every visual person out there and an impressive reminder of what good design is all about: Simplicity! (cm)
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?
Simurai has come up with a simple yet clever CSS strategy 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)
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 Somewhere more than just interesting.
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)
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, FlatGuitars 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.
The website is beautifully put together by Ingamana. 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 Navarro and he promises to do his best! (sh)
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!
Boom, here comes our hero: Noteshred, 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)
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 DiagnostiCSS. It’s a handy new tool that visually detects any potentially invalid or inaccessible HTML markup.
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)
“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 Unsplash 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 ooomf) mostly includes landscapes, and is constantly growing. Every ten days, ten new photos are added to it.
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)
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 Know 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.
You can also find opportunities and programmes for launching out in creative industries here. 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)
Science magazines are traditionally jam-packed with a vast variety of different topics and hard facts, but not Nautilus. 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.
What’s special about Nautilus 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)
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.
Mass:werk‘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)
Love and passion is what fueled Chicago artist Nigel Evan Dennis to create Where have all the wildlings gone? — 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.
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 Wildlings, 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).
The Smashing Newsletter Team 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!
Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and
rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!
Subscribe to our email newsletter for useful tips and valuable resources, sent out every second Tuesday.
It's done. The Smashing Book #4, our brand new book with smart front-end techniques and design approaches. Written by respected designers and developers, neatly packed in a gorgeous hardcover.
Do you feel like your workflow is slowing you down? We might have just what you need. Our front-end, UX and RWD workshops in London, Zürich and Berlin. Read more...
As a Senior Game Developer HTML5 at GameDuell, you will face a high traffic platform with more than 80 million monthly visitors that requires performance-oriented…
Work in Berlin for one of the world's largest games websites and excite more than 80 million users with a "wow" experience. Your tasks * Work closely…