Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Smashing Newsletter: Issue #177

This newsletter issue was sent out to 231,990 newsletter subscribers on Tuesday, March 7th 2017.

Editorial

Finally, it’s showtime! Next Thursday, on March 16th at 2 PM CET, we’ll be launching an open public beta of Smashing Magazine’s brand new redesign — with a new design, new architecture, new setup, and new… well, pretty much everything else! At the time of writing, we still have 72 open GitHub issues, so obviously not everything will be working as expected, but we’d sincerely appreciate your feedback early on, so we can spot and smash obscure bugs before the release later this year.

Sneak preview of the upcoming SmashingMag redesign1
A sneak peek2 of the open beta version coming up next week.

Now, it’s been a very long 18-month journey, with truly remarkable, talented and passionate people involved: art-directed by art directed by Dan Mall3, implemented by Sara Soueidan4, refined by Ilya Pukhalski5 and architected by Mat Billmann6, with initial creative explorations by Andrew Clarke7 and minor perks from yours truly.

Beware: the new design will feature a good number of (illustrated) cats (seriously), and some things might be slightly unusual or unexpected! We can hardly wait to hear your feedback… ah, and feel free to break everything — but do let us know what you broke! ;-)

Thank you for your time, and happy testing!
– Vitaly (@smashingmag)

Table of Contents

  1. A Deep Dive Into A Not-So-Simple CSS Font Metrics8
  2. Lessons Learned From Designing A Banking Chatbot9
  3. Taking Your Sketch Skills To The Next Level10
  4. Transforming Words Into The Shapes Of Their Meanings11
  5. Protips That’ll Shed A Light Into The Dark Corners Of CSS12
  6. Lunacy: A Free Sketch Viewer For Windows13
  7. Is Our Design Process Broken?14
  8. Resources For Learning CSS Grid Layout15
  9. Upcoming Smashing Workshops16
  10. New On Smashing Job Board17
  11. Smashing Highlights (From Our Archives)18
  12. Recent Articles On Smashing Magazine19

201. A Deep Dive Into A Not-So-Simple CSS Font Metrics

Some things seem so simple that it’s almost shocking to find out they actually aren’t. Font metrics are such a thing. Take line-height and vertical-align — easy, right? Well, not quite. The seemingly simple CSS properties are actually a lot more complex as you would have thought. Vincent De Oliveira even goes so far to claim that they maybe are the hardest ones21 as they have a major role in the set up of one of the fundamentals of CSS: inline formatting context.

A Deep Dive Into A Not-So-Simple CSS Mechanism: Font Metrics22

The root of the problem lies in the fact that metrics like font-size: 100px and line-height: 1 are relative values that depend on the font file. In fact, when you compare the 1,059 Google Web Fonts that are available, around 95% have a computed line-height ranging from 0.618 to 3.378, as Vincent points out. To help us understand the entire thing a bit better, his article dives deep into the not-so-simple CSS mechanism23. But beware, even he comes to the conclusion that we can’t easily set font metrics with CSS. There is a related future spec that might change that someday (the Line Grid Module24), until then, we’ll have to continue hacking our way around. (cm)

252. Lessons Learned From Designing A Banking Chatbot

A chatbot for banking. What could it look like? With ten years experience in developing transactional systems for the biggest banks in Poland, the team behind the product design and communications agency K2 Internet took on the challenge and created K2 Bank26, a concept for a conversational online banking system. Its goal: catering for a much simpler and intuitive experience as the one that banking interfaces usually provide. One that adds some personality, friendliness and humor to the otherwise stiff business that money is. Without losing any of its seriousness, of course.

BankBot27

What came out of it is BankBot, a friendly little robot character that assists the user in their financial business. How much thought was put into crafting the experience is described in detail by Maciej Lipiec28, User Experience Director at K2. And, well, their takeaways and lessons learned along the way are precious for anyone who ever played with the thought of building a chatbot.

At the core is the insight that a good conversational UI is not a simple adaptation of your forms with a bot asking the questions. It requires more — smart defaults are, for example, an approach that K2 took with their chatbot. But it’s also about finding the right balance when it comes to the question how proactive the bot should be. “Treat the users with respect and try to be helpful, and it can be a beginning of a great human-robot friendship,” as Maciej Lipiec sums the challenge up nicely. A good read. (cm)

293. Taking Your Sketch Skills To The Next Level

