Smashing Newsletter: Issue #102

Advertisement

This newsletter issue was sent out to 173,819 newsletter subscribers on Tuesday, February 4th 2014. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.

Editorial

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?

Editorial2

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

  • Responsive Photo Sets With jQuery And CSS5
  • Behind The Symbols6
  • Vintage HiFi Beauties7
  • Conquering Those Email Bugs8
  • The Beauty Of Ligatures9
  • Free Resources For Beautiful Photos10
  • Got A Dusty Device Lying Around?11
  • What People Use To Get Their Stuff Done12
  • Sit Back, Relax And Watch It All Tumble By13
  • Reading The News Responsively14
  • Design A Day, Every Single Day15
  • Full-Day Workshops That Aim To Keep Your Problems Away16
  • 1. 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 WordPress17, 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 photoset18 with jQuery and CSS.

    Responsive Photo Sets With jQuery And CSS19

    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)

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

    Behind The Symbols20

    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 Symbols21. 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)

    3. 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 Audioklassiks2422.

    Vintage HiFi Beauties23

    Compiled by Frank H. Renner, the Audioklassiks2422 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)

    4. 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 Ink25. 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.

    Conquering Those Email Bugs26

    Another template to help you avoid some of the major rendering issues is HTML Email Boilerplate27. 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 Mailchimp28 and Campaign Monitor29. (cm)

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

    The Beauty Of Ligatures30

    Ligatures are not to be underestimated: they can create a beautiful typographic expression — especially in logos and headings. The Ligature Collective31 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 Ligatures32 is nothing short of ligatures, and sometimes they are animated as well! (il)

    6. 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 suck33” to your bookmarks.

    Free Resources For Beautiful Photos34

    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.st35 a try, too. (cm)

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

    Got A Dusty Device Lying Around?36

    OpenDeviceLab.com37 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 nearby38 and help attract contributors and sponsors. A good purpose with good goals provided by and for the members of the Web community. (ml)

    8. 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?

    What People Use To Get Their Stuff Done39

    At Workspiration40 and The Setup41 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 time42. (ea)

    9. 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 Tumbler43, a fascinating physics relaxation experiment by San Francisco based software engineer Andrew Hoyer.

    Sit Back, Relax And Watch It All Tumble By44

    Driven by the desire to try out Box2D45, CoffeeScript46 and Web Audio API47, 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 experiments48 — you’ll find many more brilliant animations as well as insightful making-of’s, for example how the loveable Blob49 was made. (ea)

    10. 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 MSNBC50 created an experience that emphasizes content more than anything else while still keeping all content available across a plethora of devices.

    Reading The News Responsively51

    The Aljazeera beta website52 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 Guardian53 and the upcoming BBC redesign54. If you’ve stumbled upon other interesting responsive news websites, please do share them with us via Twitter55! (sh)

    11. 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 day56, 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.

    Design A Day, Every Single Day57

    David Wehmeyer has been designing a lovely illustration every day58 and Jory Raphael has created 365 free icons59 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)

    12. 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?

    Full-Day Workshops That Aim To Keep Your Problems Away60

    Well, that’s what we do as well. Beyond our regular workshops61, we also organize in-house workshops62 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 Vitaly63 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).

    Credits for the image used in the editorial: Imgur64.

    Footnotes

    1. 1 http://www.smashingmagazine.com/the-smashing-newsletter/
    2. 2 https://plus.google.com/u/0/+MichaelMahemoff/posts/LQUV9bBd8dL
    3. 3 https://plus.google.com/u/0/+MichaelMahemoff/posts/LQUV9bBd8dL
    4. 4 http://www.thingsmagazine.net/?p=11143
    5. 5 #a1
    6. 6 #a2
    7. 7 #a3
    8. 8 #a4
    9. 9 #a5
    10. 10 #a6
    11. 11 #a7
    12. 12 #a8
    13. 13 #a9
    14. 14 #a10
    15. 15 #a11
    16. 16 #a12
    17. 17 http://wordpress.org/plugins/jetpack/
    18. 18 https://medium.com/coding-design/7742e6f93d9e
    19. 19 https://medium.com/coding-design/7742e6f93d9e
    20. 20 https://readymag.com/shuffle/ui-symbols/
    21. 21 https://readymag.com/shuffle/ui-symbols/
    22. 22 http://audioklassiks.de
    23. 23 http://audioklassiks.de
    24. 24 http://audioklassiks.de
    25. 25 http://zurb.com/ink/
    26. 26 http://zurb.com/ink/
    27. 27 http://htmlemailboilerplate.com/
    28. 28 http://mailchimp.com/
    29. 29 http://www.campaignmonitor.com/
    30. 30 http://iloveligatures.tumblr.com/
    31. 31 https://www.behance.net/gallery/Ligature-Collective-Introductory/13646615
    32. 32 http://iloveligatures.tumblr.com/
    33. 33 https://medium.com/p/62ae4bcbe01b
    34. 34 https://medium.com/p/62ae4bcbe01b
    35. 35 http://linkli.st/optimiseordie/9BJvY
    36. 36 http://opendevicelab.com/DYDD
    37. 37 http://opendevicelab.com
    38. 38 http://opendevicelab.com/DYDD
    39. 39 http://workspiration.org/
    40. 40 http://workspiration.org/
    41. 41 http://usesthis.com/about/
    42. 42 http://usesthis.com/about/
    43. 43 http://andrew-hoyer.com/experiments/tumbler/
    44. 44 http://andrew-hoyer.com/experiments/tumbler/
    45. 45 http://box2d.org/
    46. 46 http://coffeescript.org/
    47. 47 http://www.html5rocks.com/en/tutorials/webaudio/games/
    48. 48 http://andrew-hoyer.com/experiments/
    49. 49 http://andrew-hoyer.com/experiments/blob/
    50. 50 http://www.msnbc.com/
    51. 51 http://www.msnbc.com/
    52. 52 http://preview.aljazeera.net/portal
    53. 53 http://www.theguardian.com/uk?view=mobile
    54. 54 http://www.bbc.co.uk/blogs/internet/posts/Responsive-Design-Mobile-Websites-for-BBC-Russian-Afrique-Mundo-and-Hindi
    55. 55 https://twitter.com/smashingmag
    56. 56 http://www.smashingmagazine.com/2009/12/22/design-something-every-day/
    57. 57 http://sensibleworld.com/news/year-of-icons/
    58. 58 http://oneyearofdesign.com/
    59. 59 http://sensibleworld.com/news/year-of-icons/
    60. 60 http://www.smashingmagazine.com/workshops/
    61. 61 http://www.smashingmagazine.com/workshops/
    62. 62 http://www.smashingmagazine.com/workshops/#in-house-workshop
    63. 63 vitaly@smashingconf.com
    64. 64 http://imgur.com/WkHHpZ1

    ↑ 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!

    Advertisement
    1. 1

      Lol yea I always have to finish my code before I can leave the office, or finish that last little thing, and so on. Nice post.

      0
    2. 2

      Thank you Smashing Magazine for the mention of my website!

      0

    Leave a Comment

    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!

    ↑ Back to top