Why Designers Don’t Want to Think When They Read

We’ve all seen articles like “The Top 5 Ways To Fix Your Sign Up Flow and Get On With Your Life.” Articles like this aren’t wrong or bad, they are just shallow and a bit junk food-y and BuzzFeed-y. Of course, a designer’s actual job is complicated, nuanced, and difficult. But deep dives into all that are far less common.

Khoi Vinh has been writing about this and points to some heavy self-reflection from Fabricio Teixeira and Caio Braga, publishers of the very popular UX Collective.

It’s clear that the currency of design discourse is really concerned with the “how” of design, not the “why” of it. As Teixeira and Braga write:

While designers tend to be skeptical of magic formulas—we’re decidedly suspicious of self-help gurus, magic diets, or miraculous career advice—we have a surprisingly high tolerance for formulaic solutions when it comes to design.

That’s a pointed criticism but, from my perspective, it’s also quite accurate.

Direct Link to Article — Permalink

The post Why Designers Don’t Want to Think When They Read appeared first on CSS-Tricks.

The Low Hanging Fruit of Web Performance

I kicked off a really poppin’ Twitter thread the other day:

So, I decided to round up all the ideas (both my own and yours) around that in a post over on the Media Temple blog.

These are the things we dive into in that post:

  1. Reduce Requests
  2. Optimize Assets
  3. Make sure you’re gzipping
  4. Make sure you’re browser caching
  5. Use a CDN
  6. Lazy Load and Defer Loading of Things
  7. Use responsive images (or at least use reasonable sizes)
  8. Mind Your Fonts
  9. Good Hosting / HTTP2 / PHP7
  10. Turbolinks

Direct Link to Article — Permalink

The post The Low Hanging Fruit of Web Performance appeared first on CSS-Tricks.

The Complete CSS Demo for OpenType Features

I’m very glad a guide for these features exists because we already know there are so many weird things that variable fonts can do — well done, Tunghsiao Liu!

There are quite a few possible values for font-feature-settings, like, ya know:

aalt, swsh, cswh, calt, hist, hlig, locl, rand, nalt, cv01-cv99, salt, subs, sups, titl, rvrn, liga, dlig, size, ornm, ccmp, kern, mark, mkmk, smcp, c2sc, pcap, c2pc, unic, cpsp, case, ital, ordn, lnum, onum, pnum, tnum, frac, afrc, dnom, numr, sinf, zero, mgrk, flac, dtls, ssty, ss01-ss20, smpl, trad, tnam, expt, hojo, nlck, jp78, jp83, jp90, jp04, hngl, ljmo, tjmo, vjmo, fwid, hwid, halt, twid, qwid, pwid, palt, pkna, ruby, hkna, vkna, rlig, init, medi, and fina

…to name a few.

Direct Link to Article — Permalink

The post The Complete CSS Demo for OpenType Features appeared first on CSS-Tricks.

Level up your hosting. Get started on DigitalOcean with $100.

(This is a sponsored post.)

Tired of slow, unreliable web hosting? See how easy it is to self-host your next project on DigitalOcean’s cloud platform. Build and manage ultra-fast websites, blogs, and other static web pages using our user-friendly control panel or simple API, all with a 99.99% uptime SLA. Save time using our One-Click install apps for WordPress, Ghost and Discourse. Never worry about running out of storage space again with Spaces — highly scalable, affordable object storage.

Sign up today with a free $100 credit for CSS-Tricks readers.

Direct Link to Article — Permalink

The post Level up your hosting. Get started on DigitalOcean with $100. appeared first on CSS-Tricks.

Designing With Code

Wall Street Journal design director Matthew Ström on something near and dear to me: the link between code and design tools:

We’re in the middle of a design tool renaissance. In the 8 years since Sketch 1.0 was released, there’s been a wave of competition among traditional design tools. And as the number of tools available to designers grows exponentially, ideas that were once considered fringe are finding a broader audience.

One of these ideas will significantly change the way digital products are designed: integrating design and code at a deep level. Figma can update a React code base in real time; InVision, Abstract, and Zeplin have done away with design-developer handoff documents; Framer’s new Framer X can render interactive React components directly into its workspace. These examples are just a hint of what’s to come.

Matthew then looks at how this combination of code and design has been improving his own design process, specifically on the “story cards” that appear on the homepage of the WSJ:

A tiny bit of NodeJS fills in the cards with live data from the WSJ.com home page. I can make small changes to parts of the component and see how the system reacts in a matter of seconds. This multiplicative process means that small changes have a huge output, making my designs much more comprehensive in the process.

I really can’t wait to see how our design tools are evolve. It’s a thoroughly exciting time to be a designer that’s interested in code.

Direct Link to Article — Permalink

