Archive: August, 2011

82

sparkline
                    5th                     10th                     15th                     20th                     25th                     30th     
12am          
4am    
8am                  
12pm                    
4pm                              
8pm                          

map

Tuesday, August 30th, 2011

via Frank : Designers vs Coding

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.

Monday, August 29th, 2011

Hacking science: the intersection of web geeks and science geeks | Guest Blog, Scientific American Blog Network

Ariel pens a guest post for Scientific American all about Science Hack Day.

Salter Cane — Anomie - YouTube

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.

Code Babies | Publishing the ABC’s of the Web for Babies

The first book by this publisher is “HTML For Babies.”

The Technium: Why the Impossible Happens More Often

A wonderful reminder by Kevin Kelly of the amazing interconnected world we live in, thanks to network effects.

Creating responsive images using the noscript tag | Head

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?

Sunday, August 28th, 2011

History, our future - Preoccupations

A superb post by David that ties together multiple strands of personal digital preservation through homesteading instead of sharecropping.

Friday, August 26th, 2011

Registration | Frontend 2011

A nice Huffduffer-style mad libs form gives this registration form a friendly quality.

Thursday, August 25th, 2011

Responsive HTML images

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.

Are Media Queries the answer to the Fold? « Boagworld

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.

Escaping the Digital Dark Age

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.

The Digital Storage of Analog Memories | Caseorganic Blog

Amber documents her attempt to turn physical objects imbued with meaning into digital artefacts.

FlexSlider - The Best Responsive jQuery Slider

This is something we’ve previously had to build from scratch at Clearleft so it’s nice to see an off-the-shelf solution.

Wednesday, August 24th, 2011

Understanding 9/11: A Television News Archive

A truly impressive achievement by Archive.org: all the television footage from September 11th, 2001 gathered in one place on the web.

Tuesday, August 23rd, 2011

Inker Linker

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.

Line-height in input fields | 456 Berea Street

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.

Design Firm Seeks to Humanize Technology - NYTimes.com

Those lovely BERG chaps profiled in the New York Times.

Monday, August 22nd, 2011

Impostor syndrome

I’m living inside Keynote these days. I’ve got a string of speaking engagements coming up and I’m freaking out about all of them.

The big one is the full-day dConstruct workshop I’ll be leading called Responsive Enhancement. I’ve been working on it solidly for the last month and I hope that it’s all going to come together this week. I’m quite excited about it. If anything, my concern is that there won’t be enough time in one day to cover all the things I want to geek about.

Lest you think that is a blatant plug to entice you to book a place on the workshop, that ship has sailed, my friend: the workshop sold out a while back. But you can still book a place on Scott’s jQuery Mobile workshop or Josh’s Mobile Design workshop. And remember, a workshop ticket gets you complementary access to the dConstruct conference (which sold out in a day).

Maker Faire Brighton will take place the day after dConstruct but I’ll probably be too busy making frantic last-minute preparations for Aral’s Update conference at the Brighton Dome two days later. I’ve been invited to deliver an 18 minute rant and permission has been granted for me to be as controversial as I wish. I’ll try not to disappoint. Tickets are still available if you want a piece of the action.

Later that week I’ll be up in London for the Adobe Expressive Web Tour. In this case, I haven’t explicitly asked permission to rant but I’m going to do so anyway. Hey, if you’re going to ask me to give a talk called “The State of the Web” in the same month that you dump Adobe Muse on the world, you’ve gotta expect some flak, right?

Then I’ll be flying out to Nashville for the Breaking Development conference which kicks off on September 12th. I’m feeling distinctly outclassed by the ludicrously smart line-up of talent that will be presenting there. And I’m supposed to open the show! gulp

Given that the title of my talk is There Is No Mobile Web, it may sound like I am once again courting controversy, but actually, I consider that to be a fairly uncontroversial viewpoint.

Much as I’m looking forward to the time in Tennessee, it’s a shame that I’ll have to duck out of town in the middle of the Brighton Digital Festival. I’ll miss out on BarCamp Brighton and Flash On The Beach.

Fortunately I will still be in town for Brainy Hacks on September 6th. It looks like Clare is putting together a great event: an evening of brainstorming design solutions for a non-profit:

