Show, Don’t Tell

How much time do you spend designing the content presentation for your websites? When you write a new blog post or create a new page, are you thinking about just the words, or how your readers will engage with those words? With these few tips in mind, you can make your site’s content easier to digest and more visually interesting for your visitors.

---

Use good basics

Think about your content’s structure. How can you break down a wall of information into easily digestible chunks? There are some basic formatting rules you can follow to take lots of information and make it easier to read and understand.

Break it up

Use headings and subheadings to group together related content. 

Readers on the web scan for information, rather than reading everything line-by-line. Chunking your content into smaller sections, called out by larger headings, helps them find the information they’re searching for.

When I’m trying to find something quickly, there’s nothing more intimidating than jumping onto a site with a giant wall of unbroken content. At best, I’ll cmd+f and search for specific keywords, but usually I’ll just say “lol no” and look for the information elsewhere.

Just see for yourself — which of these examples seems more approachable?

❌ Bad formatting

✅ Good formatting

Where possible, break down paragraphs into lists. Lists make scanning easier!

❌ Harder to scan

✅ Easier to scan

If I’m reading through content that has multiple steps, for example, I need lists in order to follow along. Whenever I encounter any sort of instructions that don’t break down individual tasks into lists, my brain just can’t pull out the requires steps. I lose my place, or miss something, and get confused. This is true whether you’re listing ingredients, steps in a tutorial, or the different services your company offers. Please, help my brain and make lists.

Call it out

Take advantage of bold and italic formatting to call out important text. 

For example, bold the most important part of a sentence to make sure that readers scanning through your content catch their eyes on what’s most important. If you’re writing an article, what information do you want your readers to remember long after they close your tab? 

Use italics when referencing or citing information, whether that’s a title, quotation, or your own inner dialogue. 

Using good formatting isn’t just helpful for people physically reading your site — it’s also useful for the robots we use to speak your content out loud, whether that’s screen reading software or your virtual assistant. As more of our digital content becomes accessed in physical space, the need for proper semantics becomes even more important.

Aaron Gustafson’s Conversational Semantics goes into this subject more, if you’re curious.

Create emphasis

You can go beyond content formatting like bold and italics to show emphasis, and use tools like layout, color, and imagery to draw attention to your most important information.

Humans process visual information 60,000 times faster than text. Is this figure true? Who knows! I couldn’t find the original data, just tons of websites citing other websites citing some study, but honestly, I’m willing to believe this giving my own experiences browsing content on the web. One of the reasons I find avatars are so helpful is that when scrolling through conversations, whether on Twitter or a chat app like Slack, I identify people first by their avatar, then by their name. Whenever someone updates their avatar I get kind of annoyed at first before my brain catches up and gets used to the new image.

Sorry, who is this?

I know that avatar!

Use imagery to both complement and emphasize your content, whether that’s adding an icon, illustration, or photo your text. Aim for imagery that helps people understand what your content is saying.

For example, take IKEA instructions. Assembling furniture is hard, and IKEA’s visually-driven directions make building your own furniture a little bit easier. 

IKEA MALM instructions

(Just don’t go overboard — a confusing icon or busy image could distract, not help.)

Beyond images, you can also use layout or color to help call out information. Have a bunch of numbers? Organize them into a table, or call out numbers with larger text in their own columns, rather than writing everything out into a paragraph. 

Product	Width	Height
Green Entrance Rug	3′	2′
Purple Area Rug	4′	4′
Multicolor Area Rug	4′	6′

Using a table to display lists of numerical information

205

Websites Built

164

Happy Clients

Using columns to call out important text

Use blockquotes or pullquotes to highlight specific quotations or important parts of your articles.

Need to direct someone to specific or timely information? Wrap that content in a callout box. 

Think outside of just paragraphs! When browsing a website or reading through a book or magazine, what kind of content catches your eye the most? What information do you remember later? Take inspiration from around you.

Tell a story

People are emotional. We remember stories, especially stories we can relate to. Can you frame your content as a story? Can you present it with a curious beginning and strong resolution? Is there conflict? 

During the US 2020 presidential election, Elizabeth Warren’s tech team put together a number of interactive digital experiences for voters to engage with, such as Warren’s Tax the Ultra-Rich plan and accompanying Billionaire Calculator. They wrote up a case study that goes into more depth, but I want to highlight how the informational scrolling pages they built (nicknamed “scrollytelling”) quite literally highlights the important information, providing relevant linked content to learn more, add citations, or inject some additional personality. The pages blend embedded interactive content to engage you as a reader, video, images, and text. It’s a compelling way to present Warren’s story.

Try new ways ways of presenting information

