Something you very much want to avoid in web design is unreadable . That can happen when the background color of an element is too close or exactly the color of the text. For instance:

.header {
  background-color: white;
  color: white;
}

Which could lead to text that217;s there, but invisible.

- white on white - CSS Basics: Using Fallback Colors
This is … very bad.

You’d never do that on purpose of course! The trouble is it can sneak up on you. For one thing, the default background-color is transparent, so without setting any background the background of an element is probably white.

More commonly, you’re using a background-image that makes the background a different color, and you’re setting white text on top of that.

header {
  background-image: url(plants.jpg);
  color: white;
}

Under perfect circumstances, this is all good:

- white text - CSS Basics: Using Fallback Colors

But let’s take a look at what it looks like while the website is loading over a very common “Slow 3G” connection:

There’s no reason our dear visitor needs to wait to discover the incredible savings awaiting them this Sunday! Fortunately, a tiny bit of solves this.

header {
  background-color: black;
  background-image: url(plants.jpg);
  color: white;
}

The black background color will ensure the white text will be visible while the image loads (or if it never loads at all!). Getting slightly fancier, we could use a color used in the image. I like a little called Frank DeLoupe for helping me pluck a color from anywhere on my screen. Then I’ll use that color as the color using the shorthand syntax for backgrounds:

header {
  background: #334C23 url(plants.jpg);
  color: white;
}

Much much better.

This kind of thing takes very little effort, improves your design’s resiliency and UX, and I think you’ll find becomes are part of your CSS muscle memory the more you write CSS.

Another related topic here, since we’re working with a photograph, is the idea of a “Progressive JPG.” Photoshop has the ability to save a JPG in this format. This changes how the displays as it’s coming across the network. Here’s a comparison video:

A low-res version of the image loads into place first, and it becomes higher quality as more of the image loads.

Perhaps a more desirable loading , but not a replacement for a fallback color.

Leveling up!

Images are one of the heaviest parts of websites, and loading techniques for them are a big topic in web performance. Here are some more related to things to think about:



Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here