Calling all creatives, strategists and planners - we need you to donate your brain to charity. We have a great brief from a not-for-profit organisation and you have two hours to solve it competing in teams of up to five to have your idea judged the best by our mega judges.

But if the time is going to pass pleasantly—with some food and drink to stir the creative juices—then a sponsor needs to step up and claim the glory. If you know of an appropriate organisation, get in touch with Clare.

Now, if you’ll excuse me, I need to get back to frantically putting slides together while I swirl deeper and deeper down into a pit of inadequacy-fuelled .

Sunday, August 21st, 2011

spin.js

An ingenious loading indicator that uses JavaScript instead of an animated .gif.

FAUXGO

Fictional logos.

best wedding pictures ever… scroll down - mlkshk

If you’re going to have a photo-shoot for your engagement, this is the way to do it.

Project Icarus

A joint effort by the Tau Zero Foundation and the British Interplanetary Society to research the design of an interstellar spacecraft.

Swarmanoid, the movie - YouTube

I, for one, welcome our autonomous swarming robot overlords.

oops on Vimeo

Accidental camera drops serve a purpose as part of a larger narrative.

A matter of protocol

The web is made of sugar, spice and all things nice. On closer inspection, this is what most URLs on the web are made of:

protocol://domain/path
  1. The protocol—e.g. http—followed by a colon and two slashes (for which Sir Tim apologises).
  2. The domain—e.g. adactio.com or huffduffer.com.
  3. The path—e.g. /journal/tags/nerdiness or /js/global.js.

(I’m leaving out the whole messy business of port numbers—which can be appended to the domain with a colon—because just about everything on the web is served over the default port 80.)

Most URLs on the web are either written in full as absolute URLs:

a href="http://adactio.com/journal/tags/nerdiness"
script src="https://huffduffer.com/js/global.js"

Or else they’re written out relative to the domain, like this:

a href="/journal/tags/nerdiness"
script src="/js/global.js"

It turns out that URLs can not only be written relative to the linking document’s domain, but they can also be written relative to the linking document’s protocol:

a href="//adactio.com/journal/tags/nerdiness"
script src="//huffduffer.com/js/global.js"

If the linking document is being served over HTTP, then those URLs will point to http://adactio.com/journal/tags/nerdiness and https://huffduffer.com/js/global.js but if the linking document is being served over HTTP Secure, the URLs resolve to https://adactio.com/journal/tags/nerdiness and https://huffduffer.com/js/global.js.

Writing the src attribute relative to the linking document’s protocol is something that Remy is already doing with his :

<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

If you have a site that is served over both and , and you’re linking to a -hosted JavaScript library—something I highly recommend—then you should probably get in the habit of writing protocol-relative URLs:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script>

This is something that HTML5 Boilerplate does by default. HTML5 Boilerplate really is a great collection of fantastically useful tips and tricks …all wrapped in a terrible, terrible name.

Saturday, August 20th, 2011

Sizing with CSS3’s vm and vh units - Snook.ca

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 Archibald - Font-Face - Good vs Legal on Vimeo

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.

agile approach | The Anatomy of a Design Decision: Examiner’s 2012 Campaign Site

Samantha gives the rundown of a hands-on use of Style Tiles.

Twitter Bootstrap

Bootstrap is Twitter’s CSS and markup style guide—very similar to the pattern portfolios that we often provide as deliverables at Clearleft.

SimpleBits / Adapted

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.

Friday, August 19th, 2011

Jeremy Keith - One Web on Vimeo

The video of my talk/rant at the DIBI conference in Newcastle/Gateshead earlier this year, for your viewing pleasure.

THE COSMONAUT

A crowd-funded, creative commons licensed sci-fi film currently in production.

Thursday, August 18th, 2011

davidnewton.ca | The Current State of Hyphenation on the Web

A valiant attempt to polyfill support for hyphenation in browsers other than the latest Safari and Firefox.

marstall/shim - GitHub

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!

Wednesday, August 17th, 2011

Golden Grid System

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.

Meltmedia | An awesome interactive design and development agency in Tempe, Arizona

A truly lovely responsive design from Tiffany Duening and co.

