About The Author

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 … More about The Smashing Newsletter Team

Smashing Newsletter: Issue #187

This newsletter issue was sent out to 227,579 recipients newsletter subscribers on Tuesday, August 1st 2017.


One of the very first things to do when travelling abroad is buying a SIM card to stay connected. But what if you didn’t? Or even better — what if you don’t take a phone with you in the first place? As an experiment, after crashing a phone’s glass, I decided to spend 14 days of my travelling abroad without a mobile phone altogether. No access to emails on the go, no tweets, no Facebook, no nothing. That’s all reserved for laptop-only experiences in early mornings or evenings.

The results so far are quite surprising. Without a phone, you have to be more deliberate in your planning and your choices, and you have to plan ahead of time not to get lost. You also have to find a map, and an alarm clock, and you have to train your writing skills to take notes quickly on the go. Rather than picking recommendations from tourists online, I’ve been asking for recommendations from locals offline. As a result, I spent more time interacting directly with locals whom I wouldn’t have met otherwise.

Without a permanent connection or VPN access, it turned out to be difficult to work on the go, but I must admit that working sessions have become much more focused and considerate. Also, interestingly enough, with a connection being flaky most of the time, it’s surprising how slow most websites actually are. Having a 500 MB limit for 3 days is barely enough to purchase tickets or even look up destinations — even in data-saving browser mode. On slow connections, Facebook is remarkably slow, but Twitter is surprisingly fast.

Most importantly, staying without a phone has been a liberating experience. As Craig Mod put it, you might get bored without the phone, but boredom is critical to noticing and whitespace is critical for thinking. Almost automatically you start paying more attention to little random things happening around you, living in the moment and actually experiencing it fully.

My experiment is only halfway through, and I’ll share more of my findings mid-August. I think crashing the screen of that phone was one of the best things I’ve done for myself in years.

Stay disconnected,
Vitaly (@smashingmag)

Table of Contents

  1. Complex Grids Without Complex Calculations
  2. Only 11 Weeks Left For SmashingConf Barcelona!
  3. Version Control For Sketch
  4. Best Practices For Designing A Chatbot
  5. How To Become A Pro Remote
  6. Make Your Workday More Productive
  7. Taking Your Color Schemes To The Next Level
  8. FOUT Without Any JavaScript
  9. A University In Your Pocket
  10. Upcoming Smashing Workshops
  11. New On Smashing Job Board
  12. Most Popular Articles In July
  13. Most Recent Articles On Smashing

