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 #183

This newsletter issue was sent out to 228,882 newsletter subscribers on Tuesday, June 6th 2017.

Editorial

How difficult could it be to design the perfect accordion? For example, when it comes to designing one for collapsed table rows, cards or even for navigation in a UI? Well, it’s all about looking into all of those fine details of the design with an intent to match users’ expectations. Since there is no general convention about the design and interaction of an accordion, and accordions look and work differently across sites, some of your users will be confused about your experience no matter what you do.

An accordion on The Guardian. A mobile view.1
An accordion on The Guardian2. The entire bar acts as an expansion, with a chevron icon indicating the direction of the expansion. Every section also has a “Home” link, highlighted with an icon.

Sometimes, a click on a particular category can lead directly to the category itself, while sometimes a tap on an empty space within the accordion’s bar does exactly nothing, so some users will almost instinctively click on the icon rather than on anything else. Obviously, there are still many things to consider:

  • How do you style a category’s title?
  • How do you indicate collapsed or expanded states, and what icons do you use to indicate these states?
  • Where exactly do you place the icon, and what happens if users click on a category’s title, empty space and the icon?
  • Should an expanded section collapse automatically?
  • Should users be scrolled to the top when an accordion is expanded?
  • Should you also have a “collapse all” or “open all” link or button?

While it’s in the nature of an accordion to collapse one card while another is being opened, it might be better to give users full control and leave the card open until the user chooses to close it. The same goes for not scrolling the navigation to the top whenever an accordion is expanded.

So what do we do then? Simple. Have the entire category’s title, empty space, as well as icon act as expansions. Use an icon that indicates the direction of an expansion (chevron) or at least the expansion (+). Change the icon when the state is toggled to indicate collapsing (reversed chevron, - or x). Since a tap on the category’s title acts as an expansion, add a link to the category in the list of items within the collapsible card. Place an icon on the left or on the right, and make sure it’s large enough for comfortable tapping (at least 44×44px). That’s probably the best we can do to match users’ expectations. In case they aren’t met, all navigation options are still there and can be accessed without an extra hassle or annoyance.

Ah, and by the way, I’ll be highlighting these issues and a couple of other patterns in my workshop at SmashingConf New York3 in the next week — I would love to see you there!

Table of Contents

  1. Tools For A Smoother HTML Email Workflow4
  2. Lean And Accessible Controls5
  3. Insights Into Freelancing6
  4. Taking A Closer Look At WebView7
  5. Tips For Working From The Road8
  6. Customer Support With Slack9
  7. Little Moments Of Happiness10
  8. Daily Video Goodness11
  9. Upcoming Smashing Workshops12
  10. New On Smashing Job Board13
  11. Smashing Highlights (From Our Archives)14
  12. Recent Articles On Smashing Magazine15

161. Tools For A Smoother HTML Email Workflow

“Technically it is front-end development, but it almost feels like a bizarro alternate universe.” That’s how Chris Coyier describes HTML Email17, and, well, if you ever had to code an email yourself, you’ll probably agree that getting things right is not that easy. Not only are there hundreds of email clients to consider, but we also need ponder about simple stuff like padding or calc()18, and whether they’re supported at all. To make your HTML email workflow at least a bit smoother, Chris Coyier has now collected some helpful tools19 that are worth looking into.

The Tools of an HTML Email Workflow20

In Chris’ collection, you’ll find email templates to tinker with and build upon, UI builders that allow you to design and write emails without even touching any code, as well as sending tool APIs and testing tools. Inlining CSS tools are also on the list, even though inlining isn’t necessarily required anymore as most email clients finally support <style> blocks in the <head>. One for the bookmarks. (cm)

212. Lean And Accessible Controls

Style hooks, scripting, or images that need to be downloaded tend to make controls overly complex. But we can do better, as Adrian Roselli shows. He came up with a lean version of radio buttons and checkboxes22, and the best part is that they are not only simple and semantic, but also accessible.

Under-Engineered Custom Radio Buttons23

