Smashing Newsletter: Issue #112

This newsletter issue was sent out to 182,239 newsletter subscribers on Tuesday, July 1st 2014. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.

Editorial

What happens when you combine a valuable, practical conference with a spectacular resort experience? Guess what? This is exactly what we are going to find out! After an overwhelming experience in New York City, we are now taking the next step to organizing our very first SmashingConf in Canada in a little ski resort paradise Whistler2, right next to Vancouver!3 Two days of practical talks, with two days of hands-on workshops—topped with spectacular resort adventures from skiing to ziplining, and perhaps even occasional snowball fights (you never know!), and all of that with extraordinary scenery that will literally smash you away. No kidding.

Editorial4

2 conference days, 2 workshop days, 1 track, 16 brilliant speakers, and hands-on, practical and useful talks. The conference will take place right in the middle of the ski season, on December 9th–12th 2014, so why don’t you bring along your family or colleagues, too, and enjoy a vacation that you well deserve together? Also, the first speakers are confirmed5 now, too! Are you ready? Go: Paul Irish, John Allsopp, Lyza Danger Gardner, Brad Frost, Val Head, Yoav Weiss, Jenn Lukas, Tim Kadlec and Susan Robertson.

We keep the conference prices affordable as always (USD 599), and we’ll have 50 early-bird tickets available, too (USD 549)! The ticket sale will start on July 15th at 10 AM PDT (7 PM CET) on SmashingConf Whistler website6, and the details about speakers, workshops, accommodation and more will be published in a few days. You can subscribe to updates there, too.

Of course we’ve also prepared a neat Convince Your Boss (PDF)7 (0.15 Mb) that you can use to convince your colleagues, friends, neighbors and total strangers to join you or send you to the event. We know that you will not be disappointed, and we’d be honored to welcome you in Whistler!

If Canada is just too far away for you this year, you can still keep an eye out for Smashing Magazine’s front page on July 15th at 10 AM PDT (7 PM CET) since we’ll be working on another round of the Smashing Mystery Riddle8! The person who manages to solve the riddle wins a flight to Canada, full accommodation and tickets to the conference and workshops. Sound fancy? Well, you better mark your calendar then! ;-)

Ahhh exciting times!
Vitaly (@smashingmag)

Table of Contents

01. Fluid Line-Height, The Vanilla Way9
02. Reminding Users About Better Browsers10
03. Deconstructing E-Commerce Search11
04. Let’s Build A Responsive SVG Map!12
05. Converting CSS Preprocessors13
06. JavaScript To The Rescue: Smart And Fast Tools For Developers14
07. Squares And Dots (And GIFs) Forever15
08. Mapping Global Cultural Production16
09. Smashing Kindle Deals17
10. Full-Day Smashing Workshops18

191. Fluid Line-Height, The Vanilla Way

To manage the growing complexity of the web when building websites, we don’t just design pages, we design systems. These systems are quite complex and sophisticated, yet what makes them difficult is that they all are moving parts. You never simply adjust the width of a component, and you never simply adjust the font-size of a component — you also change widths and font-sizes and heights and interactions modes and layouts and tap sizes — and everything in between. Everything is a moving part of the whole, and so adjusting a component introduces changes to other components, too.

Fluid Line-Height, The Vanilla Way20

Typography is not an exception. Font size, leading and measure are all interdependent21, so when changing one of them, we should adjust the others, too. Otherwise, we end up with line lengths that feel too long, font sizes that seem too small, line spacing that feels too tight or loose. We can do it manually for every single breakpoint, but a smarter solution would be to maintain a specific font-size while adjusting line-height based on available width, the so-called Molten Leading.

In fact, Mat Marquis has developed a Molten Leading jQuery plugin22 back in the day, and now Viljami Salminen has created a plain JavaScript version of it23. The script automatically adjusts line-height based on element width for optimal readability, works in all major desktop and mobile browsers, including IE 6+ and uses requestAnimationFrame for the best possible performance. And the best bit: it weighs only 837 bytes. And yet another little library to make the reading experience better. (vf)