Remember, the web is an interactive platform — take advantage of that, where appropriate (less is more, accessibility is integral, and you need to know your audience). Whether that’s scrollytelling, captioned video, and heck, maybe for your audience, now’s the time to start looking into AR/VR! Who knows. Sometimes you just need to try stuff out and see what sticks. Just be careful. Experimentation is great, but we need to make sure we’re bringing everyone along for the ride. 

Of course, more complex interactions require more work and/or budget, so what you can create with your content depends on your resources. The kind of storytelling you create will different whether you’re a DIY blogger or have access to an agency or internal creative team. And that’s fine — not every article needs to be as media-rich an experience as Snowfall. Even the addition of some simple illustrations, like in Samir Nosrat’s SALT FAT ACID HEAT, can create a great vibe for your readers and help enrich understanding.

SALT FAT ACID HEAT uses illustrations in place of photographs to add visual interest, inform, or demonstrate technique

Whether you’re crafting your first website or you’re a seasoned writer, there’s probably more you can do to present your content in interesting and engaging ways. Next time you make something new, think about the different ways you can show, not tell, information to your audience.

from CSS-Tricks https://ift.tt/32xukvJ
via IFTTT

Personalize it!

Ensuring accessibility is a clear path to making your website better. When you make your site accessible, you grow your audience, improve the experience for all people using it (not just those with accessibility needs), and you get SEO benefits as well.

Along the same lines, preference-query customization is another great opportunity to give your users a personalized experience that speaks to them and is more enjoyable to use.

One preference query you can take advantage of is prefers-reduced-motion. This preference means that your users would prefer a web experience without flashy, quick animations. You can write your styles in a way that supports this preference, and then write a media query for those who don’t have this preference set to get your “louder” interactive experience:

Another preference to consider is a user’s preferred color scheme. While most sites today use a light theme by default, dark themes have been a top request over the past few years, especially for browsing the web at night. Providing a customized theming that aligns with your user’s preferences is another way to improve your user’s experience. 

You can do this efficiently by using CSS custom properties, and adjusting those custom property values with the prefers-color-scheme media feature. If you use general values like background, text, and highlight, you can update your values all in one place.

Don’t forget to use the color-scheme property as well to automatically get some theme conversion from the browser. Setting this property tells the browser what color themes (light, dark, or both) the page supports. In turn, the browser will automatically convert form controls and browser UI like scrollbars to the correct theme as well:

In this demo, even though I’m not setting the text color for my color themes, since I told the browser the site supports both light and dark themes with color-scheme: light dark in the :root, it automatically switches the typeface from black to white.

You can test your dark theme without changing your system settings in Chrome DevTools under the “Rendering” panel. This illustration shows the site houdini.how in its dark mode:

Another bonus to creating a dark theme is the battery life savings you’re providing your users. In  a Pixel 6 Lab study, it was found that for an OLED screen, a dark theme saves 11% in power consumption. 

So now you’re respecting your user’s accessibility needs, preferences, and battery life, which is a pretty great way to make your website better for your users.

from CSS-Tricks https://ift.tt/3yZ3JnB
via IFTTT

Why Ember?

There was a time when I’d write React, Angular, and Ember as a kind of generic grouping of three major JavaScript frameworks. And maybe just because three is a nice number, that became React, Vue, and Angular over time, thanks to Vue having shot up in popularity over the years. Ember, in my view, has always been a bit of an underdog, but not because it isn’t actively developed, doesn’t offer a great modern web development story, or doesn’t have a strong community of super fans.

Melanie Sumner put together this splash page as a reminder to folks out there that Ember is still a compelling choice:

Ember is a JavaScript framework that provides everything you need to build a modern web application. While there are lots of reasons to use Ember, the number one reason is this: you’ll gain developer productivity by escaping the churn of the hype cycle.

I guess just because it was originally named Amber doesn’t mean it’s trapped in amber.

To Shared Link — Permalink on CSS-Tricks

from CSS-Tricks https://ift.tt/3FkSGaL
via IFTTT

Increase Your Reach

NGL, I was a little overwhelmed when I sat down to write this article. There are so many things that immediately flooded my mind—take out any extra divs; use links for URLs, use buttons for events and actions; use semantic HTML instead of divs everywhere; use variable fonts… the list went on and on. But, I finally settled on a single, practical thing that people can do to make their website better:

Increase your reach.

Increase the reach of your website by making it more usable for a wider audience of people. Yes, I’m talking about accessibility. But I bet you already guessed that. After all, I tend to speak about accessibility quite a bit, and tweet about accessibility even more than that, and sometimes even make handy examples on CodePen to provide practical examples.

