Adactio: Links

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.

LukeW | Data Monday: E-commerce Performance

Time is money …especially when it comes to performance on the web.

Responsive image format - blog

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

HTTP Compression use by Alexa Top 1000 | Zoompf

An in-depth analysis (graphs! data!) of how popular sites are using—or not using—compression.

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

Some practical advice for optimising your images on the web.

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.

Mobile Battery Performance

This is my short explanation of Remy’s explanation of a BBC news article which is an explanation of an academic paper about battery performance of mobile devices when accessing websites.

Modern Web Development Part 1 – The Webkit Inspector

This is a very in-depth look at how to become a power user of the Web Inspector in Webkit browsers. I’m sitting down with a nice cup of tea to go through all of this.

10 questions about web performance – Jeremy Keith at Clearleft

I had a chat with the guys from Pingdom about performance’n’stuff. If I sound incoherent, that’s because this is a direct transcription of a Skype call, where, like, apparently I don’t, y’know, talk in complete sentences and yeah.

Google are about to murder a good friend of mine — Glenn Jones

Glenn gives a rational thoughtful explanation of why he’s as pissed off as I am about Google’s destruction of the Social Graph API.

An Ajax-Include Pattern for Modular Content | Filament Group, Inc., Boston, MA

Scott walks through the code and thinking behind the conditional loading pattern on The Boston Globe site. This is such a useful and valuable pattern!

Untitled ✿ dabblet.com

Here’s a handy little tip for CSS animations: instead of changing position properties, use translate instead.

Pingdom Tools

A handy performance testing tool from Pingdom, similar to Google’s offering.

First thing you should do to optimize your desktop site for mobile « Cloud Four

Jason reiterates Bruce’s rallying cry: Performance First!

If you could only do one thing to prepare your desktop site for mobile and had to choose between employing media queries to make it look good on a mobile device or optimizing the site for performance, you would be better served by making the desktop site blazingly fast.

Bruce Lawson’s personal site : What Users Want from Mobile, and what we can re-learn from them

Bruce hammers home the importance of speed and performance on mobile (and frankly, everywhere).

So perhaps some of the time and effort put into media queries, viewports, avoiding scrolling, line length would actually be better employed reducing HTTP requests and optimising so that websites are perceived to render faster.

ImageAlpha — lossy compression for 24-bit PNG images

From Kornel, the genius who gave us ImageOptim, comes another Mac desktop tool for optimising PNGs, this time converting 24-bit PNG to 8-bit with full alpha channel.

nathanford/pngy - GitHub

A script that attempts to detect connection speed (by requesting a test file three times in a row) in order to determine whether hi-res images should be requested or not.

CSS3 Pseudo-Classes and HTML5 Forms | HTML5 Doctor

A look at the new pseudo-classes in CSS3 that go hand-in-hand with the form enhancements introduced in HTML5.

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.

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?

What We Don’t Know // Speaker Deck

The slides from Chris’s presentation on the known unknowns of the web.

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.

impress.js | presentation tool based on the power of CSS3 transforms and transitions in modern browsers | by Bartek Szopka @bartaz

A competitor to Prezi built with HTML, CCS and JavaScript.

On designing content-out (a response to Zeldman and others) | Stephanie Rieger

Stephanie details all the things we have to know about when designing for today’s broad range of devices: performance, capabilities, form factor, pixel density, and network latency.

These are all good points but I worry that if we just concentrate on the current device landscape, our processes won’t adapt to the future.

REDbot: <>

Oh, this is very handy indeed: a quick lint tool for HTTP so you can see what kind of headers are being sent. There’s a bookmarklet in the footer too.

WORLDMOON

A masterplan for the moon as a global cemetery. Launch the ashes of your loved ones to the moon (leaving the buckyball container in lunarstationary orbit). Given enough ashes and enough buckyballs, the result is a fertile surface and a atmosphere-trapping layer of fullerine. Terraforming via recycled humans.

Or, if that’s too long-term for you, you can buy a scale-model moon jewel.

Polyfilling The HTML5 Gaps With JavaScript

An in-depth look at browser polyfills: what they are, how they work, and how you can make your own.

Redesigning the Country Selector - Baymard Institute

This looks like a nice progressive enhancement pattern: convert a select element into an auto-completing input element (a country selector in this case).

The Convergence

A fun platform game with a twist.

Post Web site loads too slowly - The Washington Post

Performance matters. Here, the Washington Post compares its own weak performance (hampered by ads and tracking shite) to the optimised experience of porn sites.

Stubbornella » Blog Archive » Don’t Style Headings Using HTML5 Sections

Nicole provides a step-by-step explanation of why it will probably benefit you to add classes to your headings to ensure consistent styling without writing overly-verbose CSS.

Registration | Frontend 2011

A nice Huffduffer-style mad libs form gives this registration form a friendly quality.

Line-height in input fields | 456 Berea Street

This abuse of the !important declaration in Firefox’s user-agent stylesheet was driving me crazy recently. Roger proposes a CSS patch, but this is really something that needs to be fixed in the browser.

