tl;dr use an empty href attribute in responsive image preloads for the best results across all browsers, like so: <link rel="preload" href="" imagesrcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" imagesizes="100vw">.
Bryan Rieger delivered a presentation called Rethinking the Mobile Web in 2010, just a few months after the invention of responsive web design. One of the most repeated points of that talk is, “the absence of support for @media queries is in fact the first media query”.
Advanced Custom Fields is an amazing (and free) WordPress plugin that turns it into a proper CMS and gives developers fine-grained control over how data entered by content administrators is handled and displayed. I love it.
On Thursday 9th October at 6.30pm I’ll be giving a talk on the new responsive images standards. It’s a free talk and will take place at Rumble Labs in Belfast, just round the corner from St. Anne’s Cathedral.
The <img> tag all started with this message and has been with us since HTML 2.0. In that time it hasn’t changed much at all, just put a path to an image in the src attribute and you have an image on the screen.
AJAX has become a big part of responsive design for me. I use it to load secondary content into larger viewports to make it easier to find/view than if it is behind a small link in the footer or somewhere like that.
Together with my colleague Toby I’ve been looking at the problems discovered and highlighted by Matt Stow regarding IE10 and responsive design.
