Smashing Newsletter: Issue #115

This newsletter issue was sent out to 184,485 newsletter subscribers on Tuesday, August 12th 2014. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.

Editorial

Performance is of course a technological concern, but it’s also about how users perceive performance on your website. In fact, there are a few clever tricks to make an application feel faster than it actually is. Subtle animations and transitions can help to keep the experience smooth, hitting 60fps in rendering2 can help keep the respond times low, optimizing the critical path3 by deferring blocking CSS and JavaScript can help browsers deliver content to users faster than usual, and we can use HTML5 prefetch and preload to preload content while users are still going through the page. Ah, and have you installed SPDY4 already?

Editorial5

Have you thought about anticipating users’ actions in a smarter way, trying to predict what they will be doing next — before they actually do it? If you have critical UI components that are accessible from every position on the page, e.g. a fixed header, you might anticipate mouse movements6 to open a menu or show/hide sticky headers ahead of time. You could also track the position of the mouse and preload scripts based on the area within 200px of a mouse cursor7 from a critical component, or just modify the appearance of the loading bars8 or loading spinners9.

If you think creatively about what you do and use such smart ideas responsibly, the experience might feel faster because many things are happening in the back while the users are busy with something else. It might be a tricky thing to do, but a clever way of keeping performance as good as it possibly can be.

Alright, as a sidenote, we’ve got a few smashing things taking place at the moment:

Giddy up! Let’s make the web faster!
— Vitaly (@smashingmag)

Table of Contents

01. Visual Designer’s Checklist For The Web14
02. Tilt Scrolling, The Right Way15
03. With A Little Help From Your Ninja Friend16
04. Obscure DevTools Tips And Tricks17
05. Count Text With Countable.js18
06. Design Salaries In 2014 So Far19
07. Nerdy Day Trips20
08. How Tech Touched The Creative Class21
09. A Stroll Through French Typography22
10. Don’t Live Your Life Unlived23
11. Listen To The Streets24
12. Full-Day Smashing Workshops25

261. Visual Designer’s Checklist For The Web

Despite the fact that we might be living in a Post-PSD27 era28 today, rich visual design often is an important component of the designs we build. Browser was never intended to be used for detailed visual comps, and while Photoshop’s role has changed29, it remains a well-established tool for crafting the visual atmosphere of a design.

Visual Designer's Checklist For The Web30

You might craft the visual design of atomic components of your design in Photoshop and prototype them as you go, but as you finish your work on visual assets, it might be handy to have a little checklist to ensure that the Photoshop file is bulletproof. Whether it’s external or internal file organization, design practices, typography, vector graphics and export settings, Visual Designers Checklist31 has got your back. It’s a handy little checklist for the workflow in which visual comps and exploration will be shared with a developer. Checkboxes are persistent if localStorage is supported, so they won’t uncheck on refresh.

And if you are looking for a more refined guide to discernible modern web design in Photoshop, Photoshop Etiquette32 will prove to be quite helpful as well. Photoshop isn’t dead, but the way we use it in our projects will have to adjust — better sooner than later. (vf)

332. Tilt Scrolling, The Right Way

Now, seriously, how difficult could it be? You’d like the visitors of your website to read your articles on your site, yet what if they could tilt the phone a bit instead of scrolling and the content would move up or down automatically? Well, you set a starting point for the position of the phone and then track changes (movements) of the phone. Right! But where exactly would that starting point be set? And when should the text start and when should it stop scrolling? And what buffer should we set to avoid permanent movements up and down?

Tilt Scrolling, The Right Way34

There are more subtleties that have to be carefully considered to make tilt scrolling work well. As Marco Arment points out35, you can’t just have a fixed angle be the zero point, like straight up, because nobody holds their phone in the exact same orientation all the time. The zero point needs to be relative to however the phone is being held. Marco’s solution in Instapaper is to have tilt scrolling always off on default, so the user has to toggle it on every time they want it, and use the phone’s current orientation as the zero point when they tap the button.

