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.
A look at how Huffduffer-style forms might improve “conversion”.
Whatever. Let’s face it: it’s just quite nice when a form isn’t just your typical form (which this article makes a good point of mentioning):
Where the traditional sign up form is a regular, everyday brown cow, the mad lib form is a purple cow - a shiny object. We’re naturally easily distracted by, and drawn to, what’s new or out of the ordinary! Take advantage of that.
If, like me, you’ve been using the “export to SVG” plugin for Fireworks and then opening up the resultant file to trim it down, Josh has got you covered: here’s a version of “export to SVG” that will result in much slimmer files.
Want to style those new HTML5 input types? I hope you like vendor prefixes.
This is wonderful stuff! I’m a big fan of the
datalist element but I hadn’t realised how it could be combined with
input types like
I find it hard to agree with any part of this. To me, it shows a deep misunderstanding of the web—treating the web as just another platform, without understanding what makes it so special.
I think I may have found my polar opposite.
The hilarious obsession with file size is the start of my frustrations with the web community.
A really lovely piece on the repositories of information that aren’t catalogued—a fourth quadrant in the Rumsfeldian taxonomy, these dark archives are the unknown knowns.
A handy one-stop-shop for tips on improving front-end performance.
This issue of A List Apart is a great double-whammy. Lara Swanson has a ton of practical tips for front-end performance enhancements, and Brian dives deep into making your own icon fonts.
The “client hints” proposal looks really interesting: a way for user-agents to send data to the server without requiring the server to have a library of user-agent strings. But Scott has a few concerns about some of the details.
The slides from Andy’s excellent pragmatic talk on performance and aggressive enhancement at the Responsive Day Out.
Everything old is new again. Ross noticed that many of the themes recurring at the Responsive Day Out hark back to best practices from over a decade ago: progressive enhancement, performance, good ol’ information architecture…
I like the sound of the book that Chris is writing for Smashing Magazine. It sounds like a very future-friendly approach to front-end development.
Here are some nice patterns that Paul uses for starting points in his own projects.
Everything you ever wanted to know about using SVG today.
Some handy tips for simulating slow network speeds on your machine.
Tim talks about the very useful technique of setting a page-weight limit; something that Mark wrote about on the Clearleft blog recently.
This is handy: a look at which DOM properties and methods cause layout thrashing (reflows).
Amen, Brad, Amen.
It’s time for us to treat performance as an essential design feature, not just as a technical best practice.
Bruce takes a look at the tricky issue of styling native form controls. Help us, Shadow DOM, you’re our only hope!
More details on DNS prefetching, page prefetching and, controversial, page pre-rendering.
A really good introduction to front-end performance techniques. Most of this was already on my radar, but I still picked up a handy tip or two (particularly about DNS prefetching).
At this stage it should go without saying that you should be keeping up with this kind of thing: performance is really, really, really important.
This off-canvas demo is a great practical example of progressive enhancement from David. It’s also a lesson in why over-reliance on jQuery can sometimes be problematic.
An excellent tale of performance optimisation …complete with a coda on looking behind the numbers when it comes to analytics data.
A well-reasoned argument for tackling image optimisation on the server, using content-type negotiation.
I wholeheartedly agree with Christian’s diagnosis of the average web page: it’s overweight to the point of obesity. Fortunately Dr. Heilmann has some remedies.
Andrea looks at support for HTML5 input types in IE10 Mobile.
I concur completely with Luke’s assessment here. Most password-masking on the web is just security theatre. Displaying password inputs by default (but with an option to hide) should be the norm.
A great in-depth description by Paul of how he optimised his site. More of this please!
Jason goes into detail describing the File Format problem that he and others are going to tackle in the effort known as Just Solve The Problem.
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.
This looks like a handy way of enhancing forms to have input masks (Luke W. would approve). Right now it’s a jQuery plug-in but I’m sure someone as smart as you would be able to create a standalone version, right?
The kickass articles just keep on comin’. This one from Dave is a great overview of options for dealing with images in responsive designs.
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.
This is just wonderful! It combines almost all of my recent obsessions into one unified post: website performance (particularly on mobile) and the locations of undersea cables. The interactive map is the icing on the cake.
Mike compares the bandwidth usage of the sites he most frequently visits. The results are grim.
The worst sins of the Flash years are coming back with a vengeance, in the form of CSS Frameworks and the magic dollar sign. There has seriously got to be a better way to do this.
Vannevar Bush’s original 1945 motherlode of hypertext.
This is excellent! Scott, Wilto, and the gang at Filament Group have released the tools they use to help them craft performant responsive sites. Lots of excellent resources for conditional loading here.
Some good practical advice on improving performance. This should all be familiar to you, but it’s always worth repeating.
Some sensible advice from Oliver Reichenstein. Cluttering your social media icons isn’t helping and may actively be hindering your audience.
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.
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.
Time is money …especially when it comes to performance on the web.
An idea for handling responsive images not with a new format, but with an existing one: progressive JPGs.
An in-depth analysis (graphs! data!) of how popular sites are using—or not using—compression.
Some practical advice for optimising your images on the web.
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.
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.
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.
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.
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.
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!
Here’s a handy little tip for CSS animations: instead of changing position properties, use translate instead.
A handy performance testing tool from Pingdom, similar to Google’s offering.
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 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.
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.
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.
A look at the new pseudo-classes in CSS3 that go hand-in-hand with the form enhancements introduced in HTML5.
Here’s a great braindump from Paul following the Responsive Summit, detailing multiple ways of potentially tackling the issue of responsive images.
Here’s a new angle on tackling the responsive image problem: what if the file format itself could specify multiple image sizes?
The slides from Chris’s presentation on the known unknowns of the web.
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
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.
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.
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.
An in-depth look at browser polyfills: what they are, how they work, and how you can make your own.
This looks like a nice progressive enhancement pattern: convert a select element into an auto-completing input element (a country selector in this case).
A fun platform game with a twist.
Performance matters. Here, the Washington Post compares its own weak performance (hampered by ads and tracking shite) to the optimised experience of porn sites.
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.
A nice Huffduffer-style mad libs form gives this registration form a friendly quality.
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’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.
A handy one-page cheatsheet for using HTML5’s appcache manifest file for offline storage.
In an attempt to “optimise” performance, T-Mobile and Orange are actually breaking jQuery.
- 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)
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?
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.
Everything you ever needed to know about adding HTML5 audio and video to your site, courtesy of the mighty John Allsopp.
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.
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.
I agree with Oli’s conclusion:
A handy list of regular expressions that you can use in the new pattern attribute on the input element in HTML5.
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
An online book about website performance by Stoyan Steganov, released into the public domain. Excellent!
Nicholas and Nicole have unveiled the CSS companion to JS Lint. And yes, it will your hurt your feelings.
Eric is making some genuinely beautiful art by applying CSS transforms to some well-known sites.
Josh explains the pros and cons of embedding background images in your CSS using base 64 encoding.
Great news! Google Analytics now tracks page load times.
More brilliant and useful code from Glenn: copy and paste contact details from one URL into a form on another URL.
A supremely useful tool from Google for measuring performance.
It’s like, how much darker could the pattern be? None. None more dark.
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.
Andy just debuted this at An Event Apart—lovely stuff.
There’s a Kubrickian quality to this picture Tantek snapped of me asking a question during his microformats panel.