Media queries have always been a cornerstone of responsive design but the role of media queries is changing. It’s now possible to make websites with responsive properties that are not tied to specific breakpoints.
Learn how to use fluid typography, responsive SVG, adaptive flexbox components, CSS grid and custom properties to create unique responsive solutions that go beyond media queries.
Beyond Media Queries
When we talk about typography, the most common associations are print and Latin-based letters. Many associate printing with Gutenberg’s printing press, but the first moveable type was invented by Bi Sheng in China approximately 400 years earlier. And today, even though print has yet to fall out of favour, the explosion of the web has resulted in a lot of reading being done off screens of all sizes.
Analog typesetting is done with metal slugs, but the web uses CSS to set type.
Web Typography: Where East Meets West
Once you have grasped the basics of CSS Grid, you quickly discover how it enables many existing design patterns in a streamlined, elegant way. However, we shouldn’t see Grid in isolation. Understanding how other parts of CSS work together with Grid is key, in order to get the most out of our new abilities.
In this talk Rachel will be concentrating on a couple of these areas, CSS Box Alignment and CSS Sizing.
Unlocking the Power of CSS Grid Layout
Images are by far the greatest bottleneck to performance on the web, and with the average web page size now about 2.5MB large—images taking up 65% of that—we need to tame the beast. Running images through a compression program like ImageOptim is a good first step, but what else can we do? In this engaging talk, Una will survey new image formats and dive deep into image rendering and performance optimization techniques, demonstrating practical approaches to making your web projects noticeably faster.
This article is from:
The Joy of Optimizing Images
Web fonts are difficult to get right. An often overlooked and disruptive piece of web performance, web fonts can slow down your site and leave your visitors confused and agitated. No one wants agitated visitors. In this talk we’ll discuss useful methods to render web fonts quickly and without disruption so that visitors can do what should be a simple task—read the text. After all, web fonts are not rocket science.
Web Fonts Are ИØ Rocket Science
There are so many ways to leave a memorable impression and create a connection. Designing empty states well is one of them. Empty States UX collects some great examples.
View the original here:
Empty States UX