Adactio: Links

paulrobertlloyd/barebones

Paul has open-sourced his front-end style guide and put it up on Github. It’s a very handy starting point for making your own.

Resizable Displays | Fluid Interfaces

See now, this is why liquid layouts are the way to go.

The next generation bends over - (37signals)

This post by Jason Fried is three years old but it’s more relevant than ever.

What a loss. Is that the best the next generation can do? Become part of the old generation? How about kicking the shit out of the old guys? What ever happened to that?

Form letter template for acquired startups — Gist

Just copy and paste.

Dear soon-to-be-former user…

1
2
3

Dear soon-to-be-former user,

We've got some fantastic news!  Well, it's great news for us anyway.  You, on

Climbing a Shard of Glass | Place Hacking

Sneaking in to climb the Shard at night.

Paperfold CSS | Demo Studio | Mozilla Developer Network

In amongst all the shiny demos on this site, this one could actually be useful.

Screenshots of Despair

Existential ennui delivered through interface copy.

Script Junkie | Flexibility: A Foundation for Responsive Design

Emily walks us through a responsive design case study, stressing the importance using percentages for layout.

Style guide round-up

Anna goes through some of her favourite pattern libraries. It’s really, really great to see this stuff getting documented.

Style Guide

I met one of the guys from the Starbucks team at South by Southwest and he mentioned that they had a markup pattern library. I encouraged them to make it public, and it here it is!

I really hope that more companies and agencies will start sharing stuff like this.

We need a standard show navigation icon for responsive web design | Stuff & Nonsense

Andy documents the kinds of symbols being used to represent revealable navigation on mobile.

LukeW | Multi-Device Layout Patterns

Luke catalogues layout patterns in responsive designs.

Forget Your Past – Timothy Allen | Photography | Film

A trip to Buzludzha in Bulgaria, a derelict monument to an abandoned ideology.

Thoughts on Responsive Navigation

Prompted by Brad’s recent post, here are some musings on three methods of handling navigation in responsive sites.

ishida >> blog » HTML5 adds new translate attribute

Richard gives the lowdown on the new translate attribute in HTML.

At Twitter, The Future is You! - YouTube

A hackweek project from Twitter employees to create the best/worst recruitment video of all time.

Clear for iPhone (Coming Soon!) on Vimeo

Nik demos the neat interactions in Realmac’s latest piece of iOS software in this cute little video.

An introduction to Web Intents – an interview with Glenn Jones

Harry interviews Glenn about web intents (web actions). Glenn gives a good clear explanation of what they are.

Jeremy Keith - All Our Yesterdays on Vimeo

The video of my presentation on digital preservation at last year’s Build conference.

Our communication methods have improved over time, from stone tablets, papyrus, and vellum through to the printing press and the World Wide Web. But while the web has democratised publishing, allowing anyone to share ideas with a global audience, it doesn’t appear to be the best medium for preserving our cultural resources: websites and documents disappear down the digital memory hole every day. This presentation will look at the scale of the problem and propose methods for tackling our collective data loss.

MAKE ROOM NOW

Matt is offering up his space in central Brighton every Wednesday afternoon for free-for-all Arduino tinkering. I should try to get over there.

The ‘trouble’ with Android | Stephanie Rieger

Stephanie focuses on Android but this is a cautionary tale about trying to impose control over what you’re sending to the multitude of mobile devices out there.

Designing to fixed screen sizes is in fact never a good idea…there is just too much variation, even amongst ‘popular’ devices.

Don’t Be A Free User (Pinboard Blog)

Maciej delivers a rant worthy of Paul Robert Lloyd.

Responsive Design Essentials: Look Great on any Device - Facebook developers

The process behind the mobile-first responsive design of audiovroom.com.

Redesigning the Country Selector - Baymard Institute

This looks like a nice progressive enhancement pattern: convert a select element into an auto-completing input element (a country selector in this case).

You Say Responsive, I Say Adaptive | Sparkbox

On the importance of using a fluid grid in responsive design.

A recipe for creating a great workshop | Toby’s Technical Ramblings

