Juan Diego Rodriguez explains why media queries still occupy a vital role in responsive layouts; only they are now one tool in a larger toolbox with modern techniques that are best when used together.
Read more…
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…
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…
What are absolute units? What are the differences between relative and absolute units, and how do we create accurate sizes on the web? It’s important to note that there are still significant differences between relative and absolute units. CSS relative units are sized according to other style definitions defined by parent elements or are affected by the size of a parent container. As for absolute units, we will dive in and see how they are affected by other things, such as the screen and the device’s operating system. In this article, Elad Shechter explains why CSS absolute units aren’t so absolute.
Read more…
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! In this article, Stephanie Eckles will show you how to use these properties, in addition to creating a responsive gradient image effect for extra flair.
Read more…
Flutter has already made quite a splash on the mobile development scene. Now it’s taking on bigger devices as well. In this article, Carmine Zaccagnino will show you 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. Flutter is a lovely framework, very easy to use, and its extreme cross-platform support only makes it more essential to learn and start using. So, go ahead and start trusting Flutter for web apps, too!
Read more…
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? The ‘foldable web’ will bring with it new challenges, new opportunities, and, in all likelihood, new syntax. The web could be in for its biggest shakeup since the smartphone. Users and coders alike have gotten rather used to the playing field: desktop and mobile with a sprinkling of tablets. Not any more. If you thought you knew responsive design before, In this article, Frederick O’Brien will show you that you ain’t seen nothing yet.
Read more…
Back in the day when we didn’t have responsive tables, it wouldn’t have been a problem to display a complex table on mobile the same way you would on desktop. Visitors knew that they’d need to pinch to zoom in, then scroll left and right, to consume all the data within it. But we don’t have any excuse for creating poor experiences like that today. Today, Suzanne Scacca will tell you what you need to know about designing complex tables for your mobile visitors in WordPress.
Read more…
Phones are getting bigger, and some parts of the screen are easier to interact with than others. Having the hamburger menu at the top provides too big of an interaction cost, and we have a large number of amazing mobile app designs that utilize the bottom part of the screen. 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, Arturas Leonovas will find out.
Read more…
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…