Adrian’s solution gets by with pure HTML and CSS only — no third-party libraries, images or scripting are involved. Relying on a simple markup of <input>, followed by <label>, keeps the styles simple, so if your CSS fails for some reason, you still have a fully functional, accessible field. Clever! (cm)

243. Insights Into Freelancing

What will the future of independent work look like? And where are we today? AND CO, an app that supports freelancers in managing their business, attempted to find out, and surveyed 300 independent workers25. The result: A better picture of what freelancing means today, a closer look at motivations, hurdles, and things that could be improved.

The Slash Workers26

An interesting finding strikes right at the beginning: Freelancing is a conscious choice: Only 6% of the surveyed people said they’re only doing it until a full-time opportunity comes along. Also, 95% are what the survey calls “slash workers”, people who specialize in more than one service and skill. Reasons for going independent include personal growth, flexibility, and freedom, and in fact, 68% said that their quality of life has improved since they took the step.

But it’s not all roses either. 43% of the participants are financially less stable as before, according to the study, and gender inequality also plays a role for freelancers. Every second woman earned less than $25,000 a year compared to 34% men (their chance of earning $150,000+ is 4.5× higher as for women), and an alarming 44% of all freelancers has been stiffed by a client before. For more insights, take a look at the survey. (cm)

274. Taking A Closer Look At WebView

We all had to deal with WebView at some point, and, in fact, the way it works is actually quite simple: You use common web technologies to build the app, and a minimal, chromeless browser then runs it on the user’s device. You can even use native APIs and, with the help of frameworks like Apache Cordova, use native resources on the device (the camera, for example).

28

If you want to dive deeper into WebView, Jen Looper wrote an article in which she explains what WebView is all about29 and how it allows you to use web technologies to craft a mobile app. If you’re especially interested in creating WebView-based Android applications, a comprehensive article in the Chrome Developer blog30 has got your back. It walks you through the process of creating a new project and offers tips for an efficient WebView workflow and for crafting pixel-perfect UIs. Worth looking into. (cm)

315. Tips For Working From The Road

Good work can be done from almost anywhere. It doesn’t take much more as a quiet spot, a stable WiFi connection, and you’re ready to go. If you’re travelling a lot, you probably already have a good sense of finding places to sit back and get some work done. However, sometimes a tip from a local or from fellow remote workers can guide you to the little gems you wouldn’t have discovered otherwise — a nice coffee shop with quiet corners, enough power sockets and stellar coffee, for example, or a library with comfy armchairs and great WiFi.

Workfrom32

To make sure you always find the best work-friendly spaces, no matter where you’re heading, Workfrom33 collects tips from over 1,250 cities and counting. A travel essential. But watch out, there’s a pitfall that could get in your way when working abroad: power plugs. Especially when the voltage and frequency used at your destination is different from the one your devices are using. So to prevent bad surprises, it’s a good idea to check if you’ll need a travel adapter or even a voltage converter34 before you hit the road. Better safe than sorry, right? (cm)

356. Customer Support With Slack

How do you handle communication with your customers or website visitors? Do you rely on email? Or maybe you have an extra app in place to do the job? Smallchat36 wants to make the undertaking more intuitive. By building upon a tool that a lot of us use already every day: Slack.

Smallchat37

The idea is to use Slack’s new threads feature to help you streamline all your conversations in one single support channel. No need to add an additional app to the game, just use what you’re already using. To do so, you simply add a customizable embed widget to your site, and it’ll update automatically. There’s no limit when it comes to the number of conversations, operators or customers that Smallchat can handle. If you want to give it a try, Smallchat is free to use. Pro features such as customizable auto-messages or exporting email contacts are available in paid plans. (cm)

387. Little Moments Of Happiness

Did you ever cool off a lion with a fan? It might sound weird, but, well, we did. And what can we say? The lion loved it! The refreshing breeze made his mane dance and brought a big smile to his face. Don’t believe it? Well, go ahead, and try for yourself39.

Moments of Happiness40