242. Reminding Users About Better Browsers

Are you a developer who has spent sleepless nights optimizing websites for legacy browsers? Are you a company dealing with a relatively huge legacy browser popularity on your sites, and consequently high maintenance and browser support costs? Well, obviously you can provide a degraded experience to users of older browsers, but what about letting them know that there is a better browser out there, in which the website will work better? Many users might not know that there is an option!

Reminding Users About Better Browsers25

Well, in this case you could at least inform your users that they won’t see what they should unless they upgrade their browser. This is exactly the purpose of Outdated Browser26. Once integrated into your project, the little library automatically detects outdated browsers and presents your users with a fancy notice advising them to update their browser. The website points users to the most recent version of the most commons browsers. You won’t be able to make everybody upgrade, but perhaps you could push the usage of IE8 below a certain threshold nevertheless! The script weight 2Kb (minified), but perhaps it might be worth a try for a month or so after all. (ea)

273. Deconstructing E-Commerce Search

The search tool on a website comes in rather handy, wouldn’t you say? Think about the number of times you looked for something specific on a website, and how frustrating it was when you couldn’t find what you were looking for. Even worse, when there’s no search bar on the website. When searching for something on an e-commerce site, you want to reach your results with as little hassle as possible, right?

Deconstructing E-Commerce Search28

This article on Deconstructinf E-commere29, written by Jamie Appleseed, is a gem worth bookmarking for reference. Appleseed talks about the 12 types of search queries that were identified during an e-commerce search study, in which the results show the many types of queries that users rely on when searching in an e-commerce context. The benchmark results from the study reveal surprisingly dismal support for essential e-commerce search query types. This article goes over each of the 12 queries from the study and provides plenty of query samples, tips on how to best support each query type, and examples from the test sessions. (sh)

304. Let’s Build A Responsive SVG Map!

We’ve all been there. A client asks you specifically to embed a world map with offices placed as pins on the map. Every pin should be clickable and lead to the page about that specific office of the company. Now, it doesn’t sound too difficult — it’s an image map, right? The trick is, it should be responsive, too! What solution would you come up with to solve this problem? Or to simplify the problem a bit: how would you deal with a responsive graph or a responsive data visualization?

Let's Build A Responsive SVG Map!31

Obviously, online magazines have to deal with this issue regularly. In their article Building A Responsive SVG Map32, BBC’s team provides some interesting insights on some micro-optimizations to keep the interaction with an SVG graph as user-friendly, accessible and smooth as possible. A clever idea they use is to provide different versions of the map depending on the viewport width, simplifying the map for smaller screens, with zooming and panning available, too.

You can also create a responsive image map with SVG33 using vector shapes, and turn a complex visualization in a simple drop-down34 or a slider35 on smaller screens to keep it accessible. Designing responsive websites requires us to rethink common design and usage patterns; the good news is that technology allows us to do just that relatively quickly! (vf)

365. Converting CSS Preprocessors

How often do you stumble upon projects written using different CSS preprocessors? What if you’d like to switch from Sass to SCSS? Or from Sass to Less? Or perhaps to Stylus? Going through the original code and adjusting styles one by one can be quite an adventure — and time-consuming, too!

Converting CSS Preprocessors37

CSSPre38 is just a tool that can help resolve these issues. It’s a one-stop reference for the popular CSS preprocessors, including links to compilers and converters in a handy table on one handy page. Useful, and worth checking out. Chances are high that you might need it for the next project!

396. JavaScript To The Rescue: Smart And Fast Tools For Developers

Everybody loves a good JavaScript library, right? Well, we’ve found a few interesting libraries that you might find useful, too! We all know the typical comments section that have accompanied blog posts for years, but this is always somehow limited because sometimes it’s more useful to be context-specific and comment on one paragraph rather than on the entire article. It was Medium that first introduced us to a new way of commenting: inline comments. Now, with the help of sidecomments.js40, you’ll be able to integrate this technique on your very own website in no time. Unfortunately, jQuery is required, but perhaps you could fork it, rewrite it and publish a vanilla JavaScript version of it?

JavaScript To The Rescue: Smart And Fast Tools For Developers41

Fast is good, and it’s great to see performance gain a lot of traction these days. However, finding that delicate balance between high-resolution images and advanced JavaScript libraries can be difficult. Fast.js42 is a collection of micro-optimizations that can help you write faster JavaScript code as it includes fast replacements for several built-in native methods. The tool is still in development and the current version is optimized for V8 (Chrome/node.js).

And while we’re talking about micro-optimizations, do you run regression tests a lot? If so, Resemble.js43 might be just the right tool for you. You can use it to analyze screenshots of a responsive website, or just compare any images to detect bugs and inconsistencies. Simply drop two images into the input field, choose from several parameters and conditions such as ignore colors and retrieve the output as image or in code. Not advanced enough? Try BBC’s Wraith44, a tool that uses either PhantomJS or SlimerJS to create screenshots of different environments and then creates a diff of the two images. Now, this should keep you busy for a while! (ml)

457. Squares And Dots (And GIFs) Forever

Caution: remarkable GIFs ahead! This Tumblr blog is bound to make you forget about everything you’re doing right now and take you somewhere far away. If you’re a fan of GIFs, you won’t be able to stop gazing. What’s so special and different about Bees & Bombs46 you ask? Well, not only is it a mesmerizing showdown of geometric GIFs, but it’s also an art that meets physics in a very, very unique way.

Squares And Dots (And GIFs) Forever47

These brilliant GIFs were made by Dublin-based David Whyte who used Processing48 to bring them to life. Check out this Tumblr blog to see squares, circles, hexagons, pyramids, waves and stars rotate, weave, assemble, shrink and expand — endlessly. (ea)

498. Mapping Global Cultural Production

The history of mankind is full of cultural achievements that endow us with the capacities that we have today; just think of curing diseases, flying from one continent to another, or communicating at long distances. To celebrate our global cultural heritage and help us understand how global culture has developed, a team of designers, engineers and scientists from the MIT Media Lab have started an exceptional mammoth project: Pantheon50. Its goal: mapping and visualizing cultural production — from 4000 B.C. to 2010.

Mapping Global Cultural Production51

To make something as complex as global culture tractable, Pantheon builds upon a dataset of more than 10,000 biographies of influential personalities of the last 6,000 years and ranks them by fame. You can view top rankings, or explore the accomplishments that have shaped our society by country or domain. An impressive project and a beautiful example of handling and visualizing large amounts of information. (cm)

529. Smashing Kindle Deals

Digital Adaptation: Paul Boag’s complete book just – $ 0,99
http://bit.ly/digitaladaptation53 (only 2 days left, so be quick!)

On Creative Spirit, short read, taken from Smashing Book 4 – $ 0,99
http://bit.ly/creative-spirit
54

The Design of People, short read, taken from Smashing Book 4 – $ 0,99
http://bit.ly/designofpeople55

Smashing Kindle Deals56

Prices may vary due to taxes and exchange rates. Amazon Kindle only.

5710. Full-Day Smashing Workshops

With so many techniques, tools, libraries, design patterns, strategies, abstractions, frameworks and boilerplates available nowadays, what do you really need to know to keep your workflow fast, smart and efficient? That’s exactly what our front-end and RWD workshops are all about: full practical days that will help you become a better front-end expert, today.

Full-Day Smashing Workshops58

Here are a couple of practical, hands-on workshops taking place in Germany that you may perhaps like to consider attending:

Or, if you’d like to run an in-house workshop at your office, feel free to get in touch with Vitaly at vitaly[at]smashingconf[dot]com and briefly describe what problems you’re facing and would like to solve. Don’t worry about the costs — we’ll find a fair price for sure. Get in touch — it’s that easy! (vf )

