Using icon fonts
A handy walkthrough of using icon fonts. The examples here use the excellent IcoMoon service
Tags: im
Responsive Day Out highlights on Vimeo
A lovely little highlight reel that Craig put together from the Responsive Day Out.
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.
Here is today
A long-zoom data visualisation.
Scalable Bitmaps
Some thoughts (and code) on responsive images.
A Digital Tomorrow on Vimeo
A design fiction video depicting technology that helps and hinders in equal measure.
Internet Archive on Vimeo
A beautiful short film on the amazing work being done at the Internet Archive, produced on the occasion of their 10 petabyte celebration.
Truly awe-inspiring.
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.
First public use of what Became Proxima Nova by Mark Simonson
Who knew? The reissue of the classic thirteen-part Star Wars radio series was the first appearance of a proto-Proxima Nova.
Out of Sight, Out of Mind: A visualization of drone strikes in Pakistan since 2004
This powerful timeline illustrates how drone attacks have increased dramatically under Obama’s administration.
Thumbs and Ammo
Ay!
Dark Archives in Contents Magazine
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.
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.
CSS 3D Clouds
A beautiful experiment with CSS transforms and a smattering of JavaScript.
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.
Responsive typography demo
This is a pretty wacky experiment in altering font size based on the user’s distance from the screen (allow the page to access your camera and enable the “realtime” option for some real fun). I don’t know how much real-world application this has, but it’s a cute’n’fun exercise.
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.
Search in a Giphy
A search engine for animated gifs. Oh, yes.
Stratocam
Communal satellite eyes. A Mac screensaver is also available.
The Creeping Garden
I, for one, welcome our slime mould overlords.
The slime mould is being used to explore biological-inspired design, emergence theory, unconventional computing and robot controllers, much of which borders on the world of science fiction.
Stick-n-find
Spimify your household with these bluetooth location stickers. Now you can google your shoes.
Flickr: ugordan’s Photostream
Gorgeous colour-processed images from NASA probes. I could stare at the fountains of Enceladus all day.
Interview with Lauren Beukes about Shining Girls
Lauren talks about The Shining Girls and the tools she uses to write with.
The paradoxes of time travel by David Lewis
A well-written white paper on time travel. Alas, it relies a bit too much on semantic nitpickery to offer any real insight.
Implementing off-canvas navigation for a responsive website by David Bushell
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.
Snapshot Serengeti
The latest project from Zooniverse is, as you would expect, an extremely enjoyable and useful way to spend your time: classifying animals that have captured in camera trap images.
The opening tutorial is a lesson in how to do “on-boarding” right.
Flickr, codeswarming
A beautiful timelapse visualisation of code commits to Flickr from 2004 to 2011.
Form Follows Function
A gorgeous collection of experiments that showcase just how much is possible in browsers today.
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.
Snow Fall: The Avalanche at Tunnel Creek - Multimedia Feature - NYTimes.com
Excellent journalism combined with excellent art direction into something that feels just right for the medium of the web.
Deploying New Image Formats on the Web - igvita.com
A well-reasoned argument for tackling image optimisation on the server, using content-type negotiation.
Connecting (Full Film) on Vimeo
A short film about interaction design.
10 Years of Scrobbling Timeline – Last.fm
A really nice interactive timeline of data from ten years of scrobbling music to Last.fm.
Black Marble - City Lights 2012 - a set on Flickr
Gorgeous pictures from the Suomi satellite, just released by NASA
Ethan Marcotte AEA Boston June 18, 2012 on Vimeo
Ethan’s excellent talk from last year’s An Event Apart.
In this session Ethan reviews strategies for handling trickier elements that would make even the most seasoned designer quail: stuff like advertising, complex layouts, deep navigation patterns, third-party media, and, yes, actual, honest-to-goodness content.
Missed High Five
Schadenlulz.
The Useless Web
Don’t do it. Don’t click that button just one more time. Don’t.
The Spirit Of The Web on Vimeo
This is my opening talk from Smashing conference a few months back in Freiburg, where I used to live.
❍ 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.
Trimming the Fat — Paul Robert Lloyd
A great in-depth description by Paul of how he optimised his site. More of this please!
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.
GIFCTRL: Next Level Gif Control
The state of the art in animated gifs: full-screen and scrubbable. Kiss your productivity goodbye.
Data Visualization Reinterpreted by VISUALIZED on Vimeo
Peter Saville talks about the enduring appeal of his cover for Unknown Pleasures.
I like to think of all the variations and mashups as not just tributes to Joy Division, but tributes to Jocelyn Bell Burnell too.
Jeremy Keith: Forbedringer gjennom responsiv design (Webdagene 2012) on Vimeo
This is the talk I gave at the Webdagene conference in Norway a few weeks back. I called it Responsive Enhancement but I think the Norwegian title translates as “Improvements Through Responsive Design.”
WebPlatform.org — Your Web, documented
A one-stop-shop for browser-compatibility information. This is MDN, HTML5 Rocks, and Quirksmode all rolled into one.
Sight on Vimeo
A well-executed sci-fi short film on augmented reality and gamification.
Blame the implementation, not the technique | TimKadlec.com
It might seem like an obvious point, but what Tim is talking about here happens over and over again: a technique is dismissed based on bad implementation.
Social Login Buttons Aren’t Worth It | MailChimp Email Marketing Blog
A great in-depth explanation by Aarron on why Mailchimp dropped their Facebook and Twitter log-in options. Partly it was the NASCAR problem, but the data (provided by user testing with Silverback) also brought up some interesting issues.
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.
Web History, a timeline
This is right up my alley: a timeline of the history of hypertext, starting with Borges.
Responsive Web Design Patterns | This Is Responsive
A great collection of layout, navigation, and interaction patterns for responsive sites, delivered by Brad.
Improving Reality 2012 : Joanne Mcneil
Note’s from Joanne’s presentation at Improving Reality.
Warren Ellis » How To See The Future
The opening keynote from Warren Ellis for this year’s Improving Reality. I’d like to walk into space with this man.
Lanyrd: the early days | The Lanyrd Blog
This is a rather lovely history of the first two years of Lanyrd, starting with that honeymoon-turned-startup.
I really like the way that Lanyrd’s communications reflect the personalities of Simon and Nat: utterly brilliant, but also a little bonkers, with far more animals than would be reasonably expected.
rekall
The not-so-new-but-hella-fun aesthetic.
Infovore » ghostcar
Tom describes his Foursquare ghost.
Work is being done here on Vimeo
A short piece on the experiment that James conducted with Lighthouse in the foyer of the Cleareft office building, trying to show some kind of physical representation of coding.
A List Apart: Articles: Everything in its Right Pace
A great article by Hannah, focusing on the Long Web—it isn’t about the quantity of data you’re publishing; it’s the quality. This builds nicely on the article I linked to recently about digital scarcity.
Distant Shape: 10 Years of Daring Fireball
A nice visualisation of Apple’s transition From desktop to mobile over ten years, one Daring Fireball article at a time.
Oh, and happy birthday, Daring Fireball.
Creative JavaScript Training on Vimeo
I’m going to be attending Seb’s CreativeJS and HTML5 course in Brighton on September 13th and 14th …and I strongly suspect that it’s going to be great.
This is now!
A thoroughly addictive use of the Instagram API (along with Node.js and Socket.io): see a montage of images being taken in a city right now.
Scott Jenson | Beyond mobile, beyond web | Mobilism 2012
A little something to whet your appetite for dConstruct: Scott’s superb talk from this year’s Mobilism conference in Amsterdam.
View from the ISS at Night on Vimeo
Another beautiful timelapse video made from photographs taken from the International Space Station.
The music from Sunshine gets me every time.
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.
Web Native Design on Vimeo
A great talk on the nature of the web that Paul gave in Copenhagen recently.
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!
A Ship Aground
This is how London looked on my birthday, as recorded by the stationary meatspace protrusion of James’s Ship Adrift.
Squirrel!
Here’s a brainbuster for ya: a single file that renders both as HTML and as a JPEG. As an HTML page, it even contains an img element with a src of …itself!
Compare the “view source” output with the generated source output to see it’s being interpreted.
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.
The Evolution of the Web
A nice timeline visualisation of recent history.
Rosetta on Vimeo
A beautiful short film about The Long Now Foundation’s Rosetta Project.
The Slow Web – Jack Cheng
This resonates deeply with me. It is worth your heartbeats.
10 Timeframes | Contents Magazine
I didn’t count how many heartbeats it took to read this, but it was worth every single one.
A New HTTP Status Code for Legally-restricted Resources
I love Tim Bray’s idea for naming the response code for censored content on the internet in honour of Ray Bradbury.
Sound of Summer
This is sooo nifty: Chloe’s obsessive Summer music visualisation is a lesson in responsive design and progressive enhancement. It’s also pretty fascinating.
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.
Welcome to History Mesh
This is rather wonderful: a DevFort project for navigating interweaving strands of history, James Burke style.
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.
Science Hack Day Eindhoven 2012 winners compilation on Vimeo
Some of these hacks created at the Science Hack Day in Eindhoven are seriously nuts. That’s “nuts” as in “brilliant”.
ISS Star Trails - a set on Flickr
Beautiful time-lapse photography from Don “we’ve got a Dragon by the tail” Pettit, taken from the International Space Station.
NoisePNG - Generate noisy PNG-images with alpha-transparency
If you’re adding some noise texture to your backgrounds, this little service might be handy. I usually base-64 encode these kinds of background images: it would be nice to see that added as an option here.
I can tell you how I got from Deep Purple to Howling Wolf in just 25 moves. | Chloe Weil
The way that Chloe has catalogued her music over time is fascinating. It’s like the Long Now opposite of This Is My Jam.
How to Make Progress Bars Feel Faster to Users - UX Movement
A fascinating insight into the psychological implications of animated progress indicators.
The Great Discontent: Dan Cederholm
The lovely (and responsive) Great Discontent site has a lovely interview with Dan, who is lovely.
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.
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.
Internet! - Imgur
The Old Aesthetic.