However, when I’m talking about reach, I am not just talking about people who are blind and rely on assistive technology—such as screen readers—to do their banking or pay their utility bills. I’m not just talking about people who are deaf who need captions on videos. I’m not just talking about people who are colorblind, who need color contrast so they can see what is on the page. Sure, this is where our minds automatically go when we think about accessibility, but I want us to think beyond that.

It’s neither just about having a disability nor about having a disability

That’s an outdated way to think about it—and too reductionist for the complex landscape of the world today. Think about it: who only accesses a website when they are at their desk in a well-lit area, while wearing noise-cancelling headphones, and staring at a beautiful retina display? A very small group of people, and, ironically, usually only the people who are making websites for everyone else. Not a very realistic way to think about any of this when our intended audience is global, is it? Instead, let’s start thinking about the plethora of ways someone could interact with the websites we create.

Let’s think about the different kinds of devices they have, what their physical condition might be at that moment, and maybe even what their physical surroundings are. Let’s make sure we are reaching as many potential users as possible- no matter what device they are on, no matter where in the world they are. This is how we can break past our own mental barriers and really think about what we need to provide in order to increase the number of users we can reach.

Make things easier

Make it easier for people to see your website when they are on their mobile phones in the bright sun. How can we do this? One way is to make sure our sites have enough color contrast, something we can do with the many online color contrast checkers at our disposal. Make it easier for people to access the information they need when their bandwidth is low, by shipping less JavaScript. Make it easier for the person who forgot their headphones to watch your video in a public place by providing captions. Put the contact information in a consistent, easy-to-find spot so the user who is stressed out can get ahold of someone without adding more stress to their situation. Make it easier for the person with a puppy in one hand and a mobile phone in the other to successfully interact with links and buttons by increasing the sizes of the interactive areas across the site.

If you’re a UX or visual designer, maybe this will inspire you to come up with some fresh perspectives for your existing user personas. Plus, it’s easier to get people on board if your persona examples include puppies. It’s not my rule; it’s just how it works. I’d personally lean toward kittens… maybe puppies and kittens? But I digress.

If you’re a developer, you might not think that any of these things are within your power to influence or control. As a developer myself, I don’t particularly agree with this mindset; but for the purpose of successfully writing this article, let’s pretend for a minute that I do. Let’s look at three things that developers can do to help increase the reach of the websites they work on.

Get all of your page content into landmark regions

From a practical perspective, this most commonly means header, main, aside and footer, but there are a few others as well—read up on them in the ARIA spec for the full list. What is the reason you want to do this? Well, one of the handy ways that screen reader users navigate around the page is by—you guessed it—landmark regions. The W3C’s WAI-ARIA website has a great example of the different kinds of screen readers using this feature, so be sure to check it out and see just how helpful it really is! If you’re working with page templates it can be easier than ever to make sure the primary template is set up correctly, too. This is definitely one place where developers can help make it easier for some users to successfully and easily use the sites they help build.

Add automated checks

We’re still pretty early in for the number of accessibility issues we can check for in an automated fashion, and you can still have a website that completely passes existing automated checks but is still inaccessible. That being said, it’s still worth getting it into your automated build process now. The bonus is that you can improve your codebase as new automated checks come out, which gives you time to get used to the existing checks. Use a template linter for static checks. Some IDE extensions can give you real-time feedback while you write your code! Automated tests can be used for dynamic code checks.

Add accessibility to your mental checklist

Heck, add it to a physical checklist until it’s ingrained in your mental checklist. Either way, get it in there. Here are some ideas to get you started:

1. Ask about accessibility if you don’t see any annotations on the designs or feature specs you receive.
2. Check the keyboard focus order when you’ve got the site up and running locally or in a container; TAB around and make sure you can get to all of the interactive elements.
3. Review PRs with accessibility in mind. If someone has used a link where they should have used a button—or worse, they’ve used a div with no keyboard support—then give that feedback. This might mean you have to go remind yourself (or learn if you were never taught) what native browser support already exists for interactive elements.

Stay compassionate and curious

No matter what your role is, be compassionate toward the users you already have. Be curious about the kind of users you might not have…yet. Be curious about the ways you can increase your reach by thinking outside the box of “everyone does it this way.” We are the ones who have created the web and the limits of what it can do, and we’re the ones who will take it to the places it can go next. Think outside of the machine you develop on, and be curious about the possibilities of a more inclusive experience that reaches more people.

from CSS-Tricks https://ift.tt/3yQlANk
via IFTTT

Links on Performance V