Obviously this technique goes not only for native apps, but also for web apps: HTML5 Tilting36 is pretty much possible, so it’s up to us to implement it properly in the right context. (vf)

373. With A Little Help From Your Ninja Friend

Have you already met FontFaceNinja38? Being a smart little browser extension, it helps you identify the fonts used on any website, conveniently providing you with information on the name, size and line spacing. To enjoy a font in all its beauty, you can hide all surrounding elements such as pictures and ads with a click, and view the typeface on a plain, blank background.

With A Little Help From Your Ninja Friend39

And if that’s not ninja power enough, well, you can even try out the font of your fancy and download it. Fontface Ninja is free and available as a bookmarklet and can also be added as extensions in both Chrome and Safari. Please always remember to respect every type designer’s work and never steal fonts — they’ll sincerely appreciate it. (cm)

404. Obscure DevTools Tips And Tricks

Debugging used to be much more difficult, much more confusing and much more annoying back in the days. With sophisticated integrated development tools in modern browsers, finding those nasty bugs and understanding what’s going on behind the hood is much easier. Yet, while some of the features of those browser tools are quite self-explanatory, some of them are hidden deep in the chrome and are hence hardly used.

Obscure DevTools Tips And Tricks41

DevTools Secrets42 is a resource dedicated to explore all those little obscure tips and tricks hidden inside DevTools, and help you become even faster with debugging in the browser. And if you want to wrap your head around the quite weird productivity tips and tricks in Chrome DevTools, the talk on “Secrets of the Chrome DevTools43” by Patrick Dubroy is a very good start — make sure to keep a text editor for making notes though! Debugging can indeed get even easier than you thought, can’t it? (vf)

445. Count Text With Countable.js

If you’re dealing with a lot of text in your project, you may find it handy to have a live overview that keeps track of your text. Or perhaps you’d just like to inform your visitors of how much space they have left in that shiny, short text area of yours. Countable.js45 is a nice JavaScript library that takes good care of this. It counts paragraphs, words and characters (with and without spaces) and displays it live on your website.

Count Text With Countable.js46

The little script by Sacha Schmid doesn’t have any JS dependencies and is as small as 1Kb when minified and gzipped. It provides a few methods and options to customize the script to your needs. Countable.js supports all modern browsers. Internet Explorer, you ask? It’s supported down to version 7. (ml)

476. Design Salaries In 2014 So Far

Salaries are a tricky subject, aren’t they? Most of us don’t like to talk about money, and what our colleagues earn isn’t necessarily a topic that pops up spontaneously at cocktail parties. However, knowing the state of the salaries within the industry is helpful for your quotes and keeps you viable and competitive in the industry.

Design Salaries In 2014 So Far48

Just recently, Cameron Moll conducted a survey of design salaries, trying to figure out the average salaries in our industry this year. Over a thousand people from 58 countries responded within a short time. The form asked for a job title, place of living and gross annual salary. The data was collected49 quite fast and didn’t take the community that long to evaluate the data.

A very comprehensive visualization and analysis of the results50 was done by Ivana McConnell. There are charts that analyze answers from people who had responded from different countries and places in the US (also East and West Coast) and comparisons of results from Europe and the US (might be time to consider leaving Europe for a better perspective). Cameron notes that the highest salary for a developer reported was 950,000$ a year and goes down to 200$ p.a. for freelance work in Tunisia. Useful findings to know where you stand, how you are doing and what your prospects are like! (kv)

517. Nerdy Day Trips

A French railway station that is not part of the French railway system but the Swiss, a German horseradish Museum, a chapel decorated with bones from more than 40,000 people in Poland or the Colorado Potato beetle memorial in Hungary and Underground Gardens in California — doesn’t that all sound like places you just need to see? Are you in need of some nerdy day trips52 perhaps?

Nerdy Day Trips53

Columnist and physician Ben Goldacre has started a collection of nerdy day trips all over the world a few years ago. His vision was that on any given road trip, one would be able to find a nerd stop somewhere along the routes, or perhaps even plot out a nerd odyssey. Most places are yet to to be found — let’s change that. You can contribute your own favorites from all over the world! (kv)

