From Smashing Magazine

  • WebFonts And Performance: SmashingConf Videos

    Webfonts are difficult to get right. An often overlooked and disruptive piece of web performance, webfonts can slow down your site and leave your visitors confused and agitated. No one wants agitated visitors.

    Webfonts Are ▢▢▢ Rocket Science Recorded at our special web performance themed SmashingConf in London, Zach Leatherman demystifies webfonts in order that we can avoid font-related performance issues. He takes us through a detailed guide to best practices when using webfonts, so you can use...


  • Animating SVG Files With SVGator

    (This article is kindly sponsored by SVGator.) Animated SVG files have become very popular. They are entirely scalable (because they are vectors), small and 100% code-based, which allows for so many transformations and tweaks. This, however, comes at a price: the steep learning curve for complete beginners.

    SVGator pledges to solve this problem, making it really easy for anyone to make simple animations using a familiar interface. It’s a web-based animation app that lets you import, animate and...


  • Linkbuilding: The Citizen’s Field Guide

    Before buying followers on Instagram was a common practice, before Russian trolls made fake news an Olympic sport, we had linkbuilding. Today, we still have linkbuilding, its just that you haven't noticed it — or have you?

    Welcome, to the Twilight Zone, dear folks. You are about to go through a linkbuilding crash course. This will help you preserve your website, detect potential problems in content or consider why you keep receiving strange emails from strangers wanting to get their links all...


  • So You Want to Persuade Users? Make Things Simple!

    (This article is kindly sponsored by Adobe.) The persuasive design toolbox is filled with powerful tools based on psychology. These tools range from Cialdini’s set of six principles of persuasion to ten times that number of Persuasive Patterns. Presented with all these methods, it can be tempting to use all of them to cover all possible bases, using a shotgun approach, hoping that one will resonate with your target users.


  • The Holy Grail Of Reusable Components: Custom Elements, Shadow DOM, And NPM

    For even the simplest of components, the cost in human-labour may have been significant. UX teams do usability testing. An array of stakeholders have to sign off on the design.

    Developers conduct AB tests, accessibility audits, unit tests and cross-browser checks. Once you’ve solved a problem, you don’t want to repeat that effort. By building a reusable component library (rather than building everything from scratch), we can continuously utilize past efforts and avoid revisiting already solved...


  • Monthly Web Development Update 7/2018: Practical Accessibility, Design Mistakes, And Feature Control

    The web continues to amaze me. With all its variety and different changes to the platform, it’s hard to see a straight pattern — if there even is (just) one. But it’s wonderful to see what is being changed, which features are added to the platform, which ones get deprecated, and how browsers implement more and more technology to protect the user from malicious website attacks. It’s interesting to see that these security features nowadays are getting as much attention as a feature for developers;...


  • How To Create A Flat Vector Illustration In Affinity Designer

    (This is a sponsored post.) If you are in the design world, chances are that you’ve already heard about Affinity Designer, a vector graphics editor for Apple’s macOS and Microsoft Windows.

    It was July 2015 when Serif Europe launched the amazing software that many designers and illustrators like me are using now as their main tool for professional work. Unlike some other packages, its price is really affordable, there’s no subscription model and, as mentioned already, it’s available for both Macs...


  • Learning To Code By Writing Code Poems

    Back in 2008, I started studying design and clearly remember how the sheer sight of code just intimidated me. I had some coding classes, and without any prior coding experience, I had a tough time understanding the code I first got in touch with. Suddenly, the words that I was used to in the English language (such as “new,” “return” and “throw/catch”) took on a whole new meaning; the cryptic syntax, semicolons, brackets and completely new rules didn’t make things any easier for me.


  • Better Collaboration By Bringing Designers Into The Code Review Process

    Smooth collaboration between developers and designers is something everyone aspires to, but it’s notoriously difficult. But with today’s advanced web, it's difficult — if not impossible — to build a truly great product without collaborating across disciplines. Because of the range of technologies required to build a product, the product can only truly succeed when all disciplines — developers and designers, content creators, and user experience strategists — are deeply involved from the early...


  • Pattern Library First: An Approach For Managing CSS

    In this article, based on the talk that I gave at Smashing Conference in Toronto, I’m going to describe a method of working that I’ve adopted over the past two years that helps me to manage CSS across my projects.

    I’ll be showing you how to use the pattern library tool Fractal, to manage your CSS on a component by component basis, while allowing you to use the tools you are already familiar with.


  • Better Research, Better Design, Better Results

    Over the years, one thing we have consistently seen is how little insight from digital marketers is used at the planning stages of a web development project.

    Data from Google Analytics and SEMrush to tools like VWO (Visual Website Optimizer) or Hotjar are all resources that can be used to provide valuable insight ahead of the first line of code being written. Basic SEO elements, such as URL structure and metadata, should also be involved in the decision making of any web design project.


  • Everything You Need To Know About Transactional Email But Didn’t Know To Ask

    Any application with user-authentication can’t exist without email, yet, email doesn’t always get the attention it deserves. With modern email service providers, it’s easier than ever to create a first-class transactional email experience for your users, but, for most of us, the challenge lies in the fact that you don’t know what you don’t know. We’re going to dive into an end-to-end analysis of everything you need to bring your transactional email up-to-snuff with the rest of your web...