The lion is part of the WebGL project named “Moments of Happiness41“, which was brought to life by EPIC Agency. He and five of his animal friends — a sneezing dragon, a playful cat, a paranoid bird, a valorous rabbit and a mighty fish — are bound to put a smile to your face, too, as you interact with them. To breathe life into the odd yet lovable bunch, the experiments use Three.js and the GSAP Library. If you want to take a closer look under the hood, the source codes are available on Codepen42. Watch out, though: They are not fully optimized and might not work in some browsers or devices. (cm)

438. Daily Video Goodness

You’ve binge watched your favorite series and have run out of material? Or maybe you’ve always dreamt of making your own film? Then be sure to check out VOTD44. VOTD stands for “voted”, and presents the first daily awards for videos. Eye candy guaranteed.

VOTD45

The idea behind VOTD is that video makers submit their videos (anything less than 5 minutes), and an audience along with a judge vote on it based on innovation, idea, execution and design. Once the video has been in the nominees for a week, its score will be calculated and compared with the videos from the previous 30 days. The one that scores highest, will become the Video Of The Day. Among the videos, you’ll find a lot of music videos, but also commercials and short films that are full of creative ideas and stunning visuals. Inspiring! (cm)

469. 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 Workshops47

Workshops at SmashingConf New York — June 12

Workshops at SmashingConf New York — June 15

Workshops at SmashingConf Freiburg

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

6210. New On Smashing Job Board

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

  • Interactive Art Director / Team Lead64 at Prototype (Dubai, UAE)
    “We are looking for a interactive art director with the passion to tell stories, push digital boundaries and translate ideas into content, user interfaces and digital experiences.”
  • Senior Web/Graphic Designer65 at HeavenHR (Berlin, Germany)
    “We are looking for a Senior Web/Graphic Designer (m/f) to join us as soon as possible. The position is based in our office in Berlin’s Bergmannkiez. Please note that this is a full-time position.”
  • Full-Stack Developer66 at Casumo (Malta, Barcelona, Gibraltar or Remote)
    “We are currently looking to strengthen our Growth Team with our first Full-Stack Growth Engineer – a crossover profile combining an interest and flair of user behavior, UX research, rapid experiments and conversions with a strong and up-to-date knowledge of both frontend and backend languages.”

6711. Smashing Highlights (From Our Archives)

  • CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout68

    Layout on the web is hard. The reason it is so hard is that the layout methods we’ve relied on ever since using CSS for layout became possible were not really designed for complex layout.
  • True Lies Of Optimistic User Interfaces69

    The topic of optimistic UI design is only little addressed in the community. Frankly, the term itself is not even well defined. In this article, we will look at some examples as well as review its psychological background.
  • Taking The Pattern Library To The Next Level70

    No thorough conversation about the front end today can end without mention of pattern libraries. Sometimes a pattern library appears in the form of a living style guide, or as a design system, or as the outcome of an atomic design process, or as an all-knowing user interface framework.

7112. Recent Articles On Smashing Magazine

Design Articles

Coding Articles

Inspiration, Freebies, Misc.