Hyphenation arrives in Firefox and Safari | Fontdeck Blog

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.

HTML5 Rocks - How Browsers Work: Behind the Scenes of Modern Web Browsers

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.

Tuesday, August 16th, 2011

HTML5 And The Document Outlining Algorithm - Smashing Magazine

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.

Re-tabulate

Right after I wrote about combining flexbox with responsive design—to switch the display of content and navigation based on browser size—I received an email from Raphaël Goetter. He pointed out a really elegant solution to the same use-case that makes use of display:table.

Let’s take the same markup as before:

<body>
<div role="main">
<p>This is the main content.</p>
</div>
<nav role="navigation">
<p>This is the navigation.</p>
<ol>
<li><a href="#">foo</a></li>
<li><a href="#">bar</a></li>
<li><a href="#">baz</a></li>
</ol>
</nav>
</body>

The source order reflects the order I want on small-screen devices (feature phones, smart phones, etc.). Once the viewport allows it, I’d like to put that navigation at the top. I can do this by wrapping some display declarations in a media query:

@media screen and (min-width: 30em) {
    body {
        display: table;
        caption-side: top;
    }
    [role="navigation"] {
        display: table-caption;
    }
}

That’s it. It works much like box-orient:vertical with box-direction:reverse but because this is good ol’ CSS 2.1, it’s very well supported.

We can solve the other issue too: making those list items display horizontally on larger screens:

[role="navigation"] ol {
    display: table-row;
}
[role="navigation"] ol li {
    display: table-cell;
}

Once again, I’ve put a gist up on Github (get me! I’m like a proper computer nerd).

Update: And Remy has put it on JSbin so you can see it in action (resize the live preview pane).

So there you go: we’ve at least two different mechanisms in CSS to re-order the display of content and navigation in response to screen real-estate. The default is content first, navigation second—a pattern that Luke talked about in this interview with Jared:

Yeah, one of the design principles that I’ll be talking on the tour about, for mobile, is content first, navigation second; which is just really putting something up right away that somebody can engage with, and saving the pivoting and the navigating for later.

There’s, basically, UI patterns that you can use to make that happen. I’m still surprised at how many, both mobile websites and applications, the first thing they give you is a menu of choices, instead of content.

Don’t get me wrong, the menu’s important, and you can get to it, but it’s actually the content that the immediacy of mobile, and the fact that you’re probably on a slower network, and in some cases you’re even paying for your data transfers, right? Giving you a list of choices as your first time experience tends not to work so well.

Luke Wroblewski — Designing Mobile Web Experiences » UIE Brain Sparks on Huffduffer

OLO

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.

Re-flex

I was in Minnesota last week for An Event Apart Minneapolis. A great time was had by all. Not only were the locals living up to their reputation with Amy and Kasia demonstrating that Kristina isn’t an outlier in the super-nice, super-smart Minnesotan data sample, but the conference itself was top-notch too. It even featured some impromptu on-stage acrobatics by Stan.

A recurring theme of the conference—right from Zeldman’s opening talk—was Content First. In Luke’s talk it was more than a rallying cry; it was a design pattern he recommends for mobile: content first, navigation second. It makes a lot of sense when your screen real estate is at a premium. You can see this pattern in action on the Bagcheck mobile site (a button at the top of screen is simply a link that leads to the fragment identifier for the navigation at the bottom).

Later on, Eric was diving deep into the guts of the CSS3 flexible box layout module and I saw an opportunity to join some dots.

Let’s say I’ve got a document like this with the content first and the navigation second:

<body>
<div role="main">
<p>This is the main content</p>
</div>
<nav role="navigation">
<p>This is the navigation</p>
</nav>
</body>

Using box-orient:vertical and box-direction:reverse on the body element, I can invert the display of those two children from the order they appear in the source:

body {
    display: box;
    box-orient: vertical;
    box-direction: reverse;
}

If I wrap that in a media query, I can get the best of both worlds: content first, navigation second on small screens; navigation first, content second on larger viewports:

@media screen and (min-width: 30em) {
    body {
        display: box;
        box-orient: vertical;
        box-direction: reverse;
    }
}

Works a treat (once you include the necessary -webkit and -moz prefixes).

