preload to preload content while users are still going through the page. Ah, and have you installed SPDY4 already?
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:
- You know that we’ve got pretty, pretty good printed books10, right? We’ve slightly adjusted the prices and have announced a few new books, so it’s about time to get a book or two if you fancy!
- Our very first online11 workshops12 (webinars) are coming up this week that focus on design patterns and front-end as well as performance techniques.
- Last but not least, SmashingConf Whistler tickets are available13, with a few interesting hands-on workshops, too.
Giddy up! Let’s make the web faster!
— Vitaly (@smashingmag)
Table of Contents
- Visual Designer’s Checklist For The Web14
- Tilt Scrolling, The Right Way15
- With A Little Help From Your Ninja Friend16
- Obscure DevTools Tips And Tricks17
- Count Text With Countable.js18
- Design Salaries In 2014 So Far19
- Nerdy Day Trips20
- How Tech Touched The Creative Class21
- A Stroll Through French Typography22
- Don’t Live Your Life Unlived23
- Listen To The Streets24
- Full-Day Smashing Workshops25
1. Visual Designer’s Checklist For The Web
Despite the fact that we might be living in a Post-PSD26 era27 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 changed28, it remains a well-established tool for crafting the visual atmosphere of a design.
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 Checklist30 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 Etiquette31 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)
2. 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?
There are more subtleties that have to be carefully considered to make tilt scrolling work well. As Marco Arment points out33, 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.
3. With A Little Help From Your Ninja Friend
Have you already met FontFaceNinja35? 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.
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)
4. 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.
DevTools Secrets38 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 DevTools39” 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)
5. Count Text With Countable.js
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)
6. 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.
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 collected40 quite fast and didn’t take the community that long to evaluate the data.
A very comprehensive visualization and analysis of the results 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)
7. 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 trips41 perhaps?
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)
8. 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 Boys43“?)
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 Class45! (ea)
9. 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çais46. 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.
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)
10. 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.com48 will make you want to grab your backpack and embark on your next adventure. Immediately.
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)
11. 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!
If you want to get a taste of the stunning and beautiful things that can be found on the streets, visit Street Art Project51, an evolving collection of iconic street art pieces from across the globe. Watch street artists share their stories. Artists like C21552, 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)
12. 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.
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 World54 with Jason Grigsby,
- Making It Work Offline55 with Matthew Andrews,
- Mastering Mobile Content Mayhem56 with Sara Wachter-Boettcher,
- Responsive Design: Clever Tips and Tricks57 with Vitally Friedman,
- Front-End + RWD Online Workshops (Webinars)58 on UX Design Patterns and Performance.
Or, if you’d like to run an in-house workshop at your office, feel free to get in touch with Vitaly at email@example.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), Kristina Vogt (kv), Esther Arends (ea), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).
- 1 https://www.smashingmagazine.com/the-smashing-newsletter/
- 2 http://www.jankfree.org
- 3 https://vimeo.com/100505617
- 4 https://developers.google.com/speed/spdy/
- 5 https://medium.com/@cihadturhan/a-ux-idea-i-know-where-you-are-aiming-3e00d152afb2
- 6 https://medium.com/@cihadturhan/a-ux-idea-i-know-where-you-are-aiming-3e00d152afb2
- 8 http://www.chrisharrison.net/index.php/Research/ProgressBars2
- 9 http://mercury.io/blog/the-psychology-of-waiting-loading-animations-and-facebook
- 10 https://www.smashingmagazine.com/books/
- 11 https://shop.smashingmagazine.com/online-workshop-friedman-ux-rwd-august-14.html
- 12 https://shop.smashingmagazine.com/online-workshop-friedman-front-end-perf-rwd-august-15.html
- 13 http://www.smashingconf.com/whistler-2014/
- 14 #a1
- 15 #a2
- 16 #a3
- 17 #a4
- 18 #a5
- 19 #a6
- 20 #a7
- 21 #a8
- 22 #a9
- 23 #a10
- 24 #a11
- 25 #a12
- 26 http://bradfrostweb.com/blog/post/the-post-psd-era/
- 27 http://danielmall.com/articles/the-post-psd-era/
- 28 https://www.smashingmagazine.com/2013/04/22/repurposing-photoshop/
- 29 http://webdesignerschecklist.com
- 30 http://webdesignerschecklist.com/
- 31 http://photoshopetiquette.com/
- 32 http://www.marco.org/2014/07/24/tilt-scrolling-that-doesnt-suck
- 33 http://www.marco.org/2014/07/24/tilt-scrolling-that-doesnt-suck
- 34 http://s3.jt.io/tilt/index.html
- 35 http://fontface.ninja/
- 36 http://fontface.ninja/
- 37 http://devtoolsecrets.com/
- 38 http://devtoolsecrets.com/
- 39 https://vimeo.com/53073654
- 40 https://docs.google.com/spreadsheets/d/1NnAAgwen1SoxkdyuLB0TyTNP0FwfSsF6D3nDaFzpnpA/edit#gid=1164916606
- 41 http://www.nerdydaytrips.com/
- 42 http://www.nerdydaytrips.com/
- 43 https://www.youtube.com/watch?v=WDswiT87oo8
- 44 http://thecreativeclass.tv/#intro
- 46 http://collections.bm-lyon.fr/mil/search
- 47 http://collections.bm-lyon.fr/mil/search
- 48 http://adventure.com/
- 49 http://adventure.com/
- 50 https://streetart.withgoogle.com/en/#home
- 51 “https://streetart.withgoogle.com/en/#home
- 52 https://www.youtube.com/watch?v=5xBr1SQWKrY
- 53 https://www.smashingmagazine.com/workshops/
- 54 http://smashingconf.com/freiburg-2014/workshops/jason-grigsby
- 55 http://smashingconf.com/freiburg-2014/workshops/matthew-andrews
- 56 http://smashingconf.com/freiburg-2014/workshops/sara-wachter-boettcher
- 57 http://smashingconf.com/workshops/vitaly-friedman
- 58 https://www.smashingmagazine.com/smashing-workshops/#online-workshops
- 59 mailto:firstname.lastname@example.org