Sketch offers a wealth of features that are bound to make designing for an ever-changing device landscape as intuitive as it has never been before. However, as simple as Sketch might seem compared to the feature-loaded Photoshop, there certainly are some hidden tricks and features that you probably haven’t discovered yet but which could spare you a lot of time. To enhance your Sketch workflow, Jon Moore recently shared eight of those small but mighty Sketch tips and tricks30. Among other things on creating resizable image captions, customizing typography and replacing a shape fill. Handy!

Sketch Tips And  Tricks31

Now, have you ever considered using Sketch to create SVG icons? If you plan to do so, Anthony Collurafici has got your back32. He wrote up all the essential steps you’ll need to take to successfully organize, manage and export your icons. As a little bonus, the tutorial also focuses on monochrome icons that can be tinted dynamically. It’s the small details like these that help you get your workflow right.

Last but not least, two plugins that are bound to make your Sketch workflow even smoother: The Content Sync Plugin33 syncs your text content with Google Spreadsheets, so you can easily share, iterate and manage your content without needing to copy and paste updates. Stacks34, on the other hand, could fundamentally change the way we layout in Sketch by applying Flexbox to Sketch — without using CSS. (cm)

354. Transforming Words Into The Shapes Of Their Meanings

Let’s face it: alphabets are the first challenge we face when trying to learn a new language. Well, what better way is there than to actually see how the alphabet is used when trying to pronounce certain words. Let’s take Arabic, for example. The illustration below shows a word that consists of only three letters from the Arabic alphabet (k, l and b) and obviously means “dog”.

Arabic Lettering36

So know we all know that “kalb” means “dog” in Arabic! ;-) Thanks to Mahmoud Tammam from Alexandria, Egypt, we now have an impressive list of 20 Arabic words37 that have all been transformed into the shape of their meanings. A beautiful and easy way to learn Arabic, and we hope to see more of this type of artwork for other languages, too! (il)

385. Protips That’ll Shed A Light Into The Dark Corners Of CSS

CSS can sometimes resemble a bottomless pit. Just when you think you know exactly how to master it, you run into a situation that requires a skill or trick you haven’t been aware of yet. How should you go about creating a box with an intrinsic ratio, for example? What’s the “Lobotomized Owl Selector” all about? And is it possible to use attribute selectors with empty links? Luckily, fellow web dev Matt Smith caters for answers to these burning CSS questions — in his “CSS Protips39” list.

CSS Protips40

“CSS Protips” is a collection of, well, 21 CSS protips — ranging from hiding auto-play videos that aren’t muted to setting font-size on form elements for a better mobile experience. The good thing: You don’t need to dig your way through extensive explanations to find the solution you’re looking for but get a short and concise answer to your question, along with a demo of how it works. The tips are compatible with current versions of all major browsers plus IE11 and are available in Spanish, French, Italian, Portuguese, Russian, Japanese, and Chinese. Neat! (cm)

416. Lunacy: A Free Sketch Viewer For Windows

If you are a Windows user in a team full of Mac enthusiasts, you’ve probably spent some time with one of those impossible-to-open Sketch files before. Relief now comes from Icons8. Their Sketch viewer Lunacy42 does not only provide a convenient way to open Sketch files on Windows, but also has some handy features for HTML and CSS coding on board.

Lunacy43

Lunacy works with most .sketch files, be it text, raster images, and even gradients and shadows. And if that’s not enough great news already, some nice little details are bound to simplify your work further. The “Copy CSS” feature which allows you to copy the CSS of any object with just one click, is one of them, for example. Lunacy can be downloaded for free, however, please keep in mind that the tool is still in its alpha phase, so you might stumble across bugs along the way. If you do, don’t hesitate to report them, and the folks at Icons8 will be sure to iron them out. (cm)

447. Is Our Design Process Broken?

In times when we all embrace the fluidity of the web, we are still relying on tools that haven’t changed a lot in the past three decades. We’ve moved away from designing static pages to creating systems of components, on the one hand, but the tools we use, on the other hand, be it Illustrator, Sketch or Figma, still press our thoughts and ideas into the constraints of fixed canvases. A fact that made Viljami Salminen chase for answers: What could a contemporary design process look like?45

On Design Tools And Processes46

Viljami advocates for breaking out of the silos we created, to stop drawing a strict line between “designer” and “developer” and become comfortable with sketching out our ideas in code instead, or at least work closely with developers to achieve that. Making this switch will not only facilitate component thinking but also help us put content over form. After all, design is how it works and not just what it looks like. Thought-provoking. (cm)

478. Resources For Learning CSS Grid Layout

