Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Smashing Newsletter: Issue #105

This newsletter issue was sent out to 176,725 newsletter subscribers on Tuesday, March 18th 2014. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.


As this email wings its way into your inbox, the Smashing Conference in Oxford2 is happening. Conferences are a great time to get away from our day-to-day work and reflect. That kind of reflection is incredibly important in our industry — it gives us a chance to look at the bigger picture. The Web moves at such a phenomenal pace. If we don’t occasionally look up from our work, we will fail to notice that the world has changed around us. That is the main theme of our new book Digital Adaptation3 — that the world has changed around us and that we need to adapt.


As an industry, we spend a lot of time talking about the latest startups, but what about the millions of other businesses that pre-date the Web and need our help adapting to the changes it has brought? As Web designers, we tend to complain about our clients and bosses and the fact that they don’t understand the Web, but how are they supposed to understand if we don’t step up and teach them?

We may not feel we have the authority and our bosses or clients might not even want our help, but companies are floundering around trying to find their way in this new digital economy and we can help to make a difference.

We need to be more than implementors, more than code monkeys and pixel pushers. We need to be leaders. We need to step up and start learning about strategy5. We need to learn how to communicate with senior management and clients so that we can start bringing about change. Our primary job as Web professionals is not to build websites. Our job is to educate clients and colleagues about digital6, so that one day digital will become as ubiquitous in organisations as electricity is today.

— Paul Boag

Table of Contents

  1. Lean Cross-Browser Sliding Controls7
  2. Tricking Network Latency!8
  3. Fixed Navigation For Mobile? Solved!9
  4. Slice Smarter With These Goodies!10
  5. Tons Of Patterns, For Free!11
  6. Revealing The Ad Placement Mystery12
  7. So, What’s In Your Camera Bag?13
  8. LocalStorage Revisited14
  9. Message From A… Burger!15
  10. Editorial Work And Storytelling On The Web16
  11. Typography… By Accident?17
  12. Full-Day Smashing Master Classes18

1. Lean Cross-Browser Sliding Controls

Are you looking for a lightweight and minimal solution for range sliders that don’t bloat your site and that work just as smoothly on mobile as on desktop devices? Let’s say for a form, a date selection or defining a range for budgets? Then check out noUiSlider19, a (relatively) lightweight jQuery/Zepto plugin for a cross-browser sliding control with touch support on a wide range of devices (IE 7+).

Lean Cross-Browser Sliding Controls20

There is a wide selection of options and settings, single and double handles and custom starting values for example, and the sliders can be customized with CSS. Alternatively, for browsers that natively don’t support HTML5 features yet, Alexander Farkas’s webshim21 might be a handy polyfill to close the gaps. It automatically detects which features are supported by the user’s browser and only loads what is necessary to simulate everything else. Lightweight and extendable, webshim (jQuery plugin) helps provide all of your users smart HTML5 controls without any additional libraries. (cm)

2. Tricking Network Latency!

Latency is the biggest bottleneck when it comes to page loading speed on mobile. Luckily, there are tinkereres out there who come up with clever ideas to avoid waiting for users. Alex Dieulot is one of them. His JavaScript library InstantClick2422 starts preloading the page in the background whenever your finger starts tapping the screen. We all know that there is no such thing as hovering on mobile devices; therefore, this library respects the delay that is imposed in order to differentiate a single tap from a double tap.

Tricking Network Latency!23

Whenever a link is triggered, the page will then have had 300ms on Android and 450ms on iOS to preload. A feature that makes InstantClick2422 instantly usable for mobile, without requiring any extra optimization. In case you entirely want to remove the click delay on browsers with touch UIs, you might also want to give FastClick25 a try. Developed by FT Labs, this library eliminates the already mentioned delay between the physical tap and the firing of a click event. However, you have to avoid the 300ms click delay, accessibly26. Both library are great ways to make your site feel just a little bit less laggy. (cm)

3. Fixed Navigation For Mobile? Solved!