Jake Archibald - Font-Face - Good vs Legal on Vimeo

Jake’s talk at DIBI earlier this year was absolutely fantastic. It features a rape reference, a story about pissing, and a Human Centipede metaphor.

It’s also very, very informative. Watch this.

Appcache Facts

A handy one-page cheatsheet for using HTML5’s appcache manifest file for offline storage.

mySociety » Blog Archive » Mobile operators altering (and breaking) web content

In an attempt to “optimise” performance, T-Mobile and Orange are actually breaking jQuery.

Karl Dubost - 3 rules of thumb for Web development

Can I bookmark this information? (stable URIs)
Can I go from here to there with a click? (hyperlinks)
Can I save the content locally? (open accessible formats)

Personal names around the world

A terrific overview by Richard of the variations in names around the world:

How do people’s names differ around the world, and what are the implications of those differences on the design of forms, ontologies, etc. for the Web?

Page Speed Service Home

Performance shit just got real.

You can now sign up with Google to have your site pass every request through them and get your documents served up optimised.

Getting Sourcey – native HTML5 Audio and video | Web Directions

Everything you ever needed to know about adding HTML5 audio and video to your site, courtesy of the mighty John Allsopp.

Google

A fascinating examination by Hixie of web technologies that may have technically been “better” than HTML, but still found themselves subsumed into the simpler, more straightforward, good ol’ hypertext markup language.

The follow-on comments are definitely worth a read too.

Responsive web design from the future — Warpspire

I really like the thinking that’s gone into the design of Github, as shown in this presentation. It’s not really about responsive design as we commonly know it, but boy, is it a great deep dive into the importance of URLs and performance.

Don’t use IDs in CSS selectors? ❧ Oli.jp (@boblet)

I agree with Oli’s conclusion:

Save IDs for fragment identifiers or JavaScript hooks.

HTML5Pattern

A handy list of regular expressions that you can use in the new pattern attribute on the input element in HTML5.

loads.in - test how fast a webpage loads in a real browser from over 50 locations worldwide

A handy tool for checking page load times.

New Mobile Safari stuff in iOS5: position:fixed, overflow:scroll, new input type support, web workers, ECMAScript 5 | David B. Calhoun – Developer Blog

A look at some of the new HTML5/JavaScript additions coming in the next version of Mobile Safari.

Book of Speed

An online book about website performance by Stoyan Steganov, released into the public domain. Excellent!

CSS Lint

Nicholas and Nicole have unveiled the CSS companion to JS Lint. And yes, it will your hurt your feelings.

Spinning the Web - a set on Flickr

Eric is making some genuinely beautiful art by applying CSS transforms to some well-known sites.

JoshEmerson.co.uk · Blog · Base64 and the tiling background

Josh explains the pros and cons of embedding background images in your CSS using base 64 encoding.

Google Analytics Blog: Measure Page Load Time with Site Speed Analytics Report

Great news! Google Analytics now tracks page load times.

Experimental Firefox and Chrome extensions to copy and paste contacts — Glenn Jones

More brilliant and useful code from Glenn: copy and paste contact details from one URL into a form on another URL.

Page Speed Online

A supremely useful tool from Google for measuring performance.

Virgin’s Evil Microcopy | Flickr - Photo Sharing!

It’s like, how much darker could the pattern be? None. None more dark.

HTTP Archive

This is wonderful stuff: a long-term project to track the performance of high-traffic sites over time: oodles of lovely data and some quite shocking stats.

Madmanimation

Andy just debuted this at An Event Apart—lovely stuff.

IMG_3937 | Flickr - Photo Sharing!

There’s a Kubrickian quality to this picture Tantek snapped of me asking a question during his microformats panel.

Showcase: Pop-Up Book in HTML and CSS | eleqtriq

A cute’n’nifty demonstration of transforms and animations in CSS that works a treat in Webkit.

The State of HTML5 Audio - PhobosLab

A rather vicious evaluation of browser support for the audio element and the audio API. It is divided up into:

Browsers From Companies That Actually Care About HTML5 Audio
Browsers From Companies That Hate the Web Enough to Not Support Ogg/Vorbis, but do Have an Audio Tag So They Can Say They Have an Audio Tag (Seriously, Fuck You)
Browsers That Say They Support HTML5 Audio But Actually Don’t Support HTML5 Audio

HTML5 Accessibility Chops: the placeholder attribute | The Paciello Group Blog

A nice succinct description of the placeholder attribute, with an emphasis on accessibility.

Microformats | weblog | Facebook Adds hCalendar and hCard Microformats to Millions of Events

As of today, every single public event on Facebook is marked up using hCalendar. Take the Great British Booze-up, for example…

TIME CAPSULE ..::HOME::..

On 18 May 2010, the Planets (Preservation and Long-term Access through Networked Services) Project deposited a time capsule in the vaults of datacenter, Swiss Fort Knox, in Saanen, Switzerland. It contained the decoding information for five digital file formats on media ranging from paper, microfilm and floppy discs to CDs, DVDs and USB sticks.

Tags: form

More information

About this site

Customise

Search

Subscribe