Tags: ui

372

sparkline

How do I learn? - Snook.ca

I can very much relate to Jonathan’s learning process (except for the bit about reading Hacker News—spit):

  1. Reading
  2. Building
  3. Writing

I think I read about 20-30 times more than I write, but the writing part is still crucial for helping me get stuff straight in my own head.

Style Guides, Pattern Libraries, Design Systems and other amenities. // Speaker Deck

This slide deck is a whistle-stop tour of all things styleguide and pattern-library related. Nice to see Charlotte’s excellent exercise get a shout-out.

I Wanted To Type a Number | Filament Group, Inc., Boston, MA

Choosing the right input type for your form field.

Create awesome styles- Nucleus - Living style guide generator

Another style guide generator that parses comments in CSS.

Indicating offline | justmarkup

Some interesting interface ideas here for informing users when a service worker is doing its magic.

In the future users may expect a site to work offline after visiting again, but until this happens, I think it is a good idea to let the users know about this feature.

CSS only scroll indicator

This is witchcraft. I’ve been deconstructing the CSS to figure out how this works and it’s really clever.

(Hint: try commenting out some of the CSS and see what happens.)

You Know What? Fuck Dropdowns

An entertaining presentation from South By Southwest on the UI element of last resort.

It’s funny because it’s true.

Join Fractal on Slack!

If you’re planning on giving Fractal a test drive, jump into this Slack channel. Mark and others will be able to help you out with any questions that aren’t covered in the docs.

Stop the overuse of overflow menus — Medium

The trouble with overflow menus is that you didn’t actually take anything away, you just obnoxiously obfuscated it.

Words of warning and advice from Daniel.

Instead of prioritizing, we just sweep complexity under the rug and pretend that it doesn’t exist.

Fractal v1.0 | Clearleft

Mark sets the scene for Fractal, the fantastic tool he’s built for generating pattern libraries.

This 1.0 release is just a start; it hopefully provides a solid foundation on which we (and anyone else who wants to contribute) can build and expand on in the future.

Exciting!

Fractal Documentation

This is the tool that we use at Clearleft to generate pattern libraries. It’s pretty damn cool. Mark built it. It’s pretty damn cool.

Vox Product Accessibility Guidelines

I’m not a fan of the checklist approach to accessibility, but this checklist of checklists makes for a handy starting point and it’s segmented by job role. Tick all the ones that apply to you, and this page will generate a list for you to copy and paste.

Design Systems

A newsletter dedicated to all things related to design systems, style guides, and pattern libraries.

Adapting to Input · An A List Apart Article

Jason breaks down the myths of inputs being tied to device form factors. Instead, given the inherent uncertainty around input, the only sensible approach is progressive enhancement.

Now is the time to experiment with new forms of web input. The key is to build a baseline input experience that works everywhere and then progressively enhance to take advantage of new capabilities of devices if they are available.

Snyk’s Style Guide

…and Anna describes the process of creating the Snyk style guide.

Creating a Bocoup style guide - Bocoup

Susan describes the process behind creating Bocoup’s style guide…

Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns” (Pre-Release) – Smashing Magazine

I think it’s a safe bet that this new book by Heydon will be absolutely brilliant.

It’s a handbook with valuable, time-saving techniques that will help you avoid hacky workarounds and solve common issues effectively.

Typography for User Interfaces | Viljami Salminen

The history and physiology of text on screen. You can also see the slides from the talk that prompted this article.

Designing Modular UI Systems Via Style Guide-Driven Development – Smashing Magazine

Striking that balance between the reusability of modular components and maintaining a big-picture vision of the overall design:

We should always strive to use patterns in an application. For example, consistent use of colors and font sizes can quickly indicate to the user elements in the UI that can be interacted with. However, avoid using a pattern just because it has been implemented before; rather, use it because it really solves the problem at hand.

City Objects

A catalogue of objects and observations from cities around the world.

Dev.Opera — Making progressive web apps even better: ambient badging and “pop into browser”

Andreas demoed these ideas yesterday. Proper ambient badging and a way of getting at URLs even if a progressive web app is running in fullscreen or standalone mode. Great stuff!

Dave Goes Build - daverupert.com

I think I’ve gotten tired of Google telling me “This is how you have to build websites now.” Or Apple coming down from the mountain once a year saying “Here are the two new products you will buy this year.”

Introducing Multirange: A tiny polyfill for HTML5.1 two-handle sliders | Lea Verou

You’re supposed to be able to create two-handled sliders with input type="range" but the browser support isn’t there yet. In the meantime, Lea has created a nice lightweight polyfill.

Not The Post I Wanted To Be Writing… – Infrequently Noted

Phew! Alex seems to have calmed down. He’s responding to my concerns about exposing URLs in progressive web apps, but thankfully without the absolutist rhetoric or insults. Progress!

Beyond Progressive Web Apps • cssence.com

Matthias Beitl takes a stab at trying to tackle the tricky UI problem of exposing the URLs of Progressive Web Apps. This stuff is hard.

Frend — A collection of accessible, modern front-end components.

A nice little collection of interaction patterns with built-in accessibility and no dependencies.

Responsive Product Comparison Table

Here’s a nice little pattern from Dave—showing data tables one column at a time on smaller screens.

BBC Blogs - Internet Blog - BBC UX&D on creating a GEL foundation for everyone

Al runs through the process of updating GEL—the BBC’s Global Experience Language design system. I particularly like the thought that’s gone into naming type sizes.

Design systems and Postel’s law | Journal | The Personal Disquiet of Mark Boulton

Marvellous insights from Mark on how the robustness principle can and should be applied to styeguides and pattern libraries (‘sfunny—I was talking about Postel’s Law just this morning at An Event Apart in Boston).

Being liberal in accepting things into the system, and being liberal about how you go about that, ensures you don’t police the system. You collaborate on it.

So, what about the output? Remember: be ’conservative in what you do’. For a design system, this means your output of the system – guidelines, principles, design patterns, code, etc etc. – needs to be clear, unambiguous, and understandable.

FamilySearch Style Guide

A straightforward little pattern library. There’s also the story of making it a living style guide.

When Websites Won’t Take No for an Answer - The New York Times

Our Harry’s in the New York Times! Well, an article on dark patterns is in the New York Times, and Harry is Mr. Dark Patterns.