I thought I’d take it a bit further. Suppose the navigation has a list of links:

<nav role="navigation">
<p>This is the navigation.</p>
<ol>
<li><a href="#">foo</a></li>
<li><a href="#">bar</a></li>
<li><a href="#">baz</a></li>
</ol>
</nav>

I could use flexbox to lay those items out horizontally instead of vertically once the viewport is large enough:

@media screen and (min-width: 30em) {
    [role="navigation"] ol {
        display: box;
        box-orient: horizontal;
    }
    [role="navigation"] li {
        box-flex: 1;
    }
}

Here’s the weird thing: in Webkit—Safari and Chrome—the list items reverse their direction: “baz, bar, foo” instead of “foo, bar, baz.” It seems that the box-direction value of reverse is being inherited from the body element, which I’m pretty sure isn’t the right behaviour. But it can be easily counteracted by explicitly declaring box-direction: normal on the navigation.

What’s a little trickier to figure out is why Firefox is refusing to space the list items equally. I’ve put a gist on Github if you want to take a look for yourself and see if you can figure out what’s going on.

Update: You can see it in action on JSbin (resize the view panel).

The new CSS3 layout modules and responsive design could potentially be a match made in heaven …something that Stephen has been going on about for a while now. Check out his talk at Mobilism earlier this year.

You’ll notice that he’s using a different syntax in his presentation; that’s because the spec has changed. In my example, I’m using the syntax that’s currently supported in Webkit, Gecko and Internet Explorer. And, as Eric pointed out in his talk, even when the newer syntax is supported, the older vendor-prefixed syntax won’t be going anywhere.

Monday, August 15th, 2011

localtunnel: instantly show localhost to the rest of the world

An alternative to showoff.io for sharing your locally-hosted sites.

Responsive Web Design! | Jessica Hische

Jessica Hische has redesigned her site in a lovely and responsive manner.

Appcache Facts

A handy one-page cheatsheet for using HTML5’s appcache manifest file for offline storage.

Food Sense | Plant-Based Eating At Its Best

A gorgeous adaptive (though not quite responsive) design …and it’s all about food.

Sunday, August 14th, 2011

Paul Lloyd’s Presentations // Speaker Deck

I recommend you look through all of Paul’s presentation …because they’re all excellent.

Saturday, August 13th, 2011

Web Typography for the Lonely

A collection of experiments in typography using canvas, SVG, JavaScript and whatever else it takes.

Friday, August 12th, 2011

Beautiful People - home

A documentary about the weekly session in Dempsey’s pub in Manhattan.

TRY HELVETICA

A cute idea: see how signs (mostly in Brazil) would look if they were set in Helvetica.

mySociety » Blog Archive » Mobile operators altering (and breaking) web content

In an attempt to “optimise” performance, T-Mobile and Orange are actually breaking jQuery.

Welcoming Jake Archibald to team Lanyrd | The Lanyrd Blog

This is a match made in heaven: the brilliant Jake Archibald is joining the brilliant Lanyrd.

Lucozade Energy Advert 2011 - Feeder’s ‘Buck Rogers’ by The James Cleaver Quintet. - YouTube

So that’s what they were filming when I came out of band practice the other day. This is my neighbourhood.

Wednesday, August 10th, 2011

Techniques For Gracefully Degrading Media Queries - Smashing Magazine

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.

Tuesday, August 9th, 2011

Wait, what does your startup do?

Humour through noun permutations. The results are all-too believable.

photoshoplooter

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.

Russell M Davies: Make things, not media platforms (Wired UK)

A rallying cry from Russell, urging us not to rely too much on the intangible.

Ian Bogost - Gamification is Bullshit

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…

Monday, August 8th, 2011

Get a coffee, give a coffee - Jonathan’s Card

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.

100 Year Starship Study

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.

Web Actions: Identifying A New Building Block For The Web - Tantek

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.”

Rethinking CSS Grids| Mark Boulton

Some great, considered thoughts from Mark on how CSS Grid Layout could work as part of a larger tradition in design.

Button Sluts and Web Actions

Erin documents the next step after web intents.

Writing in the Margins: Manicules « A Pretty Book

