| 5th | 10th | 15th | 20th | 25th | 30th | ||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 12am | |||||||||||||||||||||||||||||||
| 4am | |||||||||||||||||||||||||||||||
| 8am | |||||||||||||||||||||||||||||||
| 12pm | |||||||||||||||||||||||||||||||
| 4pm | |||||||||||||||||||||||||||||||
| 8pm |
Good design and good markup provide structure to content. Good markup is a fundamental part of good design: beautiful on the inside, beautiful on the outside. HTML and CSS give another venue to provide structure to content in the native language of the web, and learning these guides decisions by surfacing the affordances of the medium.
Ariel pens a guest post for Scientific American all about Science Hack Day.
We played at the bottom of the art-deco staircase in Bexhill’s De La Warr Pavilion. Sounds pretty good, if I do say so myself.
The first book by this publisher is “HTML For Babies.”
A wonderful reminder by Kevin Kelly of the amazing interconnected world we live in, thanks to network effects.
Now this is intriguing: putting your default images inside a noscript element, then do your viewport measuring and image-swapping before removing the noscript tags. But when I tried this a while back, I couldn’t get access to the noscript elements with JavaScript (which makes sense, when you think about it).
I wonder if it’s the use of class names or jQuery that allows it to work here?
A superb post by David that ties together multiple strands of personal digital preservation through homesteading instead of sharecropping.
A nice Huffduffer-style mad libs form gives this registration form a friendly quality.
If you’re trying to retrofit an existing desktop-centric site for small screens, this server-side image-resizing technique might be useful but is definitely not the right tool for a content-out, small-screen-first approach.
In a break with tradition, Paul posts something sensible and smart (I kid, I kid): using media queries to detect height rather than just width and adjust content accordingly to make sure that your most important content is visible in the viewport.
Stewart Brand wrote this twelve years ago: it’s more relevant than ever in today’s cloud-worshipping climate.
I’d like to think that it’s ironic that I’m linking to The Wayback Machine because the original URL for this essay is dead. But it isn’t ironic, it’s horrific.
Amber documents her attempt to turn physical objects imbued with meaning into digital artefacts.
This is something we’ve previously had to build from scratch at Clearleft so it’s nice to see an off-the-shelf solution.
A truly impressive achievement by Archive.org: all the television footage from September 11th, 2001 gathered in one place on the web.
A great idea from Jessica Hische: find a good printer in your area. It’s beautifully designed and executed, with a lovely dollop of responsiveness.
This abuse of the !important declaration in Firefox’s user-agent stylesheet was driving me crazy recently. Roger proposes a CSS patch, but this is really something that needs to be fixed in the browser.
Those lovely BERG chaps profiled in the New York Times.
An ingenious loading indicator that uses JavaScript instead of an animated .gif.
Fictional logos.
If you’re going to have a photo-shoot for your engagement, this is the way to do it.
A joint effort by the Tau Zero Foundation and the British Interplanetary Society to research the design of an interstellar spacecraft.
Accidental camera drops serve a purpose as part of a larger narrative.
Once again I’m getting all my CSS3 information from Jonathan. This time he’s discovered the vw and vh units which allow you to specify sizes relative to the size of the viewport.
Jake’s talk at DIBI earlier this year was absolutely fantastic. It features a rape reference, a story about pissing, and a Human Centipede metaphor.
It’s also very, very informative. Watch this.
Samantha gives the rundown of a hands-on use of Style Tiles.
Bootstrap is Twitter’s CSS and markup style guide—very similar to the pattern portfolios that we often provide as deliverables at Clearleft.
Dan gives his pragmatic perspective on making Dribbble more adaptive. Baby steps.
When time, resources and funds are more abundant, I’d love us to rethink things in a more holistic manner, but for now incremental improvements will keep us moving.
The video of my talk/rant at the DIBI conference in Newcastle/Gateshead earlier this year, for your viewing pleasure.
A crowd-funded, creative commons licensed sci-fi film currently in production.
A valiant attempt to polyfill support for hyphenation in browsers other than the latest Safari and Firefox.
A very clever and tricksy way to sync up multiple devices so that when you refresh a URL or follow a link on one, it happens on all of them. It uses OS X’s Internet Sharing feature combined with locally-hosted Node.js. It’s positively McGyverian!
I’m usually not a fan of CSS “frameworks” but I like the thinking that’s gone into this fluid, responsive system. I particularly like this advice:
Take it apart, steal the parts that you like, and adapt them to your own way of working.
A truly lovely responsive design from Tiffany Duening and co.
Finally. Hyphenation on the web.
Pretty much the only forms of Western literature that don’t use hyphenation are children’s books and websites. Until now.
Insanely in-depth look at how browsers work, right down to the nitty gritty. You’d think there’d be a lot of engineering talk, but actually a lot of it is more about linguistics and language parsing.
A brave attempt to explain the new outline algorithm in HTML (although it inaccurately states that no browsers have support for it—Firefox shipped with it a while back).
You can safely skip the comments: most of them are discouraging, ignorant, and frankly, just plain stupid.
This is a thoroughly enjoyable, frustratingly addictive two-player game for the iPad.
Oh, and it just happens to be made with HTML, CSS and JavaScript.
An alternative to showoff.io for sharing your locally-hosted sites.
Jessica Hische has redesigned her site in a lovely and responsive manner.
A handy one-page cheatsheet for using HTML5’s appcache manifest file for offline storage.
A gorgeous adaptive (though not quite responsive) design …and it’s all about food.
I recommend you look through all of Paul’s presentation …because they’re all excellent.
A collection of experiments in typography using canvas, SVG, JavaScript and whatever else it takes.
A documentary about the weekly session in Dempsey’s pub in Manhattan.
A cute idea: see how signs (mostly in Brazil) would look if they were set in Helvetica.
In an attempt to “optimise” performance, T-Mobile and Orange are actually breaking jQuery.
This is a match made in heaven: the brilliant Jake Archibald is joining the brilliant Lanyrd.
So that’s what they were filming when I came out of band practice the other day. This is my neighbourhood.
There are some inaccuracies and misrepresentations in here, but on the whole this is a pretty good round-up of your options when dealing with responsive design in older browsers.
Humour through noun permutations. The results are all-too believable.
I know this is probably inappropriate (comedy is tragedy plus time) but I am getting quiet a giggle out of this. I know, I know: too soon.
A rallying cry from Russell, urging us not to rely too much on the intangible.
This is not as linkbaity as the title might suggest.
I’ve suggested the term “exploitationware” as a more accurate name for gamification’s true purpose…
A lovely little social experiment: you can buy a Starbucks coffee with Jonathan Stark’s card; you can also top up the card. You can track the card balance on Twitter.
Now this looks like a fascinating project …and there’s a symposium happening in Florida at the end of September with Jill Tartar, Stewart Brand and more. I want to go to there.
A pitch-perfect parody of people that peeve.
Tantek’s braindump of research he and Erin have been doing on web actions—verbs for the web, specifically interactions across sites: sharing, liking, and so on. I agree with him that this terminology feels better than “web intents.”
Some great, considered thoughts from Mark on how CSS Grid Layout could work as part of a larger tradition in design.
Erin documents the next step after web intents.
A lovely little ode to the manicule.
A really nice little primer on getting started with HTML5.
This is wonderful. A web server powered by people. Change the URL and a person will manually fetch the corresponding resource.
You can be part of the server team too.
So long, Juno. Call me when you get to Jupiter.
A great reminder from Bruce that we need to remember to use cutting-edge web technology responsibly.
A quick overview and explanation of web intents.
John tells you everything you need to know about CSS animations and transitions, and then he gives you a tool to help you get started.
The importance of structured content for longevity and responsiveness.
Listen to Josh explain a genuinely useful example of HTML5’s local storage that he’s added to Fontdeck.
Just when you thought it couldn’t get any worse than “webinar.”
Wonderful musings from Matt on meeting the emerging machine intelligence halfway.
A great responsive design from Scott Jehl for a publication aimed at young science hackers. Notice how the interactions change according to available screen real-estate.
I wholeheartedly agree with this summation of what professional web design and development entails.
What a great way to sell a book with “explorations” in the title—play around with the font size, leading, alignment (and browser window size).
Some great thoughts on the language of the web.
I really like this proposal to allow for more nuanced linking using CSS selectors in fragment identifiers (though I worry about the overloading of the # symbol in URLs).