Rebuilding the Perch UI - creating a pattern library

Rachel and Drew have been beta-testing Mark’s Fractal project for organising a library of components for Perch’s interface. Sounds like it’s working out very, very well indeed!

Wicked Ambiguity and User Experience

This is my kind of talk—John Snow’s cholera map, the Yucca Mountain think-tank, the Pioneer plaque, the Voyager record, the Drake equation, the Arecibo signal, and the love song of J. Alfred Prufrock.

♫ These are a few of my fav-our-ite things! ♫

Flexbox Patterns

Here’s a well put-together collection of common patterns that are now much easier thanks to flexbox.

Clarity 2016 Wrapup by Chris Coyier on CodePen

As well as compèring the event, Chris took the time to make notes at the Clarity conference, dedicated to all things patterny.

Interactive Form

I quite like this step-by-step interface for a form, all cleverly handled with the :focus pseudo-class. I’d want to refine some of the usability issues before using it in production, but the progressive disclosure is nice.

Clarity Conf: Brad Frost

I wish I could’ve made it to the Clarity conference—I had a Salter Cane gig to play—but luckily for me, Brad took lots of notes.

Design Patterns on CodePen

Well, this is rather wonderful! A one-stop-shop for exploring UI patterns on CodePen …this is going to be time sink.

Front-End Style-Guides: Definition, Requirements, Component Checklist

You know that front-end pattern libraries have hit the mainstream when the Nielsen Norman Group get in on the action.

As ever, I’m not sure their sweeping generalisations can be applied to every project, but their checklist approach makes for a good starting point.

Jon Aizlewood | Visual inventories for agile design

Jon outlines his technique for keeping “the 30,000 foot” view when patterns are coalescing during a project.

See also: Andy P.’s experience of working with Jon this way.

Infinite Scrolling, Pagination Or “Load More” Buttons? Usability Findings In eCommerce – Smashing Magazine

A good side-by-side comparison of loading techniques, with some clear advice. But pay attention to this note:

While the debate over “Load more” versus infinite scrolling versus pagination has been debated for years, the product loading method shouldn’t be the first thing that most e-commerce vendors spend their development resources on.

English as she is spoke

This is truly a book apart.

Building Inspector by NYPL Labs

A wonderful Zooniverse-like project from the New York Public Library:

Help unlock New York City’s past by identifying buildings and other details on beautiful old maps.

Walmart Web Style Guide

A pattern library of Walmart’s front-end code.

What happens next with Conversational UIs — Cennydd Bowles

Cennydd speaks his brains on conversational interfaces—a refreshing counterpoint to Chris’s cheerleading.

Design without touching the surface – Leapfroglog

My concern is that by encouraging the practice of doing UX design without touching the surface of a product, we get shitty designs. In a process where UX and UI are seen as separate things the risk is one comes before the other. The UX designer draws the wireframes, the UI designer gets to turn them into pretty pictures, with no back-and-forth between the two. An iterative process can mitigate some of the damage such an artificial division of labour produces, but I think we still start out on the wrong foot. I think a better practice might entail including visual considerations from the very beginning of the design process (as we are sketching).

Why I love working with the web

I love this. I really love this. Remy absolutely nails what makes the web so great.

There’s the ubiquity:

If the viewer is using the latest technology beefy desktop computer that’s great. Equally they could view the website from a work computer, something old and locked in using a browser called IE8.

Then there’s the low barrier to entry—yes, even today:

It’s the web’s simplicity. Born out of a need to connect documents. As much as that might have changed with the latest generation of developers who might tell you that it’s hard and complex (and they’re right), at the same time it is not complicated. It’s still beautifully simple.

Anyone can do it. Anyone can publish content to the web, be it as plain text, or simple HTML formed only of <p> tags or something more elaborate and refined. The web is unabashed of it’s content. Everything and anything goes.

I might just print this out and nail it to the wall.

If you sit back for a moment, and think about just how many lives you can touch simply by publishing something, anything, to the web, it’s utterly mind blowing.

Using System Fonts in the Browser

We have some new font keywords that are basically shortcuts to using the system fonts on a device. This article explains the details.

Photo upload and progressive enhancement for FixMyStreet / mySociety

Matthew describes a very nice bit of progressive enhancement for drag’n’drop file uploads (similar to the CSS Tricks article I linked to recently).

It uses the Dropzone JS which looks like it aligns nicely with the progressive enhancement approach.

A Brief(ish) History of the Web Universe – Part I: The Pre-Web | briankardell

This is a wonderful, wonderful look back at the state of hypertext in the run-up to the creation of the World Wide Web.

My jaw may have dropped when I saw the GML markup.

Now I’m going to read part two.

WTF is Solid?- Solid

The new style guide and pattern library for Buzzfeed.

It all looks pretty reasonable on the surface but if you poke around in the CSS, you’ll find 1157 uses of !important. Yikes!

The whole point of having an agreed-upon codebase in a pattern library is so that developers need never reach for nuclear options like !important, so I’m afraid, for me, this is a demonstration of what not to do (in terms of CSS—the output of the HTML in the styleguide looks perfectly fine).

Solid uses immutable, atomic CSS classes…

CSS is “mutable”. By design. I don’t think we should be working against that.

Why Implementing Swipe Gestures Causes A Mobile Accessibility Issue

Jennison Asuncion outlines the problem with relying on a swipe gesture for interactions.

I would say that this could be expanded to just about any interaction: it’s always dangerous to rely on one specific gesture. It’s always better to either provide multiple ways of accomplishing a task, or to simply take a declarative approach, get out of the way, and let the user agent handle it.

Drag and Drop File Uploading | CSS-Tricks

This is a terrific example of progressive enhancement in action: going from a simple file input to a lovely interactive drag’n’drop interface.

The code uses jQuery but it could be easily adapted to vanilla JavaScript, and anyway, it’s not so much the code that matters, it’s the approach.

Translating Gender: Ancillary Justice in Five Languages Alex Dally MacFarlane | Interfictions Online

A fascinating look into the challenges encountered translating Anne Leckie’s excellent Radchaai novels into Bulgarian, German, Hebrew, Japanese, and Hungarian.

What is clear in all of these responses is that by examining the notions of ‘neutral’ and ‘feminine’ in grammar and gender through the lens of translation, we reveal their complexity – and some of their possible futures in languages, in both literature and speech.

