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.

Editorial

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.

Editorial4

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

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

191. 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 noUiSlider20, 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 Controls21

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 webshim22 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)

232. 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 InstantClick2624 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!25

Whenever a link is triggered, the page will then have had 300ms on Android and 450ms on iOS to preload. A feature that makes InstantClick2624 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 FastClick27 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, accessibly28. Both library are great ways to make your site feel just a little bit less laggy. (cm)

293. Fixed Navigation For Mobile? Solved!

If you still haven’t found just the right technique for a fixed navigation, the Fixed Nav30 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!31

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 polyfill32 which requires jQuery. (ml)

334. Slice Smarter With These Goodies!

Did you know that you can drastically enhance your slicing workflow in Photoshop by simply using the right plugins? PNGHat34 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, Slicy35 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!36

An alternative free solution is offered by Cut&Slice me37. 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 “Generator38“. 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 Droplet39 should prove to be quite useful, too. (ml)

405. 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 Patterns41, 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 Mo42, who is based in Oslo, Norway.

Tons Of Patterns, For Free!43

If you’re looking for transparent or semi-transparent patterns, Transparent Textures44 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 Library45 provides a good number of freely available, complex and sophisticated patterns. Of course, all libraries welcome submissions. (ea)

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

To shed some light into the dark, Behind The Banner48 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)

497. 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 ShotKit50, 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?51

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)

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

localForage54 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 Storage55, a light(ish) wrapper around HTML5 localStorage that does a couple of extra useful things. (vf)

569. 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!57

On The Message Is Medium Rare58, 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)

5910. 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-Benz60, 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 Web61

The traditional newspaper The Guardian62 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 Times63 featuring “The Avalance at Tunnel Creek” burying 16 skiers and snowboarders. Finally, Matthew Latkiewicz’s “Telling stories about screens for screens64” explores how to apply storytelling when making videos about software. So how do you embed storytelling around your products? (ml)

6511. Typography… By Accident?

The artwork that can be found on Accidental-Typographer66 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?67

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)

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

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

Footnotes

  1. 1 http://www.smashingmagazine.com/the-smashing-newsletter/
  2. 2 https://twitter.com/search?q=%23smashingconf&src=hash
  3. 3 http://www.digital-adaptation.com
  4. 4 http://www.smashingmagazine.com/books/#digital-adaptation
  5. 5 http://www.smashingmagazine.com/2013/07/18/you-want-to-write-a-digital-strategy/
  6. 6 http://www.smashingmagazine.com/2013/11/25/making-yourself-redundant/
  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 http://refreshless.com/nouislider/
  21. 21 http://refreshless.com/nouislider/
  22. 22 https://github.com/aFarkas/webshim
  23. 23 #
  24. 24 http://instantclick.io/3.0.html
  25. 25 http://instantclick.io/3.0.html
  26. 26 http://instantclick.io/3.0.html
  27. 27 https://github.com/ftlabs/fastclick
  28. 28 http://timkadlec.com/2013/11/Avoiding-the-300ms-click-delay-accessibly/
  29. 29 #
  30. 30 http://blog.adtile.me/2014/03/03/responsive-fixed-one-page-navigation/
  31. 31 http://blog.adtile.me/2014/03/03/responsive-fixed-one-page-navigation/
  32. 32 https://github.com/filamentgroup/fixed-sticky
  33. 33 #
  34. 34 http://pnghat.madebysource.com/
  35. 35 http://macrabbit.com/slicy/
  36. 36 http://pnghat.madebysource.com/
  37. 37 http://www.cutandslice.me/
  38. 38 https://www.youtube.com/watch?v=wqmMqB91zdI&feature=youtu.be&t=3m2s
  39. 39 http://dribbble.com/shots/1398413-Asset-Organizer-Droplet
  40. 40 #
  41. 41 http://subtlepatterns.com/
  42. 42 https://twitter.com/atlemo/
  43. 43 http://subtlepatterns.com/
  44. 44 http://www.transparenttextures.com/
  45. 45 http://thepatternlibrary.com/
  46. 46 #
  47. 47 http://cmsummit.com/behindthebanner/index.html
  48. 48 http://cmsummit.com/behindthebanner/index.html
  49. 49 #
  50. 50 http://shotkit.com/
  51. 51 http://shotkit.com/
  52. 52 #
  53. 53 http://mozilla.github.io/localForage
  54. 54 http://mozilla.github.io/localForage
  55. 55 https://github.com/ahume/smart-storage
  56. 56 #
  57. 57 http://www.themessageismediumrare.com/
  58. 58 http://www.themessageismediumrare.com/
  59. 59 #
  60. 60 http://gla-class.mercedes-benz.com/com/en/#!/roadtrip
  61. 61 http://gla-class.mercedes-benz.com/com/en/#!/roadtrip
  62. 62 http://www.theguardian.com/science/antarctica-live/2014/feb/28/-sp-rescue-from-antarctica
  63. 63 http://www.nytimes.com/projects/2012/snow-fall/#/?part=tunnel-creek
  64. 64 https://medium.com/zendesk-creative-blog/4f380faecd3f
  65. 65 #
  66. 66 http://accidental-typographer.tumblr.com/
  67. 67 http://accidental-typographer.tumblr.com/
  68. 68 #
  69. 69 http://www.smashingmagazine.com/workshops/
  70. 70 http://smashingconf.com/workshops/lea-verou
  71. 71 http://smashingconf.com/workshops/josh-clark
  72. 72 https://shop.smashingmagazine.com/smashing-workshop-responsive-design-munich.html
  73. 73 http://smashingconf.com/ny-2014/workshops/aarron-walter
  74. 74 http://smashingconf.com/ny-2014/workshops/jonathan-snook
  75. 75 http://smashingconf.com/ny-2014/workshops/brian-suda

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