• May Is In The Air (2021 Wallpapers Edition)

    We always try our best to challenge your creativity and get you out of your comfort zone. In all these years we’ve been running it, our monthly wallpapers challenge has turned out to be the perfect occasion to do just that: to put your creative skills to the test, try out a new technique you […]

    READ MORE
  • The Humble “ Element And Core Web Vitals

    The humble <img> element has gained some superpowers over the years. Given how central it is to image optimization on the web, let’s catch up on what it can do and how it can help improve user experience and the Core Web Vitals. I’ll be covering image optimization in more depth in Smashing Magazine’s new […]

    READ MORE
  • Meet Image Optimization, A New Smashing Book By Addy Osmani

    Images have been a key part of the web for decades. Our brains interpret images much faster than text, which is why high-quality visuals drive conversions and user engagement. Just think about landing pages and product photos, feature panels and hero areas. To be effective, all these images need to be carefully orchestrated to appear […]

    READ MORE
  • Understanding Easing Functions For CSS Animations And Transitions

    Have you ever noticed how smooth and delightful animations look on a well-made, professional project? I am reminded of the In Pieces website where animations are used not just for decoration, but they also convey the message about the endangered species in an impactful way. Not only is the animation design and style beautiful, but […]

    READ MORE
  • How To Bake Layers Of Accessibility Testing Into Your Process

    When building websites or apps, accessibility testing is critical to ensure that what you build will work for all your users. This includes users with disabilities and also people with temporary and situational limitations (like that coworker who broke their arm skiing or the customer who is outdoors on their phone with glare on the […]

    READ MORE
  • A Guide To Newly Supported, Modern CSS Pseudo-Class Selectors

    Pseudo-class selectors are the ones that begin with the colon character “:” and match based on a state of the current element. The state may be relative to the document tree, or in response to a change of state such as :hover or :checked. :any-link Although defined in Selectors Level 4, this pseudo-class has had […]

    READ MORE
  • Web Design Done Well: The Ordinary Made Extraordinary (Part 1)

    Great ideas in web design come so thick and fast that it can be easy to miss them if you’re not careful. This series is a small antidote to that, piecing together splashes of inspiration that caught our eye. Whether it’s a mind-bending new feature or simply an old trick delivered with new elegance, they […]

    READ MORE
  • A Complete Guide To Incremental Static Regeneration (ISR) With Next.js

    A year ago, Next.js 9.3 released support for Static Site Generation (SSG) making it the first hybrid framework. I’d been a happy Next.js user for about a few years at this point, but this release made Next.js my new default solution. After working with Next.js extensively, I joined Vercel to help companies like Tripadvisor and […]

    READ MORE
  • Why Content Is Such A Fundamental Part Of The Web Design Process

    When embarking on a new website project, designers tend to focus on the aesthetics and functionality of their work. This means that content writing is a task often pushed onto the client to fulfil. The unfortunate consequence of this decision is that the website’s content ultimately comes in too late, in the wrong format, and […]

    READ MORE
  • Making GraphQL Work In WordPress

    Headless WordPress seems to be in vogue lately, with many new developments taking place in just the last few weeks. One of the reasons for the explosion in activity is the release of version 1.0 of WPGraphQL, a GraphQL server for WordPress. WPGraphQL provides a GraphQL API: a way to fetch data from, and post […]

    READ MORE
  • An In-Depth Guide To Measuring Core Web Vitals

    Google has announced that from May 2021 (edit: the date was just moved to June 2021), they will start to consider “Page Experience” as part of Search ranking, as measured by a set of metrics called Core Web Vitals. That date is approaching quickly and I’m sure lots of us are being asked to ensure […]

    READ MORE
  • Seven Mistakes To Avoid In Your Technical Interviews

    I have failed many technical interviews. Year after year would pass and I would slowly progress in my technical interviewing skills. It wasn’t until I received my dream job offer from Spotify and had passed the Google technical interviews that I realized how much I had learned over the preceding years. Finally, my studying had […]

    READ MORE
  • How To Get Web Design Clients Fast (Part 2)

    In part 1, we explained how to use a monthly recurring revenue (MRR) model to grow your web design business. In this second part, we’ll explain how to use proven sales techniques to keep scaling your business profitably. If you’re an agency owner, you know that you need customers to grow. No matter how big […]

    READ MORE
  • From Cats With Love: New Navigation, Guides And Workshops

    Not many people know that the entire Smashing Family is a very small team with just 15 wonderful people working day-to-day on everything from magazine and books to front-end and design. At times it might feel like that’s quite a bit of work, but we do our best to be well-organized and be productive, while […]

    READ MORE
  • Overflow Issues In CSS

    If you’re a front-end developer, you may have come across horizontal scrollbar issues, especially on mobile. Because there are many causes of scrollbar problems, there is no straightforward solution. Some issues can be fixed quickly, and some need a little debugging skill. What Is an Overflow Issue? Before discussing overflow issues, we should ascertain what […]

    READ MORE
  • Building A Video Streaming App With Nuxt.js, Node And Express

    Videos work with streams. This means that instead of sending the entire video at once, a video is sent as a set of smaller chunks that make up the full video. This explains why videos buffer when watching a video on slow broadband because it only plays the chunks it has received and tries to […]

    READ MORE
  • A Complete Guide To HTML Email

    Table of Contents Below you’ll find quick jumps to particular components that you might need. Scroll down for a general overview. Or skip the table of contents. accessibility bugs dark mode editors and IDEs feature support frameworks getting started guides and resources inline CSS inspiration mailto link generator mailto selection prompt marketing meta-languages previews productivity […]

    READ MORE
  • Growing UX Maturity In Organizations: Education And Training (Part 3)

    This series of articles presents tactics UX practitioners can use to promote the growth of UX maturity in their organizations or product teams. In part 1, I covered the importance of finding and utilizing UX Champions and showing the ROI/value of UX. In part 2, I focused on knowledge sharing and mentorship. In this third, […]

    READ MORE
  • Better Documentation And Team Communication With Product Design Docs

    The typical process for working as a product designer in a company or startup could be familiar to you: a new product is being developed for which to provide a design solution. Then you work on some design proposals and you pitch them in front of 1–3 people to gather feedback. Sometimes this process works […]

    READ MORE
  • Flaky Tests: Getting Rid Of A Living Nightmare In Testing

    There is a fable that I think about a lot these days. The fable was told to me as a child. It’s called “The Boy Who Cried Wolf” by Aesop. It is about a boy who tends the sheep of his village. He gets bored and pretends that a wolf is attacking the flock, calling […]

    READ MORE