jonathantneal/mdcss

A tool for generating a pattern library from Markdown comments in CSS. This isn’t the way that I tend to work, but I can see how it would be quite handy.

A Semiotic Approach to Designing Interfaces // Speaker Deck

This looks like a terrific presentation from Alla on iconography, semiotics, and communication.

NC.gov Styleguide

The comprehensive style guide and pattern library for North Carolina.

Patterns & Modules: The Toast — 2015 Redesign

I really like the way that you can literally flip between the source code and the output in this styleguide for The Toast.

18F — Introducing the U.S. Web Design Standards

The story behind the newly-released pattern library for the US government.

Lightning Design System

A nice combination of style guide and pattern library, with plenty of documentation.

CSS element() function - Vincent De Oliveira

Fire up Firefox and try out these demos: the CSS element value is pretty impressive (although there are currently some serious performance issues).

To put it simply, this function renders any part of a website as a live image. A. Live. Image!

How to fix a bad user interface - Scott Hurff

A lesson on the importance of handling each state of an interface:

  • the blank state,
  • the loading state,
  • the partial state,
  • the error state,
  • and the ideal state

…instead of just focusing on that last one.

The Hamburger Menu Doesn’t Work - Deep Design

Building on Luke’s research, James outlines the problems with hiding navigation behind a hamburger icon. So, to be clear, the problem isn’t with the icon, so much as the way it is used as a cupboard to shovel all our messy navigation issues into.

The Language of Modular Design · An A List Apart Article

Alla has taken the ideas she presented in her superb talk at Responsive Day Out and published them as a great article in A List Apart.

Spatial Interfaces — Elepath Exports — Medium

A detailed and humorous deep dive into motion design and spatial depth in digital interfaces.

Styleguide

Huge have released their tool for generating front-end style guides.

The Ushahidi Platform ~ Pattern Library

A really nicely-documented pattern library.

Nicole Fenton | Interface Writing: Code for Humans

The text of Nicole’s excellent talk on writing helpful, human microcopy.

Interface Experience Maps, From the Notebook of Aaron Gustafson

This sounds like it could be a very useful tool to introduce early in projects to get a shared understanding of progressive enhancement.

Style Guides with Jeremy Keith

I had a lot of fun chatting with Brad and Anna for the final episode of their small batch podcast on style guides and pattern libraries.

Hamburger icon: How these three lines mystify most people - BBC News

The controversial hamburger icon goes mainstream with this story on the BBC News site.

It still amazes me that, despite clear data, many designers cling to the belief that the icon by itself is understandable (or that users will “figure it out eventually”). Why the aversion to having a label for the icon?

Dev.Opera — UX accessibility with aria-label

A great run-down by Heydon of just one ARIA property: aria-label.

Thomas Byttebier - The best icon is a text label

A look at the risks of relying on a purely graphical icon for interface actions. When in doubt, label it.

The Brighton Makerlab - where technology meets awesome! by Simon Riley — Kickstarter

Still a few days left to back this great project for Brighton:

Build, tinker, make and play! For anyone with imagination, The Brighton Makerlab lets ages 8 to 80 create cool stuff with technology.

Purple: A UI kit for Heroku’s web interfaces

Hot on the heels of Github’s pattern library, here’s Heroku’s.

Home · Primer

Github’s pattern library.

As always, it’s great to see how other organisations are tackling modular reusable front-end code (though I can’t imagine why anyone other than Github would ever want to use it in production).

Productivity Future Vision

Any sufficiently advanced vision piece is indistinguishable from Black Mirror.

Futures of text by Jonathan Libov

This would be better titled “Futures of texting” but it’s an interesting grab-bag of observations. I’ve always felt that SMS has been overlooked as an input mechanism.

(Conversely, I’ve always felt that voice is really over-rated as input mechanism, but under-rated for output.)

Password Masking

A great investigation into the usability benefits of allowing users to fill in their passwords in plain text.

Major caveat: make sure you still offer the ability to mask passwords too.

BBC - Future Media Standards & Guidelines - Accessibility Guidelines v2.0

The minimum dependency for a web site should be an internet connection and the ability to parse HTML.

Awesomplete: Ultra lightweight, highly customizable, simple autocomplete, by Lea Verou

Lea wasn’t happy with the lack of styling and extensibility of the datalist element, so she rolled her own lightweight autocomplete/type-ahead widget, and she’s sharing it with the world.

Penguin Classics - Take the Little Black Classics for a spin

A cute way of exploring a collection of classic works.

What we would change about Rizzo - Ian Feather

I really like the self-examination that Ian and his team at Lonely Planet are doing here. Instead of creating a framework for creating a living style guide and calling it done, they’re constantly looking at what could be done better, and revisiting earlier decisions.

I’m intrigued by the way they’ve decided to reorganise their files by component rather than by filetype.

LukeW | Showing Passwords on Log-In Screens

Luke continues to tilt against the windmills of the security theatre inertia that still has us hiding passwords by default. As ever, he’s got the data to back up his findings.

Thoughts on Pagination

I’ve been thinking about this a lot lately; alternate ways of paginating through the past e.g. by day instead of by arbitrary amount.

MakerLab HQ - Maker Club

Good news, Brighton! There’s a Maker Club opening up on London Road (above the new Presuming Ed coffee shop). Grab your robot kits and come along.

The challenge for web designers in 2015 (or how to cheat at the future)

Designing primarily in a laptop web browser and testing with a mouse rather than fingers may come to look very out of date soon.

Atomic Design by Brad Frost

Brad’s writing a book.

Insert take-my-money.gif here.

Sass Guidelines

Advice for writing Sass. I don’t necessarily agree with everything, but on the whole, this is a solid approach.

It’s worth bearing Chris’s advice in mind.

Poor Man’s Styleguide | A frontend styleguide for the pragmatic

A handy starting point for creating a front-end styleguide: a single document of HTML elements.

ST4I - Stuff That Talks To The Internet - workshop on Vimeo

Seb will be running this workshop again at the start of February—details here. I can’t recommend it highly enough—it’s so, so good!

The New Yandex.Browser. Alpha version

A concept browser from Yandex that takes an interesting approach to URLs: on the one hand, hiding them …but then putting them front and centre.

