Layouts with diagonal sections are quite popular for several years now. It is one tool designers can use to bring some dynamic to all the rectangular boxes with boring 90-degree angles. Because of this, it is essential for frontend designers to know how to implement these designs with CSS. So if you want to learn how to do this, you’ve come to the right place.
In this client’s case, the first step to fixing this issue was pretty straightforward: ditch the preload/polyfill pattern. Preloading non-critical CSS kind of defeats the purpose and switching to using a print stylesheet instead of a preload, as Filament Group themselves now recommend, allows us to remove the polyfill entirely.
The problem: you click a jump link like <a href=“#header-3”>Jump</a> which links to something like <h3 id=“header-3”>Header</h3>. That’s totally fine, until you have a position: fixed; header at the top of the page obscuring the header you’re trying to link to!
Fixed headers have a nasty habit of hiding the element you’re trying to link to. But there is actually a really straightforward way of handling this in CSS now.
While hit area size is mostly a usability issue, marketers often want a larger click area around their calls to action (CTAs) to make them more prominent. Without thinking about the impact on screen reader users, that can make for extremely verbose controls. For voice users, it can be confusing what to say to select one of these.
Who do we really benefit with accessible technology and why do any of us bother at all? This talk will explore the motivations for our work, how to overcome some of our most common failings, and where inclusive design fits in our processes, approaches, outlooks and lives.