Adactio: Links

Psiu Puxa Wallpapers

Yummy wallpapers for your desktop, tablet, and phone, from NASA and ESA.

chartd - responsive, retina-compatible charts with just an img tag

This could be a handy replacement for some Google Charts images of graphs. It uses SVG and is responsive by default.

I bet it wouldn’t be too tricky to use this to make some sparklines.

GitHub’s CSP journey - GitHub Engineering

A step-by-step walkthrough of how GitHub has tweaked its Content Security Policy over time. There are some valuable insights here, and I’m really, really happy to see companies share this kind of information.

Instagram-style filters in HTML5 Canvas | Viget

Una’s [Instagram filters in CSS}(https://github.com/una/CSSgram) are great, but the browser support for CSS filters isn’t as good as, say, the browser support for canvas. Here’s a clever bit of scripting to polyfill filters using canvas.

Styling Broken Images

This is really, really clever. You can’t use generated content (:before and :after) on replaced content. The img element is replaced content …but only when the image actually loads. So if the image fails to load, you can apply specific fallback styles (using :before and :after).

Responsive Image Breakpoints Generator by Cloudinary

A very handy tool for figuring out breakpoints for responsive images.

Upload an image in its largest size, play around with the settings, and then generate the breakpoints, the markup, and the resized images for each breakpoint.

SpaceHolder – A space-themed image placeholder service.

We’ve got Space Ipsum for text. Now we have SpaceHolder for images.

The web accessibility basics – Marco’s Accessibility Blog

Marco gives a run-down of the basics of getting accessibility right on the web. Nothing here is particularly onerous but you’d surprised how often developers get this wrong (or simply aren’t aware of it).

He finishes with a plea to avoid unnecessary complexity:

If there’s one wish I have for Christmas from the web developer community at large, it is this: Be good citizens of the web, and learn proper HTML before you even so much as touch any JavaScript framework. Those frameworks are great and offer a lot of features, no doubt. But before you use hundreds of kilobytes of JavaScript to make something clickable, you may want to try if a simple button element doesn’t do the trick just as fine!

HIKE - Introduction to accessibility concepts for the Web

It really isn’t hard to get the basics of accessibility right on the web …and yet those basics are often neglected.

Here’s a handy shortlist to run through, HIKE:

H stands for headings and semantic markup.

I stands for images and labels.

K stands for keyboard navigation.

E asks for you to ACT with a little extra love for custom components and more.

(ACT = ARIA, Colour Contrast, Text Size)

Smaller, Faster Websites - - Bocoup

The transcript of a great talk by Wilto, focusing on responsive images, inlining critical CSS, and webfont loading.

When we present users with a slow website, a loading spinner, laggy webfonts—or tell them outright that they‘re not using a website the right way—we’re breaking the fourth wall. We’ve gone so far as to invent an arbitary line between “webapp” and “website” so we could justify these decisions to ourselves: “well, but, this is a web app. It… it has… JSON. The people that can’t use the thing I built? They don’t get a say.”

We, as an industry, have nearly decided that we’re doing a great job as long as we don’t count the cases where we’re doing a terrible job.

The “Blur Up” Technique for Loading Background Images | CSS-Tricks

Quite a few moving parts in this technique from Emil, but it’s very clever.

Moodboard — a small JavaScript library for presenting image moodboards on the web

A lovely little script from Nat to create a nice montage of images. It works by progressively enhancing a regular series of images in the markup.

The anatomy of responsive images - JakeArchibald.com

This is the best moment to write a blog post:

I just had my responsive images epiphany and I’m writing it all down before I forget everything.

Writing something down (and sharing it) while you’re still figuring it out is, in my opinion, more valuable than waiting until you’ve understood something completely—you’ll never quite regain that perspective on what it’s like to have beginner’s mind.

Scribblit

This is so nifty! Mikey has made a site where you can order his interactive artwork.

Interactive? That’s right! Each framed picture comes with a pen so you can doodle over the picture (and wipe it clean again).

Check out The Fett and The Falcon!

INTERNET IMAGES ^ 10

This is just wonderful: Powers Of Ten recreated using images from the internet. Also available as a flip book!

When Responsive Images Get Ugly by Taylor Hunt on CodePen

This is a deep, deep dive into responsive images and I can only follow about half of it, but there are some really useful suggestions in here (I particularly like the ideas for swapping out images for print).

A Practical Guide to SVGs on the web

Handy tips for creating, optimising, and using SVG on the web, be it in CSS or HTML.

A Complete Guide to SVG Fallbacks | CSS-Tricks

An up-to-date round-up of the various techniques available when you want to provide a fallback for SVG.

Google’s authentication-less, on-the-fly image resizing service

Did you know Google runs a free an open image resizing service?

I did not! This could be quite useful. Seeing as it’s an https endpoint, it could be especially useful on https sites that pull images from http domains (and avoid those mixed-content warnings).

Better SVG Fallback and Art Direction With The <picture> Element

Smart thinking from Sara on providing a PNG fallback to browsers that don’t support SVG. Although, actually what I like about this solution is that it’s less about providing PNG as a fallback, and more about treating PNG as the baseline and SVG as the enhancement (an approach that the picture element is perfect for).

WebP via picture

This strikes me as an eminently sensible idea by Emil: using the picture element to begin providing WebP alternatives to JPG.

~~Of course, picture-supporting browsers will have to adjust their decision-making algorithm to support this pattern.~~

Oh, Jeremy, you silly billy. It turns out that this works right out of the box. Nice!

Responsive Images in Practice · An A List Apart Article

A great primer on using srcset and picture. I think I’ll be referring back to this a lot.

Keep ’em Separated — ericportis.com

I share the concerns expressed here about the “sizes” attribute that’s part of the new turbo-powered img element (or “the picture element and its associates”, if you prefer). Putting style or layout information into HTML smells bad.

This is a concern that Matt Wilcox has raised:

Change the design and those breakpoints are likely to be wrong. So you’ll need to change all of the client-side mark-up that references images.

I can give you a current use-case: right here on adactio.com, you can change the stylesheet …so I can’t embed breakpoints or sizes into my img elements because—quite rightly—there’s a separation between the structural HTML layer and the presentational CSS layer.

Responsive Images: If you’re just changing resolutions, use srcset. | CSS-Tricks

Following on from that post of Jason’s I linked to, Chris also emphasises that, for most use cases, you probably only need to use srcset (and maybe sizes), but not the picture element with explicit sources.

It’s really, really great that people are writing about this, because it can be quite a confusing topic to wrap your head around at first.

» Don’t use <picture> (most of the time) Cloud Four Blog

Jason points out that the picture element might not be needed for most responsive image use cases; the srcset and sizes attributes will probably be enough—that’s what I’m doing for the photos on my site.

A Single Div

Wonderfully creative use of CSS gradients, borders, box-shadows, and generated content.

Panorama Fail

The image-stitching algorithm is trying its best.

The Pattern Library

Literally a library of patterns: y’know, for tiling background images. Old school!

An Event Apart and The Picture Element (a Monkey Do blog post)

A look at how the website for An Event Apart is using the picture and Picturefill …featuring Jessica as the cover girl.

Simon Stålenhag Art Gallery

Scenes from a future Sweden.

SVG Fallbacks | CSS-Tricks

Alas, that clever SVG fallback trick I linked to a couple of days ago has some unexpected performance side-effects.

SVG and image tag tricks

A very, very clever hack to provide fallback images to browsers that don’t support SVG. Smart.

Surfin’ Safari - Blog Archive » Improved support for high-resolution displays with the srcset image attribute

WebKit nightlies now have support for srcset. I’m pleased to see that it’s currently constrained to just handling the case of high-density displays; it doesn’t duplicate the media query functionality of picture.

I’ve always maintained that the best solution to responsive images will be some combination of srcset and picture: they each have their strengths and weaknesses. The “art direction” use case is better handled by picture, but the “retina” use case is better handled by srcset.

timg

This is a really nice and simple idea: view photos from a specific place taken at a specific time. Voyeuristic fun.

Leveraging Advanced Web Features in Responsive Design

A terrific case study in progressive enhancement: starting with a good ol’ form that works for everybody and then adding on features like Ajax, SVG, the History API …the sky’s the limit.

Request Quest

A terrific quiz about browser performance from Jake. I had the pleasure of watching him present this in a bar in Amsterdam—he was like a circus carny hoodwinking the assembled geeks.

I guarantee you won’t get all of this right, and that’s a good thing: you’ll learn something. If you do get them all right, either you are Jake or you are very, very sad.

The State Of Responsive Web Design on Smashing Mobile

A comprehensive look at the current state of things in the world of responsive design, with a look to possible future APIs.

Using icon fonts

A handy walkthrough of using icon fonts. The examples here use the excellent IcoMoon service

Sensible jumps in responsive image file sizes

Some good thinking from Jason here. In a roundabout way, he’s saying that when it comes to responsive images—as with just about every other aspect of web development—the answer is …it depends.

Scalable Bitmaps

Some thoughts (and code) on responsive images.

National Geographic Found

Celebrating 125 years of National Geographic, this Tumblr blog is a curated collection of photography from the archives. Many of the pictures are being published for the first time.

Thumbs and Ammo

Ay!

Using SVG on CSS-Tricks

Chris takes a look at all the different ways you can use SVG today.

The Edge of the Web at Responsive Day Out

Slides, videos, and links from Paul’s presentation at the Responsive Day Out.

Protip: All browsers that support SVG background images also supports multiple background images.

A very hand tip from Ben on using SVG background images with a PNG fallback for IE8 and below.

YOU HAD ONE JOB!

Funny and painful in equal measure.

A primer to front-end SVG hacking by David Bushell – Web Design & Front-end Development

Everything you ever wanted to know about using SVG today.

Stratocam

Communal satellite eyes. A Mac screensaver is also available.

Flickr: ugordan’s Photostream

Gorgeous colour-processed images from NASA probes. I could stare at the fountains of Enceladus all day.

PlaceIt by Breezi - Generate Product Screenshots in Realistic Environments

A cute little service for mocking up pictures of your site being used on different devices. Just drag and drop a screenshot on to an image.

Deploying New Image Formats on the Web - igvita.com

A well-reasoned argument for tackling image optimisation on the server, using content-type negotiation.

❍ IcoMoon

This is a great free service for generating small subsetted icon fonts. Launch the app and have a play around — you can choose from the icons provided or you can import your own SVG shapes.

Nice touch: you can get the resulting font (mapped to your choice of unicode characters) base-64 encoded for your stylesheet.

Retina revolution

You’ve probably seen this already, but it’s really worth bearing in mind: when you’re scaling up JPGs for retina display you can safely reduce the image quality by quite a lot—to the point of getting the exact same file size as a higher quality image that’s half the size.

Photo Album - Imgur

At least one of these will probably drive you crazy.

A List Apart: Articles: Mo’ Pixels Mo’ Problems

The kickass articles just keep on comin’. This one from Dave is a great overview of options for dealing with images in responsive designs.

A List Apart: Articles: The Web Aesthetic

A really great article from Paul that simultaneously takes a high-level view of the web while also focusing on the details. A lot of work went into this.

Responsive Web Design Patterns | This Is Responsive

A great collection of layout, navigation, and interaction patterns for responsive sites, delivered by Brad.

rekall

The not-so-new-but-hella-fun aesthetic.

JPEGmini - Your Photos on a Diet!

This looks like a really handy tool for reducing the file size of JPEGs without any perceptible loss of quality (in much the same way that ImageOptim works for PNGs)—available as a Mac app or an installable web service.

Uncle Dave’s Ol’ Padded Box - Dave Rupert

Yet another brilliant technique from Dave. The only caveat is that it uses background images rather than img elements, but it’s still very powerful (and very clever).

80’s Touch

The Old Aesthetic. It’s eighties-tastic!

Aegir Hallmundur, designer and maker of things.

Aegir’s portfolio is a thing of a beauty on every screen size.

Stretchy Pictures | Aegirscopic

Aegir is doing some very smart image enhancement in his (responsive) portfolio. Here’s the explanation.

Florian’s Compromise | Responsive Images Community Group

Wilto does an excellent job of summarising the current state of responsive images, highlighting Florian Rivoal’s compromise proposal that combines the best of the picture element with the best of srcset.

How We Improved Page Speed By Cleaning CSS, HTML and Images | Dyn Blog

Some good practical advice on improving performance. This should all be familiar to you, but it’s always worth repeating.

Responsive images: what’s the problem, and how do we fix it? - Dev.Opera

A nice round-up of the issues around responsive images and their potential solutions.

The responsive images problem

A run-down of the various approaches to the responsive images problem, concluding that this is something that needs to be solved in the image format.

» The real conflict behind picture and @srcset (Cloud Four Blog)

Jason outlines the real challenge to every proposed solution for responsive images: they just don’t jibe with the way that browsers (quite rightly) pre-fetch images.

Shallow Thoughts » srcset vs. picture

A well thought-out evaluation on responsive images from Bridget.

Jordan Moore: Source Shuffling—Responsive Images Based On Media Queries

Combine the lowsrc-like image technique I blogged about with the conditional CSS technique I blogged about and this is the result.

In Flux | Trent Walton

Trent offers some excellent advice for dealing with the effects of the iPad’s retina display on your websites. That advice is: don’t panic.

Responsive image format - blog

An idea for handling responsive images not with a new format, but with an existing one: progressive JPGs.

Highly optimized images for the web in 3 steps | pasz.nl/blog

Some practical advice for optimising your images on the web.

Internet! - Imgur

The Old Aesthetic.

tubalmartin/riloadr

This responsive image technique has a lot of moving parts but it seems pretty solid.

The state of responsive images | Feature | .net magazine

Wilto gives a thorough explanation of the state of things with responsive images, particularly the work being done at the Responsive Images Community Group at the W3C.

Media Query & Asset Downloading Results | TimKadlec.com

Tim has published the results of a whole bunch of testing he did on how different browsers deal with hidden or replaced images.

LukeW | Vector Images for Mobile

Luke rounds up some of the alternatives to bitmap-based images—an increasingly important topic for “resolutionary” “retina’ displays (bleurgh!).

Responsive Summit » Blog » Elliot Jay Stocks

Elliot jots down some of the issues discussed at the responsive summit.

How I Learned to Stop Worrying and Love Responsive Images — Paul Robert Lloyd

Here’s a great braindump from Paul following the Responsive Summit, detailing multiple ways of potentially tackling the issue of responsive images.

JoshEmerson.co.uk · Blog · The Responsive Process

Josh goes through the talking points from the recent Responsive Summit he attended. Sounds like it was a great get-together.

A better responsive image format - Stuff in my head

Here’s a new angle on tackling the responsive image problem: what if the file format itself could specify multiple image sizes?

Responsive Images Community Group

There’s a W3C community group now for looking at the responsive images question.

A List Apart: Articles: Responsive Images: How they Almost Worked and What We Need

A terrific article from Wilto detailing the thinking that went into the Boston Globe’s responsive image techniques and how browser pre-caching is now throwing a spanner in the works.

Sirens | Aaron Mentele

Some very interesting results from testing background image downloads contained within media queries or overridden with media queries: it turns out that, in iOS at least, the browser is getting smarter and smarter.

Responsive IMGs Part 2 — In-depth Look at Techniques « Cloud Four

Jason continues his look at responsive images techniques by diving into the nitty-gritty of the various options out there.

Responsive images without Javascript - Notebook

This isn’t recommended as a robust means of delivering responsive images, but it’s still quite clever: using media queries to pass information to the server about the viewport size.

Responsive IMGs — Part 1 « Cloud Four

Jason takes a high-level look at tackling mobile-first responsive images (his next post will dig into the details). This is a really good summation of current thinking. Be sure to read the comments too: Andy chimes in with his experiences.

Responsive design and JavaScript - QuirksBlog

Unfortunately this article from PPK is flawed from the start: his first point (upon which all the subsequent points are based) is fundamentally flawed:

Right now responsive design is graceful degradation: design something for desktop and tablet, and remove stuff for mobile.

That’s not the way I’m doing responsive design. Responsible responsive design marries it with a mobile first approach (or more accurately, content first).

Creating responsive images using the noscript tag | Head

Now this is intriguing: putting your default images inside a noscript element, then do your viewport measuring and image-swapping before removing the noscript tags. But when I tried this a while back, I couldn’t get access to the noscript elements with JavaScript (which makes sense, when you think about it).

I wonder if it’s the use of class names or jQuery that allows it to work here?