Smashing Newsletter: Issue #113
Hold on for a second. Did you hear that? Yes, that. That calm sound of the wind whistling through the trees as birds chirp and fly around the lake with the sun shining right through the snow? Well, that’s SmashingConf Whistler2 calling! Our very first conference in Canada, taking place on December 9th–12th 2014 at the foot of the beautiful Whistler Blackcomb mountains. You’ve heard it right: the tickets are now available3, so grab yours and join us for the
snowball fight, skiing challenge conference! ;-)
And if Canada is too far away from you, we still have a few other5 events6 coming up, and workshops in Europe7, too! In fact, we’d be more than happy to run an in-house front-end + RWD workshop in your company! Just drop an email at vitaly[@]smashingconf.com768 and let’s see what we can do!
Ahhh exciting times!
— Vitaly (@smashingmag)
Table of Contents
01. Hide The Header When Users Don’t Need It10
02. One-Input-Field To Rule Them All11
03. Rethinking The Role Of Photoshop12
04. What’s Your Critical CSS?13
05. Testing Website Forms? It Doesn’t Have To Be A Nightmare!14
06. Save The Web For Later… On Paper!15
07. Better Responsive Design Testing With Emmet:Re-View16
08. Goodies! Mockups, Vectors And Icons17
09. Free Golden And Silver Age Comic Books For Download18
10. Lettered Birdfaces19
11. Motion Study… With Animated GIFs!20
12. Full-Day Smashing Workshops21
221. Hide The Header When Users Don’t Need It
Since the amount of available space on mobile devices is very limited, every single pixel is precious, and so we find tricks and techniques and ideas to make sure that we give content the spotlight it deserves while hiding away everything that is not absolutely necessary. So what about navigation and headers? Is it really a good idea to use a fixed navbar or header and thus reducing the amount of available space even further? Probably not.
Well, what about hiding header on scroll down24 and showing it on scroll up? If a visitor needs navigation, they will scroll up anyway, and the moment they start scrolling up, the navigation could magically appear. You could use a lightweight Headroom.js25 library for it, too. Alternatively, you could put the navigation icon at the bottom right26 or top right27 of the page and let it scroll with the content display navigation on click. Voilá—and the navigation isn’t in the way any more! (vf)
282. One-Input-Field To Rule Them All
Do you remember that clever single-field credit card input pattern29 which combines all credit card input fields into one and thus lets users stay on the keyboard and just keeps typing all the data at once? Well, we always have to be very careful with new techniques since there is always a danger of them being misunderstood by users, thus leading to a dropping conversion rate. Innovation is good, but testing innovative techniques is important, too.
Luke Wroblewski has reviewed31 and studied the pattern and as it turned out, the single entry field has been extremely successful32 (PDF) across all platforms. The document also features a few videos of users actually using the pattern on Square Payment as well as their behavior and some of their concerns. The bottom line is: the study shows that the pattern works, so you might want to give it a try in your next project, and if you sprinkle a bit of autocomplete goodness33 on it, you might end up with a delightful form that is extremely fast to fill in. (vf)
343. Rethinking The Role Of Photoshop
With the rise of Responsive Web Design and flat design, the days of Photoshop as being one of the main tools for building websites might seem over35, however, Photoshop is great for… well, what it’s already known to be great for: designing a visual atmosphere of a website. And new plugins and Photoshop tools will help you rethink how you use Photoshop, making it useful for today’s requirements after all. One of these plugins is LiveShare PS36 which enables real-time design meetings inside Photoshop. You can share your canvas, show changes live and your colleagues can directly point out, comment or sketch on top of your design.
A second tool is Pagelayers38, a very interesting app that basically converts any web page to layered PSD files. Every page element creates a separate layer, organized into layer groups, based on the structure of the web page. This makes it easy to redesign or improve an existing web page design or just jump quickly between browser and Photoshop. Both tools are available for OS X only, and are with no doubt worth exploring! (ml)
394. What’s Your Critical CSS?
How fast is fast enough? If you want the content to appear on the users’ screens as fast as possible, it’s a good idea to keep the Speed Index under 100040 and put the critical path view within the first 14Kb. This way, we ensure that browsers start rendering pages fast. But because we want to avoid any blocking requests, it’s a good idea to inline critical CSS in the
Phew, okay, we can do that. But how do we identify that critical path CSS, and how can we automate its generation without going through the code line by line? FilamentGroup has released the criticalCSS Grunt task42 that reads the configuration you provide, finds the “above the fold” CSS for your page, and outputs it into a separate file. Or you can use the Critical Path Generator43 that does the same thing online. You might need some fiddling to make it work, but the result will be very well worth it. (vf)
445. Testing Website Forms? It Doesn’t Have To Be A Nightmare!
Forms play a big role in almost every website and in most projects, there are lots of them: login and signup forms, contact forms, payment forms, comment forms, and the list goes on. Your forms need to run smoothly and that is why you want to test all of them. But how? Filling them all out by hand, over and over again on all the different devices you have? Hmm, maybe not.
496. Save The Web For Later… On Paper!
Do you remember the last time you sat in a coffe shop sipping on a nice cup of coffee and didn’t open up your laptop but… a newspaper? For all of us who have missed the reading experience on paper but still want to keep up with their web reading list there might now be a reason to leave the laptop in its bag once in a while: PaperLater50.
PaperLater is a service that combines the best of two worlds. It helps you save interesting stuff from the web to read it later — with a click, just like you’re used to it — and delivers your saved articles as a beautiful, printed newspaper right to your doorstep. All those little reading gems you stumbled across online in a calmer, tactile format. No incoming emails, no notifications, no further links to distract you. Only you and the article. A beautiful idea. One little downside for all non-UK residents: PaperLater has launched only recently and thus only ships to the UK at the moment. But who knows what time will bring… (cm)
527. Better Responsive Design Testing With Emmet:Re-View
When designing responsive sites, you need to be able to compare your designs among different resolutions as fast as possible. Of course, there are many tools to “simulate” breakpoints, but they do just that: well, simulate breakpoints.
Emmet:Re-View54 is a handy Chrome extension by Sergey Chikuyonok which will automatically find your custom breakpoints and display all previews on one single page in the browser, but it also has a synchronous scrolling for all previews. So, if you quickly want to check the footer everywhere, all you need to do is scroll to the footer of one view and see footers everywhere — at once. This tool is also great for collaboration as you can share your previews with colleagues and clients. And it’s completely free and open-source. (ml)
558. Goodies! Mockups, Vectors And Icons
Everybody loves a good freebie! We’ve stumbled upon a few useful goodies over the last two weeks, and they might be just what you need to expand your icon library. One of these is a set of four high-resolution notebook mock-ups56 with smart objects by Vadim Sherbakov, which are great for presenting logos, sketches, notes and anything else. If you love vintage, Patricia Martinez’ old-fashioned Polaroid icons57 will be perfect for you. The set of five icons comes as a full PSD file with editable layers.
Lastly, there is an icon set designed by Aegean K., named SketchActive59, which consists of 360 icons (outline and solid version) in vector and bitmap formats. They are fully scalable and adjustable. Themes include “Daily Live”, “Social Network”, “Sweets, Coffee and Tee”, “Party On”, “Business” and “iOS 7″. Just a few little goodies to download and keep close by in case you need them. (ml)
609. Free Golden And Silver Age Comic Books For Download
The Flash, Justice League of America, Falk, Lancelot, Tibor. I still remember the time when I was finally old enough so my dad would let me read his awesome comic collection with books he had saved from his childhood from the 60s and 70s. You could easily immerse in a completely different world and forget everything around you when reading comic books as a child — and even today as a grown up. On ComicBook+61, you can find a collection of currently more than 17,000 comics (!) available for free download.
The comic books are from the 1930s to 1970s and are therefore already under the public domain. Most of them are not mainstream, but still very much worth a look. And with 23,000 available books you can certainly fill some nice evenings and reminisce childhood days or live adventures with your superheroes. The collection includes Non-English comic books as well, such as Pulp Fiction, Fanzines and Comic Strips. The only little downside: to download the comic books, you have to create an account and log in. Enjoy! (kv)
6310. Lettered Birdfaces
When travelling to Sweden a few years ago, Laura Serra was greatly inspired by the picturesque houses, art and museums of Stockholm. Trying to grasp this immanent inspiration, she started sketching some of her impressions on paper. These sketches resulted to something quite different from what Laura had expected; something very extraordinary started taking shape!
Laura Serra is an illustrator and designer who lives in Berlin and loves crime TV shows as well as action movies. She draws her inspiration from documentaries or random conversations which she hears at cafés. To Laura, drawing means the world, and we’re sure that you’ll agree that her Face/Bird/Letter65 sketches are definitely worth sharing and looking at! (kv)
6611. Motion Study… With Animated GIFs!
When you set up your new side project, it’s usually because you really love whatever it is you are doing, and you are passionate about exploring it in your spare time. Isn’t it wonderful when a side project is what brings the attention of the community to you, and then turns the attention of your potential clients to you and as a result you get requests from clients to do the work that you enjoy doing so much? That’s the genuine power of side projects at heart.
Motion Study68 is Justin Mezzell’s personal side project in which he features some of the animation experiments that he creates in his spare time. They look beautiful, and aren’t really connected in any way, but they are lovely to look at and the new ones are posted regularly. Now, what if you started a design sprint69 for your own creative endeavours? We love featuring such projects, you know. (vf)
7012. 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-day practical front-end + RWD masterclasses that will help you become a better front-end developer, today.
Here are a couple of practical, hands-on workshops taking place in Freiburg, Germany that you may perhaps like to consider attending:
- When Responsive Design Meets the Real World72 with Jason Grigsby,
- Making It Work Offline73 with Matthew Andrews,
- Mastering Mobile Content Mayhem74 with Sara Wachter-Boettcher.
Or, if you’d like to run an in-house workshop at your company75, feel free to get in touch with Vitaly at vitaly[@]smashingconf.com768 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: Melanie Lang (ml), Esther Arends (ea), Cosima Mielke (cm), 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 http://www.smashingmagazine.com/2014/07/15/smashingconf-whistler-canada/
- 3 http://smashingconf.com/whistler-2014/registration
- 4 http://www.smashingconf.com/whistler-2014/
- 5 http://lanyrd.com/2015/smashing-conference-oxford/
- 6 http://lanyrd.com/2015/smashingconf/
- 7 http://www.smashingmagazine.com/smashing-workshops/#freiburg
- 8 mailto:email@example.com
- 9 http://www.smashingmagazine.com/2014/07/15/new-smashing-mystery-riddle-figured-yet/
- 10 #a1
- 11 #a2
- 12 #a3
- 13 #a4
- 14 #a5
- 15 #a6
- 16 #a7
- 17 #a8
- 18 #a9
- 19 #a10
- 20 #a11
- 21 #a12
- 22 #
- 23 https://medium.com/@mariusc23/hide-header-on-scroll-down-show-on-scroll-up-67bbaae9a78c
- 24 https://medium.com/@mariusc23/hide-header-on-scroll-down-show-on-scroll-up-67bbaae9a78c
- 25 http://wicky.nillia.ms/headroom.js/
- 26 http://codyhouse.co/gem/back-to-top/
- 27 http://www.holtzbrinck.com/
- 28 #
- 29 http://bradfrostweb.com/blog/post/single-field-credit-card-input-pattern/
- 30 http://bradfrostweb.com/blog/post/single-field-credit-card-input-pattern
- 31 https://www.youtube.com/watch?v=wi9BnTuAoes&list=PLg-UKERBljNy2Yem3RJkYL1V70dpzkysC&app=desktop
- 32 https://www.dropbox.com/s/5dwbanr3nbyo0v6/LukeW_ManualSquarePayment_KK_Fixed.pdf
- 33 https://developers.google.com/web/fundamentals/input/form/label-and-name-inputs
- 34 #
- 35 http://bradfrostweb.com/blog/post/the-post-psd-era/
- 36 http://blog.invisionapp.com/liveshare-ps-real-time-design-meetings-inside-photoshop/
- 37 http://blog.invisionapp.com/liveshare-ps-real-time-design-meetings-inside-photoshop/
- 38 http://www.pagelayers.com/
- 39 #
- 40 http://timkadlec.com/2014/01/fast-enough/#comment-1200946500
- 41 http://www.smashingmagazine.com/2014/07/15/smashingconf-whistler-canada/
- 42 https://github.com/filamentgroup/grunt-criticalcss/
- 43 http://jonassebastianohlsson.com/criticalpathcssgenerator/
- 44 #
- 45 http://css-tricks.com/prefill-forms-dev/
- 46 http://css-tricks.com/prefill-forms-dev/
- 47 http://css-tricks.com/prefilling-forms-custom-bookmarklet/
- 48 https://github.com/marmelab/gremlins.js
- 49 #
- 50 https://www.paperlater.com/
- 51 https://www.paperlater.com/
- 52 #
- 53 http://re-view.emmet.io/
- 54 http://re-view.emmet.io/
- 55 #
- 56 http://pixelbuddha.net/freebie/4-notebook-mockups
- 57 http://pmartinez.ch/5-polaroids-icons/
- 58 http://www.aegeank.com/sketchactive/
- 59 http://www.aegeank.com/sketchactive/
- 60 #
- 61 http://comicbookplus.com/
- 62 http://comicbookplus.com/
- 63 #
- 64 http://lauraserra.org/Face-Bird-Letter
- 65 http://lauraserra.org/Face-Bird-Letter
- 66 #
- 67 http://justinmezzell.tumblr.com/
- 68 http://justinmezzell.tumblr.com/
- 69 http://franciscortez.com/design-sprint/
- 70 #
- 71 http://www.smashingmagazine.com/workshops/
- 72 http://smashingconf.com/freiburg-2014/workshops/jason-grigsby
- 73 http://smashingconf.com/freiburg-2014/workshops/matthew-andrews
- 74 http://smashingconf.com/freiburg-2014/workshops/sara-wachter-boettcher
- 75 http://www.smashingmagazine.com/smashing-workshops/#in-house-workshop
- 76 mailto:firstname.lastname@example.org