1. Does shadow DOM improve style performance? — Nolan Lawson covers how, because of the inherent encapsulation of the shadow DOM, the styling gets applied a bit faster than it would if those styling rules were relevant to the entire page. But as ever, it depends, and it turns out that classes and IDs are actually faster outside of it (?!), so if you just style with those, that’s the way to go.
2. HTML-first, JavaScript last: the secret to web speed! — Miško Hevery is talking about Qwik and one of the things that makes it fast. I don’t know much about Qwik, but it looks like a JavaScript framework that is pretty SSR-friendly as it keeps state directly in the HTML/DOM (e.g. div ::app-state="./AppState" app-state:1234="{count: 321}">), which you would think is slow, but apparently isn’t.
3. Small Bundles, Fast Pages: What To Do With Too Much JavaScript — Some thoughts from Ben Schwarz on what to do with those problematic big bundles. Make ’em smaller is the main game, then constantly keep an eye on them.
4. Getting Your head Straight: A New CSS Performance Diagnostics Snippet — We covered Harry’s super clever snippet a while back, but Vitaly had beaten us to it and it’s worth re-sharing because it’s awfully cool.
5. New HTTP standards for caching on the modern web — Tim Perry gets into two brand new (proposed) caching headers: Cache-Status and Targetted Cache-Control. “These are designed to update HTTP standards to match the reality of the CDN-powered web that exists today, creating specifications that formalize existing practices from popular CDNs.” Feels like good stuff where web standards can come in and fix up a gnarly situation.
6. Optimizing resource loading with Priority Hints — Leena Sohoni, Addy Osmani, and Patrick Meenan talk about the Priority Hints…. uh… I’d call it an API except it’s really just an importance attribute in HTML, or a JavaScript param in other APIs. Here’s the draft spec. It’s one of those things, like responsive images with srcset/sizes or will-change, where you, the-author, know more than the browser does and allows you to give the browser information it needs to perform better.
7. Have Core Web Vitals made the web faster? — CWVs were announced in May 2020 and then we were told by May 2021 they would become a factor in SEO. Barry Pollard checks in to see if that big carrot (or stick?) has enticed us all to make sites faster en masse. The answer is complicated because the way CWVs are measured has changed in that time. Some measurements say yes, things are better. But if you use steady alternate measurements from before/after, things look worse. I all depends on what slice of the web you’re looking at.
8. Improving performance with Islands Architecture and PostCSS — Astro has a cool feature for components—like <Sidebar client:media={"(min-width: 768px)"} />—where that element isn’t loaded at all unless that media query matches. I might argue that’s only a good idea if it’s a heavy component or has JavaScript it requires. I say that because it seems like using it for something like static HTML would actually offset any potential savings, as extra JavaScript has to run to test the media conditions and then conditionally fetch assets. But anyway, Oliver Turner demonstrates how to share the media queries between your JavaScript and CSS (via PostCSS).
9. Image Optimizer — This is an Electron-powered (but macOS only) drag-and-drop image optimizer. Like ImageOptim, I suppose. Both are free.

from CSS-Tricks https://ift.tt/32iV17r
via IFTTT

Make Joyful Things

Everything kind of sucks right now. Things—generally—feel bad. Setting aside the broader realities of a global pandemic and rampant social injustices, we’re watching the identity of the web platform, an intrinsically free and open medium of creative expression, co-opted for the “Web 3.0” grift built on artificial scarcity and an accelerating climate crisis.

Websites (mostly) look kind of the same. The proliferation of frameworks, vector design tools, data-driven design and an imperative to maximize business value (oh dear, it was capitalism all along) has led to a status quo of design by default. Websites having their own, consistent, portable UX language that helps users quickly comprehend new sites is great, but embracing that language is a trade-off, and design doldrums is the cost.

What if it didn’t have to be this way? What if we decided to create joy with our work? After all, in a profoundly dark time for many, making someone smile or laugh with your work is a special thing. Shouldn’t we try to do that if we can?

“Okay, you got me, but how?” I hear you ask.

Well, this is how:

The web community is bursting with folks who create joy with their work. Let’s look at how they do it.

Unexpected interactions

Did you know that the web is an interactive medium? I know, weird, right? People get an “oooh neat” feeling when something responds to them. Cats knock stuff off shelves, people hover and click on stuff. It’s simple biology (probably; I’m not a biologist).

Cassie Evans puts the “virtuoso” in SVG (the V stands for virtuoso) (it does not) with this animated portrait on her personal site. I absolutely adore how it tracks the cursor in a natural-feeling way, and I love how her expression changes when you hover an interactive element.