CSS Grid has the makings to change the way we lay out — major page areas just like small user interface elements. But where to start if you want to get to grips with the concept? Jen Simmons recently compiled a list of learning resources48 on all things CSS Grid. Her aim is to share only the best work. No simple introductions but the real nuts and bolts to get things right.

Learn CSS Grid49

In the list you’ll find examples of what Grid can do, demos, tutorials, courses, tools, talks, and cheatsheets. Things you need to know when hand-coding a layout, how to use CSS Grid even when it’s not supported by 100% of browsers, and its benefits over Flexbox. There’s a lot to learn and discover, even if you already have a good knowledge of the topic. One for the bookmarks. (cm)

509. Upcoming Smashing Workshops

With so many techniques, tools, style guides, 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 classes are all about: practical front-end and RWD workshops that will help you become better front-end developers and designers, today.

Smashing Public Workshops51

Workshops at SmashingConf SF 2017 — Apr 3

Workshops at SmashingConf SF 2017 — Apr 6

Workshops at SmashingConf NYC 2017 — June 12

Workshops at SmashingConf NYC 2017 — June 15

Our Public Workshops

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.com71 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!

7210. New On Smashing Job Board

Here are the recent job openings published on our Smashing Job Board73:

  • Product Designer74 at Hotjar (Remote, Timezones between UTC-2 and UTC+4)
    “We are looking for an ambitious and driven product designer who is passionate about creating engaging, consistent and memorable experiences.”
  • Senior Web Developer75 at Wire (Berlin, Germany)
    “We are looking for a motivated, highly technical Senior Web Developer who loves programming with the latest technologies and enjoys building appealing web interfaces.”
  • Technical Writer76 at The American Institutes for Research (Washington)
    “We are looking for a technical writer who will work collaboratively with software developers, testers, project managers and the communications team to develop plain-language guides for teachers and administrators.”

7711. Smashing Highlights (From Our Archives)

8112. Recent Articles On Smashing Magazine

Design Articles

Coding Articles

Inspiration, Freebies, Misc.

