Smashing Newsletter: Issue #102
Having a proper working routine is comfortable. You have your tools, your methods, your process and your lovely cappuccino next to you. But what about shaking things a little bit every now and again? When was the last time you consciously left your comfort zone entirely to challenge the unexpected, the unpredictable, the unfamiliar territory, to confront yourself with an entirely new set of unfamiliar problems?
To be creative and smart in our decisions, perhaps sometimes we shouldn’t feel too comfortable with what we do. Perhaps you’d like to try leaving your code in a broken state3 before you finish off for the day, or motivate yourself to try new things every morning. Alternatively, instead of being as fast as possible with your code, what about being as slow as possible4 instead? Take the time to explore how a problem can be solved intelligently without rushing into the design or coding stage right away.
If you love lettering, why not try painting instead? What about setting up your alarm clock at 5:26 AM tomorrow? Or perhaps read a comic book backwards? Maybe just take a slightly longer, perfectly inefficient and crowded route to your office? Get a dog. Or a piano. Or a newspaper. Ask total strangers in the coffee shop what they do for a living and what excites them most. Perhaps you’ll discover things that you wish you’d always known and rediscover passion for things that you felt you’ve lost forever. And most importantly, perhaps you’ll meet people who will change your life, or at least a tiny bit of it. Isn’t it worth getting out of the comfort zone after all?
— Vitaly (@smashingmag)
Table of Contents
01. Responsive Photo Sets With jQuery And CSS5
02. Behind The Symbols6
03. Vintage HiFi Beauties7
04. Conquering Those Email Bugs8
05. The Beauty Of Ligatures9
06. Free Resources For Beautiful Photos10
07. Got A Dusty Device Lying Around?11
08. What People Use To Get Their Stuff Done12
09. Sit Back, Relax And Watch It All Tumble By13
10. Reading The News Responsively14
11. Design A Day, Every Single Day15
12. Full-Day Workshops That Aim To Keep Your Problems Away16
171. Responsive Photo Sets With jQuery And CSS
So you’ve decided to have a wall of pictures on your website, perhaps something like a photo set for your portfolio. Such photo sets are easy to create within Facebook, Tumblr or with Jetpack for WordPress18, but how would you integrate them on a standalone website? Terry Mun has just what you need: a comprehensive tutorial on how to build a responsive photoset19 with jQuery and CSS.
You probably also want all of the images to have an equal height and the available horizontal space properly distributed while preserving the correct individual aspect ratios, right? Terry’s technique uses CSS first to create general styles for each row, to float individual items in each row, as well as to style image captions. The heavy lifting is then done by jQuery, which performs the calculation of all widths and heights. A clever although not quite straightforward technique that works — another great solution for another responsive problem. (ml)
212. Behind The Symbols
Once upon a time (in the 10th century to be more precise), there was a Danish King named Harald Blåtand. They say that Harald was a connoisseur of blueberries and that he loved them so much that one of his teeth was permanently stained blue. Sounds like a fairytale? Well, actually it’s the beginning of the story behind the Bluetooth symbol. No kidding.
We don’t want to spoil the punchline yet, so if you want to find out more about the symbolic interplay of King Bluetooth and today’s wireless standard or just love to dig into tidbits like this one, then make sure to check out Origins of Common UI Symbols23. An interesting and fun read on the symbols we spot every day. Oh, by the way, did you know that Apple’s “command” key has something to do with Swedish campgrounds? (cm)
243. Vintage HiFi Beauties
Nowadays, we have our playlists almost always at our fingertips. That’s convenient, without a doubt, but tapping virtual buttons just lacks that special something, don’t you think? Whenever you’re feeling nostalgic and start missing those analog times, you may want to take a stroll down the memory lane and dive back into the heydays of vinyl and tape — on Audioklassiks2725.
Compiled by Frank H. Renner, the Audioklassiks2725 showcase presents a comprehensive list of jaw-dropping hifi devices from the 60s and 70s. Shiny equalizer controls, neatly labeled buttons, loudspeakers in warmly tinted wooden casings — the vintage treasures are simply shown at their best. The equipment is sorted by manufacturer and for the tech geeks in us there are also scanned versions of the original manuals to check out. Eye candy not only for hifi lovers! (cm)
284. Conquering Those Email Bugs
More and more users tend to check their emails on their smartphones and tablets, but unfortunately, rendering issues are still a problem — even in the most common email clients. To help you keep your email designs as true-to-form as possible, we’ve collected some resources just for you. One of them is Ink29. Ink comes with a CSS inliner to make your campaigns fit for Gmail, offers sample templates, a CSS framework that helps you craft responsive HTML emails, and last but not least, a short step-by-step guide with the 101 on responsive emails.
Another template to help you avoid some of the major rendering issues is HTML Email Boilerplate31. It provides sample code snippets to tame the most common email clients out there. The code is absent of any design or layout and you can use the snippets to tailor a template to your own needs. Once your campaign is ready to ship, make sure to use an ESP that doesn’t strip out the responsive formatting, such as Mailchimp32 and Campaign Monitor33. (cm)
345. The Beauty Of Ligatures
Everybody loves good ligatures, but when we think of them, we tend to think of the most common use cases, such as fi, st or th. However, they can be more than that. They can be any character pairs or triplets that overlap when used together, creating a smooth transition or connection between characters by connecting crossbars, removing dots over the i, or otherwise altering the shape of the characters.
Ligatures are not to be underestimated: they can create a beautiful typographic expression — especially in logos and headings. The Ligature Collective36 features a collection of creative ligatures from designers all over the world who all share the same love for typographic design through current work and collaborative projects. Need more inspiration? I Love Ligatures37 is nothing short of ligatures, and sometimes they are animated as well! (il)
386. Free Resources For Beautiful Photos
Finding the perfect photos for a project can be a real challenge, especially if you aren’t too fond of conventional stock photos or if your budget simply doesn’t allow for them. Fortunately, there are some nice alternatives out there. For an overview of some of the best places for beautiful (and free!) stock photography you might want to add Dustin Seno’s ongoing list “Stock photos that don’t suck39” to your bookmarks.
The resources collected here are updated regularly and include a potpourri of motifs, from nature and lifestyle photos to rather spontaneous mobile shots and vintage photos from public archives. In case you don’t happen to find what you were looking for, then you might also want to give this compilation on linkli.st41 a try, too. (cm)
427. Got A Dusty Device Lying Around?
With all the the mobile devices out there, we, as Web designers and developers, share one expensive problem: testing actual devices. Devices are often purchased for testing purposes only which is costly and often not an option for small agencies. Luckily, we can use Open Device Labs (ODLs) and in fact, you can help grow them, use them and keep your own expenses low while keeping your quality up.
OpenDeviceLab.com44 aims to help people who are looking for the nearest ODL that includes the device they’re keen on testing. In order to grow these labs and make them even more valuable, you can help by donating you own old, dusty device to a lab nearby45 and help attract contributors and sponsors. A good purpose with good goals provided by and for the members of the Web community. (ml)
468. What People Use To Get Their Stuff Done
The Web is all about people who have all kinds of interesting careers: designers, developers, artists, entrepreneurs, content creators, typographers, photographers, and so much more. We respect and admire them for who they are and for the difference they make on the Web and in the world. However, going a bit beyond our appreciation for all those professionals out there, wouldn’t we want to learn how they do what they do?
At Workspiration48 and The Setup49 you can do just that. The sites feature interviews with professionals in and around tech who talk about what hardware and software they use, and how their setup (and their dream setup) looks like. If you’d like to share some interesting bits about your own work environment and tools, then maybe now is the time50. (ea)
519. Sit Back, Relax And Watch It All Tumble By
Imagine a bunch of Lego bricks meeting a group of marbles and throwing a party in the washing machine. It’s a crazy scenario to imagine, but it’s what comes to mind looking at The Tumbler52, a fascinating physics relaxation experiment by San Francisco based software engineer Andrew Hoyer.
Driven by the desire to try out Box2D54, CoffeeScript55 and Web Audio API56, Andrew built something that you will probably find yourself staring at for unexpectedly long times. Sit back, enjoy the tumble and don’t miss the rest of his experiments57 — you’ll find many more brilliant animations as well as insightful making-of’s, for example how the loveable Blob58 was made. (ea)
5910. Reading The News Responsively
The more information you have to present, the more difficult it becomes to make the content work within a responsive website. So how do you tackle such a complex issue? The creative minds behind MSNBC60 created an experience that emphasizes content more than anything else while still keeping all content available across a plethora of devices.
The Aljazeera beta website62 is a wonderful example of an Arabic responsive website in which navigation patterns and usability conventions are turned upside down, yet still focus very much on the content and its accessibility. Also worth checking out are The Guardian63 and the upcoming BBC redesign64. If you’ve stumbled upon other interesting responsive news websites, please do share them with us via Twitter65! (sh)
6611. Design A Day, Every Single Day
For many of us, design isn’t simply just “work”, but rather a passion, a dedication, a way of expressing ourselves. There are many creative minds out there who design something every day67, and we’ve featured many artists, illustrators and writers in the past. And when a new project comes up, we’re happy to provide a platform to feature those dedicated artists.
David Wehmeyer has been designing a lovely illustration every day69 and Jory Raphael has created 365 free icons70 throughout an entire year. Admittedly, this work is often created under pressure and within time constrains, but the dedication to follow through is worth admiring. (vf)
7112. Full-Day Workshops That Aim To Keep Your Problems Away
You’ve probably already been there: as a good design agency or a front-end team, you have many projects going on and you never really find the time to actually study new techniques, tools and alternative workflows for your work. You could encourage your designers and developers to attend conferences and meet-ups, but what about having an in-house workshop instead — a workshop tailored exactly to your needs?
Well, that’s what we do as well. Beyond our regular workshops73, we also organize in-house workshops74 and help solve issues that designers and developers have been running into. Responsive design, advanced front-end techniques, performance optimization, UX — we’re quite flexible about the topics, the length and the format of the workshops.
If you’re interested, just get in touch with Vitaly75 and briefly describe what problems you’d like to solve. Don’t worry about the costs either — we’ll find a fair price for sure. Yes, it’s that easy! (vf)
The authors in this newsletter are: Melanie Lang (ml), Cosima Mielke (cm), Esther Arends (ea), Shavaughn Haack (sh), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).
- 1 http://www.smashingmagazine.com/the-smashing-newsletter/
- 2 https://plus.google.com/u/0/+MichaelMahemoff/posts/LQUV9bBd8dL
- 3 https://plus.google.com/u/0/+MichaelMahemoff/posts/LQUV9bBd8dL
- 4 http://www.thingsmagazine.net/?p=11143
- 5 #a1
- 6 #a2
- 7 #a3
- 8 #a4
- 9 #a5
- 10 #a6
- 11 #a7
- 12 #a8
- 13 #a9
- 14 #a10
- 15 #a11
- 16 #a12
- 17 #
- 18 http://wordpress.org/plugins/jetpack/
- 19 https://medium.com/coding-design/7742e6f93d9e
- 20 https://medium.com/coding-design/7742e6f93d9e
- 21 #
- 22 https://readymag.com/shuffle/ui-symbols/
- 23 https://readymag.com/shuffle/ui-symbols/
- 24 #
- 25 http://audioklassiks.de
- 26 http://audioklassiks.de
- 27 http://audioklassiks.de
- 28 #
- 29 http://zurb.com/ink/
- 30 http://zurb.com/ink/
- 31 http://htmlemailboilerplate.com/
- 32 http://mailchimp.com/
- 33 http://www.campaignmonitor.com/
- 34 #
- 35 http://iloveligatures.tumblr.com/
- 36 https://www.behance.net/gallery/Ligature-Collective-Introductory/13646615
- 37 http://iloveligatures.tumblr.com/
- 38 #
- 39 https://medium.com/p/62ae4bcbe01b
- 40 https://medium.com/p/62ae4bcbe01b
- 41 http://linkli.st/optimiseordie/9BJvY
- 42 #
- 43 http://opendevicelab.com/DYDD
- 44 http://opendevicelab.com
- 45 http://opendevicelab.com/DYDD
- 46 #
- 47 http://workspiration.org/
- 48 http://workspiration.org/
- 49 http://usesthis.com/about/
- 50 http://usesthis.com/about/
- 51 #
- 52 http://andrew-hoyer.com/experiments/tumbler/
- 53 http://andrew-hoyer.com/experiments/tumbler/
- 54 http://box2d.org/
- 55 http://coffeescript.org/
- 56 http://www.html5rocks.com/en/tutorials/webaudio/games/
- 57 http://andrew-hoyer.com/experiments/
- 58 http://andrew-hoyer.com/experiments/blob/
- 59 #
- 60 http://www.msnbc.com/
- 61 http://www.msnbc.com/
- 62 http://preview.aljazeera.net/portal
- 63 http://www.theguardian.com/uk?view=mobile
- 64 http://www.bbc.co.uk/blogs/internet/posts/Responsive-Design-Mobile-Websites-for-BBC-Russian-Afrique-Mundo-and-Hindi
- 65 https://twitter.com/smashingmag
- 66 #
- 67 http://www.smashingmagazine.com/2009/12/22/design-something-every-day/
- 68 http://sensibleworld.com/news/year-of-icons/
- 69 http://oneyearofdesign.com/
- 70 http://sensibleworld.com/news/year-of-icons/
- 71 #
- 72 http://www.smashingmagazine.com/workshops/
- 73 http://www.smashingmagazine.com/workshops/
- 74 http://www.smashingmagazine.com/workshops/#in-house-workshop
- 75 email@example.com
- 76 http://imgur.com/WkHHpZ1