One way of implementing the growing/shrinking navigation pattern—an alternative to just shoving everything behind a hamburger icon.
Turbolinks intercepts all clicks on
a hreflinks to the same domain. When you click an eligible link, Turbolinks prevents the browser from following it. Instead, Turbolinks changes the browser’s URL using the History API, requests the new page using
XMLHttpRequest, and then renders the HTML response.
During rendering, Turbolinks replaces the current
bodyelement outright and merges the contents of the
documentobjects, and the HTML
htmlelement, persist from one rendering to the next.
Here’s the mustard it’s cutting:
It depends on the HTML5 History API and Window.requestAnimationFrame. In unsupported browsers, Turbolinks gracefully degrades to standard navigation.
This approach matches my own mental model for building on the web—I might try playing around with this on some of my projects.
This could be a handy replacement for some Google Charts images of graphs. It uses SVG and is responsive by default.
I bet it wouldn’t be too tricky to use this to make some sparklines.
Two (similar) patterns for responsive navigation that don’t involve sweeping everything behind a hamburger icon.
When I’ve experimented with auto-overflowing horizontal patterns like this, I’ve found that a judiciously-placed box shadow can give a nice affordance.
This article on airships has my new favourite sentence in the English language:
During the First World War, Germany and its allies ceased production of sausages so that there would be enough cow guts to make zeppelins from which to bomb England.
Of course it was Simon who pointed me to this. Of course.
This is a really lovely project by Dan and Nat—Christmas cards featuring the fleeting invisible constellations formed by the mesh of GPS satellites within which our planet lies.
A nice navigable timeline of historical events from Wikipedia.
What a lovely bit of progressive enhancement—styling data tables to display as charts.
This infographic offers a visual way to explore the various stages of the Earth’s history using a 12 hour clock analogy.
A magnificent presentation from Maciej that begins by drawing parallels between the aviation industry in the 20th century and the technology industry in the 21st:
So despite appearances, despite the feeling that things are accelerating and changing faster than ever, I want to make the shocking prediction that the Internet of 2060 is going to look recognizably the same as the Internet today.
Unless we screw it up.
And I want to convince you that this is the best possible news for you as designers, and for us as people.
But if that sounds too upbeat for you…
Too much of what was created in the last fifty years is gone because no one took care to preserve it.
We have heroic efforts like the Internet Archive to preserve stuff, but that’s like burning down houses and then cheering on the fire department when it comes to save what’s left inside. It’s no way to run a culture. We take better care of scrap paper than we do of the early Internet, because at least we look at scrap paper before we throw it away.
And then there’s this gem:
It finishes with three differing visions of the web, one of them desirable, the other two …not so much. This presentation is a rallying cry for the web we want.
Let’s reclaim the web from technologists who tell us that the future they’ve imagined is inevitable, and that our role in it is as consumers.
This gets nothing but agreement from me:
For altering the default scroll speed I honestly couldn’t come up with a valid use-case.
My theory is that site owners are trying to apply app-like whizz-banginess to the act of just trying to read some damn text, and so they end up screwing with the one interaction still left to the reader—scrolling.
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.
The GPS system is a monumental network that provides a permanent “YouAreHere” sign hanging in the sky, its signal a constant, synchronised timecode.
Cleanup of Silicon Valley Superfund site takes environmental toll | The Center for Investigative Reporting
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.
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.