The Tink Tank » Marking up the current page with HTML5 links
Leonie points to a change in the semantics of the a element in HTML5 that could be very handy for accessible navigation.
5th | 10th | 15th | 20th | 25th | 30th | ||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
12am | |||||||||||||||||||||||||||||||
4am | |||||||||||||||||||||||||||||||
8am | |||||||||||||||||||||||||||||||
12pm | |||||||||||||||||||||||||||||||
4pm | |||||||||||||||||||||||||||||||
8pm |
Leonie points to a change in the semantics of the a element in HTML5 that could be very handy for accessible navigation.
As ever, I had a lot of fun moderating the hot topics panel at this year’s Web Directions @media in London. Thanks to all of you who left questions on my blog post.
I had a great line-up of panelists:
We discussed publishing, mobile, browsers, clients and much much more. The audio is available for your huffduffing pleasure and I’ve had it transcribed. I’ve published the transcription over in the articles section of this site, so if you prefer reading to listening, I direct your attention to:
Ariel’s inspiring keynote from OSCON in Portland, featuring two very exciting Science Hack Day announcements at the end.
Have some fun by finding these four Harrison Ford quotes amongst the forty characters he has played:
Amber really wants to come to Aral’s Update conference. Can you help her out?
Another beautiful piece of work from James: a kaleidoscope made from Google maps.
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.
Brighton hacker Jason Hotchkiss demos his music-generating lava lamps in this promo video for the Brighton Maker Faire taking place the day after dConstruct.
A panel I moderated at Web Directions @media in London in May 2011.
A great round-up by Richard of some of the most common semantic pitfalls encountered with HTML5.
Paul has redesigned. Again. It’s gorgeous and it is, of course, responsive.
A cute website that’s a call-to-arms against low-contrast text on the web.
This is your one-stop shop for envelope-pushing in the browser:
The very best of creative JavaScript and HTML5.
When the always-excellent Radiolab podcast turned its attention to the subject of creativity and motivation in an episode called ‘Help?’, they spoke to Elizabeth Gilbert who reminisced about interviewing Tom Waits on this topic:
He was talking about how every song has a distinctive identity that it comes into the world with, and it needs to be taken in different ways. He said there are songs that you have to sneak up on like you’re hunting for a rare bird, and there are songs that come fully intact like a dream taken through a straw. There are songs that you find little bits of like pieces of gum you find underneath the desk, and you scrape them off and you put them together and you make something out of it.
And there are songs, he said, that need to be bullied. He said he’s been in the studio working on a song and the whole album is done and this one song won’t give itself over and — everyone’s gotten used to seeing him do things like this — he’ll march up and down the studio talking to the song, saying “The rest of the family is in the car! We’re all going on vacation! You coming along or not? You’ve got 10 minutes or else you’re getting left behind!”
Last year the New York Times ran a profile of The National, written while they were still recording the wonderful High Violet—my favourite album of last year. The piece circles around the ongoing problems the band were having trying to tame the song Lemonworld:
Since January they’d done it bright, done it drowsy, done it with violin parts overnighted from Australia by Padma Newsome, done it so many ways Bryce despaired, “It’s a riddle we can’t solve.”
This is exactly what we’ve been going through with Salter Cane. For about a year we had a song that had been defying us, stubbornly refusing to reach that breakthrough moment where it all seems to come together. We took a break from the song for a while and when we came back to it, we tried approaching it as a new piece. That seems to be working. It’s finally coming together.
In the end we realised that we trying to make the song into something bigger than it needed to be. Sometimes it’s okay for a song to be small and simple. That seems to be the case with Lemonworld:
Matt said afterward, “we tried so hard and it always seemed to fail as a rock song. It lost the charm of the ugly little demo. Now it’s the ugliest, worst-mixed, least-polished song on the record, and it took the longest to get there.”
I think that Lemonworld is a strong song. It even stands up to be being butchered by me on the bouzouki.
Everything you ever needed to know about adding HTML5 audio and video to your site, courtesy of the mighty John Allsopp.
The Zooniverse boffins have done it again! This time you can help to transcribe ancient Egyptian texts. Brilliant!
A fascinating look at the intersection of typography and internationalisation on the BBC’s World Service site.
Portraits of people that tweet, what they tweet, where they tweet.
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.
Another browser-based tool for viewing the same site at different sizes, but this one displays them all the same time, side by side.
Another browser-based tool for testing your responsive designs at different screen sizes.
A thoughtful post on how to approach responsive web design. In short, it’s going to be different for every project.
Remy created this tool for resizing a viewport to figure out where to put the breakpoints in your media queries.
A handy little service for viewing sites at different dimensions. Just be aware that it doesn’t actually emulate different devices.
Here’s an approach to responsive images in the Expression Engine CMS …but I fundamentally disagree with the UA-sniffing required.
Once there’s better support for the CSS3 attr() function, this could be a nifty way of handling responsive images (although large-screen user-agents will download more than one image).
Another approach to responsive images, this time using background images. The disadvantage is that large-screen devices will download both images. Still, pretty darn clever.
A well-thought approach to responsive images (although personally, I would use cookies to store the dimensions of the viewport rather than the dimensions of the screen).
It’s very gratifying to know that I encouraged someone to write something.
A swear word a day, typeset.
This feels so good.
I agree 100% with Mark’s thoughts on what a Content Management System should and shouldn’t attempt to do.
I think that markup is too important to be left in the hands of the people who make content management systems. They all too often don’t care enough about it, and they can never know the context that you will be using it in, and so in my opinion they shouldn’t be trying to guess.
So true, it hurts.
An excellent explanation from Richard of the bdi element (bi-directional isolate) for handling a mixture of left to right and right to left languages in HTML5.
I agree with Oli’s conclusion:
Save IDs for fragment identifiers or JavaScript hooks.
On the importance of using fluid grids as part of responsive web design:
We do responsive web design, but we don’t do it for the sake of being trendy. We do it because we believe it’s the way websites should be made. This is an opportunity for us to finally embrace the dynamic medium we build for. The web is not fixed width.
This is an excellent idea from Andy: selector queries. Like media queries but at the component level. Quite often it isn’t the width of the viewport that matters, it’s the width of the containing element for whatever you’re trying to style.
A wonderful post by Trent Walton on the thinking and workflows we can employ with responsive design. So many opportunities!
Web designers will have to look beyond the layout in front of them to envision how its elements will reflow & lockup at various widths while maintaining form & hierarchy. Media queries can be used to do more than patch broken layouts: with proper planning, we can begin to choreograph content proportional to screen size, serving the best possible experience at any width.
Fnar, fnar, and indeed, fnar.
Why not become a lifetime member of the Muff Diving Club? Makes a perfect gift as you will get a Muff Diving Club membership card posted out to proove that you’re an official Muff diver.
It’s hard to believe that it’s been half a decade since The Show from Ze Frank graced our tubes with its daily updates. Five years ago to the day, he recorded the greatest three minutes of speech ever committed to video.
In the midst of his challenge to find the ugliest MySpace page ever, he received this comment:
Having an ugly Myspace contest is like having a contest to see who can eat the most cheeseburgers in 24 hours… You’re mocking people who, for the most part, have no taste or artistic training.
Ze’s response is a manifesto to the democratic transformative disruptive power of the web. It is magnificent.
In Myspace, millions of people have opted out of pre-made templates that “work” in exchange for ugly. Ugly when compared to pre-existing notions of taste is a bummer. But ugly as a representation of mass experimentation and learning is pretty damn cool.
Regardless of what you might think, the actions you take to make your Myspace page ugly are pretty sophisticated. Over time as consumer-created media engulfs the other kind, it’s possible that completely new norms develop around the notions of talent and artistic ability.
Spot on.
That’s one of the reasons why I dread the inevitable GeoCities-style shutdown of MySpace. Let’s face it, it’s only a matter of time. And when it does get shut down, we will forever lose a treasure trove of self-expression on a scale never seen before in the history of the planet. That’s so much more important than whether it’s ugly or not. As Phil wrote about the ugly and neglected fragments of Geocities:
GeoCities is an awful, ugly, decrepit mess. And this is why it will be sorely missed. It’s not only a fine example of the amateur web vernacular but much of it is an increasingly rare example of a period web vernacular. GeoCities sites show what normal, non-designer, people will create if given the tools available around the turn of the millennium.
Substitute MySpace for GeoCities and you get an idea of the loss we are facing.
Let’s not make the same mistake twice.
An even-handed weighing up of the pros and cons of native and web app development for mobile.
Stephen and PPK are taking their two-day mobile workshop on the road, including two dates in the UK (one of which is Brighton!). There’s a welcome emphasis on testing.
Steph Hay takes a look at how websites can allow a narrative to unfold, with the Ben The Bodyguard site as a case study.
A handy list of regular expressions that you can use in the new pattern attribute on the input element in HTML5.
Mike takes on the very tricky task of explaining the new outline algorithm—definitely one of the hardest features of HTML5 to explain, in my opinion.
The Deatchwatch page on the Archive Team website makes for depressing reading, filled as it is with an ongoing list of sites that are going to be—or have already been—shut down. There are a number of corporations that are clearly repeat offenders: Yahoo!, AOL, Microsoft. As Aaron said last year when speaking of Museums and the Web:
Whether or not they asked to be, entire communities are now assuming that those companies will not only preserve and protect the works they’ve entrusted or the comments and other metadata they’ve contributed, but also foster their growth and provide tools for connecting the threads.
These are not mandates that most businesses take up willingly, but many now find themselves being forced to embrace them because to do otherwise would be to invite a betrayal of the trust of their users, from which they might never recover.
But occasionally there is a glimmer of hope buried in the constant avalanche of shit from these deletionist third-party custodians of our collective culture. Take Google Video, for example.
Earlier this year, Google sent out emails to Google Video users telling them the service was going to be shut down and their videos deleted as of April 29th. There was an outcry from people who rightly felt that Google were betraying their stated goal to organize the world‘s information and make it universally accessible and useful.
Google backtracked:
Google Video users can rest assured that they won’t be losing any of their content and we are eliminating the April 29 deadline. We will be working to automatically migrate your Google Videos to YouTube. In the meantime, your videos hosted on Google Video will remain accessible on the web and existing links to Google Videos will remain accessible.
This gives me hope. If the BBC wish to remain true to their mission to enrich people’s lives with programmes and services that inform, educate and entertain
, then they will have to abandon their plan to destroy 172 websites.
There has been a stony silence from the BBC on this issue for months now. Ian Hunter—who so proudly boasted of the planned destruction—hasn’t posted to the BBC blog since writing a follow-up “clarification” that did nothing to reassure any of us.
It could be that they’re just waiting for a nice quiet moment to carry out the demolition. Or maybe they’ve quietly decided to drop their plans. I sincerely hope that it’s the second scenario. But, just in case, I’ve begun to create my own archive of just some of the sites that are on the BBC’s death list.
By the way, if you’re interested in hearing more about the story of Archive Team, I recommend checking out these interviews and talks from Jason Scott that I’ve huffduffed.
These lovely visualisations of geotagged photos and tweets are almost indistinguishable from aerial views of cities at night.
What a wonderful idea! Create a zoetrope from an animated .gif.
Tickets for dConstruct 2011 went on sale last Tuesday. Tickets for dConstruct 2011 also sold out last Tuesday.
That’s kinda crazy: a conference for almost 800 people selling out in one day! I think it’s partly down to the great reputation that dConstruct has established for itself over the years as the thinking geek’s gathering. But I think it must mostly be down to the fantastic line-up of speakers: Don Norman, Frank Chimero, Kevin Slavin …it’s going to be quite a day!
If you didn’t manage to get a ticket, don’t despair. Technically, there are still some tickets available. If you book a place on one of the workshops taking place in the run-up to the conference day itself, you’ll get a complementary ticket to the main event. Also, if you book a workshop place before August 2nd, you can get the early-bird rate of £395+VAT rather than the full price of £445.
You might choose to attend Dan Lockton’s workshop on influencing behaviour, Josh Clark’s tapworthy mobile design or Scott Jehl’s jQuery mobile workshop but I’m going to humbly suggest that you might also be interested in the day-long course I’m putting together on responsive enhancement.
As the title suggests, this is going to be all about the intersection of responsive design and progressive enhancement: a content first approach. Because of that, the workshop won’t just be dealing in the technologies involved. It will also spend plenty of time tackling the planning and process. So while there are obvious benefits for front-end developers, it’s also going to be a valuable day for UX designers, project managers and just about anybody involved in building websites today.
Oh, and the workshop will feature a special guest appearance by Scott who will give a peak behind the scenes of the forthcoming Boston Globe responsive site.
I’m going to be spending a lot of time preparing the materials for this workshop. In fact, it’s going to be occupying most of my time between now and August 31st. If you want to be there for the final result, go ahead and book your place.
The world’s first mobile photography conference will take place in San Francisco on September 24th this year, featuring Dan Rubin, Jessica Zollman and more.
A bookmarklet to help you figure out what files you might want to put in your cache manifest for offline storage.
John has written a very in-depth look at offline storage (using the cache manifest) in HTML5.
Clay Shirky takes a long hard look at the present (and future) of newspapers and—more important—of journalism. A good read.
It’s a provocative title but I certainly agree with this post’s premise. And the situation it describes is all too familiar.
A classic (very) short science fiction story that posits an interesting solution to the Fermi paradox.
A handy tool for checking page load times.
I’m getting behind Oli’s proposal to allow non-quoted footers within blockquotes in HTML. Here’s where I quote the design principles to support his case.
Those excellent Zooniverse people—who gave us such excellent projects Galaxy Zoo and the amazing Old Weather—are soliciting proposals for more citizen science efforts.
A nice round-up of responsible responsive web design techniques, ‘though I would go a bit further and suggest that the rallying cry is not so much about Mobile First but Content First.
A superb long-zoom view of responsive design from Andy. He also talks about the pragmatism required from any front-end developer.
The foreword to the seminal fourth book from A Book Apart.
Over on the HTML5 Doctor site, Oli has written a great article called Quoting and citing with <blockquote>
, <q>
, <cite>
, and the cite
attribute.
Now, I still stand by my criticism of the way the cite
element has been restrictively redefined in HTML5 such that it’s not supposed to be used for marking up a resource if that resource is a person. But I think that Oli has done a great job in setting out the counter-argument:
By better defining
<cite>
, we increase the odds of getting usable data from it, though we now need different methods to cover these other uses.
Oli’s article also delves into the blockquote
element, which is defined in HTML5 as a sectioning root.
Don’t be fooled by the name: sectioning roots are very different to sectioning content in a fundamental way. Whereas sectioning content elements—section
, article
, nav
and aside
—are all about creating an explicit outline for the document from the headings contained within the sectioning content (using the new outline algorithm), the headings within sectioning roots (blockquote
, td
, fieldset
, figure
, etc.) don’t contribute to the document outline at all! But what sectioning roots and sectioning content have in common is that they both define the scope of the header
and footer
elements contained within them.
The footer
element is defined as containing information about its section such as who wrote it, links to related documents, copyright data, and the like.
This gives a rise to rather lovely markup pattern that’s used on HTML5 Doctor: why not use the footer
element within a blockquote
to explicitly declare its provenance:
<blockquote>
<p>The people that designed .mobi were smoking crack.</p>
<footer>—<cite class="vcard">
<a class="fn url" href="http://tantek.com/">Tantek Çelik</a>
</cite></footer>
</blockquote>
(and yes, I am using the cite
element to mark up a person’s name there).
Well, apparently that blockquote
pattern is not allowed according to the spec:
Content inside a
blockquote
must be quoted from another source.
Because the content within the blockquote
’s footer
isn’t part of the quoted content, it shouldn’t be contained within the blockquote
.
I think that’s a shame. So does Oli. He filed a bug. The bug was rejected with this comment:
If you want the spec to be changed, please provide rationale and reopen.
That’s exactly what Oli is doing. He has created a comprehensive document of block quote metadata from other resources: books, plays, style guides and so on.
Excellent work! That’s how you go about working towards a change in the spec—not with rhetoric, but with data.
That’s why my article complaining about the restrictions on the cite
element is fairly pointless, but the wiki page that Tantek set up to document existing use cases is far more useful.
Here’s one to add to Instapaper or Readability to savour at your leisure: Aaron Straup Cope’s talk at Museums and the Web 2010:
This paper examines the act of association, the art of framing and the participatory nature of robots in creating artifacts and story-telling in projects like Flickr Galleries, the API-based Suggestify project (which provides the ability to suggest locations for other people’s photos) and the increasing number of bespoke (and often paper-based) curatorial productions.
This comic is the result of a collaboration between Warren Ellis and BERG. It must, therefore, be splendid. I’ve ordered mine.
A handy mobile-friendly list from Mike Stenhouse of which fish are currently having their stocks depleted. It uses offline storage so once you’ve visited once, you’ll be able to pull it up anywhere.
June was a busy month.
July is looking a lot calmer. I’m going to be in Brighton for the whole month. I will, however, be using the time to prepare for the onslaught of events in the coming months. In September alone, Brighton will play host to a whole slew of events falling under the banner of the Brighton Digital Festival:
I’m going to be spending my non-travelling time this month preparing a workshop to precede dConstruct. Keep an eye on the site for more details very soon.
Oh, and remember: tickets for dConstruct go on sale this Tuesday, July 5th.
Pitch-perfect parody of Adam Curtis’s particular style of documentary guff.
Atemporality can be very moving.
Now this is how you make progress on getting changes made to a spec: by documenting real-world use cases.
I agree with this. I like it. I plus one it. So to speak.
A look at some of the new HTML5/JavaScript additions coming in the next version of Mobile Safari.
Take some time out to read this. Read all of this. Craig’s thoughts on the nature of publishing today:
Digital’s effect on how we produce, distribute and consume content.
I can confirm that this crocheted mini Boba Fett is just about the cutest and simultaneously awesomest thing ever!
Remember that mobile browser panel I moderated at the Mobilism conference in Amsterdam earlier this year? Well, I’ve had the whole thing transcribed. You can now:
Enjoy!
It seems like just a fortnight ago that I was in the States for An Event Apart Atlanta. Wait a minute …it was just a fortnight ago! It would be utter madness, then, for me to willingly make another trip across the Atlantic so soon after that. And yet, that’s exactly what I did for Indie Web Camp.
Now, admittedly, the fact that the event was taking place in Portland may have swayed my decision; it’s a place I’m very fond of, filled as it is with good coffee, a giant bookshop, food carts and excellent geeks most dear to my heart. But the premise of Indie Web Camp also tugged heavily at my heartstrings: the desire to have control over my my own data—living at my own URL—syndicated out to third-party sites …the Pembertonisation of personal publishing. I knew that if I didn’t attend this event, I would just be miserable watching Twitter posts from a timezone eight hours away. So I made the trip from England to the Pacific Northwest to spend two days in the company of some very, very smart people.
I wasn’t sure whether it was going to be like a Barcamp or more like a hack day. In the end, it was the perfect mixture of both. The first day was spent brainstorming ideas. The second day was spent coding.
I feel bad that I didn’t contribute more to the coding side of things (especially after travelling so far to be there) but I did at least take some notes on the demos presented at the end of the event.
There were some fascinating themes throughout. Chris spoke about the possibilities of distributed web intents and the possibility of hijacking proprietary actions—such as Facebook’s “like” and Google’s “+1”—through a browser plug-in. On the subject of browser plug-ins, Glenn blew everyone’s minds with a demo of the latest Firefox extension he’s been working on. It more or less turns the browser into an artificially intelligent user agent. I hope there’ll be some documentation forthcoming soon.
Ward Cunningham—yes, that Ward Cunningham—spearheaded an initiative for creating a distributed wiki. Meanwhile, a whole bunch of us were concerned about how much pictorial data we are entrusting to Flickr, a service owned by Yahoo; a company with a dreadful track record for preserving personal publishing (Geocities—never forget, never forgive). There was much brainstorming and coding around backing up Flickr photos as well as figuring out ways to post to Flickr from your own website.
I should have been contributing to that but instead I was getting some valuable Github advice from Shane on how to contribute to No More Sharecropping. Check out the README file if you’d also like to contribute.
All in all, it was a great gathering, ably organised by Tantek, Amber, Aaron and Crystal …well worth the trip.