But the main focus of this concept browser is to blur the line between browser chrome and the website it’s displaying.

Alien | Typeset In The Future

Typeset In The Future is back with another cracking analysis. This time—following on from 2001 and Moon—we’ve got Alien.

In her final recorded message before hypersleep, Ripley notes that she is the sole survivor of the Nostromo. What she forgets to mention is that she has not once in the past two hours encountered any Eurostile Bold Extended.

Style Guide Resources

A very handy collection from Anna: articles, books, talks, podcasts, and examples of front-end style guides. If something’s missing, feel free to add it.

Cursors

A self-describing list of cursors available through CSS.

Code for America — Responsive Web Design on Huffduffer

This was a fun podcast—myself and Cyd from Code For America talk to Karen and Ethan about how we worked together. Good times.

The audio is available for your huffduffing pleasure.

CSS Guidelines – High-level advice and guidelines for writing sane, manageable, scalable CSS

Harry has written down his ideas and recommendations for writing CSS.

UX How-To with Luke Wroblewski - YouTube

A fantastic collection of short videos from Luke on interaction design for devices of all shapes and sizes.

Make yourself a nice cup of tea, hit “Play all”, sit back, relax and learn from the master.

A Maintainable Style Guide - Ian Feather

The challenges of maintaining a living breathing front-end style guide for an always-evolving product (the Lonely Planet website in this case).

Breach - A browser for the HTML5 era

A new browser on the block (though not a new rendering engine), this one is written is written entirely in JavaScript. It’s worth taking it for a spin to see some of the interesting interface ideas around tabs and loading indicators.

Personally, I’m all for more browsers. The more, the merrier.

Smart Fixed Navigation

Here’s an intriguing approach to offering a navigation control that adapts as the user scrolls.

I’m not too keen on the way it duplicates the navigation in the markup though. I might have a play to see if I can find a way to progressively enhance up from a link-to-footer pattern to achieve this.

Urban Giants on Vimeo

A look at the architectural history of the network hubs of New York: 32 Avenue of the Americas and 60 Hudson Street. Directed by Davina Pardo and written by her husband Andrew Blum, author of Tubes: A Journey to the Centre of the Internet.

These buildings were always used as network hubs. It’s just that the old networks were used to house the infrastructure of telephone networks (these were the long line buildings).

In a way, the big server hotel of New York—111 Eight Avenue—was also always used to route packets …it’s just that the packets used to be physical.

Practical ARIA Examples

Heydon Pickering put together a great collection of accessible self-contained interface patterns that demonstrate smart use of ARIA.

Monday, 7 July 2014 – The Pastry Box Project

Words of wisdom from Scott on the clash of brand guidelines and the flexible nature of the web:

One thing I am pretty sure of though, is that having a fast, accessible, user-friendly site can reflect incredibly well on a company, and I’d love to see more guidelines and expectations that prioritize these aspects of a service as branding requirements in addition to the usual visual details.

rel=search on Flickr

Here’s a nice little UI addition to Chrome. When you focus on the URL bar, if the current site has site-specific search discoverable via rel=”search”, then you get a greyed-out hint to press tab so you can start searching the site.

rel=search

ntlk’s blog: Chrome obfuscates the URLs, Google benefits

Nat’s take on Chrome’s proposal to bury URLs:

The URLs are the cornerstone of the interconnected, decentralised web. Removing the URLs from the browser is an attempt to expand and consolidate centralised power.

Labelmask | Brad Frost Web

I really like this interface idea from Brad that provides the utility of input masks but without the accessibility problems.

Avoiding ‘words to avoid’ | Inside GOV.UK

I love the thinking behind this plugin that highlights the weasel words that politicians are so found of.

Creating Style Guides · An A List Apart Article

A great article by Susan on getting started with creating a styleguide for any project.

I’ve seen firsthand how style guides save development time, make communication regarding your front end smoother, and keep both code and design consistent throughout the site.

Readmill Epilogue - Readmill

If your startup gets acquired and shut down by a larger company, this is the way to announce it—no “we’re excited to announce”; no “incredible journey”. Instead there’s an apology and regret (which is exactly what your users will be feeling).

Council Toolkit

A reusable set of responsive patterns and templates for UK councils.

being a client (tecznotes)

Mike writes about what it was like being a client for a change. After working with him on the Code for America project, I can personally vouch for him as a dream client:

Clearleft’s pattern deliverables are the special-special that made the final work so strong. Jon Aizlewood’s introduction to the concept convinced me to contact Clearleft. Jeremy Keith’s interest in design systems kicked off the process, and Anna Debenham’s fucking rock star delivery brought it all home.

Label Pattern - CodePen

This looks like a nifty take on the ol’ using-labels-like-placeholders pattern for forms. I still prefer to have a label visible at all times, but this seems like a nice compromise.

Robin Rendle › A Visual Lexicon

Some great thoughts in here about web development workflow and communication between designers and developers.

I believe that the solution is made up of a variety of tools that encourage conversation and improve our shared lexicon. Tools such as styleguides, pattern libraries, elemental and modular systems that encourage access not only by developers, but by designers, shareholders and editors as well.

Origins of Common UI Symbols

A lovely little tour of eleven ubiquitous icons.

Getting Started With Pattern Libraries ∙ An A List Apart Blog Post

A great post from Anna on the front-end styleguides she’s worked on for A List Apart and Code for America. ‘Twas a pleasure working with her on the Code for America project.

A-mer-ica! Fuck yeah!

A List Apart Pattern Library

Another front-end style guide for the collection. This time it’s from A List Apart. Lovely stuff!

Scrolling is easier than clicking

This observation by Josh seems obvious in hindsight (all the best insights do), but there’s a powerful idea there:

So here is the real difference: scrolling is a continuation; clicking is a decision. Scrolling is simply continuing to do what you’re currently doing, which is typically reading. Clicking, however, is asking the user to consider something new…is this new thing the same as what I’m already doing, or something new?

A Pocket Guide to Master Every Day’s Typographic Adventures

A nice little cheat sheet for simple simple typography wins.

xkcd: Syllable Planning

This is called expletive infixation.

I’ll always remember the “Phila-fucking-delphia” example from Steven Pinker’s The Language Instinct:

If you said “Philadel-fucking-phia”, you’d be laughed out of the pool hall.

