With web technologies advancing every single day, there are a few quite remarkable improvements coming up our way very soon. Performance matters, and with smart browsers pushing the web forward, we should be able to develop smarter, faster and friendlier user interfaces much sooner than we think. But to do that, we need to be prepared for what’s coming up.
The future of responsive images looks bright: the
picture element and
srcset are already being implemented3 and there is no reason to wait4 — we can use them right away, with the shiny new Picturefill 2.0 to support legacy browsers. Besides, SPDY5, a predecessor of HTTP 2.0 with major speed improvements and a perfect fallback to HTTP 1.1, can be used today6 as well.
Flexbox7 and SVG8 are also gaining traction, speeding up the prototyping and development of smart, scalable websites. Finally, WOFF 2.0 (with a 30% better compression compared to WOFF 1.0) will be landing in Chrome 36, and Service Workers9, a smart replacement for AppCache, is on its way as well. Bright, isn’t it? And just before you ask, IE seems to play along nicely10, too! What else to wish, right?
— Vitaly (@smashingmag)
Table of Contents
- Typesetting Your CSS Objects, With Style Guides13
- Griddify: Grids And Guide At Their Best14
- Speed Up Your Site With Delayed Content15
- The Science Of Selecting Secure, Memorable Passwords16
- Smile, And Don’t Fall Off The Stage17
- Fixing Fixed Bars, The Smart Way18
- Learning Keyboard Shortcuts, One At A Time19
- Buzzwords We Love To Hate20
- A Life Full Of Colors21
- Donuts, Lots Of (Canadian) Donuts…22
- Full-Day Smashing Workshops23
1. Typesetting Your CSS Objects, With Style Guides
Styleguides. When building a responsive project, atomic approach24 or element collages25 can be quite helpful if you want to establish a visual direction first, then design the smallest units of your design, and finally combine the components into larger modules to build actual pages. However, usually we think about basic components in these approaches, but we could actually apply it to the interface elements of web apps as well.
Edenspiekermann’s case study on Typesetting CSS Objects27 provides some insights into how the design agency built a style guide for the font foundry FontShop and how the “FontShop Styleguide28” was built using KSS. The components were separated into globals29, objects30 and modules31 using dedicated class names for each group. An interesting insight into a more complicated responsive project. Worth reading! (vf)
2. Griddify: Grids And Guide At Their Best
If you’re a visual designer, chances are high that you live and breathe Photoshop — and know all of its little quirks and keyboard shortcuts, tricks and techniques, as well as the dos and don’ts. And yet, every now and again, you still find yourself squeezing and straining your eyes to focus very closely on a few fine design components to make sure that they’re aligned nicely on a guide. Don’t you just sometimes wish you had a smarter guide or grid generator to help you align all of the design elements efficiently, and without so much eye strain?
Well, once you’ve tried Griddify33, you’ll be doing the happy dance in no time. This open-source tool helps you compose custom grid systems, vertical rhythm, and a whole bunch of other stuff with guides in Photoshop. The tiny, fast Photoshop panel allows you to define any custom grid easily, and you can either use the Photoshop CC version or the newly released CS6 version. Of course, the project is hosted on GitHub34 where you can also report issues in case you do happen to stumble upon any. (il)
3. Speed Up Your Site With Delayed Content
When it comes to speeding up your site, reducing the number of HTTP requests is usually the first thing to do. However, there remains one area that could turn out to be a real performance killer: gravatars. Although their requests are pretty small and Gravatar’s servers are usually pretty fast, they can easily add up to delays of several seconds on a page with a lot of comments. Luckily, there is a smart and simple solution to circumvent this: loading the avatars only after the rest of the content has loaded35.
All it takes is to use the HTML5
data attribute on a comment (instead of the
4. The Science Of Selecting Secure, Memorable Passwords
It feels like each of us has at least a hundred web accounts and they are all protected by one single thing: the almighty password. We know that we shouldn’t use the same password for every account, and so sometimes we use password managers with a master password to be able to keep track of the passwords that it, well, manages. Nor are we really capable of memorizing a different key phrase for each site that we use. And since it’s good practice to include a combination of special characters and numbers in the password, keeping track of all the passwords can be quite a nightmare.
So what can you do, especially if you don’t want to rely on sophisticated, advanced password managers? Hans Anderson wrote an article on creating secure password patterns38 with a few guidelines on how to use a pattern to keep your accounts safe and sound and the passwords easy to memorize. Troy Hunt has also analyzed how people choose their passwords39 and provides a few common patterns that we should avoid when selecting our passwords. (ml)
5. Smile, And Don’t Fall Off The Stage
If you’re passionate about anything, no matter what that is, it’s very likely that you’ll find yourself speaking publicly one day, sharing your passion with your fellow colleagues. Our community loves to meet in order to learn and share, and sooner or later it might be you who’s up there on stage because you have something interesting to share with your peers! So, getting ready for your big gig already?
While speaking in public can be a blast, there’s a horrible number of things that can go wrong. Your long dangly earrings which you’ve forgotten to take off could mess up your headset microphones. You could even vomit from sheer fear, or fall off the stage. Well, if you do happen to fall off the stage, don’t acknowledge it. Pretend it was a part of your gig. Never apologize for your mistakes. What the audience doesn’t know, doesn’t hurt them. For more great advice, check out Mark Boulton’s Speaking And Audience Tips41, Frank’s Suggestions For Speakers42 and Ethan’s Speaking? Pack A Plan.43 (ea)
6. Fixing Fixed Bars, The Smart Way
In the good ol’ days, we used to rely on carousels to hide some parts of the content but still make them accessible from a prominent spot on the front page. Now that carousel’s reputation44 has45 suffered46, we tend to ignore the pattern altogether. And that’s good! However, fixed bars are becoming a new nightmare today—especially on mobile where you don’t have a lot of space available anyway. But if you do want to keep the navigation accessible, you don’t need to reserve a slot for header to do it.
7. Learning Keyboard Shortcuts, One At A Time
Ah, the good ol’ keyboard shortcuts! There are quite a few of them that we’ve learned to love over the years, but many of them still remain unknown, mostly because they often remain hidden in documentation or convoluted help files. If you really want to speed up your work a little bit at a time, why not search for keyboard shortcuts of your most used application, or just memorize a shortcut from the context menu?
For example, if you spend a lot of time working in a text editor on Mac, try inserting your cursor partway through a paragraph and hitting
Ctrl + K. This should “kill” all of the text from that point to the end of the paragraph. You accidentally switched two characters around the cursor? No worries, just hit
Ctrl + T to transpose the characters. If you want to paste the text as plain text without formatting, use
Shift + Option + Cmd + V (
Ctrl + Shift + V on Windows).
8. Buzzwords We Love To Hate
Are there any words in English that you just cannot see anymore? How about “big data”, “disruption”, “codify” — or even worse — “monetize”? You may be thinking, “What’s the big deal? I use those words every day, they’re just words.” Well, it all started with Carl Smith, a self-proclaimed deviant hippie. Carl was working on a project with a few friends when one of his most abhorred words worked its way into the conversation: “paradigm shift”. It could be marketing jargon or just a phrase that works on your nerves, so Carl collated a list of buzzwords we love to hate55.
Sure, it’s not the words’ fault; they merely exist because we brought them into being and gave them meaning. And it’s exactly that what Carl detests, the meaning we have given to jargon terms. These terms are so overused and tired that they don’t mean much anymore, and can often lead conversations in a strange direction, or are used to create a big deal out of nothing. A good reminder of the words to avoid during your next meeting, maybe? (sh)
9. A Life Full Of Colors
What do the visual design of eBoy, iOS 7, Mike Oldfield and Lake Michigan in Spring have in common? For designer Nigel Evan Dennis, it’s the color blue. According to Nigel, everything contains a palette, and everything around us has been designed by someone at some point. Some palettes work better than others though, and Nigel collects the ones that he finds particularly interesting and worth capturing.
His project, thedayscolor58, is dedicated to just that: a daily color digest, with a variety of background colors and the source of inspiration for each palette. The artists is collecting his ideas which come to him by songs, nature or by his daily activities. What colors would you associate Radiohead’s “kid A” with? Does it sound grey, red and blue for you, too? (kv)
10. Donuts, Lots Of (Canadian) Donuts…
Life can be complicated, but ordering coffee and donuts should really be no big deal, right? Are you sure? Yes? Great! Alright, then I’ll have a Double-Double along with a Dutchie, a Boston Cream, a Strawberry Blossom and, umm, a bunch of Apple Fritter Timbits, please! Yeah, I know, that’s quite a lot of sugar… but I’m just so hungry! Wait, what? You have no idea what I’m even talking about?!
Unless you’re not from Canada, then I’m not surprised. You have just outed yourself as someone who does not possess the (highest possible) qualifications for ordering coffee and donuts at the one and only Tim Hortons restaurant in Canada. No need to worry though! We’ve found a fun place where you can learn all you need to know in case you do happen to pass by a Tim Hortons restaurant. Welcome to Lots Of Donuts60! (ea)
11. 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 practical days that will help you become a better front-end expert, today.
Here are a couple of practical, hands-on workshops you may want to consider attending:
- RWD for the Photoshoppian62 with Dan Rose (NYC),
- CSS Architecture63 with Jonathan Snook (NYC),
- Responsive Email Newsletters64 with Fabio Carneiro (NYC),
- Clever RWD Tricks And Techniquess65 with Vitaly Friedman (Karlsruhe, DE).
Or, if you’d like to run an in-house workshop at your office, feel free to 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), Shavaughn Haack (sh), Kristina Vogt (kv), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).
- 1 https://www.smashingmagazine.com/the-smashing-newsletter/
- 2 http://alistapart.com/article/creating-style-guides
- 3 https://www.smashingmagazine.com/2014/05/14/responsive-images-done-right-guide-picture-srcset/
- 4 http://timkadlec.com/2014/05/dont-wait-on-responsive-images/
- 5 https://developers.google.com/speed/spdy/
- 6 http://caniuse.com/spdy
- 7 http://zomigi.com/blog/leveling-up-with-flexbox/
- 8 http://filamentgroup.com/lab/artifact-austin-svg-workflow.html
- 9 http://jakearchibald.com/2014/service-worker-first-draft/
- 10 http://status.modern.ie/
- 11 https://www.smashingmagazine.com/2013/06/25/media-queries-are-not-the-answer-element-query-polyfill/
- 12 https://twitter.com/hashtag/smsolve?f=realtime&src=hash
- 13 #a1
- 14 #a2
- 15 #a3
- 16 #a4
- 17 #a5
- 18 #a6
- 19 #a7
- 20 #a8
- 21 #a9
- 22 #a10
- 23 #a11
- 24 http://bradfrostweb.com/blog/post/atomic-web-design/
- 25 http://danielmall.com/articles/rif-element-collages/
- 26 http://www.edenspiekermann.com/blog/typesetting-your-css-objects
- 27 http://www.edenspiekermann.com/blog/typesetting-your-css-objects
- 28 http://next.fontshop.com/styleguide/
- 29 http://next.fontshop.com/styleguide/globals
- 30 http://next.fontshop.com/styleguide/objects
- 31 http://next.fontshop.com/styleguide/modules
- 32 http://gelobi.org/griddify/
- 33 http://gelobi.org/griddify/
- 34 https://github.com/pixana/griddify
- 35 http://24ways.org/2010/speed-up-your-site-with-delayed-content/
- 36 http://24ways.org/2010/speed-up-your-site-with-delayed-content/
- 37 http://ha17.com/768-remember-secure-passwords-create-a-password-pattern/
- 38 http://ha17.com/768-remember-secure-passwords-create-a-password-pattern/
- 39 http://www.troyhunt.com/2011/07/science-of-password-selection.html
- 40 http://frankchimero.com/blog/suggestions-for-speakers/
- 41 http://markboulton.co.uk/journal/speakingtips
- 42 http://frankchimero.com/blog/suggestions-for-speakers/
- 43 http://unstoppablerobotninja.com/entry/speaking-pack-a-plan/
- 44 http://shouldiuseacarousel.com/
- 45 http://bradfrostweb.com/blog/post/carousels/
- 46 http://weedygarden.net/2013/01/carousel-stats/
- 47 http://usabilitypost.com/2014/05/24/the-scroll-up-bar/
- 48 http://usabilitypost.com/2014/05/24/the-scroll-up-bar/
- 49 http://codepen.io/hkfoster/pen/zulGs/
- 50 http://wicky.nillia.ms/headroom.js/
- 51 http://mac.tutsplus.com/tutorials/productivity/take-control-of-your-macs-clipboard/
- 52 http://mac.tutsplus.com/tutorials/productivity/take-control-of-your-macs-clipboard/
- 53 http://msdn.microsoft.com/en-us/library/aa259912(v=vs.60).aspx
- 54 http://guides.macrumors.com/Keyboard_shortcuts
- 55 http://www.ngenworks.com/blog/250-buzzwords-we-love-to-hate
- 56 http://www.ngenworks.com/blog/250-buzzwords-we-love-to-hate
- 57 http://www.thedayscolor.com/#info
- 58 http://www.thedayscolor.com/#info
- 59 http://lotsofdonuts.com/
- 60 http://lotsofdonuts.com/
- 61 https://www.smashingmagazine.com/workshops/
- 62 https://shop.smashingmagazine.com/smashingconf-ny-workshop-dan-rose-resonsive-photoshoppian.html
- 63 https://shop.smashingmagazine.com/smashing-conference-new-york-workshop-jonathan-snook-smacss.html
- 64 https://shop.smashingmagazine.com/smashingconf-ny-workshop-fabio-carneiro-newsletter-design.html
- 65 https://shop.smashingmagazine.com/smashing-workshop-friedman-responsive-design-karlsruhe.html
Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.