Smashing Newsletter: Issue #105
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
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+).
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!
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.
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.
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.
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?
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.
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?
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!
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.
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.
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.
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:
- Mastering CSS70 with Lea Verou (Oxford, UK),
- Designing For Touch71 with Josh Clark (Oxford, UK),
- Responsive Web Design72 with Vitaly Friedman (Munich, DE),
- Interface Design Bootcamp73 with Aarron Walter (New York, US),
- Scalable CSS Architecture74 with Jonathan Snook (New York, US),
- SVG and Data Visualization75 with Brian Suda (New York, US).
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 http://www.smashingmagazine.com/the-smashing-newsletter/
- 2 https://twitter.com/search?q=%23smashingconf&src=hash
- 3 http://www.digital-adaptation.com
- 4 http://www.smashingmagazine.com/books/#digital-adaptation
- 5 http://www.smashingmagazine.com/2013/07/18/you-want-to-write-a-digital-strategy/
- 6 http://www.smashingmagazine.com/2013/11/25/making-yourself-redundant/
- 7 #a1
- 8 #a2
- 9 #a3
- 10 #a4
- 11 #a5
- 12 #a6
- 13 #a7
- 14 #a8
- 15 #a9
- 16 #a10
- 17 #a11
- 18 #a12
- 19 #
- 20 http://refreshless.com/nouislider/
- 21 http://refreshless.com/nouislider/
- 22 https://github.com/aFarkas/webshim
- 23 #
- 24 http://instantclick.io/3.0.html
- 25 http://instantclick.io/3.0.html
- 26 http://instantclick.io/3.0.html
- 27 https://github.com/ftlabs/fastclick
- 28 http://timkadlec.com/2013/11/Avoiding-the-300ms-click-delay-accessibly/
- 29 #
- 30 http://blog.adtile.me/2014/03/03/responsive-fixed-one-page-navigation/
- 31 http://blog.adtile.me/2014/03/03/responsive-fixed-one-page-navigation/
- 32 https://github.com/filamentgroup/fixed-sticky
- 33 #
- 34 http://pnghat.madebysource.com/
- 35 http://macrabbit.com/slicy/
- 36 http://pnghat.madebysource.com/
- 37 http://www.cutandslice.me/
- 38 https://www.youtube.com/watch?v=wqmMqB91zdI&feature=youtu.be&t=3m2s
- 39 http://dribbble.com/shots/1398413-Asset-Organizer-Droplet
- 40 #
- 41 http://subtlepatterns.com/
- 42 https://twitter.com/atlemo/
- 43 http://subtlepatterns.com/
- 44 http://www.transparenttextures.com/
- 45 http://thepatternlibrary.com/
- 46 #
- 47 http://cmsummit.com/behindthebanner/index.html
- 48 http://cmsummit.com/behindthebanner/index.html
- 49 #
- 50 http://shotkit.com/
- 51 http://shotkit.com/
- 52 #
- 53 http://mozilla.github.io/localForage
- 54 http://mozilla.github.io/localForage
- 55 https://github.com/ahume/smart-storage
- 56 #
- 57 http://www.themessageismediumrare.com/
- 58 http://www.themessageismediumrare.com/
- 59 #
- 60 http://gla-class.mercedes-benz.com/com/en/#!/roadtrip
- 61 http://gla-class.mercedes-benz.com/com/en/#!/roadtrip
- 62 http://www.theguardian.com/science/antarctica-live/2014/feb/28/-sp-rescue-from-antarctica
- 63 http://www.nytimes.com/projects/2012/snow-fall/#/?part=tunnel-creek
- 64 https://medium.com/zendesk-creative-blog/4f380faecd3f
- 65 #
- 66 http://accidental-typographer.tumblr.com/
- 67 http://accidental-typographer.tumblr.com/
- 68 #
- 69 http://www.smashingmagazine.com/workshops/
- 70 http://smashingconf.com/workshops/lea-verou
- 71 http://smashingconf.com/workshops/josh-clark
- 72 https://shop.smashingmagazine.com/smashing-workshop-responsive-design-munich.html
- 73 http://smashingconf.com/ny-2014/workshops/aarron-walter
- 74 http://smashingconf.com/ny-2014/workshops/jonathan-snook
- 75 http://smashingconf.com/ny-2014/workshops/brian-suda