What Screens Want by Frank Chimero

Frank’s fantastic closing talk from this year’s Build. There’s a lot of great stuff in here about interaction design, and even more great stuff about what’s been happening to the web:

We used to have a map of a frontier that could be anything. The web isn’t young anymore, though. It’s settled. It’s been prospected and picked through. Increasingly, it feels like we decided to pave the wilderness, turn it into a suburb, and build a mall. And I hate this map of the web, because it only describes a fraction of what it is and what’s possible. We’ve taken an opportunity for connection and distorted it to commodify attention. That’s one of the sleaziest things you can do.

Styleguide | MapBox

Hot on the heels of the Mailchimp styleguide, here’s the collection of patterns used by Mapbox. I’m not keen on some of their markup choices, but again, it’s great to see organisations publicly documenting this stuff.

Pattern Library | MailChimp

The markup for the patterns that Mailchimp use on their products. I love getting a glimpse of how companies handle this kind of stuff internally.

Responsive App Design

Dan Bricklin—co-creator of the original VisiCalc spreadsheet—turns his attention to responsive design, specifically for input-centric tasks.

Benedict Cumberbatch Name Generator

I bet you’re going to just keep clicking and clicking and clicking…

Ooh, Yay!

This is a great idea—the Brighton Cookbook Club:

You know when you get a new cookbook, but you only ever end up using two or three recipes from it? Coming along to Cookbook Club means that you’ll get to try a whole range of recipes from one book to see what you fancy, maybe broaden your palate, and have a jolly fun evening meeting others while you’re at it!

The slippery slope | 90 Percent Of Everything

The transcript of a terrific talk by Harry on how dark patterns are often driven by a slavish devotion to conversion rates.

Responsive Navigation: Examples of Navigation in Responsive Design

A nice collection of navigation patterns for responsive designs. The demos aren’t using a mobile-first approach, and they’re reliant on jQuery, but they could be easily adapted.

Style Guide Boilerplate

A very handy starting point for creating a front-end style guide.

Request Quest

A terrific quiz about browser performance from Jake. I had the pleasure of watching him present this in a bar in Amsterdam—he was like a circus carny hoodwinking the assembled geeks.

I guarantee you won’t get all of this right, and that’s a good thing: you’ll learn something. If you do get them all right, either you are Jake or you are very, very sad.

Auto-Forwarding Carousels, Accordions Annoy Users

Carousels are shit. Auto-animating carousels are really shit. Now proven with science!

The State Of Responsive Web Design on Smashing Mobile

A comprehensive look at the current state of things in the world of responsive design, with a look to possible future APIs.

Screenshots of Despair

The existential angst of unfeeling feedback.

An acquisition is always a failure

An acquisition, or an aqui-hire, is always a failure. Either the founders failed to achieve their goal, or – far likelier – they failed to dream big enough. The proper ambition for a tech entrepreneur should be to join the ranks of the great tech companies, or, at least, to create a profitable, independent company beloved by employees, customers, and shareholders.

Quietweet - A Simpler Twitter Reader

A cute little read-only Twitter client from James that only displays fully-formed tweets: no hashtags, no @-replies.

List of pseudo-elements to style form controls by TJ VanToll

Want to style those new HTML5 input types? I hope you like vendor prefixes.

On pattern portfolios | Clear Thinking - The Clearleft Blog

Jon gives some insight into how and why we use pattern portfolios as deliverables at Clearleft.

Bradshaw’s Guide For Tourists in Great Britain

Keep it under your hat, but Paul has soft-launch his Project Portillo. And very nice it is too.

Responsive Nav — Responsive Navigation Plugin

This looks like a handy little bit of JavaScript for progressively enhancing navigation lists to show/hide them on smaller screens. And it’s not a jQuery plug-in!

datalist experiment

This is wonderful stuff! I’m a big fan of the datalist element but I hadn’t realised how it could be combined with input types like range and date.

So nifty!

Fictive Kin, The Joke’s On Us?

The story of one site’s disgraceful handling of acquisition and shutdown (Punchfork, acquired by Pinterest) and how its owner actively tried to block efforts to preserve user’s data.

Abandonedography

Armchair travelling to Ballardian locations.

Our Incredible Journey

A collection of those appalling doublespeek announcements that sites and services give when they get acquired. You know the ones: they begin with “We’re excited to announce…” and end with people’s data being flushed down the toilet.

Don’t Be Afraid To Teach Interactions by Timoni West

Timoni tackles the tricky topic of teaching taps.

Discoverability can be hard, but that shouldn’t stop us trying out new interactions.

No to NoUI by Timo Arnall

A well-reasoned and excellently hyperlinked piece from Timo pushing back against the calls for “invisible” design.

To be fair, I’ve only ever heard the “no UI” argument in the context of “sometimes the best UI is no UI at all.”

Still, this is a great explanation of why “seamlessness” in design is by no means a desirable attribute.

Sensory Interfaces (SI) on O Danny Boy

Dan isn’t keen on the term “natural user interface.” Here’s why.

Seb Lee-Delisle: Playing With Code

A nice feature on Seb in the latest issue of Make magazine.

The World Wide Web is moving to AOL! by Brian Bailey

Biting satire that hits its mark superbly. Ouch! Be careful — this is sharp …and funny.

Not click. Not tap. Select. : Cennydd Bowles

Cennydd uses the word “select” as an input-neutral term for what we might be tempted to call clicks or taps. Personally, I like the term “choose”, although that word might have too much intent bundled with it.

Knobfeel - Feels good man!

Reviews based entirely on the feel of the knob.

Barebones — An initial directory setup, style guide and pattern primer by Paul Lloyd

Here are some nice patterns that Paul uses for starting points in his own projects.

Carousel interaction stats by Eric Runyon

I’ve never been a fan of carousels on websites, to put it mildy. It seems I am not alone. And if you doubt the data, ask yourself this: when was the last time you, as a user, interacted with a carousel on any website?

» Responsive Design for Apps — Part 1 Cloud Four Blog

A great piece by Jason analysing the ever-blurring lines between device classes.

Mind you, there is one question he doesn’t answer which would help clear up his framing of the situation. That question is:

What’s a web app?

Connecting (Full Film) on Vimeo

A short film about interaction design.

Soundslice: Tabs have never sounded so good

