Dear Friend,
When we think about selling anything online, we often refer to a few particular parts of the customer journey: mostly conversion in a checkout, or abandonment in a funnel. These parts are indeed critical, but we should keep tabs on the big picture, too.
The critical task of any e-commerce experience is larger than just checking out. We need to expose the right products with the right amount of detail, and ask for a minimal amount of effort in return. Plus, this needs to happen in the right order and at the right pace. That’s why we need to invest time not just in checkouts, but primarily in product listings, filtering and sorting options, search results, and error messages — but most importantly, in product pages.
Collecting all the critical details to decide on a purchase always feels like a challenge, full of obscure obstacles and walls of legalese. It massively slows down customers, and it massively hurts conversion. Instead, we could identify important details that customers care about and expose them prominently, on every product page. E.g. the final price in customer’s currency, fees, payment options, shipping times, delivery options, and the return policy.
Clarity always wins. We just need to figure out which details to expose, and how to expose them — and then test and measure its impact. You never know: it might have a much higher impact on conversion than any changes a checkout refinement might bring.
— Vitaly (@SmashingMag)
Table of Contents
1. Take Your Figma Workflow To The Next Level
Figma’s popularity is growing and with its popularity, the number of plugins, templates, and general tips and tricks that make working with the browser-based design tool even smoother is growing, too. If you’re a Figma user yourself (or are planning to become one), we came across some useful resources that are worth checking out.
One of them is “Awesome Figma Tips,” a collection of small but powerful tips to work faster in Figma, compiled by Trong Nguyen. If the design you’re working on is based on a design system, the Design System Manager plugin might come in handy. It lets you define or update design tokens in one single panel, right from Figma, and you’ll immediately see the changes cascading through your Figma design.
Breakpoints, on the other hand, is a plugin that brings resizable frames to the design tool to help you quickly resize to a breakpoint to create dynamic layouts. Last but not least, once your design is ready and you want to present it to your team or stakeholders, Templatery has got your back with free templates that you can use for your Figma presentations. Little timesavers that take your workflow to the next level. (cm)
2. Better, Faster, Smaller Image Placeholders
Perceived performance matters. So over the years, we’ve seen various techniques for lazy-loading images. As a website is being loaded, we display a skeleton screen with placeholders that reserve the width and height of the image; and as an image is coming through the network, we swap the placeholder with the actual image. Blurhash (see GitHub repo) achieves the same thing, but in a slightly more performance way.
The library takes an image, and returns a short string (20-30 chars) that represents the placeholder for this image. You can run the script in the back-end, and store the string along with the image. The client can then take the string, and decode it into an image that it shows while the real image is loading over the network. In fact, the string is short enough to be added as a field in a JSON object. Handy, and tiny. For the bookmarks! (vf)
3. SVG Squircicle Maker
There are squares, there are circles, and apparently, there are also squircicles! George Francis’s Squircley is a generator of organic shapes for any kind of visuals or background images. You choose the rotation, the scale, the “curvature” and the fill color, and the tool takes care of the rest.
The generator exports SVGs which they can be dropped straight into your HTML/CSS code, or used in your design application. Just a fun little application to use. If that’s not good enough, you can also use GetWaves to generate SVG waves, or Blobmaker to generate some fancy blobs. Happy experimenting! (vf)
From our sponsor
Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy
Earn your master’s degree online.
4. Full-Bleed Layout With CSS Grid
Line length is one of the keys to creating delightful reading experiences, especially for long-form text content. The standard solution to prevent lines from becoming too long and causing eye fatigue is a single fixed-width column in the center of the page with flexible columns framing it on each side. However, what might sound like a rather simple layout, can turn out to be quite aspirational.
The tricky part: You might not want all content to be constrained at all times and, instead, allow images, videos, or custom widgets to break free and fill the available width. Josh Comeau tinkered with the problem and found an elegant solution that enables super flexible full-bleed layouts thanks to CSS Grid. A fantastic example of what CSS Grid is capable of. (cm)
5. Smashing Online Workshops 2020
A few months ago, we launched our online workshops on front-end & UX to help all of us boost our skills online. As our workshops span over 2–3 weeks, attendees find time to learn and do homework and make connections that wouldn’t be easy to build otherwise.
It’s wonderful to see small communities emerging within those workshops. Attendees sharing what they’ve learned, coding, designing together — waking up in the middle of the night to join in! All these things are incredibly rewarding to see.
We’ve just announced new workshops recently on front-end accessibility, designing for emotion, form designs and many others, so take a look, and perhaps we’ll see you there? 😉
6. How Screen Readers Navigate Data Tables
Have you ever tried to navigate a table with a screen reader? If not, you should check out Léonie Watson’s article on how screen readers navigate data tables. It shares precious insights and shows what matters to create frustration-free tables that can be used by anyone.
In the post, Léonie uses NVDA to move to a table, navigate its content, and find specific information. The appropriate HTML elements (or ARIA roles) inform her about the characteristics of the table and give her access to keyboard commands specifically for navigating the table’s content. An interesting takeaway: Keyboard focus and screen reader focus are not the same thing. Contrary to what you might have heard, you do not need to make each cell of a table focusable with a keyboard to aid navigation. If the content inside the cell is non-interactive, you’ll likely make keyboard users work much harder to navigate the table than you intended. A must-read. (cm)
7. The Ultimate Guide To UX Research
User experience research is a crucial component of the human-centered design process. But how do you tackle the task and integrate a UX research process into your team’s workflow? To get you up and running, the folks at Maze put together the “Ultimate Guide to UX Research”.
The comprehensive guide dives into the fundamentals of UX research and its various methods. It starts off taking a closer look at what UX research is all about and why it’s the backbone of building good products, dissects different research methods and tools, and shares tips for creating a research plan and establishing a UX research process. A great read for UX designers and product managers alike. (cm)
From our sponsor
Complimentary Guidebook: Testing At Every Stage Of Your Design Process
Download this Guidebook to learn how fast user feedback can help you make better design decisions at every stage of your design process. Get the Guidebook now →
8. Graphic Design Inspiration: Tape Cassette Inserts
Do you remember the golden days of tape cassettes? When creating a playlist still involved getting an empty tape to record your favorite songs on, always keeping an eye on the maximum recording time? Well, we came across a special piece of eye candy that is bound to wake good memories of your treasured mixtapes. And not only that: If you’ve got a sweet spot for typography and vintage graphic design, our find might make you happy, too.
The “Tape Cassette Inserts” album that Bruce Jamieson compiles on Flickr is a treasure chest of more than 80 photos of, well, tape cassette inserts. From Agfa and BASF to Philips, TDK, Scotch, Fuji, and Maxell, the featured inserts cover a wide range of manufacturers and take us on a journey through an almost-forgotten part of tech history. Inspiration guaranteed. (cm)
9. Coming Up Next on Smashing
With Smashing Membership, you get access to goodies, eBooks, discounts and live sessions with experts — all around front-end & UX, for just one coffee a month. Coming up next:
Meet Smashing Online Workshops on front-end and UX with Cassie Evans, Christian Nwamba, Harry Roberts, and many others.
We also have online workshops on front-end & UX — designed to give you the same experience and access to experts as in an in-person workshop, but without needing to leave your desk.
Or, if you’d like to run an online workshop with your team, please get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you’re facing and would like to solve. Get in touch — it’s that easy! (vf)
10. New On Smashing Job Board
11. Our Current Most Popular Articles
This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf), Rachel Andrew (ra) and Iris Lješnjanin (il).
Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.
Follow us on Twitter • Join us on Facebook
