Articles by

Amelia Bellamy-Royds

For the past few weeks there has been lots of talk about HTML headings in web standards circles. Perhaps you've seen some of the blog posts, tweets, and GitHub issue threads. Headings have been part of HTML since the very first websites at CERN, so it might be surprising to find them controversial 25 years later. I'm going to quickly summarize why they are still worth discussing, with plenty of links to other sources, before adding my own opinions to the mix. If you're up-to-date on the debate, you can jump straight to the "Bigger Dilemma" section.

(more…)

The following is a guest post by Amelia Bellamy-Royds. I've always enjoyed the "duotone" effect in photos. In Photoshop, you can create them by converting an image into grayscale mode, then into duotone. So the lights are "mapped" to one color, and the darks another. Not only does it look cool, but images with less colors are smaller in file size and thus good for performance. When I saw Amelia playing around with this programatically through SVG on CodePen, I asked if she'd be up for teaching us through a guest post. Lucky for us, here it is!

Once upon a time, if you wanted artistic images in your web design, you created them in Photoshop. Or maybe GIMP, if you were edgy and open-source inclined. But either way, the end result was a single, static, image file that was uploaded to your server, downloaded to your user's web browser, and displayed exactly as you created it. If you wanted to turn a graphical effect on and off in response to user interactions, then you exported two different image files, and you swapped them with JavaScript or CSS pseudo classes.

Graphical effects—first in SVG, now in CSS—are changing that. You can apply Photoshop-like filters or blended layers right in the browser. Which means you can use a single image file and present it in multiple ways as the user interacts with it. It also means you can have a lot of fun with a boring-old black and white photo.

(more…)

The following is a guest post by Amelia Bellamy-Royds and me. Amelia and I recently presented at the same conference together. We both covered SVG, yet neither of us SVG fallbacks comprehensively. It's such a huge topic, after all. While I've covered SVG fallbacks before, it's been a few years and we figured we could do that subject better justice now. Here we go!

(more…)

The following is a guest post by Amelia Bellamy-Royds. Amelia has lots of experience with SVG, as the co-author of SVG Essentials and author of the upcoming Using SVG with CSS3 and HTML5. Amelia and I both will be speaking on SVG at the upcoming RWD Summit as well! Here, she shares an epic guide to scaling SVG, covering all the ways you might want to do that. It's not nearly as straightforward as scaling raster graphics, but that can be good, because it opens up interesting possibilities.

(more…)