548. How Tech Touched The Creative Class

Have a few minutes to spare for a little experiment? Try to go back 20 years in time… whatever it was you did back then, ask yourself, “How much was my life touched by technology?” There was probably much less tech involved in your life in the early 90s than today. It’s fascinating to analyze how the digital evolution has changed our lives, but what about in particular folks that are musicians and artists? For example, how have computers affected Damon Albarn, one of Britain’s most iconic musicians best known for being the frontman of Blur (remember the song “Girls And Boys55“?)

How Tech Touched The Creative Class56

How has tech touched the life of such a musician? How has it affected the way music is recorded? Or let’s take a look at Tom Dixon, industrial designer specializing in lighting and furniture. How has the digital sphere changed his career and industry? Are we still in the Wild West of the digital era and anything is possible? Or, are we all trying to stay conscious and not get too distracted? Do computers save us time or waste our time, or both? Find out some highly interesting thoughts and answers at the Creative Class57! (ea)

589. A Stroll Through French Typography

Typographique, s’il vous plaît! If you are looking for a new source of typographic inspiration, we might have a nice place for you: the Corpus Typographique Français59. Compiled by the Musée de l’Imprimerie (Printing Museum in Lyon), the collection consists of more than 1,500 graphic design samples that date from 1850 until today. All of them authentically French, either designed by French designers or coming from French type foundries.

A Stroll Through French Typography60

The collection contains well-renowned classics as well as lesser known, random designs and thus it’s all a real cross section of 160 years of typographic history. Each piece comes with a short description and more information on its source and the time period it is rooted in. One little downside: there is no English translation. But even if you don’t master any French, the site is a rich source that is definitely worth a visit for any type lover. (cm)

6110. Don’t Live Your Life Unlived

Is there something you’ve always dreamed of doing? Cycling through Vietnam, conquering Kilimanjaro, seeing the sun rise over a Norwegian fjord? Then Adventure.com62 will make you want to grab your backpack and embark on your next adventure. Immediately.

Don't Live Your Life Unlived63

The site is a treasure chest for the defiantly curious and insatiable thirsty for discovering new things and breathtaking spots. It collects stories and experiences from people who have embarked on spectacular journeys, people who have left their comfort zones to live a life of adventure. Whether it’s rowing the Arctic or fresh air camping in the Italian Dolimites, the stories they share will inspire you to break out of your routine and try something new. Simply beautiful. (cm)

6411. Listen To The Streets

There are artists in this world whose artworks you will never find at fancy galleries or in trendy exhibitions. What these artists create is absolutely stunning but if you try to find their masterpieces at shiny places, you are on the wrong track. On your next big city trip, drop the idea to go to that famous museum in that famous district. Instead, get into a bus and get off anywhere and just walk around. You are now beginning to explore a giant museum and gallery which is open for everybody. You are exploring… the streets!

Listen To The Streets65

If you want to get a taste of the stunning and beautiful things that can be found on the streets, visit Street Art Project66, an evolving collection of iconic street art pieces from across the globe. Watch street artists share their stories. Artists like C21567, who transforms a boring, grey wall into a beautiful, colorful portrait. This particular artist works in districts in which folks are most likely never going to be able to afford visiting a museum, and have probably never opened an art book in their life. If you happen to be a street artist, too, or have just stumbled upon some cool street artwork, you can submit it to the website and tag the location, too! Thanks to these artists for making our world brighter! (ea)

6812. 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 workshops that will help you become a better front-end developer, today.

