Community Resources, Weekly Newsletter, And Boosting Skills Online
Email Newsletter
Weekly tips on front-end & UX.
Trusted by 200,000+ folks.
Improvement is a matter of steady, ongoing iteration. If you’ve been around for a good while, you’ll know that Smashing has been through a good number of changes in the past: a new design, a new layout, a new technical stack, and so much more. Still, it was always done with quality content in mind.
For example, we recently rearranged the navigation bar at the top of the page — have you noticed? Take a closer look, and you’ll find some neatly curated guides on major topics covered in the magazine, conference talks, and elsewhere. Each guide brings together the best we have on that subject, to help you explore and learn. And speaking of guides, we just published a comprehensive SEO guide earlier today!
Alongside our guides, printed books, eBooks and printed magazine, we’re thrilled to have yet another addition to our smashingly cherished gems: meet our brand new Interface Design Patterns Checklists. Co-founder of Smashing Magazine, Vitaly Friedman, has been collecting, curating and refining each checklist for years — we’re convinced that this deck of cards will prove to always be useful when designing and building any interface component. Really.
If you’d like to (virtually) meet Vitaly himself and dive deeper into the bits and pieces of smart interface design patterns, you can attend his upcoming online workshop on Smart Interface Design Patterns (2020 Edition) where you’ll explore hundreds of practical examples over 5×2.5h live sessions.
Please note that the cards are currently only available in PDF format — we’re doing our best to print them as soon as it’s possible to ship worldwide!
Upcoming Online Events: See You There?
With still so many COVID-coaster emotions, we’re very sad about the ongoing situation and not being able to meet you in person, so we have decided to move all of our physical events for 2020 online in order to stay connected with our dear and valued community.
Despite the circumstances, we’re proud to have so many brilliant speakers on board, and to make the best of it all, you don’t even need to travel to meet them. So, we promise to deliver the same community feeling as much as possible, but from your very own home (office).
- SmashingConf Live (August 20–21)
An event full of interactive and live sessions by a line-up of inspiring and knowledgeable speakers. - SmashingConf Freiburg Online (Sept. 7–8)
Our ‘hometown’ conference is now being moved online and open for everybody to join in! - SmashingConf Austin Online (Oct. 13–14)
We’ve combined the initial Austin and New York events that will take place in a timezone suitable to everyone. - SmashingConf San Francisco Online (Nov. 10–11)
Two full days of front-end, UX and everything else that connects us and helps us get better at what we do.
For the conference experience, we’re using Hopin. It turned out to be the best option in terms of quality, reliability and accessibility, with reception and networking area, sponsor booths and breakout sessions. To join in, no installation is needed! Before the event, we’ll send you a magic link, so you can jump right into the conference.
Learning And Networking, The Smashing Way
We know everyone’s busy — and may even have homeschooling and other things to figure out on top of that — so we want to support you while not wasting any of your precious time. We’ve broken down our workshops into 2.5h-segments across days and weeks, so that you can learn at your own pace and in your own time (workshop materials and recordings included!).
Please do take a look at our bundle discounts if you want to attend more than one workshop — you can save up to US$100 and have a little more to spend on ice cream! 😉
| August 17–31 | Behavioral Design | Susan and Guthrie Weinschenk | Design & UX |
| Aug. 19 – Sept. 3 | Front-End Testing | Umar Hansa | Front-end |
| Aug. 20 – Sept. 4 | Designing For A Global Audience | Yiying Lu | Design & UX |
| September 1–16 | Jamstack! | Jason Lengstorf | Front-end |
| September 10–11 | The CSS Layout Masterclass | Rachel Andrew | Front-end |
| Sept. 17 – Oct. 2 | Vue.js: The Practical Guide | Natalia Tepluhina | Front-end |
| Sept. 22 – Oct. 6 | Smart Interface Design Patterns, 2020 Edition | Vitaly Friedman | Design & UX |
| Nov. 12 – Nov. 27 | Build, Ship and Extend GraphQL APIs from Scratch | Christian Nwamba | Front-end |
By the way, in case you find yourself thinking twice about joining in a Smashing workshops because you’re worried that your boss may need just a little bit of persuasion, then we’ve got your back with a neat lil’ template: Convince Your Boss. Good luck!
Bi-Weekly Podcast: Full Of Inspiration And Insights
Every second Tuesday, Drew McLellan talks to design and development experts about their work on the web. You can subscribe via your favorite app to get new episodes as soon as they’re ready.
Pssst. By the way, is there a topic that you’d love to hear and learn more about? Or perhaps you or someone you know would like to talk about a web- and design-related topic that is dear to your hearts? We’d love to hear from you! Feel free to reach out to us on Twitter and we’ll do our best to get back to you as soon as possible.
Shining The Spotlight On Accessibility And Prototyping
Mark your calendars! We’ll have the great pleasure to welcome Chen Hui Jing and Adekunle Oduye to our Smashing TV virtual stage. If you’d like to attend, you’ll need to install the Zoom client for Meetings, which is available for all the main OSs. (It may take a little time to download and install, so please grab it ahead of time if you can.)
- “Accessibility With(out) Priorities” on September 1 (14:00 London time)
Hui Jing will touch upon the reasons why this is the case, and discuss strategies to convince clients and bosses to still ‘invest’ in accessibility. - “The Good, The Bad And Ugly Of Prototyping” on October 1 (19:00 London time)
Adekunle will share techniques on how prototype efficiently and effectively, how to create a framework for prototyping that fits into your organization, and how to utilize a prototype for production.
Trending Topics On Smashing Magazine
We aim to publish a new article every single day that is dedicated to various hot topics in the web industry. You can always subscribe to our RSS feed to be among the first ones to read new content published in the magazine.
Here are some articles that our readers enjoyed most and have recommended further in the past month:
- “How To Create A Porsche 911 With Sketch,” (full tutorial)
written by Nikola Lazarević - “Can You Design A Website For The Five Senses?,”
written by Suzanne Scacca - “How To Configure Application Color Schemes With CSS Custom Properties,”
written by Artur Basak - “Modern CSS Techniques To Improve Legibility,”
written by Edoardo Cavazza - “Translating Design Wireframes Into Accessible HTML/CSS,”
written by Harris Schneiderman
Smashing Newsletter: Weekly Best Picks And News
We’ve got news! We’ll be sending out a weekly edition of the Smashing Newsletter, but aiming for shorter and topic-specific issues. These may be dedicated to 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. No third-party mailings or hidden advertising, and your support really helps us pay the bills. ❤️
Interested in sponsoring? Feel free to check out our partnership options and get in touch with the team anytime — they’ll be sure to get back to you as soon as they can.
The State Of Things In 2020
With so much happening on the web every day, it’s difficult to keep track, but it’s even more difficult to pause for a moment, and a take a detailed look at where we actually are at the moment. Luckily, there are plenty of surveys and reports gathering some specific developments in a single place. State of CSS and State of JS highlight common trends in CSS and JavaScript. There are also studies on Design Systems in 2019, Front-End Tooling and Open Source Security.
It’s good to know where you stand not only in terms of skills, but also in terms of salaries: that’s where Levels.FYI Salaries helps, as well as UX Designer Salaries and Design Census 2019. Plus, make sure to review State of Remote Work 2020, highlighting trends of how to make remote work more efficient. Word of caution: some of them might be biased due to the demographics that they are targeting, so please take the insights with a grain of doubt.
Diving Into HTML And CSS Vocabs
If you often find yourself looking up the correct word to use for that one particular thing in your CSS and HTML code, we’re sure you’ll bookmark the following resources right away. Thanks to Ville V. Vanninen, you can now learn the difference between doctypes, attribute names, tags, media features — all in an interactive way.
You’ll find a nice interactive list of CSS terms as well as another useful one dedicated to HTML vocabulary where you can click on any of the terms shown on the right side to highlight the relevant parts in the code sample presented on the page. The lists are also available in different languages.
Practical Tips For Rebranding A Product
Do we rebrand? And when is the right time to do so? A lot of product people are asking themselves these questions as their product becomes more mature. The team at Overflow was in the same situation a while ago.
To reflect the evolution of their product from an easy-to-use, practical flow diagramming tool into a tool that is used for design communication and presentation workflows, they decided that it was time for a rebranding. In the article “Evolving the Overflow Brand”, they share their approach and what they learned along the way. Interesting ideas and takeaways that you can incorporate into your own redesign process. One that particularly helps make the challenge more approachable: Think of your product as a human being and imagine what they are like and how they feel to visualize your brand’s new identity.
Disabled Buttons And How To Do Better
“Disabled buttons suck.” It’s a strong statement that Hampus Sethfors makes against this widespread UI pattern. As Hampus argues, disabled buttons usually harm the user experience, causing irritation and confusion when nothing happens when a button that carries an action word like “Send” is clicked. But they do not only prevent people from completing tasks with as little effort as possible, disabled buttons also create barriers for people with disabilities — due to issues with low contrast and assistive technologies not being able to navigate to disabled buttons. Now, how can we do better?
Hampus suggests to keep buttons enabled by default and show an error message when a user clicks it. If you want to indicate that a button is disabled, you could use CSS to make it look a bit grayed out (considering contrast, of course) but keep it enabled and put focus on a meaningful error message. A small detail that makes a difference.
The “Back” Button UX
We often spend quite a bit of time to get a feature just right, or enhance the design with bold interactive features. We measure the impact of our decisions in A/B tests, study conversion and click-through-rates, analyze traffic and search for common funnel issues. But the data conveys just a part of the story. More often than not, customers have very different issues, often unrelated with our features or design.
The quality of an experience shows in situations when something goes unexpectedly. What happens when the customer accidentally reloads the page in the middle of a checkout, e.g. when scrolling up and down on a mobile phone? Does the payment form get cleared out as a user notices a name’s typo on a review page? What happens when a customer hits the “Back” button in a multi-step-process within our single-page-application?
In fact, the unexpected “Back” button behavior often has severe usability issues, and some of them are highlighted in Baymard Institute’s article Design Patterns That Violate “Back” Button Expectations. It’s worth testing the “Back” button for overlays, lightboxes, anchor links and content jumps, infinite scroll and “load more” behavior, filtering and sorting, accordions, checkout and inline editing.
We can use the HTML5 History API, or specifically history.pushState() to invoke a URL change without a page reload. The article goes into detail highlighting common issues and solutions to get things just right. Worth reading and bookmarking, and coming back to every now and again.
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!
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.
A CSS-Only, Animated, Wrapping Underline
Underlines are hard, especially if you want to do something that goes beyond the good ol’ text-decoration: underline. Inspired by a hover effect he saw in the link underline on Cassie Evans’ blog, Nicky Meulemann decided to create something similar: a colored underline with a hover effect where the line retreats and is replaced by a differently colored line.
The twist: The lines should not touch during the animation and, most importantly, links that wrap onto new lines should have the underline beneath all lines. If you want to follow along step by step how it’s done, be sure to check out Nicky’s tutorial.
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.
Useful front-end & UX bits, delivered once a week.
With tools to help you get your work done better. Subscribe and get Vitaly’s Smart Interface Design Checklists PDF via email. 🎁
On front-end & UX. Trusted by 207,000+ folks.
Further Reading
- Best Of Pro Scheduler Libraries
- How To Design Effective Conversational AI Experiences: A Comprehensive Guide
- Useful Email Newsletters For Designers
- Event Calendars For Web Made Easy With These Commercial Options
(cm, vf, ra, mrn)