The post Designing With Code appeared first on CSS-Tricks.

JAMstack_conf

I love a good conference that exists because there is a rising tide in technology. JAMstack_conf:

Static site generators, serverless architectures, and powerful APIs are giving front-end teams fullstack capabilities — without the pain of owning infrastructure. It’s a new approach called the JAMstack.

I’ll be speaking at it! I’ve been pretty interested in all this and trying to learn and document as much as I can.

Save $100 with csstricks100.

Direct Link to Article — Permalink

The post JAMstack_conf appeared first on CSS-Tricks.

A Tale of Two Buttons

I enjoy front-end developer thought progression articles like this one by James Nash. Say you have a button which needs to work in “normal” conditions (light backgrounds) and one with reverse-colors for going on dark backgrounds. Do you have a modifier class on the button itself? How about on the container? How can inheritance and the cascade help? How about custom properties?

I think embracing CSS’s cascade can be a great way to encourage consistency and simplicity in UIs. Rather than every new component being a free for all, it trains both designers and developers to think in terms of aligning with and re-using what they already have.

Direct Link to Article — Permalink

The post A Tale of Two Buttons appeared first on CSS-Tricks.

CSS Logical Properties

A property like margin-left seems fairly logical, but as Manuel Rego Casasnovas says:

Imagine that you have some right-to-left (RTL) content on your website your left might be probably the physical right, so if you are usually setting margin-left: 100px for some elements, you might want to replace that with margin-right: 100px.

Direction, writing mode, and even flexbox all have the power to flip things around and make properties less logical and more difficult to maintain than you’d hope. Now we’ll have margin-inline-start for that. The full list is:

  • margin-{block,inline}-{start,end}
  • padding-{block,inline}-{start,end}
  • border-{block,inline}-{start,end}-{width,style,color}

Manuel gets into all the browser support details.

Rachel Andrew also explains the logic:

… these values have moved away from the underlying assumption that content on the web maps to the physical dimensions of the screen, with the first word of a sentence being top left of the box it is in. The order of lines in grid-area makes complete sense if you had never encountered the existing way that we set these values in a shorthand.

Here’s the logical properties and how they map to existing properties in a default left to right nothing-else-happening sort of way.

Property Logical Property
margin-top margin-block-start
margin-left margin-inline-start
margin-right margin-inline-end
margin-bottom margin-block-end
Property Logical Property
padding-top padding-block-start
padding-left padding-inline-start
padding-right padding-inline-end
padding-bottom padding-block-end
Property Logical Property
border-top{-size|style|color} border-block-start{-size|style|color}
border-left{-size|style|color} border-inline-start{-size|style|color}
border-right{-size|style|color} border-inline-end{-size|style|color}
border-bottom{-size|style|color} border-block-end{-size|style|color}
Property Logical Property
top offset-block-start
left offset-inline-start
right offset-inline-end
bottom offset-block-end

Direct Link to Article — Permalink

The post CSS Logical Properties appeared first on CSS-Tricks.

“Old Guard”

Someone asked Chris Ferdinandi what his biggest challenge is as a web developer:

… the thing I struggle the most with right now is determining when something new is going to change the way our industry works for the better, and when it’s just a fad that will fade away in a year or three.

I try to avoid jumping from fad to fad, but I also don’t want to be that old guy who misses out on something that’s an important leap forward for us.

He goes on explain a situation where, as a young buck developer, he was very progressive and even turned down a job where they weren’t hip to responsive design. But now worries that might happen to him:

I’ll never forget that moment, though. Because it was obvious to me that there was an old guard of developers who didn’t get it and couldn’t see the big shift that was coming in our industry.

Now that I’m part of the older guard, and I’ve been doing this a while, I’m always afraid that will happen to me.

I feel that.

I try to lean as new-fancy-progressive as I can to kinda compensate for old-guard-syndrome. I have over a decade of experience building websites professionally, which isn’t going to evaporate (although some people feel otherwise). I’m hoping those things balance me out.

Direct Link to Article — Permalink

The post “Old Guard” appeared first on CSS-Tricks.

Firefox Multi-Account Containers

It’s an extension:

Each Container stores cookies separately, so you can log into the same site with different accounts and online trackers can’t easily connect the browsing.

A great idea for a feature if you ask me. For example, I have two Buffer accounts and my solution is to use different browsers entirely to stay logged into both of them. I know plenty of folks that prefer the browser version of apps like Notion, Front, and Twitter, and it’s cool to have a way to log into the same site with multiple accounts if you need to — and without weird trickery.

This is browsers competing on UI/UX features rather than web platform features, which is a good thing. Relevant: Opera Neon and Refresh.

Direct Link to Article — Permalink

The post Firefox Multi-Account Containers appeared first on CSS-Tricks.