How do we build websites that stand the test of time? How do we make components that don’t buckle under the strain of new technologies and new devices? How do we build cute little pixel graphics?

These important themes, and more
From the blog

✻ Jeremy Wagner tackles your questions about using WebP images. If you’re unfamiliar with them, this is a relatively new image format that’s been designed to greatly improve performance:

Many techniques exist for slimming down unruly images, and delivering them according to the capabilities of the devices that request them. Such a topic can easily be its own book, but the focus of this post will be very specific: Google’s WebP image format, and how you can take advantage of it to serve images that have all the visual fidelity your images have now, but at a fraction of the file size.

✻ Chris ponders a reader question: Are icons content? We can imagine a "no" scenario: an ornamental addition to a button that has text anyway. We can also imagine a "yes" scenario: a stand-alone icon with an important interactive job. But are these really so different? Does it matter?

✻ Geoff Graham wrote an excellent post about the background-attachment property in Use Cases for Fixed Backgrounds in CSS. There’s a lot of subtle and not-so-subtle effects we can make with just plain ol’ CSS:

No scrolling performance issues here!

✻ In Trusting SSL Locally on a Mac Chris explains why you might want to emulate HTTPS security in your local environment:

I’ve had situations come up where it was actually quite important and affected development. Like a native PHP function that worked differently on HTTPS than HTTP. More commonly, I was working on HTTP locally and an asset was loaded over HTTPS and thus failed (needed manual approval of the insecure certificate).

✻ Geoff Graham also had some fun when he explored all the myriad ways in which to make CSS pixel art, like this Pen by Devi Krisdiansyah:

✻ Robin Rendle asks when is the right time to think about web performance? The short story: Right now! All of the time! Yet here lies the difficulty: collaborating with large design teamsin order to prioritise web performance over other constraints:

The way I’ve started to think about it is like this: every conversation about design is also a conversation about web performance. I try to remind myself that the two are inseparable from the other and so as a web designer I ought to be considerate of these problems from the very beginning of a project, not just at the end.

✻ Eduardo Bouças takes us step-by-step through WebPageTest and its API; how to run a test and read the results as well as how to run a test programmatically.

✻ And Jon Yablonski takes a look at developing extensible components with HTML and CSS, which is particularly useful if you’re working for large organizations. Here’s the crucial part of the post that eloquently describes why teams have to rethink their approach:

What I’ve come to value highly is extensibility, a systems design principle where the implementation takes future growth into consideration. The central theme of extensibility is to provide for change while minimizing impact to the existing system. For front-end development, this means building module variations that can easily be extended to fit the needs of the user interface while preserving the underlying foundation of the module. The end result is less code bloat, less fragmentation of the code base due to one-off solutions, and code that is easier to maintain.

What we’ve been reading, listening and watching

Mozilla has released Observatory which lets us scan any site for potential security threats and vulnerabilities:

✻ ✻ ✻

Eric Limer has written a charming article about the technical history and future of the GIF image format:

The GIF as an art form—a short and silent loop—has never been more popular than it is right now. Yet the GIF as a filetype, the way we store the library of ones and zeros that computers translate into animation, is quietly embattled. Behind the scenes, a war to exterminate it has been raging for years, and it never really ended.

✻ ✻ ✻

Mischa Andrews on the inaccessible web and how we got into this mess:

Whatever your needs or preferences, there’s almost certainly a way to access the web. Theoretically. In reality, the web is a mess. These accessibility options tend to be forgotten or stripped away, even though accessible websites and apps can absolutely still be beautiful, innovative and user-friendly.
What have you learnt this week?

Chris Coyier:  I've seen Mark Otto's WTF, forms? page make the rounds lately. And for good reason! It's an amazing resource for form styling. Though, a few people I saw linking it up missed the point a little bit I thought.

The other day after a friend asked me "Is it possible to style a dropdown with just CSS?" and I made him a quick demo using largely the CSS Mark has shared in wtf-forms. That's what wtf-forms is all about to me. It's not as much a design framework for forms as it is a reference for "how to I wrestle design control of these hard-to-style elements in CSS?" and in a cross-browser friendly way.


And also, have I reminded you to buy my brand new book on SVG enough times yet?

Until next time!
Team CSS-Tricks
Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list