In other Smashing news, we're all excited about our soon to be released print magazine. There will be more on the site this week about how you can get your copy. We are also looking forward to our conferences in Freiburg and New York this year. Tickets for both sold out very quickly, but there are a few workshop tickets left for New York.
Take a look if you would like to learn web performance with Scott Jehl or Harry Roberts, or how to build accessible site with Gatsby led by Marcy Sutton. We have a workshop on designer and developer collaboration with Brad Frost and Dan Mall, React with Next.js led by Remy Sharp, or you could even come and learn CSS Layout with me!
If getting to conferences is tricky, another way to get to learn directly from many of our speakers is via Smashing TV. We're bringing you sessions with lots of the folk you'll recognize from our conference line-ups — all included with Membership, or you can buy individual tickets for the sessions you don't want to miss. We also have a Smashing TV livestream on privacy and ethics coming up this Wednesday, so join us there.
That's quite a lot to get on with — and we have plenty of other things planned for the coming months! As always we love to hear feedback from readers, so do get in touch if you have any questions about anything in the Smashing universe.
Till next time!
Rachel Andrew (@rachelandrew)
Table of Contents
- Loading CSS Asynchronously
- The Benefits Of Self-Hosting Your Static Assets
- Email Design Inspiration
- Form Design From Zero To Hero
- Making Cognitive Biases Easier To Understand
- Free Summer And Tourism Icons
- Patterns, Patterns Everywhere
- Upcoming In Smashing Membership
- Our Next Smashing Workshops
It’s become a common practice to inline critical CSS in HTML to fit in as much useful CSS and HTML as possible within the first server roundtrip (14 KB gzipped or Brotlified). However, to start render faster, we need to asynchronously request the full CSS file as it otherwise would block the rendering of the page.
Unlike for scripts where we have
Basically, by prompting the browser to fetch a stylesheet for
onload attribute to set the link’s
all when it finishes loading. Easy and straightforward! (vf)
So have you considered to self-host your static assets to make your site faster? Performance-wise, it’s one of the quickest wins, as Harry Roberts points out. And even though it might seem counter-intuitive to do so at first glance, it has some overwhelming benefits compared to hosting your static assets off-site. Time to audit your projects and gain back control. (cm)
If you’ve designed or developed an HTML email before, you know that making great email is hard. To provide a look under the hood of emails that are both visually compelling and polished on the code side, Really Good Email showcases more than 4,000 handpicked emails. A great source of inspiration, no matter if you want to notify your customers about an abandoned cart or send them a thank-you message. (cm)
At first glance, forms seem easy. All it takes are a couple of text boxes and radio buttons. But once you look closer, usability issues revolving around forms, are, unfortunately, quite common. To make sure that your forms are quick and hassle-free to use and complete, Adam Silver wrote a concise guide with everything you need to consider to get form design right. One for the bookmarks.
If you need slightly more detail to dive in, Adam has written an entire book on Form Design Patterns, focusing on how to build simple and inclusive web forms. And were privileged to publish it on yours truly Smashing Magazine. Happy reading! (cm)
Nowadays, there’s way too much information to process, and in times when we have to digest and make sense of it all, we’re left to rely on our psychological biases that help us figure out how to think at all. To avoid problems in communication or issues in your design, it’s useful to understand how people think, and how they make decisions.
Benson decided to create an app that will help us understand our biases and how to find better ways to think, communicate, and act in a way that is in line with your intentions. Great for designers, and also great for managers running teams. (il)
Barbecues, a trip to the beach, exploring a new city — summer is the time to make memorable experiences. To bring some of the summer feeling into your projects, you might want to take a look at the Summer Time and Tourism icon sets which the folks at Design Zone offer for free download. Each set includes 20 vector icons (in colored and linear versions) and comes in AI, EPS, and PNG formats. You can use the icons for both personal and commercial projects. Happy summer! (cm)
When we start designing, we often start with predictable, basic shapes — rectangles, circles, and if we are really creative, maybe triangles. But we can also use organic shapes, letters, whitespace, audio, video, textures and, of course, patterns.
Paaatterns is a set of eye-catching background patterns, available for free personal and commercial use for Figma, Illustrator, Sketch, and Adobe XD. The sources files in EPS, SVG, and PNG are provided as well. An email is required to download the set, and a few questions will be asked, with the set then sent via email. A wonderful set worth downloading. (vf)
Thank you for being smashing! Over the last months, we’ve been increasing the number of webinars (without increasing the price of membership — it still starts at just $5 a month!) and have also improved video quality since we’ve moved to Zoom. Also, the eBook version of Andy Clarke’s brand new book “Art Direction for the Web” is now available as a part of the Membership, too. Obviously.
- Smashing TV on July 23 at 16:00 GMT
Email Coding Guidelines with Rémi Parmentier
- Smashing TV on July 24 at 13:00 GMT
Towards Ethics & Privacy By Default, A Live Conversation with Vitaly Friedman
- Smashing TV on August 13 at 16:00 GMT
Customer Journey Mapping: Where UX And Marketing Meet with Paul Boag
- Smashing TV on August 20 at 16:00 GMT
Interactive Web Animation With SVG with Cassie Evans
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. (Ah, you could become a Smashing Member, too! Join us in Smashingland where everyone is beautiful and you never get merge conflicts. 😉)
In our workshops, we are looking into the current state of front-end and interface design, covering advanced challenges and actual real-life solutions to front-end problems. Coming up next:
- 🇧🇾 Rolling Scopes (Aug 9–11) in Minsk, Belarus.
- 🇨🇭 Front Conference (Aug 29–30) in Zürich, Switzerland.
- 🇩🇪 SmashingConf Freiburg (Sept 9–10) in Freiburg, Germany.
- 🇨🇿 WebExpo (Sept 20–22) in Prague, Czechia.
- 🇺🇸 Awwwards Digital Thinkers (Sept 25–27) in NYC, USA.
Or, if you’d like to run an in-house workshop at your office, please get in touch with Vitaly at firstname.lastname@example.org and briefly describe what problems you’re facing and would like to solve. Get in touch — it’s that easy! (vf)
Every second Tuesday, we send a newsletter with useful techniques on front-end and UX. Subscribe and get Smart Interface Design Checklists PDF in your inbox.
You can always unsubscribe with just one click.
- Design Checklists, Passwords, Dropdowns and Tooltips
- Accessible Inputs, Console, Free Illustrations, SVG
- Sketch Plugins, WebGL, Performance Testing, Patterns
- Geometric Shapes, Service Workers, Ethics and UX Strategies
- Browser Default Styles, Sketchy Illustrations and Tiny Helpers
- Web Performance 2020, Techniques, Tools and Resources
- Web Advent Calendars, Debugging, SVG, Ad Loading
- Web Performance, Front-End, Free Illustrations
Looking for older issues? Drop us an email and we’ll happily share them with you. Would be quite a hassle searching and clicking through them here anyway.