Smashing Newsletter: Issue #112
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.
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!
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
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.
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.
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!
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?
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?
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!
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!
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.
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.
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
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.
Here are a couple of practical, hands-on workshops taking place in Germany that you may perhaps like to consider attending:
- When Responsive Design Meets the Real World59 with Jason Grigsby (Freiburg),
- Making It Work Offline60 with Matthew Andrews (Freiburg),
- Mastering Mobile Content Mayhem61 with Sara Wachter-Boettcher (Freiburg),
- Clever RWD Tricks And Techniquess62 with Vitaly Friedman (Karlsruhe).
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).
- 1 http://www.smashingmagazine.com/the-smashing-newsletter/
- 2 http://4.bp.blogspot.com/_gfXupHOEhH0/SxBKMsE3S8I/AAAAAAAAMyU/a6gSSeth04A/s1600/whistler-xmas-wallpaper.jpg
- 3 http://www.whistler.com/discover/
- 4 http://www.smashingconf.com/whistler-2014/
- 5 http://lanyrd.com/2014/smashing-conference-whistler/
- 6 http://www.smashingconf.com/whistler-2014/
- 7 http://smashingconf.com/pdf/8-Reasons-For-SmashingConf-Whistler-2014.pdf
- 8 http://www.smashingmagazine.com/the-new-smashing-mystery-riddle-smashingconf-ny/
- 9 #a1
- 10 #a2
- 11 #a3
- 12 #a4
- 13 #a5
- 14 #a6
- 15 #a7
- 16 #a8
- 17 #a9
- 18 #a10
- 19 #
- 20 https://github.com/viljamis/Molten-Leading
- 21 http://nicewebtype.com/notes/2012/02/03/molten-leading-or-fluid-line-height/
- 22 https://github.com/Wilto/Molten-Leading
- 23 https://github.com/viljamis/Molten-Leading
- 24 #
- 25 http://outdatedbrowser.com/
- 26 http://outdatedbrowser.com/
- 27 #
- 28 http://baymard.com/blog/ecommerce-search-query-types
- 29 http://baymard.com/blog/ecommerce-search-query-types
- 30 #
- 31 http://responsivenews.co.uk/post/87988072178/building-a-responsive-svg-map
- 32 http://responsivenews.co.uk/post/87988072178/building-a-responsive-svg-map
- 33 http://demosthenes.info/blog/760/Create-A-Responsive-Imagemap-With-SVG
- 34 http://travois.com/projects/?state=WA&page=1
- 35 http://www.sbnation.com/a/nfl-playoffs-2014
- 36 #
- 37 http://csspre.com/conversion
- 38 http://csspre.com/conversion
- 39 #
- 40 http://aroc.github.io/side-comments-demo/
- 41 http://aroc.github.io/side-comments-demo/
- 42 https://github.com/codemix/fast.js
- 43 http://huddle.github.io/Resemble.js/
- 44 https://github.com/BBC-News/wraith
- 45 #
- 46 http://beesandbombs.tumblr.com/
- 47 http://beesandbombs.tumblr.com/
- 48 http://www.processing.org/
- 49 #
- 50 http://pantheon.media.mit.edu/
- 51 http://pantheon.media.mit.edu/
- 52 #
- 53 http://www.amazon.com/dp/B00IOJ3MWC
- 54 http://www.amazon.com/Creative-Spirit-Christopher-Murphy-ebook/dp/B00LBG4RWE
- 55 http://www.amazon.com/Design-People-Nishant-Kothary-ebook/dp/B00LB8ZO2O
- 57 #
- 58 http://www.smashingmagazine.com/workshops/
- 59 http://smashingconf.com/freiburg-2014/workshops/jason-grigsby
- 60 http://smashingconf.com/freiburg-2014/workshops/matthew-andrews
- 61 http://smashingconf.com/freiburg-2014/workshops/sara-wachter-boettcher
- 62 https://shop.smashingmagazine.com/smashing-workshop-friedman-responsive-design-karlsruhe.html