Smashing Newsletter: Issue #261

Editorial

We’re running an experiment with the newsletter. Having had a bit of feedback that the issues are too long, we’re going to move to a weekly edition. They will be shorter, and every other week we will focus on a specific topic. That might be accessibility, or CSS, or UX — you’ll just have to wait and see! We want to bring you useful content, and to share all the cool things that we see folks doing across communities within the web industry. Let us know if you like the new format!

We are all looking forward to SmashingConf Live! next week; tickets are still available if you want to join us alongside speakers including Sara Soueidan, Chris Coyier, Cassidy Williams, Miriam Suzanne, and more. We also have a whole bunch of workshops in the next few weeks, including one on Front-End Testing with Umar Hansa, which also kicks off next week.

Last but not least, we launched our brand new Interface Design Patterns Checklists, a deck of 100 cards with common questions to ask while dealing with any interface challenge — from intricate data tables and web forms to troublesome hamburgers and carousels. Plus, many other components (see full list) explored in full detail.

Hoping to see you at an event soon!
— Rachel Andrew (@rachelandrew)

Fun With Forms
Landing Pages That Stand Out
Modern CSS Solutions For Old Problems
Improving Rendering Performance
A Guide To Setting Up A Development Workflow On Mac
Upcoming In Smashing Membership
Our Next Smashing Workshops

1. Fun With Forms

Web forms are literally everywhere — from subscription forms to filters and dashboards, yet they aren’t easy to get right. How do we deal with inline validation? Where and how do we display error messages? How do we design and build autocomplete controls? No wonder that there is no shortage in resources on form design — and there are a few new ones that appeared recently.

Geri Reid has collected Form Design Guidelines, with best practices, research insights, resources and examples. In Fun With Forms, Michael Scharnagl collect a few obscure facts and fun things to do with forms. Adam Silver has been writing quite a bit about web form best practices in his blog — and release a web forms design system, too. Finally, Heydon Pickering still has some inclusive components patterns for forms in his blog. All wonderful resources to keep track of when designing or building forms — to ensure we don’t make costly mistakes down the line. (vf)

2. Landing Pages That Stand Out

Designing a landing page is a science of its own. Not only do we need to provide the benefits of our products, but also use the little time a customer will spend on the site to explain potentially complicated and advanced features that we spend weeks and months on! That’s not an easy task, but there are some simple things we can do relatively quickly.

In a Twitter thread, Rob Hope has shared a dozen of smart landing pages that demo their product in-page. The examples show products that integrate a live preview of the tool and demonstrate how it works right on the landing page. For example, by showing how minor keystrokes can adjust a component in Tailwind, or how a feedback widget works with Feedback.fish. Plus, a bunch of demos with Easter Eggs and live examples. Need more inspiration? LandingFolio has got your back for pretty much anything you are looking for on a landing page. (vf)

3. Modern CSS Solutions For Old Problems

When it comes to layout and styling, some problems keep appearing in every other project — styling checkboxes and radio buttons, fluid type scale, custom list styles or accessible dropdown navigation.

Screenshot from the Modern CSS series by Stephanie Eckles

In her series, Modern CSS, Stephanie Eckles dives into modern CSS solutions for old CSS problems, taking a closer look into each of them, and exploring the most reliable techniques to make things work well in modern browsers. Stephanie also provides demos and ready-to-be-used code snippets. A fantastic series worth checking out and subscribing to! (vf)

4. Improving Rendering Performance

We’ve figured out ways to render critical content of web sites faster with critical CSS, and we’ve learned how to load CSS asynchronously. Yet one of the initial rendering bottlenecks hasn’t been widely tackled just yet: browsers spend time and resources to style all of the content on the page, even if it’s offscreen.

demo with figures representing network results

For years now, we can use CSS Containment which tells a browser the bits of content that contain isolated content, so the browser can make optimization decisions for page rendering. As Una Kravets and Vladimir Levin share in their post, starting from Chromium 85, we can use the `content-visibility` property that is a quick shorthand for CSS containment properties. It enables the browser to skip an element’s rendering work, including layout and painting, until it is needed. If a section appears further down the page, we can apply content-visibility: auto to it, so it will gain layout, style, paint and size containment automatically. If you’d like a more granular control, you can use CSS Containment to tell the browser what exactly to do and not to do.

Browser support? The CSS ‘contain’ property is available in all modern browsers, except Safari, iOS Safari and Opera Mini. ‘contain-visibility’ is just coming to Chromium 85, so it’s better to use both. As properties don’t break anything but rather serves as an enhancement, we can safely use already today! (vf)

5. A Guide To Setting Up A Development Workflow On Mac

Setting up a development environment on a new computer can be confusing, not only if you’re new to programming. Together with contributors from the web community, Sourabh Bajaj published a comprehensive guide that helps you get the job done with ease.

The guide is a reference for everyone who wants to set up an environment or install new languages or libraries on a Mac. From Homebrew to Node, Python, C++, Ruby, and a lot more, it takes you step by step through everything you need to know to get things up and running. Contributions to the guide are welcome. (cm)

6. Upcoming In Smashing Membership

“End-to-end Testing With A Real Browser” with Umar Hansa— August 13 at 19:00 London time
“Accessibility With(out) Priorities” with Chen Hui Jing— September 1 at 14:00 London time
“The Good, The Bad And Ugly Of Prototyping” with Adekunle Oduye— October 1 at 19:00 London time

Dear friends, thank you for your kind support. It allows us to bring you great content, pay all our contributors fairly, and reduce advertising on the site. Join us in Smashingland where everyone is beautiful and you never get merge conflicts. 😉

7. Our Next Smashing Workshops

In our workshops, we explore best practices and interesting techniques in front-end and interface design, always focusing on actual solutions to real-life problems.

We also have online workshops that are designed to give you the same experience and access to experts as in an in-person workshop, but without needing to leave your desk.

Design Workshops

Behavioral Design Workshop (Aug 17-31)
Designing for a Global Audience (Aug 20 - Sep 4)
Smart Interface Design Patterns (Sep 22 - Oct 6)

Front-End Workshops

Front-End Testing (Aug 19 - Sep 3)
Jamstack! (Sep 1-16)
The CSS Layout Masterclass (Sep 10-11)
Vue.js: The Practical Guide (Sep 17 - Oct 2)
Build, Ship & Extend GraphQL APIs from Scratch (Oct 15-30)

Meet Smashing Online Workshops on front-end & UX, with Yiying Lu, Natalia Tepluhina, Christian Nwamba, Jason Lengstorf, and many others.

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)

August 11, 2020 Smashing Newsletter: Issue #261

Previous Issues