I loved this little hover interaction from Josh Comeau’s site. I thought that there might be a hidden interaction in this 3D illustration, but I was surprised to see the background react to my cursor. As far as I can tell, it doesn’t serve a “purpose” and it cost me a few precious moments I could have spent Engaging With Content, but it made me smile.

This little pop-up book-esque pull tab on Lynn Fisher’s site is lovely. I’m sure a click or scroll would be easier to implement and get the job done, but this is special. It’s different, it’s unexpected. It’s fun. Every single iteration of her site is excellent, so I encourage you to check out her archive.

Animation

We’re finally at the place where motion is baked into design systems and considered (nearly) as important as your typefaces and colors. Despite this, we can still use animation to elevate an interaction from neat to joyful.

Another banger from Josh Comeau: this little interaction on his blog’s Like button. It could just be a ❤️ icon, sure, but it’s full of delightful personality, with lots of appeal and secondary action. The bouncy easing curve and the exuberant expression creates appeal, while the +1 and confetti at the end add some welcome secondary action. This even reinforces the experience because it encourages folks to hit that little button. Go try it out, there are also some wonderful little sound effects!

3D

Between WebGL and CSS 3D, pushing the web beyond two dimensions has been possible for ages. Good news is that it’s still a specialized skill and sometimes a pain in the ass, so it’s still rare. Even after “3D illustration” became all the rage, interactive 3D elements are still a great way to inject a little personality.

lepuzz.com is a joyful website throughout, but I especially love the spinning product images you get on hover.

Internet cryptid “Henry” “Desroches” adds a bit of personality with these animated 3D flags that appear when hovering over his case studies. He uses a noise texture to displace vertices on a plane, which creates this lovely, soothing effect.

Don’t turn this into a listicle, let’s wrap this up

• Break the rules!
• Use weird colors!
• Put animations and interactions where they don’t belong!
• Use sound effects!

The web is as much a cultural artifact as it is a platform for tricking people into looking at ads. We have the power to make people happy with our work; to share the love in a literal sense.

Understand that prioritizing joy will have a cost. Like everything else involved with making things, its a tradeoff. It might make someone’s computer fans turn on which will make some people—who are not in the pocket of Big Fan—extremely upset. It might be slower, and less usable for folks on slower devices. Creating joy will take time that you can’t spend on maximizing key metrics and synergizing upward overflow; mitigating the negative impacts of these tradeoffs will eat yet more time. There’s a reason that almost all of the above examples are from personal sites and not big Brands, after all.

What if making somebody smile is worth it though? What if it’s worth the cost? In a lot of ways, we’re living in shitty times. It’s worth giving up a little to take your shot at making someone’s day. L

from CSS-Tricks https://ift.tt/3mpM9Ed
via IFTTT

Auto Dark Theme

There are a number of ways to approach a dark mode for your website, but essentially you get all the styles ready for it and then apply them when the user has indicated they want them, whether by direct choice or a system-level preference. If your website doesn’t have a dark mode, well, then, it doesn’t have a dark mode.

Chrome is testing changing that, and forcing your website to have a dark mode if a user has indicated they prefer them at the system level. André Cipriani Bandarra:

With this feature, the browser applies an automatically generated dark theme to light themed sites, when the user has opted into dark themes in the operating system. Users can opt-out of dark themes by either disabling the option on the OS level or in a specific setting in Chrome.

A little scary, I think. But hey let’s give it a test to see. They’ve built in the ability to test this right into Chrome DevTools.

Just looking at my own site quick…

Emulated dark theme on left, normal on right. 😭

The homepage looks like crap, as it didn’t flip out the explicit white background color. Not sure why, as it does on article pages where it looks much better:

The link blue feels too dark to me, but otherwise it kinda makes me want to build a real dark theme.

The WordPress admin famously has no dark mode, so here’s a look at that:

Kinda good?

I have mixed feelings about it. On one hand, users should have control over what they want to see in their browsers on their computers. Nobody is claiming accessibility features like high contrast, invert colors, or reduced motion modes shouldn’t exist. They directly affect website rendering. This could be considered an accessibility feature. On the other hand, this can cause accessibility problems (case in point: the contrast issues visible right here in that first screenshot).

This is just an Origin Trial for now, so I imagine there is plenty of time before this ships and for problems to get ironed out. But the web is huge so I imagine the edge cases here are absolutely bonkers and this is going to be very hard to perfect. It’s not even clear if this is just a Chrome-on-Android thing or if it will spread wider than that. It’s also not clear that if it leaves your site alone if you have a hand-crafted dark mode, or if it still messes with the design. Me, I’d probably use their mechanism for opt-ing out until I could get the details right.

from CSS-Tricks https://ift.tt/3H0V7Q4
via IFTTT