If you still haven’t found just the right technique for a fixed navigation, the Fixed Nav27 on the new Adtile website might be just what you need to settle down. This library works well for “one-page”-websites, is always fixed and positioned at the top, and always remains visible on users’ screens. The script also uses smooth animated scrolling and adds a mask over the content when navigation is “open”. Furthermore, it also auto-highlights current location when scrolling on the site, and closes the navigation when user’s tap outside of it.

Fixed Navigation For Mobile? Solved!28

The library is very lightweight, using Vanilla JavaScript without jQuery. It also uses a tiny custom font (only two characters included) for icons (you might want to consider using SVG instead) and is built with progressive enhancement in mind. Tested and works well in IE 6+. If you prefer an alternative, perhaps you’d like to consider using Filament’s position:sticky polyfill29 which requires jQuery. (ml)

4. Slice Smarter With These Goodies!

Did you know that you can drastically enhance your slicing workflow in Photoshop by simply using the right plugins? PNGHat30 offers a better way to slice the designs of your apps by automatically exporting selected layers and uploading them on the server with pre-defined HTML/CSS templates. Alternatively, Slicy31 lets you independently import layer groups, which is perfect if you have overlapping design elements. Moreover, it (almost) magically enlarges your vectors and layer styles to build a high-quality version for Retina displays.

Slice Smarter With These Goodies!32

An alternative free solution is offered by Cut&Slice me33. This little tool allows you to export your assets to different devices in seconds. Your workflow will be improved by naming your layers, while the heavy lifting is done by the plugin. Finally, you can make use of Photoshop’s build-in feature “Generator34“. This feature enables you to automate photo editing via JavaScript and access Photoshop features from a Node.js app. And if you design lots of Android apps, Android Asset Organizer Droplet35 should prove to be quite useful, too. (ml)

5. Tons Of Patterns, For Free!

Need some fresh, new patterns for your current or upcoming design projects? Well, there’s an enormous selection available at Subtle Patterns36, a library of nearly 400 tileable, textured patterns which can all be used free of charge. This resource is put together and curated by interaction designer Atle Mo37, who is based in Oslo, Norway.

Tons Of Patterns, For Free!38

If you’re looking for transparent or semi-transparent patterns, Transparent Textures39 includes a color picker as well as a CSS generator that should cover your needs pretty well. And if you’d like something a bit… fancier, The Pattern Library40 provides a good number of freely available, complex and sophisticated patterns. Of course, all libraries welcome submissions. (ea)

6. Revealing The Ad Placement Mystery

There are mysteries we’ll probably never reveal: who built Stonehenge? What is the fuss about crop circles all about? And how does ad placement work? Okay, the last question doesn’t really fit into the row, but aren’t there moments when you feel that this is something you are equally unlikely to reveal? You probably have a vague idea of how it could work, but the fact that one of the most complex systems is behind that banner that promotes bargain flights right above your morning read doesn’t make things easier. So, how does the system actually decide which ad to deliver?

Revealing The Ad Placement Mystery

To shed some light into the dark, Behind The Banner helps you understand the ad-tech ecosystem — in simple, easy-to-follow steps and without a lot of words. Finally! To achieve this, the site uses an animation visualizing the underlying interactions that take place from the moment you open a site to the fulfillment of the ad only 150 milliseconds later. A great approach to break something complex down into small, comprehensible steps. Very interesting! (cm)

7. So, What’s In Your Camera Bag?

Regardless of whether you’re a photographer, want to become one, or simply a big fan of photography, you’re bound to enjoy ShotKit41, a website that allows you to peek inside the camera bags of professional, international photographers. There are more than 70 of them currently featured on the site who share their precious equipment which they carry around in their bags everywhere they go.

So, What's In Your Camera Bag?42

Let’s face it: if you consider how ridiculously expensive photography gear can be, then why take chances? When it comes to what exact equipment you may need for a particular project, learning from professional photographers will surely help protect you from misinvesting a good amount of money. (ea)

8. LocalStorage Revisited

You’ve been there: you happen to drive through a tunnel, have a long flight without Wi-Fi or you’re in a location without proper internet connection. Since you’re “offline” in such situations, you don’t have any access to your data, and the edits you’d like to make within your Web app aren’t saved nor available any longer. Wouldn’t it be great if you could make your changes offline and the Web app would sync your data seamlessly once a proper connection is available?

