Leonie points to a change in the semantics of the a element in HTML5 that could be very handy for accessible navigation.
Archive: July, 2011
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:
- “I didn’t kill my wife!”
- “My family!”
- “I’m looking for my wife!”
Please Send Me To The UK For The Update 2011 Conference :: Freelance WordPress Developer Amber Weinberg
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 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:
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).
Responsive images right now — CSS Wizardry—CSS, Web Standards, Typography, and Grids by Harry Roberts
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.
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:
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.
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.
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.
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.
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.
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.
New Mobile Safari stuff in iOS5: position:fixed, overflow:scroll, new input type support, web workers, ECMAScript 5 | David B. Calhoun – Developer Blog
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!