Toby’s write-up of the workshop I led for the Build conference. I enjoyed myself so it’s immensely gratifying to know that the attendees did too.

A Brief Rant on the Future of Interaction Design

The next time you make a sandwich, pay attention to your hands. Seriously! Notice the myriad little tricks your fingers have for manipulating the ingredients and the utensils and all the other objects involved in this enterprise. Then compare your experience to sliding around Pictures Under Glass.

Foundation: Rapid Prototyping and Building Framework from ZURB

A framework for banging out ready-made responsive designs.

That Squiggle of the Design Process | Central

A visual representation of the design process.

The Ruins of Dead Social Networks - Alexis Madrigal - Technology - The Atlantic

Reminiscences of the BBSs of yesteryear that could in time be applied to the social networking sites of today.

Metaphors we Program By: Space, Action and Society in Java

Linguistics and programming collide in this paper from the 18th Workshop of the Psychology of Programming Interest Group, University of Sussex, September 2006: Lakoffian analysis of the mental models of Java programmers.

Fluid Baseline Grid - A sensible HTML5 and CSS3 development kit

A set of default styles to get started on a mobile-first responsive design.

Mobile Web Best Practices | Helping people make mobile websites

A handy set of guidelines from Brad Frost. It’s still a work in progress but it’s got some good tips for mobile design and development.

Registration | Frontend 2011

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

spin.js

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

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.

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.

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.

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

Button Sluts and Web Actions

Erin documents the next step after web intents.

Lava Lamp Installation on Vimeo

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.

ProtoFluid. Rapid Prototyping of Adaptive CSS and Responsive Design.

Another browser-based tool for testing your responsive designs at different screen sizes.

You Say Responsive, I Say Adaptive | Sparkbox

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.

Pretenders: Why mobile Web apps should stop trying to act like native apps « cvil.ly

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

A look at some of the new HTML5/JavaScript additions coming in the next version of Mobile Safari.

The Elements of Fucking Style

Use strong, definite language in your writing. Make that sentence your bitch.

Make Your Own Pick Using Recycled Credit Cards » Design You Trust – Social design inspiration!

This is rather brilliant: recycle your old credit cards into plectrums.

Designing the Wider Web

The dominance of the desktop browser is over – the web has become wider. After so long painting in a tiny corner of the canvas, it’s time to broaden our approach.

It’s understandable that the community is somewhat nervous about the changes ahead. So far, we’ve mostly responded by scratching around for device-specific tips, but this isn’t sustainable or scalable. We should transcend “platformism” and instead learn to design for diverse contexts, displays, connectivity, and inputs by breaking devices down into first principles. Instead of the defective dichotomy of the “desktop” and “mobile” web, designers should aim to create great user experiences using the truly fluid nature of the web.

Hand Crafted Web design Kawartha Lakes, Lindsay, Peterborough | Bitfoundry

A thoroughly lovely responsive design, very nicely and thoughtfully executed.

timoni.org - The most important page on Flickr

It’s funny, I’ve just recently become acutely aware of exactly the problem that Timoni describes here: the inability to filter new uploads by a particular user.

It makes stalking someone that much harder.

Fit To Scale | Trent Walton

More documentation of a responsive redesign, this time from Trent Walton. Be sure to check out the FitText jQuery plug-in that was created as a result.

Design for the changing web: Our response :: Studio :: Headshift

Documenting the process of switching to a responsive design. I think there’s always insight to be gained from seeing how your peers are approaching these challenges.

Typography Deconstructed | A comprehensive guide to the anatomy of type.

A beautiful glossary of typographic terms.

Access Main Computer File

Well, there goes my afternoon: here’s an endless supply of computer interfaces from films.

Cheese or Font

Clearly my knowledge of cheese and fonts is way worse than I realised.

Famous Objects from Classic Movies

Match the MacGuffin to the movie. Like Hangman for films.

YouTube - A Day Made of Glass… Made possible by Corning.

There are two things I’d like to see after watching this video:

A slew of parodies to highlight the unintended consequences of this marketeer’s panopticon,
The Paleofuture blog post in 100 years looking back at this.