Footnotes

  1. 1 http://provide.smashingmagazine.com/meow-in-large-opt.png
  2. 2 http://provide.smashingmagazine.com/meow-in-large-opt.png
  3. 3 https://twitter.com/danmall
  4. 4 https://twitter.com/SaraSoueidan
  5. 5 https://twitter.com/pukhalski
  6. 6 https://twitter.com/biilmann
  7. 7 https://twitter.com/Malarkey
  8. 8 #a1
  9. 9 #a2
  10. 10 #a3
  11. 11 #a4
  12. 12 #a5
  13. 13 #a6
  14. 14 #a7
  15. 15 #a8
  16. 16 #a9
  17. 17 #a10
  18. 18 #a11
  19. 19 #a12
  20. 20 #
  21. 21 http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
  22. 22 http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align/
  23. 23 http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
  24. 24 https://drafts.csswg.org/css-line-grid/
  25. 25 #
  26. 26 https://chatbotsmagazine.com/what-we-learned-designing-a-chatbot-for-banking-2dd2c51d7c2c#.jo221me6j
  27. 27 https://chatbotsmagazine.com/what-we-learned-designing-a-chatbot-for-banking-2dd2c51d7c2c#.jo221me6j
  28. 28 https://chatbotsmagazine.com/what-we-learned-designing-a-chatbot-for-banking-2dd2c51d7c2c#.jo221me6j
  29. 29 #
  30. 30 https://medium.com/ux-power-tools/i-didnt-know-sketch-could-do-that-182f2f2d811e#.5puug1hlf
  31. 31 https://medium.com/ux-power-tools/i-didnt-know-sketch-could-do-that-182f2f2d811e#.5puug1hlf
  32. 32 https://medium.com/sketch-app-sources/preparing-and-exporting-svg-icons-in-sketch-1a3d65b239bb#.foligmg1n
  33. 33 https://www.contentsync.io/home
  34. 34 https://medium.com/sketch-app-sources/auto-layout-introducing-stacks-flexbox-for-sketch-c8a11422c7b5#.9dl6qwhs9
  35. 35 #
  36. 36 https://www.behance.net/gallery/33828638/-Arabic-Letters
  37. 37 https://www.behance.net/gallery/33828638/-Arabic-Letters
  38. 38 #
  39. 39 https://github.com/AllThingsSmitty/css-protips#consistent-vertical-rhythm
  40. 40 https://github.com/AllThingsSmitty/css-protips#consistent-vertical-rhythm
  41. 41 #
  42. 42 https://icons8.com/lunacy
  43. 43 https://icons8.com/lunacy
  44. 44 #
  45. 45 https://viljamis.com/2017/design-tools-processes/
  46. 46 https://viljamis.com/2017/design-tools-processes/
  47. 47 #
  48. 48 http://jensimmons.com/post/feb-27-2017/learn-css-grid
  49. 49 http://jensimmons.com/post/feb-27-2017/learn-css-grid
  50. 50 #
  51. 51 https://www.smashingmagazine.com/smashing-workshops/#public-workshops
  52. 52 https://shop.smashingmagazine.com/products/workshop-nathan-curtis-SF-2017
  53. 53 https://shop.smashingmagazine.com/products/tim-kadlec-http2-performance
  54. 54 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-ux-design-SF-2017
  55. 55 https://shop.smashingmagazine.com/products/workshop-chris-holst-SF-2017
  56. 56 https://shop.smashingmagazine.com/products/workshop-sarah-drasner-SF-2017
  57. 57 https://shop.smashingmagazine.com/products/workshop-rachel-andrew-sf-2017
  58. 58 https://shop.smashingmagazine.com/products/workshop-nadieh-bremer-sf-2017
  59. 59 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-rwd-SF-2017
  60. 60 https://shop.smashingmagazine.com/products/workshop-brad-frost-NY-2017
  61. 61 https://shop.smashingmagazine.com/products/workshop-yuko-shimizu-NY-2017
  62. 62 https://shop.smashingmagazine.com/products/workshop-horace-dediu-NY-2017
  63. 63 https://shop.smashingmagazine.com/products/workshop-umar-hansa-NY-2017
  64. 64 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-ux-NY-2017
  65. 65 https://shop.smashingmagazine.com/products/workshop-eric-reiss-NY-2017
  66. 66 https://shop.smashingmagazine.com/products/workshop-joe-leech-NY-2017
  67. 67 https://shop.smashingmagazine.com/products/workshop-sara-soueidan-NY-2017
  68. 68 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-rwd-NY-2017
  69. 69 http://fitc.ca/presentation/workshop-smart-responsive-design-patterns/
  70. 70 http://www.webdirections.org/respond/
  71. 71 mailto:vitaly@smashingconf.com
  72. 72 #
  73. 73 http://jobs.smashingmagazine.com/
  74. 74 http://jobs.smashingmagazine.com/j/Product-Designer/2472621
  75. 75 http://jobs.smashingmagazine.com/j/Senior-Web-Developer/2471003
  76. 76 http://jobs.smashingmagazine.com/j/Technical-Writer/2472724
  77. 77 #
  78. 78 https://www.smashingmagazine.com/2015/08/from-russia-with-love-behind-the-scenes-of-the-kremlin-ru-responsive-redesign/
  79. 79 https://www.smashingmagazine.com/2010/05/the-beauty-of-typography-writing-systems-and-calligraphy-of-the-world/
  80. 80 https://www.smashingmagazine.com/2011/06/the-story-of-scandinavian-design-combining-function-and-aesthetics/
  81. 81 #
  82. 82 https://www.smashingmagazine.com/2017/02/art-calligraphy-getting-started-lessons-learned/
  83. 83 https://www.smashingmagazine.com/2017/02/shadows-blur-effects-user-interface-design/
  84. 84 https://www.smashingmagazine.com/2017/02/design-with-real-data-sketch-using-craft-plugin/
  85. 85 https://www.smashingmagazine.com/2017/03/using-social-media-user-research/
  86. 86 https://www.smashingmagazine.com/2017/02/a-detailed-introduction-to-webpack/
  87. 87 https://www.smashingmagazine.com/2017/03/code-complying-with-legal-mandates/
  88. 88 https://www.smashingmagazine.com/2017/03/inspiring-illustrations-bright-colors-cool-patterns/
  89. 89 https://www.smashingmagazine.com/2017/02/hibernation-time-is-over-inspiring-desktop-wallpapers-to-fuel-your-creativity/
  90. 90 https://www.smashingmagazine.com/user-experience-revolution/
  91. 91 https://www.smashingmagazine.com/2017/02/web-development-reading-list-171/
  92. 92 https://www.smashingmagazine.com/2017/03/web-development-reading-list-172/
  93. 93 https://www.smashingmagazine.com/2017/03/world-wide-web-not-wealthy-western-web-part-1/

↑ Back to top Tweet itShare on Facebook

The Smashing Editorial 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!

Comments are closed.

↑ Back to top