[](#)1. Complex Grids Without Complex Calculations

Did you note that CSS Grid has been shipped with a new CSS unit called the fr (fraction) unit? The unit makes it possible to quickly slice the grid up into proportional columns or rows. Robin Rendle explains how it works.


The fr unit can be used with %, px or em when defining grids to set columns to one fraction without causing any overflow on the x-axis, and thus preventing horizontal scrolling. Note that you can’t use calc() in combination with the fr unit, e.g. calc(1fr - 2em) is not allowed. (cm)

[](#)2. Only 11 Weeks Left For SmashingConf Barcelona!

The web is constantly changing, and it’s easy to fall behind. So, how do you stay on track? Where can you go to optimize your websites’ performance? How about SmashingConf Barcelona! On October 17th and 18th, we’ll be returning to the Palau de la Música Catalana with two packed days of hands-on sessions by some of the most respected members of our industry.

SmashingConf Barcelona

This conference will focus on Design Systems, SVG techniques, performance, accessibility, and user experience, and as always with SmashingConf, will contain loads of useful takeaways. Tickets are available now. We can’t wait to meet you! (cm)

[](#)3. Version Control For Sketch

Devs have Git for version control, and designers? Well, Git. At least if you’re working with a Sketch version not older than 43 and pair it with the version control tool Abstract, as Marie L. describes on uxdesign.cc.

Sketch now allows us to read the underlying structure of a .sketch file by unzipping its content. In it, you’ll find JSON files with details about the position, appearance, contents, and names of each layer, group, and page. And that’s exactly where Abstract comes in.

Abstract uses this information to enrich your design workflow with the power of Git’s version control, so that you and your team members can work on your own local versions of a file, then merge them together without creating duplicates. Tracking changes in files, recording their history, opening up branches with different statuses, and a better review process — Abstract is a promising solution to (finally!) make the dream come true for designers. (cm)

[](#)4. Best Practices For Designing A Chatbot

Chatbots are changing the way we design experiences, and this means that we have to rethink how we make our design decisions. It’s not so much about what users see anymore, but what the conversation with the bot feels like. To get you fit for the challenges that conversational UIs bring along, Ish Jindal, founder of the chatbot building platform Tars, wrote up his lessons learned and best practices from designing chat experiences.

Chatbot Best Practices

Which role do message delays play when designing a bot? What’s the optimal message length? And how does rich media content like GIFs and memes influence the conversation? These are the questions that this three-part article series attempts to answer. Good pointers when you want to start building your first chatbot. (cm)

[](#)5. How To Become A Pro Remote

No doubt, working remotely has its advantages, but there are also quite some hurdles you need to overcome in order to make collaboration between team members (who are miles or even time zones apart) fruitful and efficient. To give your remote team a boost, the folks at Hanno put together a Remote Starter Kit jam-packed with tools that have proved themselves invaluable when working together as a team of 10 designers who are spread all across the globe.

Remote Starter Kit

In the starter kit you’ll find useful apps, tried and tested processes (for weekly updates, for example), and tools to connect the team and facilitate discussions, help brainstorm ideas, or simply foster the team spirit. Handy little helpers to keep your remote team happy. (cm)

[](#)6. Make Your Workday More Productive

What tasks does your job include? And how do you prioritize them? There probably isn’t an easy answer to these questions, especially if your job requires you to switch contexts frequently. To help prioritize your work better and bring order to the task-switching chaos, Rian van der Merwe shares a useful little tip: create a mind map to gain a better understanding of what you’re doing.

Mind Mapping To Clarify Your Job

The idea is to create a detailed map of all the things you do during a particular week, so you can identify and prioritize your focus areas. By doing this, you’ll also notice where your work overlaps with that of your team members and where you might maybe need to scale back. An eye-opening experience that is bound to make your workday a lot more productive. (cm)

[](#)7. Taking Your Color Schemes To The Next Level

You’re looking for a quick way to create color palettes and get some fresh color inspiration as well? Then be sure to check out Coolors. The browser tool lets you create color palettes as easily as pressing the spacebar on your keyboard.


In fact, just press the spacebar, and Coolors will present you a random color palette. To gain more control over the result, you can also lock individual colors of your palette to pair them with matching colors. Or you pick up starting colors from your images and get the perfect combination automatically. A nice bonus: To prevent bad surprises when using your palette in an actual project, the tool offers a mode in which you can see what the palette will look like to color-blind users. Once you’re happy with the result, you can export the palette in a number of formats (PNG, PDF, SCSS, or SVG) or just copy the URL to share it.

Speaking of color schemes. Have you already heard of the new Sketch plugin Chain? It lets you create dynamic color relations in Sketch with just one click. All you need to do is select the layers to chain, the reference color and the transformations you want to apply, and — ta-daa — you get perfectly harmonious color relations. Nice! (cm)

[](#)8. FOUT Without Any JavaScript

With the recent Chrome 60 stable release, we got a small step closer to support for font-display. Why we might want to have it? Well, by adding font-display: swap to your @font-face block, you can opt-in to FOUT; font-display: fallback or font-display: optional can be used if you consider web fonts unnecessary to the design, as Zach Leatherman describes.


Only one single CSS descriptor to handle FOUT without any JavaScript polyfill and without the need to modify the font itself through subsetting or otherwise, font-display has the makings to make it happen — if browser support will become more widespread someday. Apart from Chrome 60+, Opera versions 47 and newer currently support the desriptor, and it’s in progress and behind a flag on Firefox Platform Status. As support is still very limited today, font-display by itself isn’t a sufficient solution yet. However, it’s still a good idea to plan ahead and add it to your font-face blocks already today. (cm)

[](#)9. A University In Your Pocket

To get better at what we do and improve ourselves further, there’s one credo we should always keep in mind: never stop learning. So why not take a bit of time aside each week to learn something new? A programming language you don’t master yet, some new business skills maybe, or even a foreign language? If you’re thirsty for knowledge, Class Central certainly has something to keep you busy.

Class Central

The platform lets you search online courses from over 700 universities around the world on all kinds of subjects — from web development, art and design, marketing, computer and data science to engineering, science, humanities, and many more, as well as lectures from renowned companies such as Google and Microsoft. The courses are taught mainly through short video lectures that you can watch whenever and wherever you want. Discussion forums, assignments, online quizzes and exams help you strengthen your newly acquired skills. Taking the courses is free, costs for receiving graded assignments or a certificate at the end of the course vary depending on the provider. (cm)

[](#)10. Upcoming Smashing Conferences

We create practical, hands-on conferences highlighting techniques, strategies and design patterns used in real-life products by experienced designers and developers. No fluff, no theory: just 2 days packed with practical front-end and UX techniques. Coming up: SmashingConf Freiburg, Germany (Sep 11–12) and SmashingConf Barcelona, Spain (Oct 17–18). That — and we love cats, too.

SmashingConf Freiburg 2017

SmashingConf Freiburg, Germany (Sep 11–12)

SmashingConf Barcelona 2017

SmashingConf Barcelona, Spain (Oct 17–18)

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

[](#)11. New On Smashing Job Board

Here are some of the most recent job openings at Smashing Jobs:

  • Project Manager — Digital, Websites, Apps at Morley (Saginaw)
    “We’re looking for someone to lead digital projects from concept to completion and can communicate via both marketing speak and tech talk. If you understand these acronyms – HTML, CSS, CMS, API, FTP, SEO, – and you experience with formal project management methodologies, you could be a great fit for this position.”
  • Senior Graphic Designer at Verily Magazine (New York, New York)
    “Verily is currently looking for a full-time Graphic Designer to join our positive lifestyle editorial team. We’re a small, passionate and entrepreneurial team, which means you’ll have influence over every touch point our brand has, either through hands-on creation or creative oversight.”
  • React.js Developer at Moss Corporation (Cleveland, OH)
    “We are seeking a Front End Web Developer with advanced knowledge of React.js or other Component-based UI Architectures. The ideal candidate is motivated to combine the art of design with the art of programming.”
  • Designing The Perfect Date And Time Picker
    Not every date picker fits every interface, just like not every interface actually needs a date picker. But when a date picker is required, quite often it’s just a bit too tedious and annoying to specify that one date. So how can we do better?
  • “Why We Didn’t Use A Framework” (Case Study)
    When Nick Gauthier and his team set out to build MeetSpace (a video conferencing app for distributed teams), they had a familiar decision to make: What’s their tech stack going to be? In this case study, Nick shares why they avoided a front-end framework and decided to use vanilla JavaScript.
  • Designing The Perfect Accordion
    The Accordion is an immensely useful pattern for progressive disclosure — highlighting important details of a section and revealing more details upon a tap or click, if necessary. But how do you design the perfect accordion? The choice and position of the icon matters, and so does interaction design. A detailed run-down.

[](#)13. Most Recent Articles On Smashing

  • Designing The Perfect Slider
    More often than not, sliders are just a bit too difficult to use, require just a bit too much precision, are a bit too confusing to navigate and a bit too difficult to grab and move around. So what are the do’s and don’ts and things to keep in mind when designing one?
  • Progressively Enhancing CSS Layout: From Floats To Flexbox To Grid
    The CSS grid layout module is one of the most exciting developments since responsive design, and, naturally, the specification is one of the hot topics at meet-ups and conferences. But there’s still a good amount of uncertainty about using it. Manuel Matuzović addresses common questions.
  • The Missing Advice I Needed When Starting My Career
    Do you ever wish you had a time machine? Paul Boag does, but not for the usual reasons. He wants a time machine so he can go back and have a frank conversation with his younger self. The missing advice you might need when starting out.