3quarksdaily

An argument against skeuomorphic design. The Windows Mobile 7 design vocabulary is rightly praised for its no-nonsense beauty.

Augmented (hyper)Reality: Domestic Robocop on Vimeo

One potential nightmare vision of the future …that looks kind of cool.

Matter Battle! - there is a lot to say, of this we are sure

The difference between software and hardware; the digital and the instantiated.

Anna Debenham

Anna’s redesign is beautiful, no matter what browser or device you’re using.

Bug 578967 – Remove feed/RSS button from top-level GUI for Firefox 4 (move to bookmarks menu)

A heated discussion around the decision in Firefox 4 to remove the RSS icon from the address bar.

GELLED!

Paul has created a site for tracking usage of the BBC’s GEL (Global Experience Language) visual design language. Nice’n’responsive it is too.

Radi

A Mac app for creating animations with canvas and video.

Styleguides for the Web — Paul Robert Lloyd

Paul gives an excellent and thorough explanation of why systems thinking is important in web design.

Seth's Blog: The inevitable decline due to clutter

I firmly believe that this is very relevant to visual design on the web.

The Personal Disquiet of Mark Boulton

A beautiful new responsive design from Mark.

eVOLVINGoCTOPUS.com » Science Hack Day

A write-up of the "Wearable DNA" hack from Science Hack Day SF.

Experimenting with responsive design in Iterations - (37signals)

37 Signals document their experiments with responsive web design. Looking good.

Kitchen Interfaces Suck; Let's Break Down Why | Co.Design

Aza Raskin on the UI failings of kitchens.

Gangsta Lorem ippzle dummy text generator

Spizzle up your tizzle.

UI Stencils - Welcome

I like this idea: stencils for common interface elements to be used with good ol' pen and paper.

End hover abuse now : Cennydd Bowles on user experience

An excellent little rant by Cennydd that I agree with 100%: hovering does not demonstrate user intent.

My First Week with the iPhoneBehind the Curtain | Behind the Curtain

An emotionally affecting endorsement of the accessibility features on the iPhone.

Information Architects

A great example of responsive web design. I like the idea of upping the font size for really large viewports. I may do that on Huffduffer.

Sweet Talking Your Computer - WSJ.com

Personality in software. Pieces of technology are people too.

scraplab — You’ve Either Shipped or You Haven’t

Tom says it like it is. Making A Thing generates empathy.

Non Hover | Trent Walton

A timely reminder: don't hide information behind mouseover events.

Emily Toop » BuildBrighton needs your help

Live in Brighton? Like hardware hacking? Build Brighton needs your input.

Fight the system. « Boagworld

A rip-o...— I mean, another form inspired by Huffduffer.

What Apple needs to do now « Adam Greenfield’s Speedbird

Adam Greenfield is spot-on here, dismantling Apple's "imitate real world objects" design guideline for iPhone and iPad apps.

Finally ° a fluid Hicksdesign ° The Hickensian ° Hicksdesign

Jon gets flexible. This is the mark of a true web designer.

The Abandoned Palace On Beekman Street « Scouting NY

This looks like the New York equivalent of The Bradbury Building.

New Programming Jargon — Global Nerdy

Some of the best neologisms in programming, many of them to do with bug-fixing.

Code Standards | Isobar

A very detailed set of coding standards and guidelines.

Cooper Journal: A bit of structure for craigslist posting?

An interesting proposal for a Huffduffer-style mad-libs ad-posting form for Craigslist.

Bulletproof HTML5 <details> fallback using jQuery · Mathias Bynens

A good example of the correct way to approach new interactive elements in HTML5 (the details element in this case): test for native support and then emulate with JavaScript if required.

You what? Youtube comments quiz | Monkeon | Web Design Leeds

This little quiz is surprisingly addictive: match the inane comment to the YouTube video.

haroon baig | projects | twitwee clock

A cute hardware hack: send a tweet with the word TwitweeClock, the hashtag #TwitweeClock, or the username @TwitweeClock, and this cuckoo clock will, well, cuckoo.