I’m no fan of mega menus, and if a site were being designed from scratch, I’d do everything I could to avoid them, but on some existing projects they’re an unavoidable necessity (the design equivalent of technical debt). In those situations, this looks like a really nice, responsive approach.
I’ve been thinking about this a lot lately. It feels like a user’s browser history is an incredibly rich seam of valuable information just waiting to be presented in a more interesting way.
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.
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.
The geography of musicians.
Matt gets an opportunity to use the Chernoff effect for visualising school data.
Microsoft are trying to patent sparklines. Twunts.
An in-depth study mapping all the permutations in "choose your own adventure" books.
A handy RESTful interface for retrieving favicons as images.
An examination of behavioural contagion in social networks.
A blog devoted to data visualisation.
Brendan Dawes pointed me to this wonderfully playful creation. It's Flash-free, believe it or not.
A cute and poignant resignation letter ...in video game form.
Unbelievable 3D visualisation created by extracting common points from millions of pictures on Flickr of Rome, Venice and Dubrovnik. As Matt Haughey would say, "Holy shitballs!"
Table of Condiments That Periodically Go Bad
Jack Schulze goes into detail on the genesis of the wonderful Here & There map/visualisation.
This is the best location visualisation I have ever seen.
A visualisation of Twitter messages designed for display in public spaces. From the mad genius that is Cameron Adams.
A Cederholm-designed site for tracking trends on Wikipedia. Check out the HTML5-based class names.
The Guardian has released a shedload of data for us to play with. Go forth and hack.
"I love this graph because in one small space, it shows the time of Sunrise and Sunset across the entire world throughout all Latitudes throughout the entire year of this tilted planet."
Small interactions that serve no useful purpose but are nonetheless satisfying. "Design this interaction such that: It's “free,” i.e. having no significance to the task or content, It's discoverable in ordinary use of the product, It's quick and repeatable (Less than half a second.), It's pleasant"
Information Graphics about WWII for WWII magazine and for the book proposal "A Visual Miscellany of World War II".
"Now, there are signs â€œRADIOACTIVITYâ€� written with big white letters on the approaching paths to the structure but they donâ€™t stop the abandoned exotics lovers."
Dopplr Blog Â» Blog Archive Â» Dopplr presents the Personal Annual Report 2008: freshly generated for you, and Barack Obamaâ€¦
I can't wait to get my personal annual report from Dopplr! In the meantime, I'll content myself with the very pretty example of Barack Obama's annual report.
A visual real-time simulation that displays the carbon dioxide (co2) emissions, birth rates, and death rates of every country in the world.
On the tenth day of Newton, My true love gave to me, Ten drops of genius, Nine silver co-oins, Eight circling planets, Seven shades of li-ight, Six counterfeiters, Cal-Cu-Lus! Four telescopes, Three Laws of Motion, Two awful feuds, And â€¦
Interactive visualizations of what's happening right now.
A brilliant take on Space Invaders where gravity does its thing.
A collection of network diagrams and visualisations from the simple to the sublime.
The beautiful work of David Maisel, including Library of Dust: â€œ. . . these canisters hold the cremated remains of patients from an American psychiatric hospital. Oddly reminiscent of bullet casings, the canisters are literal gravesites. Reacting â€¦
A crazy way of viewing news stories courtesy of Brendan Dawes.
The new Radiohead video isn't really a video at all. It's data visualisation. Here you can interact with the data points while the song is playing. I love this.
This is seriously brilliant. Starting from a single URL (adactio.com), a lifestream is creating based on XFN rel="me" links. David Singleton wins the internet.
A tool for generating beautiful visualisations from commits to code repositories.
A really nice interactive infographic from the New York Times.
Emergence, network theory, behavioural science ...these things have been occupying my mind a lot lately.
David has no sense of humour.
The title of "most bizarre IE quirk" is hotly contested, given just how many of them there are. But John has found a real humdinger here.
A collection of beautiful illustrations scanned from a flight-training manual.
Netscape Navigator is officially dead. Rest in peace, my old adversary.
A brilliant summation by David Byrne of the possible business models available to musicians today.
David follows up on my talk at St Paul's with cornucopia of thoughts and links that's more in-depth than the talk itself.
A great little tool for creating favicons.
If you missed it at XTech in Paris, here's a chance to see Gavin Bell's excellent musings on identity and consolidation from a talk he gave at Google.
From the people who brought you Ficlets comes a nice app for creating personal timelines. Microformats and OpenID support included.
This video of David Byrne from Stop Making Sense era Talking Heads is as brilliant and wacky as you'd expect. David Bynre is teh awsum.
Peter Saville is releasing some of his fonts for free. I'm grabbing the beautiful serif typeface used on the front of Joy Division's "Closer"; it's gorgeous.
There's been a steady increase in talk around continuous partial attention (what with Twitter and all) so I here's the mother lode: Linda Stone waxing lyrical and expanding our vocabularies.
Gavin Bell has posted the slides from his excellent talk at BarCamp London 2.
A French translation of my most recent article for A List Apart.
Garret gives an excellent, excellent round-up of the factors involved in the behaviour layer of front-end architecture (that's 'building websites' to you and me).
Geeky but good.
A blogger who was on a flight that lost cabin pressure blogs about it... with pictures.
An excellent alternative to the inline cruft so common in most Ajax applications.
Mike is leaving Disney. He's off to build Web 2.0.