Full-Day Smashing Workshops69

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 office, feel free to get in touch with Vitaly at vitaly@smashingconf.com75 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), Kristina Vogt (kv), Esther Arends (ea), 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.jankfree.org
  3. 3 https://vimeo.com/100505617
  4. 4 https://developers.google.com/speed/spdy/
  5. 5 https://medium.com/@cihadturhan/a-ux-idea-i-know-where-you-are-aiming-3e00d152afb2
  6. 6 https://medium.com/@cihadturhan/a-ux-idea-i-know-where-you-are-aiming-3e00d152afb2
  7. 7 https://alexsexton.com/blog/2013/03/deploying-javascript-applications/
  8. 8 http://www.chrisharrison.net/index.php/Research/ProgressBars2
  9. 9 http://mercury.io/blog/the-psychology-of-waiting-loading-animations-and-facebook
  10. 10 http://www.smashingmagazine.com/books/
  11. 11 https://shop.smashingmagazine.com/online-workshop-friedman-ux-rwd-august-14.html
  12. 12 https://shop.smashingmagazine.com/online-workshop-friedman-front-end-perf-rwd-august-15.html
  13. 13 http://www.smashingconf.com/whistler-2014/
  14. 14 #a1
  15. 15 #a2
  16. 16 #a3
  17. 17 #a4
  18. 18 #a5
  19. 19 #a6
  20. 20 #a7
  21. 21 #a8
  22. 22 #a9
  23. 23 #a10
  24. 24 #a11
  25. 25 #a12
  26. 26 #
  27. 27 http://bradfrostweb.com/blog/post/the-post-psd-era/
  28. 28 http://danielmall.com/articles/the-post-psd-era/
  29. 29 http://www.smashingmagazine.com/2013/04/22/repurposing-photoshop/
  30. 30 http://webdesignerschecklist.com
  31. 31 http://webdesignerschecklist.com/
  32. 32 http://photoshopetiquette.com/
  33. 33 #
  34. 34 http://www.marco.org/2014/07/24/tilt-scrolling-that-doesnt-suck
  35. 35 http://www.marco.org/2014/07/24/tilt-scrolling-that-doesnt-suck
  36. 36 http://s3.jt.io/tilt/index.html
  37. 37 #
  38. 38 http://fontface.ninja/
  39. 39 http://fontface.ninja/
  40. 40 #
  41. 41 http://devtoolsecrets.com/
  42. 42 http://devtoolsecrets.com/
  43. 43 https://vimeo.com/53073654
  44. 44 #
  45. 45 http://sachaschmid.ch/Countable/
  46. 46 http://sachaschmid.ch/Countable/
  47. 47 #
  48. 48 https://news.layervault.com/stories/29331-results-dn-survey-of-design-salaries-2014
  49. 49 https://docs.google.com/spreadsheets/d/1NnAAgwen1SoxkdyuLB0TyTNP0FwfSsF6D3nDaFzpnpA/edit#gid=1164916606
  50. 50 http://ivanamcconnell.com/design-survey.html
  51. 51 #
  52. 52 http://www.nerdydaytrips.com/
  53. 53 http://www.nerdydaytrips.com/
  54. 54 #
  55. 55 https://www.youtube.com/watch?v=WDswiT87oo8
  56. 56 http://thecreativeclass.tv/#intro
  57. 57
  58. 58 #
  59. 59 http://collections.bm-lyon.fr/mil/search
  60. 60 http://collections.bm-lyon.fr/mil/search
  61. 61 #
  62. 62 http://adventure.com/
  63. 63 http://adventure.com/
  64. 64 #
  65. 65 https://streetart.withgoogle.com/en/#home
  66. 66 “https://streetart.withgoogle.com/en/#home
  67. 67 https://www.youtube.com/watch?v=5xBr1SQWKrY
  68. 68 #
  69. 69 http://www.smashingmagazine.com/workshops/
  70. 70 http://smashingconf.com/freiburg-2014/workshops/jason-grigsby
  71. 71 http://smashingconf.com/freiburg-2014/workshops/matthew-andrews
  72. 72 http://smashingconf.com/freiburg-2014/workshops/sara-wachter-boettcher
  73. 73 http://smashingconf.com/workshops/vitaly-friedman
  74. 74 http://www.smashingmagazine.com/smashing-workshops/#online-workshops
  75. 75 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

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  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