The authors in this newsletter are: Esther Arends (ea), Shavaughn Haack (sh), Cosima Mielke (cm), Melanie Lang (ml), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).

Footnotes

  1. 1 http://www.smashingmagazine.com/the-smashing-newsletter/
  2. 2 http://4.bp.blogspot.com/_gfXupHOEhH0/SxBKMsE3S8I/AAAAAAAAMyU/a6gSSeth04A/s1600/whistler-xmas-wallpaper.jpg
  3. 3 http://www.whistler.com/discover/
  4. 4 http://www.smashingconf.com/whistler-2014/
  5. 5 http://lanyrd.com/2014/smashing-conference-whistler/
  6. 6 http://www.smashingconf.com/whistler-2014/
  7. 7 http://smashingconf.com/pdf/8-Reasons-For-SmashingConf-Whistler-2014.pdf
  8. 8 http://www.smashingmagazine.com/the-new-smashing-mystery-riddle-smashingconf-ny/
  9. 9 #a1
  10. 10 #a2
  11. 11 #a3
  12. 12 #a4
  13. 13 #a5
  14. 14 #a6
  15. 15 #a7
  16. 16 #a8
  17. 17 #a9
  18. 18 #a10
  19. 19 #
  20. 20 https://github.com/viljamis/Molten-Leading
  21. 21 http://nicewebtype.com/notes/2012/02/03/molten-leading-or-fluid-line-height/
  22. 22 https://github.com/Wilto/Molten-Leading
  23. 23 https://github.com/viljamis/Molten-Leading
  24. 24 #
  25. 25 http://outdatedbrowser.com/
  26. 26 http://outdatedbrowser.com/
  27. 27 #
  28. 28 http://baymard.com/blog/ecommerce-search-query-types
  29. 29 http://baymard.com/blog/ecommerce-search-query-types
  30. 30 #
  31. 31 http://responsivenews.co.uk/post/87988072178/building-a-responsive-svg-map
  32. 32 http://responsivenews.co.uk/post/87988072178/building-a-responsive-svg-map
  33. 33 http://demosthenes.info/blog/760/Create-A-Responsive-Imagemap-With-SVG
  34. 34 http://travois.com/projects/?state=WA&page=1
  35. 35 http://www.sbnation.com/a/nfl-playoffs-2014
  36. 36 #
  37. 37 http://csspre.com/conversion
  38. 38 http://csspre.com/conversion
  39. 39 #
  40. 40 http://aroc.github.io/side-comments-demo/
  41. 41 http://aroc.github.io/side-comments-demo/
  42. 42 https://github.com/codemix/fast.js
  43. 43 http://huddle.github.io/Resemble.js/
  44. 44 https://github.com/BBC-News/wraith
  45. 45 #
  46. 46 http://beesandbombs.tumblr.com/
  47. 47 http://beesandbombs.tumblr.com/
  48. 48 http://www.processing.org/
  49. 49 #
  50. 50 http://pantheon.media.mit.edu/
  51. 51 http://pantheon.media.mit.edu/
  52. 52 #
  53. 53 http://www.amazon.com/dp/B00IOJ3MWC
  54. 54 http://www.amazon.com/Creative-Spirit-Christopher-Murphy-ebook/dp/B00LBG4RWE
  55. 55 http://www.amazon.com/Design-People-Nishant-Kothary-ebook/dp/B00LB8ZO2O
  56. 56
  57. 57 #
  58. 58 http://www.smashingmagazine.com/workshops/
  59. 59 http://smashingconf.com/freiburg-2014/workshops/jason-grigsby
  60. 60 http://smashingconf.com/freiburg-2014/workshops/matthew-andrews
  61. 61 http://smashingconf.com/freiburg-2014/workshops/sara-wachter-boettcher
  62. 62 https://shop.smashingmagazine.com/smashing-workshop-friedman-responsive-design-karlsruhe.html

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!

Advertising
  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

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