A lovely new service from Adrian that allows you to sync up guitar tabs with videos. It’s a very impressive in-browser app.

LukeW | Mobile Design Details: Hide/Show Passwords

I concur completely with Luke’s assessment here. Most password-masking on the web is just security theatre. Displaying password inputs by default (but with an option to hide) should be the norm.

New Rule: Every Desktop Design Has To Go Finger-Friendly (Global Moxie)

Josh takes an-depth look at the navigation design implications of touch/keyboard hybrid devices, coming to a similar conclusion as Luke and Jason:

Unfortunately, the top-of-screen navigation and menus of traditional desktop layouts are outright hostile to hybrid ergonomics. Tried-and-true desktop conventions have to change to make room for fingers and thumbs.

Want to test for a hybrid device? Tough luck. Instead, argues Josh, the best you can do is assume that any device visiting your site could be touch-enabled.

LukeW | Responsive Navigation: Optimizing for Touch Across Devices

Luke and Jason have done some excellent research (and put together some demos) into how the placement of navigation could be optimised for touch screens of all sizes. Turns out that the “standard” convention of having navigation along the top is far from ideal on a touch-enabled device.

Base CSS | Pasteup | Guardian News

The Guardian’s front-end patterns library. The modules section contains their equivalent of a pattern primer. Very nice!

The best interface is no interface | Cooper Journal

Interaction dissolving into the environment.

CSSquirrel : The Savage Beatings Anti-Pattern

CSSquirrel shares my feelings on the email notification anti-pattern.

NoPassword

I like this passwordless log in pattern but only for specific use cases: when you know that the user has access to email, and when you don’t expect repeat “snacking” visits throughout the day.

Five Simple Steps - Pocket Guides

These short pocketbooks from Five Simple Steps look like they’ll be very handy indeed. Shame they won’t be available in dead-tree format: I bet they’d be really cute.

Make it So | Interface Design Lessons from Sci-Fi

Chris and Nathan’s book is finally out. I’m going to enjoy reading through this.

CSSquirrel : Game Break | opinions and news on web design by Kyle Weems

Hey look; Anna’s in a CSSquirrel comic! And for good reason: Kyle is as impressed as I am with Anna’s research into browsers on gaming devices.

There’s also a call for more community device labs. I approve.

Your Startup is Doomed « Tom Scott

The truth about startups. Got a startup? Take the quiz. It’s harsh but fair.

Special Report #1: Data Protection — Contents Magazine

This is an important subject (and one very close to my heart) so I’m very glad to see these data protection guidelines nailed to the wall of the web over at Contents Magazine.

  1. Treat our data like it matters.
  2. No upload without download.
  3. If you close a system, support data rescue.

Squirrel!

Here’s a brainbuster for ya: a single file that renders both as HTML and as a JPEG. As an HTML page, it even contains an img element with a src of …itself!

Compare the “view source” output with the generated source output to see it’s being interpreted.

Rosetta on Vimeo

A beautiful short film about The Long Now Foundation’s Rosetta Project.

How to Make Progress Bars Feel Faster to Users - UX Movement

A fascinating insight into the psychological implications of animated progress indicators.

Sweep the Sleaze | Information Architects

Some sensible advice from Oliver Reichenstein. Cluttering your social media icons isn’t helping and may actively be hindering your audience.

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…

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.

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.

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:

  1. A slew of parodies to highlight the unintended consequences of this marketeer’s panopticon,
  2. 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.

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.

Hyperbole and a Half: The Alot is Better Than You at Everything

Coping mechanisms for grammar pedants. I can see myself using this alot.

border-image-generator - In Case of Stairs

A very handy GUI for figuring out the somewhat complicated syntax of border-image in CSS3.

Tattúínárdœla saga: If Star Wars Were an Icelandic Saga « Tattúínárdœla saga

The nerdgasmic result of a collision between linguistics and Star Wars.

SXSW 2010: Fieldnotes | booktwo.org

James Bridle's lovely notebook for his first visit to South by Southwest.

Color Picker — Raphaël

A very nice colour picker from the brilliant Dmitry Baranovskiy.

Talking Animal blug

This is the way to do an adaptable liquid layout. Media queries are your friend. Oh, and the content's good too.

ignore the code: Realism in UI Design

Finding the sweet spot between realism and abstraction in interface elements.

Designing Devices | Controls are Choices

Balancing complexity and control.

FUI Fantasy User Interfaces | Mark Coleran Visual Designer

A portfolio of imaginary interfaces as seen in the movies.

Continuity

A puzzle game with an extra dimension. Utterly compelling.

Venn Diagrams as UI Tools « optional.is/required

A very in-depth article on visually representing Boolean logic in an interface. Stick with it; it's worth it.

CSSquirrel : Comic: Kyle Weems

I've been comicified (again), this time with my HTML5 Super Friends.

All Sorts - a linguistic experiment

Collective nouns, collected.

Biscuit Tin - Random is good.

The iPhone App of Magnetic North's wonderful serendipitous Flickr photo viewer is now available for free. It's lovely.

Chroma-Hash Demo

Another interesting take on assigning a visual clue to password fields.

Contact Us « Kellan Studios

Nice Huffduffer-style contact form.

Moof

The sign up process is using the Huffduffer model. Good to see more human forms in the wild.

FormFiftyFive - Design inspiration from around the world

Beyond the personal annual report; it's the personal brand identity guidelines.

Google Quick Search Box

A Quicksilver rival from Google.

Shinichi Maruyama

Black ink meets water.

CSSquirrel : Comic

This is me battling the zombies of the linkrot apocalypse. With a squirrel.

Fluid Images — Unstoppable Robot Ninja

Ethan follows up his Fluid Grids article with an equally excellent piece on resizing images.

openhacklondon | Open Hack 2009: London

The next Yahoo hackday will be on May 9th and 10th in Covent Garden. I've registered my interest. You should too.

A List Apart: Articles: Fluid Grids

Superb article by Ethan on calculating percentages for liquid layouts. Read it. Do it.

StupidFilter :: Main / HomePage

Because the internet needs prophylactics for memetically transmitted diseases.

Localization Problems: A Cellphone's Missing Dot Kills Two People, Puts Three More in Jail

When localisation attacks. This is like a more morbid Douglas Adams vignette.

Cooper Journal: One free interaction

