Progressive Enhancement and Data Visualizations | CSS-Tricks
A nice little pattern for generating a swish timeline in SVG from a plain ol’ definition list in HTML.
A nice little pattern for generating a swish timeline in SVG from a plain ol’ definition list in HTML.
I’ve been thinking about this a lot lately; alternate ways of paginating through the past e.g. by day instead of by arbitrary amount.
Curiosity’s journey so far, nicely visualised.
Beautiful visualisations of science and nature.
Made with love by a designer with a molecular biology degree.
A great piece by Erin on the value of a code of conduct for conferences, filled with practical advice.
Once you decide to create a code and do it thoughtfully, you’ll find the internet overflows with resources to help you accomplish your goals, and good people who’ll offer guidance and advice. From my own experience, I can say that specificity and follow-through will make your code practical and give it teeth; humane language and a strong connection to your community will make it feel real and give it a heart.
Here’s an intriguing approach to offering a navigation control that adapts as the user scrolls.
I’m not too keen on the way it duplicates the navigation in the markup though. I might have a play to see if I can find a way to progressively enhance up from a link-to-footer pattern to achieve this.
A peek behind the scenes of an interesting new navigation pattern on the Guardian’s still-in-beta responsive site.
You can try it out here
The GPS system is a monumental network that provides a permanent “YouAreHere” sign hanging in the sky, its signal a constant, synchronised timecode.
A terrific piece of well-illustrated data-driven journalism.
A lovely visualisation that combines two of my loves: space, and the correct use of the subjunctive.
A lovely bit of data celebration from Ravelry on the occasion of their 4 millionth user.
I’ve said it before and I’ll say it again: if you want to see a successful example of a real social networking site, don’t look at Facebook; look at Ravelry.
A beautiful real-time visualisation of winds on our planet.
Data visualisations that make no sense.
On the one hand, this is yet another Snowfall clone. On the other hand, the fact that it’s responsive is impressive.
A fascinating project to document markings from 1939—designed to be visible from the air—placed all around the Irish coast.
Caterina Fake takes a heartfelt look at the history of online communities:
The internet is full of strangers, generous strangers who want to help you for no reason at all. Strangers post poetry and discographies and advice and essays and photos and art and diatribes. None of them are known to you, in the old-fashioned sense. But they give the internet its life and meaning.
A gorgeous interactive visualisation of our local galactic neighbourhood.
A nice collection of navigation patterns for responsive designs. The demos aren’t using a mobile-first approach, and they’re reliant on jQuery, but they could be easily adapted.
Zooniverse have done it again. Now you can help in the hunt for sources of gravitational lensing.
It’s informative. It’s fun. It has genuine scientific value.
A long-zoom data visualisation.
This powerful timeline illustrates how drone attacks have increased dramatically under Obama’s administration.
Timoni tackles the tricky topic of teaching taps.
Discoverability can be hard, but that shouldn’t stop us trying out new interactions.
David’s slides from the Responsive Day Out.
A damning analysis of the Empire’s military strategy at the battle of Hoth, complete with illustrations. The comments are good too:
Guys, cut Palpatine some slack. He’s still in his first term as Emperor…
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.
A beautiful timelapse visualisation of code commits to Flickr from 2004 to 2011.
I know have a visualisation of my public data in the form of 3D-printed snowflake, thanks to Medaler.
Eight of Jan White’s excellent books on graphic design are now available for free online, licensed under CC0 …they’re in the public domain now.
All he asks in return is that you might buy one of his books still in print, and maybe make a donation to the Internet Archive.
Jan V. White is a mensch.
A really nice interactive timeline of data from ten years of scrobbling music to Last.fm.
Josh takes an-depth look at the navigation design implications of touch/keyboard hybrid devices, coming to a similar conclusion as Luke and Jason:
Unfortunately, the top-of-screen navigation and menus of traditional desktop layouts are outright hostile to hybrid ergonomics. Tried-and-true desktop conventions have to change to make room for fingers and thumbs.
Want to test for a hybrid device? Tough luck. Instead, argues Josh, the best you can do is assume that any device visiting your site could be touch-enabled.
Luke and Jason have done some excellent research (and put together some demos) into how the placement of navigation could be optimised for touch screens of all sizes. Turns out that the “standard” convention of having navigation along the top is far from ideal on a touch-enabled device.
Craig writes about the hologram of his quantified self.
It’s all about the signalling.
Wow. This might be the stupidest behaviour from a browser that I’ve ever come across: mobile Safari behaves differently depending on the top level domain of the site! Madness!
Mind you… it’s kind of poetic justice for having a ridonkulous .mobi domain in the first place.
A great collection of layout, navigation, and interaction patterns for responsive sites, delivered by Brad.
Another great in-depth round-up from Brad, this time looking at your options for complex navigation patterns in responsive designs.
Tim shows how to make a scalable three-line navicon in CSS.
Dan makes a very good point about Little Printer: it’s not the “printer” part that matters; it’s the “little”.
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.
A nice timeline visualisation of recent history.
Kyle’s Matryoshka phones are as cool as they are cute.
Luke and Jason have put together some demos of various “off-canvas” navigation patterns for responsive designs.
A really great markup and CSS pattern for “content first, navigation second” from Aaron.
Not only is FixMyStreet responsive, it’s using the “display: table-caption” trick I documented for adjustable “content first/navigation second” source order.
Dan writes about how data saved his life. That is not an exaggeration.
He describes how, after receiving some very bad news from his doctor, he dived into the whole “quantified self” thing with his health data. Looking back on it, he concludes:
If I were still in the startup game, I have a pretty good idea of which industry I’d want to disrupt.
An case study that tackles complex navigation in a responsive site.
A beautiful and disturbing piece of data visualisation. The numbers are quite astonishing.
Andy documents the kinds of symbols being used to represent revealable navigation on mobile.
Explore the shape of the underwater world of internet backbones.
Prompted by Brad’s recent post, here are some musings on three methods of handling navigation in responsive sites.
A detailed overview by Filament Group on progressively enhancing navigation for responsive sites.
Brad does a great job of rounding up various design patterns used for navigation in responsive sites.
A lovely piece from Matt examining agency and behaviour in the things we surround ourselves with: frying pans, houseplants, pets, and robots.
These are the droids you are looking for.
Mashing up Angry Birds and spreadsheets to better visualise project time-tracking.
PPK tests the various ways that mobile browsers handle position:fixed, complete with videos.
A stroke of genius: turning money itself into the carrier for infographics on wealth distribution in America.
This is may just be the best thing on the internet about data visualisation and statistics. And sex.
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).
Leonie points to a change in the semantics of the a element in HTML5 that could be very handy for accessible navigation.
These lovely visualisations of geotagged photos and tweets are almost indistinguishable from aerial views of cities at night.
A nice little round-up of some techniques for dealing with trolls in online communities. I must remember some of this stuff for The Session.
A look at our inbuilt confirmation biases.
The Riegers are like emissaries from Planet Smart and we mere mortals are fortunate that they take the time to give us great articles like this.
A dataviz demo of creepiness: displaying the movements of Malte Spitz by correlating her phone activity and web usage.
I really like this idea: one street in Brighton is openly displaying its electricity usage over time.
A very pretty visualisation of tweets on a map using canvas.
The New York subway schedule converted into sound by treating each line as a string.
Visualising the Republic of Letters.
This looks like it could be a good book: a collaborative project to find patterns and stories in the data of one city.
Oh, and the site is lovely and responsive.
Some beautiful pieces of data visualisation.
How does an object’s character and/or behaviour tie in with communicating its purpose in life, how it looks and how it should be used?
Visualisations of the history of controversial Wikipedia articles.
David Lowery is chronicling the history of Camper Van Beethoven and Cracker, song by song …with accompanying MP3s. It seems too wonderful to be true
Bobbie documents the work of Jan Chipchase, currently looking into the design decisions behind counterfeit goods on sale in Shanghai.
A very handy tool for planning intercontinental communication.
A glanceable indication of the current Thames tide, from James Bridle.
An interesting, if necessarily somewhat complicated-looking, API from Google: analyse your user's past behaviour to predict future outcomes.
A visual representation of each track on the new Girl Talk album.
Telling stories with data — the video.
A beautiful SVG visualisation (with source code) of the Rattle team's experience of dConstruct 2010.
Cute illustration of different content types in HTML (though, personally, I would put sectioning content — section, article, nav, aside — into their own group).
New from BERG: superimposing historical events onto familiar landscapes.
Beautiful map visualisations by Aaron Straup-Cope.
Aaron's lovely visualisation of Flickr's shapetiles.
Brian documents his beautiful Geonames SVG maps.
A site on designing with data from the author of Visual Language For Designers: Principles For Creating Graphics That People Understand.
Mike Stenhouse has graphed civilisation longevity: a nice bit of long zoom perspective.
Beautiful mapping visualisations of crime data.
An excellent piece by Bruce on why the details element needs to be in HTML5.
The blog of the book by Gavin Bell.
Excellent news: Brian is writing a book.
Hillman Curtis's new film about David Byrne and Brian Eno will be premiering at Southby. Should be fun.
A thoroughly well-researched and data-heavy blog post ...complete with interactive charts!
This is a gorgeous-looking website. I have no idea what it's about.
The redesign of everyday things.