Footnotes

  1. 1 https://theguardian.co.uk
  2. 2 https://theguardian.co.uk
  3. 3 https://smashingconf.com/schedule
  4. 4 #a1
  5. 5 #a2
  6. 6 #a3
  7. 7 #a4
  8. 8 #a5
  9. 9 #a6
  10. 10 #a7
  11. 11 #a8
  12. 12 #a9
  13. 13 #a10
  14. 14 #a11
  15. 15 #a12
  16. 16 #
  17. 17 https://css-tricks.com/tools-html-email-workflow/
  18. 18 https://stackoverflow.com/questions/33054654/is-calc-supported-in-html-email
  19. 19 https://css-tricks.com/tools-html-email-workflow/
  20. 20 https://css-tricks.com/tools-html-email-workflow/
  21. 21 #
  22. 22 http://adrianroselli.com/2017/05/under-engineered-custom-radio-buttons-and-checkboxen.html
  23. 23 http://adrianroselli.com/2017/05/under-engineered-custom-radio-buttons-and-checkboxen.html
  24. 24 #
  25. 25 https://www.and.co/slash-workers
  26. 26 https://www.and.co/slash-workers
  27. 27 #
  28. 28 http://developer.telerik.com/featured/what-is-a-webview/
  29. 29 http://developer.telerik.com/featured/what-is-a-webview/
  30. 30 https://developer.chrome.com/multidevice/webview/overview
  31. 31 #
  32. 32 https://workfrom.co/
  33. 33 https://workfrom.co/
  34. 34 https://www.power-plugs-sockets.com/
  35. 35 #
  36. 36 https://small.chat/
  37. 37 https://small.chat/
  38. 38 #
  39. 39 https://moments.epic.net/#lion
  40. 40 https://moments.epic.net/
  41. 41 https://moments.epic.net/
  42. 42 http://codepen.io/Yakudoo
  43. 43 #
  44. 44 http://votd.tv/
  45. 45 http://votd.tv/
  46. 46 #
  47. 47 https://www.smashingmagazine.com/smashing-workshops/#public-workshops
  48. 48 https://shop.smashingmagazine.com/products/workshop-brad-frost-NY-2017
  49. 49 https://shop.smashingmagazine.com/products/workshop-yuko-shimizu-NY-2017
  50. 50 https://shop.smashingmagazine.com/products/workshop-horace-dediu-NY-2017
  51. 51 https://shop.smashingmagazine.com/products/workshop-umar-hansa-NY-2017
  52. 52 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-ux-NY-2017
  53. 53 https://shop.smashingmagazine.com/products/workshop-eric-reiss-NY-2017
  54. 54 https://shop.smashingmagazine.com/products/workshop-joe-leech-NY-2017
  55. 55 https://shop.smashingmagazine.com/products/workshop-sara-soueidan-NY-2017
  56. 56 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-rwd-NY-2017
  57. 57 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-ux-freiburg-2017
  58. 58 https://shop.smashingmagazine.com/products/workshop-alla-kholmatova-freiburg-2017
  59. 59 https://shop.smashingmagazine.com/products/workshop-umar-hansa-freiburg-2017
  60. 60 https://shop.smashingmagazine.com/products/workshop-rachel-andrew-freiburg-2017
  61. 61 mailto:vitaly@smashingconf.com
  62. 62 #
  63. 63 http://jobs.smashingmagazine.com/
  64. 64 http://jobs.smashingmagazine.com/j/Interactive-Art-Director-Team-Lead/2496308
  65. 65 http://jobs.smashingmagazine.com/j/Senior-Web-Graphic-Designer-m-f-/2495834
  66. 66 http://jobs.smashingmagazine.com/j/Full-Stack-Developer-with-a-love-for-UX-and-Growth-Hacking/2495770
  67. 67 #
  68. 68 https://www.smashingmagazine.com/2016/11/css-grids-flexbox-and-box-alignment-our-new-system-for-web-layout/
  69. 69 https://www.smashingmagazine.com/2016/11/true-lies-of-optimistic-user-interfaces/
  70. 70 https://www.smashingmagazine.com/taking-pattern-libraries-next-level/
  71. 71 #
  72. 72 https://www.smashingmagazine.com/2017/06/designing-efficient-web-forms/
  73. 73 https://www.smashingmagazine.com/2017/05/long-scrolling/
  74. 74 https://www.smashingmagazine.com/2017/05/emotional-design-illustrations/
  75. 75 https://www.smashingmagazine.com/2017/05/chatbot-microsoft-bot-framework-luis-nodejs-part1/
  76. 76 https://www.smashingmagazine.com/2017/05/build-action-google-home-api-ai/
  77. 77 https://www.smashingmagazine.com/2017/05/robots-game-ios-fuzzy-logic/
  78. 78 https://www.smashingmagazine.com/2017/06/colorful-sceneries-posters-covers/
  79. 79 https://www.smashingmagazine.com/2017/05/desktop-wallpaper-calendars-june-2017/
  80. 80 https://www.smashingmagazine.com/2017/05/free-geometric-ui-icons-ego/
  81. 81 https://www.smashingmagazine.com/2017/06/web-development-reading-list-184/

↑ 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