Smashing Newsletter: Issue #113

This newsletter issue was sent out to 182,690 newsletter subscribers on Thursday, July 17th 2014. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.

Editorial

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! ;-)

Editorial4

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!

In the meantime, have you solved the new Smashing Mystery Riddle9 yet, have you, have you, have youuu? ;-)

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.

Hide The Header When Users Don't Need It23

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.

One-Input-Field To Rule Them All30

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.

Rethinking The Role Of Photoshop37

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 head, then load the main CSS with JavaScript once the page has started rendering and set a cookie if the main CSS (which also includes critical CSS) has been successfully loaded. Why? Well, because inline CSS isn’t cached and we don’t want to keep loading it with every single load. So on the next load, we can then check the cookie and include critical CSS inline if the cookie hasn’t been set or just include full CSS if the cookie was detected.

What's Your Critical CSS?41

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.

Testing Website Forms? It Doesn't Have To Be A Nightmare!45

Instead of manually testing your forms a thousand times, why not just toss a little bit of code on your sites to prefill your forms when you need? If that sounds good, then drop everything right now and learn how in Prefill Your Own Forms in Dev46, written by Chris Coyier. You also don’t want to miss Prefilling Forms with a Custom Bookmarklet47 by Adam Lichtenstein who built a JavaScript bookmarklet to help you quickly fill in your checkout forms for testing. Want to throw some monkey testing at your forms, too? That’s when Gremlins.js48 could come in handy. Less time spent on testing = more time to play! (ea)

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.

Save The Web For Later… On Paper!51

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.

Better Responsive Design Testing With Emmet:Re-View53

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.

Goodies! Mockups, Vectors And Icons58

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.

Free Golden And Silver Age Comic Books For Download62

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!

 Lettered Birdfaces64

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 Study... With Animated GIFs!67

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.

Full-Day Smashing Workshops71

Here are a couple of practical, hands-on workshops taking place in Freiburg, Germany that you may perhaps like to consider attending:

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

Footnotes

  1. 1 http://www.smashingmagazine.com/the-smashing-newsletter/
  2. 2 http://www.smashingmagazine.com/2014/07/15/smashingconf-whistler-canada/
  3. 3 http://smashingconf.com/whistler-2014/registration
  4. 4 http://www.smashingconf.com/whistler-2014/
  5. 5 http://lanyrd.com/2015/smashing-conference-oxford/
  6. 6 http://lanyrd.com/2015/smashingconf/
  7. 7 http://www.smashingmagazine.com/smashing-workshops/#freiburg
  8. 8 mailto:vitaly@smashingconf.com
  9. 9 http://www.smashingmagazine.com/2014/07/15/new-smashing-mystery-riddle-figured-yet/
  10. 10 #a1
  11. 11 #a2
  12. 12 #a3
  13. 13 #a4
  14. 14 #a5
  15. 15 #a6
  16. 16 #a7
  17. 17 #a8
  18. 18 #a9
  19. 19 #a10
  20. 20 #a11
  21. 21 #a12
  22. 22 #
  23. 23 https://medium.com/@mariusc23/hide-header-on-scroll-down-show-on-scroll-up-67bbaae9a78c
  24. 24 https://medium.com/@mariusc23/hide-header-on-scroll-down-show-on-scroll-up-67bbaae9a78c
  25. 25 http://wicky.nillia.ms/headroom.js/
  26. 26 http://codyhouse.co/gem/back-to-top/
  27. 27 http://www.holtzbrinck.com/
  28. 28 #
  29. 29 http://bradfrostweb.com/blog/post/single-field-credit-card-input-pattern/
  30. 30 http://bradfrostweb.com/blog/post/single-field-credit-card-input-pattern
  31. 31 https://www.youtube.com/watch?v=wi9BnTuAoes&list=PLg-UKERBljNy2Yem3RJkYL1V70dpzkysC&app=desktop
  32. 32 https://www.dropbox.com/s/5dwbanr3nbyo0v6/LukeW_ManualSquarePayment_KK_Fixed.pdf
  33. 33 https://developers.google.com/web/fundamentals/input/form/label-and-name-inputs
  34. 34 #
  35. 35 http://bradfrostweb.com/blog/post/the-post-psd-era/
  36. 36 http://blog.invisionapp.com/liveshare-ps-real-time-design-meetings-inside-photoshop/
  37. 37 http://blog.invisionapp.com/liveshare-ps-real-time-design-meetings-inside-photoshop/
  38. 38 http://www.pagelayers.com/
  39. 39 #
  40. 40 http://timkadlec.com/2014/01/fast-enough/#comment-1200946500
  41. 41 http://www.smashingmagazine.com/2014/07/15/smashingconf-whistler-canada/
  42. 42 https://github.com/filamentgroup/grunt-criticalcss/
  43. 43 http://jonassebastianohlsson.com/criticalpathcssgenerator/
  44. 44 #
  45. 45 http://css-tricks.com/prefill-forms-dev/
  46. 46 http://css-tricks.com/prefill-forms-dev/
  47. 47 http://css-tricks.com/prefilling-forms-custom-bookmarklet/
  48. 48 https://github.com/marmelab/gremlins.js
  49. 49 #
  50. 50 https://www.paperlater.com/
  51. 51 https://www.paperlater.com/
  52. 52 #
  53. 53 http://re-view.emmet.io/
  54. 54 http://re-view.emmet.io/
  55. 55 #
  56. 56 http://pixelbuddha.net/freebie/4-notebook-mockups
  57. 57 http://pmartinez.ch/5-polaroids-icons/
  58. 58 http://www.aegeank.com/sketchactive/
  59. 59 http://www.aegeank.com/sketchactive/
  60. 60 #
  61. 61 http://comicbookplus.com/
  62. 62 http://comicbookplus.com/
  63. 63 #
  64. 64 http://lauraserra.org/Face-Bird-Letter
  65. 65 http://lauraserra.org/Face-Bird-Letter
  66. 66 #
  67. 67 http://justinmezzell.tumblr.com/
  68. 68 http://justinmezzell.tumblr.com/
  69. 69 http://franciscortez.com/design-sprint/
  70. 70 #
  71. 71 http://www.smashingmagazine.com/workshops/
  72. 72 http://smashingconf.com/freiburg-2014/workshops/jason-grigsby
  73. 73 http://smashingconf.com/freiburg-2014/workshops/matthew-andrews
  74. 74 http://smashingconf.com/freiburg-2014/workshops/sara-wachter-boettcher
  75. 75 http://www.smashingmagazine.com/smashing-workshops/#in-house-workshop
  76. 76 mailto:vitaly@smashingconf.com

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

    Hey there, great article and links to some nice freebies (a Scotsman like me enjoys a good freebie)!

    Just wanted to let you know there’s an HTML issue in the “Free Golden And Silver Age Comic Books For Download” section to the link to ComicBook+

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