CategoryCSS

July 21, 2020 — The most efficient way to build accessible websites and apps is to “shift left” by incorporating accessibility testing into the earliest stages of your development and design process. In this article, Harris Schneiderman will walk you through the process of analyzing a wireframe from an accessibility perspective and making coding decisions to optimize for accessibility in both design and development phases. Read more…

July 10, 2020 — Transitions are a nice way to remove, change, or update data in an application because their occurrence adds a nice effect and is good for the user experience. In this tutorial, Timi Omoyeni will look at the different ways to apply transitions in both Vue.js and Nuxt.js applications. Using these transitions in your applications and websites create a better visual experience and sometimes draws and holds the user’s attention while a piece of information is being introduced to or leaving the screen. Read more…

July 7, 2020 — If you are the sort of person who doesn’t like reading about things if you can’t use them now, then this article probably isn’t for you — we have many others for you to enjoy instead! However, if you like to know what is on the way and read more about the things you can play with in a beta version of a browser, read on! Today, Rachel Andrew takes a look at some of the interesting CSS features that are making their way into browsers right now. Read more…

June 30, 2020 — We’re talking about CUBE CSS. What is it, and how does it differ from approaches such as BEM, SMACSS, and OOCSS? Drew McLellan talks to its creator, Andy Bell, to find out. Read more…

June 26, 2020 — In the tenth issue of Inspired Design Decisions, Andy Clarke will explain how Giovanni Pintori — the Italian graphic designer best known for his work with Olivetti — can inspire design for the web with his distinctive use of color and shape. Andy will teach you how to use color to attract attention and then to lead someone’s eye around a design. He’ll discuss how a minimal color palette can act as a guide, helping people through a design, and how lines and shapes add structure and style. Read more…

May 25, 2020 — Tailwind is a popular utility-first CSS framework that provides low-level class names to web developers. It does not have any JavaScript and works well with existing frameworks such as React, Vue, Angular, Ember, and others. Whilst this is positive, it can be confusing for new developers to understand how to integrate Tailwind in their applications. In this article, Tilo Mitra will explore ways to build reusable React components using Tailwind. Read more…

May 22, 2020 — These days, product companies seem more interested in refining interfaces and simplifying user experiences. In this ninth issue of Inspired Design Decisions, Andy Clarke will explain how studying the work of Max Huber — one of the less well known but most distinguished Swiss designers — will teach you how to turn mundane subjects into exciting visual communication. Read more…

May 12, 2020 — For hundreds of years, we have been using white space in typography. Today, in 2020, how do we add spacing to punctuation marks and other symbols, and how do we adjust the space on the left and right side in an easy and consistent way? It is actually not as easy and quick as it should be. Read more…

April 21, 2020 — In this episode of the Smashing Podcast, we’re talking about running online workshops. How can a traditional event adapt when participants can’t attend in person? Drew McLellan talks to Rachel Andrew to find out. Read more…

April 13, 2020 — In this eighth issue of Inspired Design Decisions, Andy Clarke will explain how learning about American graphic designer and typographer Herb Lubalin has transformed his approach to typography on the web. How can we combine elements to develop powerful headers and calls to action? How do we use pre-formatted HTML text, and the text element in SVG for precise control over type? How can we optimise SVGs and make SVG text accessible? In this article, we’ll explore just that. Read more…