Dear Friend,
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)
Table of Contents
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.
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)
From our sponsor
Build in-demand skills in Northwestern's online MS in Info. Design & Strategy
Earn your master's degree online.
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.
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
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
Front-End Workshops
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)
8. New On Smashing Job Board
9. Our Current Most Popular Articles
This newsletter issue was written and researched by Cosima Mielke, Iris Lješnjanin, Vitaly Friedman and Rachel Andrew.
Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.
Follow us on Twitter • Join us on Facebook
0 коммент.: