CategoryResponsive Design

December 13, 2022 — There is no universal solution for making every kind of table responsive and usable on smaller screens, so we have to rely on various patterns, which Adrian explains in this two-part series. Read more…

December 1, 2022 — Today, we’ll take a look at the Sass function that does all the work for you — with no media queries, no breakpoints, and no design jumps. In this article, Fabienne Bielmann explains what FabUnit stands for and why she decided to create her very own responsive magic formula. Read more…

July 29, 2021 — What are absolute units? What are the differences between relative and absolute units, and how do we create accurate sizes on the web? In this article, Elad Shechter explains why CSS absolute units aren’t so absolute. Read more…

February 23, 2021 — A classic problem in CSS is maintaining the aspect ratio of images across related components, such as cards. The newly supported aspect-ratio property in combination with object-fit provides a remedy to this headache of the past! Let’s learn to use these properties, in addition to creating a responsive gradient image effect for extra flair. Read more…

April 22, 2020 — Flutter has already made quite a splash on the mobile development scene. Now it’s taking on bigger devices as well. Here’s what you need to know to be ready to take on the task of developing web and desktop apps using this wonderful cross-platform framework. Read more…

February 26, 2020 — Foldable devices have brought with them talk of a ‘foldable web,’ and the idea that long-standing web conventions may be on the verge of a serious shakeup. Is it all hype, or is it time to get flexible? Read more…

September 24, 2019 — We don’t have any excuse for creating poor experiences today. Here’s what you need to know about designing complex tables for your mobile visitors in WordPress. Read more…

August 29, 2019 — As our phones are getting bigger, we need to adjust how we build and design our websites. Is there something to learn from app design and tap bars? Can we fix the mobile navigation of our websites to have a lower interaction cost? In this article, we’ll find out. Read more…

April 11, 2019 — Last year, Rachel Andrew wrote “Take A New Look At CSS Shapes” where she reintroduced readers to the basics of using CSS Shapes. In this new tutorial, Andy Clarke expands on the topic of “Art Direction for the Web” with CSS Shapes to create exciting and inspired new design ideas. Andy is going to show you how to use CSS Shapes to create the following five different types of layout: v-shapes, z-patterns, curved shapes, diagonal shapes, and rotated shapes. Read more…

March 5, 2019 — When inspecting most other grids in DevTools, you’ll notice that column widths are dependent on their parent element. Container units are a specialized set of CSS variables. They mirror the layout functionality found in UI design software where configuring just three values provides your document with a global set of columns and gutters to measure and calculate from. In this article, Russell Bishop will help you understand how to overcome these limitations using CSS variables and how you can start building with container units. Read more…