Small interactions that serve no useful purpose but are nonetheless satisfying. "Design this interaction such that: It's “free,” i.e. having no significance to the task or content, It's discoverable in ordinary use of the product, It's quick and repeatable (Less than half a second.), It's pleasant"

Champion of Guitars.z5 - Parchment

The text adventure version of Guitar Hero.

Effective Design for Multiple Screen Sizes | mobiForge

A superb article by Bryan Rieger on designing for multiple screen sizes. The closing section makes it clear that if you care about mobile, you'd better get comfortable with liquid layouts fast.

tomtaylor.co.uk : projects : microprinter

The details of Tom's hardware hack at PaperCamp: an old-school printer receipt printer hooked up via arduino.

Chris Heathcote: anti-mega: pirates and scalpels

Chris Heathcote's notes from his PaperCamp talk on guidebooks.

Pretty Loaded - preloader museum curated by Big Spaceship

A collection of Flash preloaders. Out of context, they make for surprisingly compelling viewing all together.

The OpenID and OAuth Flow: Playing with UX · Ben Ward

A thoughtful post from Ben on how the flow of OAuth, OpenID and Facebook Connect can be improved.

Rands In Repose: A Signature Cadence

Heartfelt and moving: praise for those who sprinkle doses of humanity into software interfaces.

five second test - A simple online usability test

The five second test is a simple usability test that helps you measure the effectiveness of your user interfaces.

Google, Microsoft, Apple sued over preview icons | Business Tech - CNET News

Further proof, as if any were needed, that the patent system turns into a steaming pile of shit as soon as it has dealings with software.

IESB Sues Over Unauthorized Use of Spy Photo in Iron Man - Film Junk

Here's a depressing counterpoint to my feel-good story about Iron Man: someone else who's picture was used in the film (in good faith) decided to sic the lawyers on Jon Favreau.

jQuery.timepickr.js

John Resig offers an alternative user interface for selecting a time.

Web Content Accessibility Guidelines (WCAG) 2.0

WCAG 2.0 has just entered proposed recommendation status. What a long strange trip it's been.

Fray Issue 2: Geek - Windhammer by Rob Weychert

Rob's story of Air Guitar Championhood is in issue no. 2 of Fray magazine: Geek.

gist: 20758 — GitHub

A huffduffer plugin for Ubiquity: "This simple script allows you to huff duff any mp3 file simple by invoking Ubiquity and typing 'huff-duff-it'."

soxiam portfolio - a set on Flickr

A comprehensive set of sketches, diagrams and screenshots from Soxiam showing the evolution and iteration of interfaces on Vimeo and other sites.

sketch: vimeo clip page ideas

web.without.words

Weekly gallery of popular websites reconstructed by removing all words and images, replacing them with blocks.

Simon Wiffen - Acoustic Singer Songwriter from Leeds

Just for the record, this is a superb example of a bulletproof liquid layout: Simon Wiffen, solo acoustic singer-songwriter from Leeds.

Camille Seaman Photography -The Last Iceberg Series II - NEW, The Last Iceberg, A Penguin's Life - NEW, The Big Cloud - NEW

Camille Seaman's stunning pictures of icebergs and clouds make me feel small and insignificant. But in a good way.

On Nails, Lipstick, and Redesigns — Unstoppable Robot Ninja

Ethan has redesigned. It's shiny and beautifully proportioned.

What reading Tufte won’t teach you: Interface design guidelines - glyphobet • ???????? • ????????

A good list of interface guidelines based on real world experience with a mobile phone, an music player and an operating system.

JavaScript Rock Star

Guitar done with YouTube and JavaScript. John Resig is nuts, nuts I tell ya!

GUIMagnets - Prototyping made sticky

Interface elements as fridge magnets. Make prototyping fun!

Who Framed George Lakoff? - ChronicleReview.com

A detailed look at the troubled history of George Lakoff, the father of conceptual metaphor.

The Paper Version of the Web at Deeplinking

A nice collection of sketches and paper prototypes.

doesyourapi - user generated API design guidelines

Gareth is putting some wisdom of crowds behind the design of APIs. Vote on the principles that you think are important in a good API.

Wufoo: UI That Really Cares

A nice piece of UI design. I think Kathy Sierra would like this.

World of Warcraft: Wrath of the Lich King

A new WOW hero class has been unveiled: the bard! "direct damage effects like "Epic Solo" that will rock foes into oblivion while powerful Indie debuffs such as "Tape Jam" and "Shoegazer" keep them in check."

Traces of Inspiration » Blog Archive » URL as UI

The importance of good URL design.

UIE 2008 | Links from Andrew DeVigal's Presentation

Andrew gave a peak under the skirts of The New York Times in his presentation at the Web Apps Summit. Here's a list of the demos he showed.

We Tell Stories - 'The 21 Steps', by Charles Cumming

The first of the We Tell Stories series is online. It's a clever piece of storytelling using Google Maps to full effect.

George Clooney - Interview with George Clooney - On Career, Sex, and Politics - Esquire

George Clooney watches '2 Girls, 1 Cup': "Clooney puts his hand over his mouth like he's going to throw up. He bolts from his chair and walks out of the room."

Plants that Twitter when they need to be watered | Geek Gestalt - A blog by Daniel Terdiman - CNET News.com

Check out this cool arduino project: input from the moisture level of a plant sends an SMS to Twitter so you know it needs to be watered.

We Tell Stories

Aleks pointed me to this sort-of ARG involving authors in London. Could be good fun.

John Resig - Most Bizarre IE Quirk

The title of "most bizarre IE quirk" is hotly contested, given just how many of them there are. But John has found a real humdinger here.

Research Tools | Economist.com | Economist.com

The Economist style guide: the "dos and don'ts" section is particularly useful.

kropp

Good typography + stylish grid + liquid layout = WIN!

KnickerPicker - online dressing room

A Flash interface that allows you to interact with lingerie models when shopping for knickers. I point this out purely for reasons of interaction research, of course.

Cognitive accessibility of user interfaces summarised in an oversimplified rule // plasmasturm.org

The Sapir WIMP hypothesis: "The more easily you can talk about a user interface, the more easily you can understand how to manipulate it."

The Rissington Podcast | Like Gardeners Question Time, but for geeks