A lovely little ode to the manicule.

Sunday, August 7th, 2011

5 STEPS TO HTML5

A really nice little primer on getting started with HTML5.

http://humanweb.ipq.co/

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.

Saturday, August 6th, 2011

Atlas V Juno launch - August 5, 2011 | Flickr - Photo Sharing!

So long, Juno. Call me when you get to Jupiter.

Atlas V Juno launch - August 5, 2011

Friday, August 5th, 2011

Bruce Lawson’s personal site  : HTML5, hollow demos and forgetting the basics

A great reminder from Bruce that we need to remember to use cutting-edge web technology responsibly.

Chromium Blog: Connecting Web Apps with Web Intents

A quick overview and explanation of web intents.

Karl Dubost - 3 rules of thumb for Web development

  1. Can I bookmark this information? (stable URIs)
  2. Can I go from here to there with a click? (hyperlinks)
  3. Can I save the content locally? (open accessible formats)

Let the Web move you-CSS3 Animations and Transitions | Web Directions

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.

Days of science and hacking

I’ve got some tasty science announcements. Of course anything I have to say is going to be upstaged by today’s revelation about Mars. Those NASA showboaters.

Anyway, here’s Ariel’s keynote from OSCON in Portland last week.

Science Hack Day took centre-stage. Ariel has put together instructions for creating a Science Hack Day in your city. The front page of the wiki now contains a list of places where people are hoping to coordinate an event.

If you want to help make a Science Hack Day happen in Portland, get in touch with rocketeer Nathan Bergey—the science hacker behind the brilliant ISS Notify lamp.

Live in Cape Town? Want a Science Hack Day? Get in touch with ex-pat Dutch astronomer Carolina Ödman.

If you want to help make a Science Hack Day happen in San Diego, get in touch with biologist Jun Yin—the science hacker behind wearable DNA.

It looks like there’s quite a lot of interest in organising a Science Hack Day in Dublin to coincide with the Dublin City Of Science event in 2012. Get in touch with Ellen Byrne if you want to be involved.

Those are just a few. There are many more.

One event that’s definitely going ahead is another Science Hack Day San Francisco on November 12th and 13th. If last year’s event at the Institute For The Future is anything to go by, this will be unmissable.

And you can go.

No, really. In a Steve Jobsian style “just one more thing” addendum to her OSCON keynote, Ariel announced that the Alfred P. Sloan Foundation is providing a grant to fund the Science Hack Day Ambassador Program:

Thanks to this generous support, 10 people interested in organizing a Science Hack Day from around the world will be selected to win a scholarship for a trip to Science Hack Day San Francisco, occurring November 12-13, 2011, where they’ll experience first-hand how Science Hack Day works and connect with a global community of organizers. This Science Hack Day Ambassador Program will award individuals who are motivated and planning to organize a Science Hack Day in their city.

To apply, start organising a Science Hack Day in your city and then fill in the application form. The scholarship will cover airfare, four nights in a hotel and $300 for expenses. Ten lucky ambassadors will be winging their way to the bay area this November.

It’s time to get excited and make things with science in your corner of this pale blue dot.

Thursday, August 4th, 2011

Structured Content, Shifting Context: Responsive Design, Content Strategy

The importance of structured content for longevity and responsiveness.

LocalStorage in use on the Fontdeck Website | Fontdeck Blog

Listen to Josh explain a genuinely useful example of HTML5’s local storage that he’s added to Fontdeck.

shitty portmanteaux

Just when you thought it couldn’t get any worse than “webinar.”

Wednesday, August 3rd, 2011

The Robot-Readable World – Blog – BERG

Wonderful musings from Matt on meeting the emerging machine intelligence halfway.

Tuesday, August 2nd, 2011

Journal of Emerging Investigators | JEI is a scientific journal for middle and high school scientists.

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.

Full Fucking Service, Reckless web development practices are encouraging idiots

I wholeheartedly agree with this summation of what professional web design and development entails.

Explorations in Typography / Mastering the Art of Fine Typesetting

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).

Monday, August 1st, 2011

Being is a Verb | Necessary Trouble

Some great thoughts on the language of the web.

Using CSS Selectors as Fragment Identifiers

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).