LocalStorage Revisited43

localForage44 is Mozilla’s new library that aims to improve the offline experience of Web apps by using asynchronous storage (via IndexedDB or WebSQL wherever available, and with a localStorage-fallback otherwise) but with a simple, localStorage-like API. The library works in IE8+ (localStorage fallback) as well as in all modern browsers. Alternatively, consider checking Smart Storage45, a light(ish) wrapper around HTML5 localStorage that does a couple of extra useful things. (vf)

9. Message From A… Burger!

Be warned! If you’re really hungry right now or if you live far away from San Francisco, reading this post might not be such a good idea. But feel free to continue reading and find out for yourself! Two designers at MINE™ have recently started a truly mouthwatering blog about the relationship between burgers and design. Every week throughout this year, they plan to eat one burger at one of San Francisco’s restaurants and write about it. Imagine that!

Message From A... Burger!46

On The Message Is Medium Rare47, you can follow their analysis to see whether design really only develops through a critical and curious look at the world. In this more or less altruistic self-attempt, they go to a restaurant of their choice, order the establishment’s “signature” burgers, analyze and rate them, then finally share a creative lesson about the lessons they have learned from that particular burger. Now stop drooling and go get yourself a good, creative burger! (kv)

10. Editorial Work And Storytelling On The Web

In today’s world of endless offers and options, a good story can determine the success of a product. But it’s not just about the story, it’s also about how it is communicated and executed. The Web has evolved from offering digital print content and uses new techniques to provide a new customer experience. Beautiful storytelling and editorial work that stand out stay remembered for quite a long time. Mercedez-Benz48, for example, decided to send their audience on an interactive trip to explore the features of the new GLA2000, using video, parallax- (yes, parallax!) and 3-D effects.

Editorial Work And Storytelling On The Web49

The traditional newspaper The Guardian50 also explores new ways to display content using responsive video to tell how the members of an Antarctica expedition were rescued from being trapped in the ice. A similar approach was done by the New York Times51 featuring “The Avalance at Tunnel Creek” burying 16 skiers and snowboarders. Finally, Matthew Latkiewicz’s “Telling stories about screens for screens52” explores how to apply storytelling when making videos about software. So how do you embed storytelling around your products? (ml)

11. Typography… By Accident?

The artwork that can be found on Accidental-Typographer53 is definitely more than just an… accident. The artist displays little typographic gems that were created in daily typographic trials in handwritten lettering. Ever since January 2012, a new sketch has been posted daily to inspire others to discover the beauty of lettering.

Typography... By Accident?54

With over 800 sketches already available on the blog, lots of great ideas have been paired with thoughts that makes it a pleasure to browse through the portfolio of all the different and quite creative handwritten lettering. The artist certainly seems to have fun with experimenting, playing and manipulating letters. Why don’t you try it out for yourself, as well? (kv)

12. Full-Day Smashing Master Classes

There are so many techniques, tools, libraries, design patterns, strategies, abstractions, frameworks and boilerplates available nowadays, so what do you really need to know in order to keep your workflow fast, smart and efficient? That’s exactly what our Front-End & RWD master classes are all about: full-day workshops that will help you become a better front-end warrior, today.

Full-Day Smashing Master Classes55

In fact, we’ve got a couple of practical, hands-on workshops coming up in different locations very soon. Here’s a brief overview of some:

Also, if you’d like us to run an in-house workshop at your office, just 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: Cosima Mielke (cm), Melanie Lang (ml), Esther Arends (ea), Kristina Vogt (kv), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7 #a1
  8. 8 #a2
  9. 9 #a3
  10. 10 #a4
  11. 11 #a5
  12. 12 #a6
  13. 13 #a7
  14. 14 #a8
  15. 15 #a9
  16. 16 #a10
  17. 17 #a11
  18. 18 #a12
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48!/roadtrip
  49. 49!/roadtrip
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59

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

  1. 1

    Thank you for featuring my lettering/typography blog in your newsletter! I appreciate it very much. —Accidental-Typographer


Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top