Design & Interactive Experiences

@Meyerweb@mastodon.social @argyleink I'm a big fan of * { all: initial; } to demo the importance of browser styles.

Rachel Andrew has been writing CSS for over 20 years, and teaching people the things she has learned for almost as long. Since the early days of CSS, and certainly since “CSS for Layout” became a thing, we’ve been teaching CSS in pretty much the same way. Here is a block thing, here is an inline thing, this is the Box Model … and here is this weird jumping through hoops that makes a layout. It’s time for a change.

Interesting and impactful text is often deemed a “print only option”. But we can have those effects now with real web text.

“Progressive enhancement” is a philosophical approach to web design and development that centers users, with the goal of enabling everyone to access the content and complete core tasks, regardless of circumstances influencing how they access the web. In this session, I set the stage for why progressive enhancement is the gold standard for developing web projects before diving into a host of practical examples of how you can apply this practice to a range of interfaces. Along the way, I also show you how your entire team can (and should) get involved in the ideation, development, testing, and evolution of your interfaces and components.

CSS is the language for describing the presentation of web pages, including colours, layouts and fonts. But we can use CSS to create works of art in your browser. Let’s take a look at the CSS properties which can help us do that.

Modern CSS gives us the ability to set type for a dynamic medium, which is something relatively new, and requires us to look at typography with a fresh perspective. Chinese typography traversed its own parallel path of evolution over the centuries and this talk will cover the use of CSS as the typesetting tool of the web for both Chinese and Latin-based languages.

As more people move into the online world, it is more crucial than ever to ensure that the world’s diverse written languages have their place on the web. Typesetting on the web doesn’t involve metal sorts and composing sticks. Instead, we use web fonts and CSS. We will be covering the various font properties which, over time, have been continually evolving, giving developers better control over the typography of their projects, as well as even better performance with variable fonts.

We have a problem: modern web technology is getting ever more complex. As a result, teams are struggling to produce their best work and we are often failing the people we are building for. One reason for that: the infamous and ever-growing gaps between design and development. How can we overcome those divisions and deepen our common understanding of the material we are building with? And why is CSS one key component of all that? In this talk, we will look at possible solutions and practical examples that will enable us to forge links between the disciplines and to design and engineer better with the inherent flexibility of the Web – together.

In this talk I use my experience as a Front End Development Manager & Accessibility Lead to dissect the structure of a website. You’ll learn a 3 step process to evaluate designs & code to make decisions across disciplines to arrive at more accessible product experiences.

Some of the world's greatest print design was made on known canvases, with known content using known color options. On the web, we have more flexible tools. Media queries, flexible units, Grid Layout and Flexbox let us do great graphic design. With flexibility.

For centuries, typography has shaped the way we ‘hear’ what we read. In our web work, though, we've have to balance our typographic desires with user experience and performance, knowing that every weight, width, or style of a typeface required a different file download. Variable fonts change that, as they include every width, weight, slant, and other permutation of a typeface, all in a single file not much bigger than a regular font file. Now, beautiful web typography can be crafted to respond to screen size, language setting, even ambient light. In a detail-packed hour, Jason will show you not just how far the new capabilities can take us, but how to make use of them right away.

What is a Design System?

The web was invented to display text in a left-to-right horizontal writing mode — the way English and other western European languages flow. But as Bruce Lawson says, WWW stands for the World Wide Web, not the Western Wealthy Web. It's more important now than ever to be inclusive and global in our thinking, and resist imperialistic and nationalistic impulses.

CSS Grid revolutionizes how we create layouts on the web — but how exactly should we use it? When someone emails you a PDF, how do you know the best way to get started? Where should you use what code? How do you translate a static drawing into a dynamic layout? In the spirit of Smashing’s “no slides” rule, Jen Simmons will live code a design from start to finish (or however close to finish she gets before time's up). No net, no preparation. How does someone in the real world create a layout using the tools of Intrinsic Web Design?

2017 saw a sea change in web layout, one that few of us have truly come to grips with. We’re standing at the threshold of an entirely new era in digital design—one in which, rather than hacking layouts together, we can actually describe layouts directly. The benefits will touch everything from prototyping to custom art direction to responsive design. In this visionary talk, rooted in years of practical experience, Jen will show you how to understand what’s different, learn to think through multiple stages of flexibility, and let go of pixel constraints forever.

A wide collection of CSS tips and tricks. The best place to keep up to date with the new CSS features

A three-way color contrast checker for when you remove underlines from links.

inline-size is a logical property that defines the width of an element when the writing-mode is horizontal, or the height of the element when the writing-mode

Keyframes helps you write better CSS with a suite of tools to create CSS @Keyframe animations, box shadows, colors, & more

Quickly design web layouts, and get HTML and CSS code. Learn CSS Grid visually build web layouts with our interactive CSS Grid Generator.

An evergreen CSS course and reference to level up your web styling expertise.

CSS Code Golfing Game is here!

Wrap text around an image, shape, or object, just like you would in InDesign.

Extension for Visual Studio Code - Adds cost indicator to css properties in the form of inline decorations

CSS is what gives every website its design. Websites sure aren’t very fun and friendly without it! I’ve read about somebody going a week without