Check out the redesigned site for the podcast from Jon and John. Acknowledge the divinity in its gloriously liquid splendour. Smashing work, chaps!

The Global Sympathetic Audience - New York Times

An article about Twitter focusing on one threatened suicide and one averted break-up. Leisa and her excellent phrase "ambient intimacy" are quoted.

What the F***?

I saw Steven Pinker give a talk recently and he spent a fair amount of time talking about swearing. He has written up that part of the talk into an article for the New Republic.

Juicy Studio: WAI-ARIA in HTML

How to get ARIA working in HTML (no namespaces in HTML, remember). Once again, Gez is providing superb documentation in the area of JavaScript and accessibility.

jQuery UI: Widgets, Components, and Interactions

From the people who brought you jQuery comes a set of widgets built using jQuery complete with documentation and tutorials.

Anguish Languish

Tired of using "lorem ipsum dolor..." for placeholder copy? Use real English words that, while apparently non-sensical, transform into stories when spoken aloud.

The Snowclones Database

A blog dedicated to cataloguing snowclones. Brilliant!

Thirteen Simple Rules for Speeding Up Your Web Site

The justification behind YSlow. If you've heard Nate Koechley speak, some of this will be familiar to you. It's all solid advice as far as I can tell.

YSlow for Firebug

The YUI folks have released an add-on for Firebug that will analyse your pages and suggest ways of speeding it up.

Your Daily Awesome » David Byrne Interviews David Byrne, 1984

This video of David Byrne from Stop Making Sense era Talking Heads is as brilliant and wacky as you'd expect. David Bynre is teh awsum.

BBC NEWS | Magazine | Should we simplify spelling?

The cawl for speling reform in the Inglish langwidge iz misguyded and franklee, kynd ov styoopid.

The Amateur Gourmet: "Ratatouille" & Jewish Assimilation (an essay, with spoilers)

The Amateur Gourmet compares Remy's trials and tribulations in Ratatouille to the quintessential story of Jewish assimilation in the 20th Century.

Last.fm – the Blog: Last.fm Acquired By CBS

Probably old news by now but Last.fm has been acquired by CBS, who I hope are not evil. The good news is that our favourite music site is staying in London. Rock on, FMers.

disambiguity - » Yes, you should be using personas

Great post by Leisa on the real reasons for using personas (they might not be the reasons you think).

Upcoming.org Suggestion Board

Did you notice that Upcoming recently switched from liquid to fixed? Have your say about that here.

YUI Version 2.2.0 Released: Browser History Manager, DataTable, and Button Components, New Versioning, and More » Yahoo! User Interface Blog

Roll up and get it: hot off the presses; the new version of the Yahoo User Interface library. Happy birthday, YUI.

Semantics in HTML - 1.”traditional semantic HTML” at microformatique - a blog about microformats and “data at the edges”

A superb article by John Allsopp on semantics in the broad sense, from philosophy and linguistics right through to markup. And this is just part one! Read, enjoy, and prepare for part two.

Web 2.0 how-to design style guide

This is cargo cultism in action. Reductionism at its worst.

18 Questions for Niqui Merret and Aral Balkan on Flash and Accessibility - Wait till I come!

Christian talks to Aral and Niqui about Flash and accessibility.

YUI: CSS Grid Builder

A handy tool for creating grids using Yahoo's CSS.

mezzoblue § About Mezzoblue

Dave redesigns. And before I could bash him for his wide fixed width layout, he went and added a Jeremy Keith Button® on his about page that toggles between liquid and fixed. Cheeky bugger.

Wordie

Like Flickr, but without the photos. This, I like.

Resolution vs. browser size vs. fixed or adaptive width | 456 Berea Street

Roger hits the nail on the head: "fixed widths are used for the wrong reason - designer vanity. Come on, you’re designing for the Web, which means it’s your job to let things be flexible when you can."

YUI’s Matt Sweeney and Hands-on YUI Workshops at Yahoo! Developer Day/Hack Day September 29-30 in Sunnyvale » Yahoo! User Interface Blog

Yahoo is opening up Hack Day to the masses. If you're anywhere near Sunnyvale on September 29th, this should be fun.

Food - VideoJug

Short, instructive videos of food preparation. The recipes look good and the presentation is strangely hypnotic.

An Interesting Way of Showing Battery Status

The screen of this mobile phone looks like a glass of water. The amount of water shows the battery life. The phone has a built in motion sensor to keep the water level.

Screen Resolution and Page Layout (Jakob Nielsen's Alertbox)

The devil can cite scripture for his own purpose... and now I can cite Nielsen: "...use a liquid layout that stretches well for any resolution, from 800x600 to 1280x1024."

Design View : Andy Rutledge - Amazon.com Redux

Andy Rutledge proposes a new design for Amazon, saying "Many of these issues can be fixed and/or addressed by adopting a fixed layout." What a load of bollocks. Try doing a liquid layout right.

Cute Overload: Stop the insanity

A picture of a squirrel looking very pleased with its apparel.

BuyIreland.com - buy and own a piece of rural Ireland forever for just $49.99

Buy a one square foot piece of land (and the Brooklyn Bridge while you're at it). Cute Kerry hoors.

The Social Customer Manifesto: The "First Mile"

An interesting take on the recent round of acquisitions by Yahoo.

The Morning News - Roundtable: The French Paradox, by Josh Friedland

Three food bloggers discuss the differences in eating habits between France and America.

Waxy.org: Daily Log: Yahoo and Upcoming, Sitting In A Tree

Yahoo! acquires Upcoming.org. First Flickr, now this. Yahoo! are snapping up all the coolest social apps.

Liquid Designs

This is something I always meant to do but never got around to: a gallery site for good liquid design.

Progressive Layout

Using JavaScript to serve up fixed or liquid layout based on browser width.

Bunny suicides

Don't worry: it's just a comic strip.

Upload to flickr using Quicksilver

Clever. This gives me a warm tingly feeling.

Upload to flickr using Quicksilver

Veer: Ideas: Etched In Stone

The unstoppable rise of Trajan.

CSS Beauty | Designer in Action

I've been suckered into another debate on fixed width layouts: "Discussing whether 800 is better than 1024 is like discussing whether Coke is better than Pepsi when all you really want is a nice drink of water."

About fluid and fixed width layouts

Roger Johansson details his elastic design.