Tags: design

Golden Ratio Bot (@goldenratiobot) | Twitter

My new favourite Twitter account.

Proposal to CSSWG, Sept 2016 // Speaker Deck

Jen has some ideas for a new CSS Region spec to turbo-boost Grid. I’m still trying to wrap my head around it, but in the meantime, if you have feedback on this, please let her know.

CSS Mega Dropdown | CodyHouse

I’m no fan of mega menus, and if a site were being designed from scratch, I’d do everything I could to avoid them, but on some existing projects they’re an unavoidable necessity (the design equivalent of technical debt). In those situations, this looks like a really nice, responsive approach.

Webfonts on the Prairie · An A List Apart Article

A good ol’ polemic in favour of using web fonts. It’s a good read although I strongly disagree with this line of reasoning:

The average internet speed in the United States today is three times as fast as it was in 2011.

But that americentric view is redeemed later on:

The World Wide Web may be a creation of the West, but now, at long last, it needs to get ready for the rest.

I may not agree with all the points in this article, but I think we can all agree that if we’re going to use web fonts, we must use them responsibly …otherwise users are going to treat them as damage and route around them.

`font-display` for the Masses | CSS-Tricks

The font-display property is landing in browsers, and this is a great introduction to using it:

If you don’t know which option to use, then go with swap. Not only does it provide an optimal balance between custom fonts and accessibility of content, it provides the same font loading behavior that we’ve relied on JavaScript for. If you have fonts on the page that you’d like to have load, but could ultimately do without, consider going with fallback or optional when using font-display.

Until it’s more widely supported, you can continue to use a JavaScript solution, but even then you can feature detect first:

if ("fontDisplay" in document.body.style === false) {
  /* JavaScript font loading logic goes here. */
}

The web is not print and other stories

Rachel takes a look back at twenty years of building on the web. Her conclusion: we’ve internalised constraints that are no longer relevant, and that’s holding us back from exploring new design possibilities:

Somehow the tables have turned. As the web moves on, as we get CSS that gives us the ability to implement designs impossible a few years ago, the web looks more and more like something we could have build with rudimentary CSS for layout. We’ve settled on our constraints and we are staying there, defined by not being print.

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.

Mozilla Open Design – branding without walls

Mozilla are updating their brand identity and they’re doing it in the open. A brave, but fascinating move.

Writing Less Damn Code | HeydonWorks

I’m in complete agreement with Heydon here:

But it turns out the only surefire way to make performant Web Stuff is also to just write less. Minify? Okay. Compress? Well, yeah. Cache? Sounds technical. Flat out refuse to code something or include someone else’s code in the first place? Now you’re talking.

Just like the “mobile first” mindset, if you demand that everything must justify its existence, you end up with a better experience for everyone:

My favorite thing about aiming to have less stuff is this: you finish up with only the stuff you really need — only the stuff your user actually wants. Massive hero image of some dude drinking a latte? Lose it. Social media buttons which pull in a bunch of third-party code while simultaneously wrecking your page design? Give them the boot. That JavaScript thingy that hijacks the user’s right mouse button to reveal a custom modal? Ice moon prison.

Speaking Most Clearly When Not Speaking At All - Zeldman on Web & Interaction Design

I’ve always loved Jeffrey’s writing.

“Researching Design Systems,” an article by Dan Mall

Dan has been researching the history of design systems, annotating as he goes.

Web Design in 4 minutes

This is a wonderful way of progressively explaining the layered approach to building for the web that Charlotte was teaching in her Codebar workshop.

FontShop | The Fonts of Star Trek

Yves Peters examines the typography of Star Trek. Unlike Typeset In The Future, which looks at on-screen typography, this article dives into titles and promotional posters.

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.

AMP Design Principles

These design principles are meant to guide the ongoing design and development of AMP. They should help us make internally consistent decisions.

I’ve added these to my collection of design principles.

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.

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.

Making And Maintaining Atomic Design Systems With Pattern Lab 2 – Smashing Magazine

A walkthrough of what’s new in Pattern Lab 2. It’s really interesting to see the convergent evolution of ideas here with what’s brewing in Fractal at Clearleft.

Legibility App

A handy tool for testing the legibility of different typefaces under all sorts of conditions.

ET Book · Edward Tufte on GitHub

I’ve always loved the way that Edward Tufte consistently uses Bembo to typeset his books. Here’s a version made for screen and freely licensed.

The Search For The Holy Grail: How I Ended Up With Element Queries, And How You Can Use Them Today – Smashing Magazine

An attempt to crack the element query nut. It relies on executing JavaScript at runtime so it doesn’t feel production-ready to me unless you’re already relying on JavaScript to render or style your content. Still, there’s a lot of good thinking has gone into the syntax—it’s worth investigating for that reason alone.

Typography Handbook

You can think of this as a short book or a long article, but either way it’s a handy overview of typography on the web:

A concise, referential guide on best web typographic practices.

Mind you, I take issue with this assertion:

Establishing a vertical rhythm is simple.

An Event Apart News: Ten Years, Ten Speakers: Part II

Ten of us reminisce about where we were and what we were doing a decade ago.

Ten years ago I was writing on my blog. Lots of other people were writing on their blogs back then too. That would soon change, though. Twitter and Facebook were picking up steam and soon they’d be luring bloggers away with enticing and seductive short-form convenience. I’ve stubbornly continued writing on my own site. I fully intend to keep on writing there for the next ten years too.

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.

The Languages Which Almost Were CSS - Eager Blog

A wonderful deep dive into the history of styling languages before CSS. I love spelunking down these internet history potholes—fascinating stuff!

Revisionist History Podcast

Malcolm Gladwell’s new podcast is very good: perfect for huffduffing. And I really, really like the website—lovely typography, illustrations, and subtle animations.

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.

Resilience Poster Talk from Jeremy Keith by jessman5Stuff on Etsy

This beautiful poster could be the ideal decoration for your home or office.

You can download the original size (DIN A3) and print it to hang it on the walls in your office or wherever you want.

studio.zeldman — designing our future

Jeffrey has started up a studio and launched its lovely one-page website. You can read more about it on his site. Lovely!

Declarative Design Tools | Jon Gold

Jon introduces a new tool with a very interesting observation: up until now, all our graphic design tools have been imperative rather than declarative…

With our current tools we’re telling the computer how to design the vision we have in our head (by tapping on our input devices for every element on the screen); in our future tools we will tell our computers what we want to see, and let them figure out how to move elements around to get there.

Smart Responsive Design Patterns, Or When Off-Canvas Isn’t Good Enough – Smashing Magazine

Vitaly takes a look at some of the more unusual patterns used in responsive designed.

Miscellany № 74: zombies always make a hash of things – Shady Characters

A thoroughly lovely look at the octothorpe that skewers a myth or two along the way.

Jessman5 on Twitter: “I made a poster from @adactio’s talk about Resilience. :) This took me way too long…”

I love this illustration that Jess made of my Resilience talk at the Render conference.

Spacehack.org

Ariel and Lisa have redesigned the excellent Spacehack site and it’s looking stellar!

Building Web Apps for Everyone - O’Reilly Media

Here’s a fantastic and free little book by Adam Scott. It’s nice and short, covering progressive enhancement, universal JavaScript, accessibility, and inclusive forms.

Download it now and watch this space for more titles around building inclusive web apps, collaboration, and maintaining privacy and security.

Did I mention that it’s free?

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!

The Design Jones Episode Thirty One – Jeremy Keith on Huffduffer

I really enjoyed chatting to Ade on The Design Jones podcast. I rambled on about design, the web, and all that stuff.

It’s on Soundcloud and here’s the podcast feed.

Webfonts Last by Frederic Marx

Some smart thoughts on web fonts.

Rebuilding the Perch UI - not your usual redesign

The Perch Control Panel is progressively enhanced. Almost all functionality of Perch is available even if you completely disable JavaScript, or if JavaScript fails to load.

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! ♫

Reboot! » Mike Industries

Mike’s blog is back on the Indie Web.

As someone who designs things for a living, there is a certain amount of professional pride in creating one’s own presence on the internet. It’s kind of like if an architect didn’t design their own house.

The history of ‘this website is well-crafted’ hints | Holovaty.com

Adrian runs through the history of well-crafted websites:

• 1990s: Dynamic websites
• 2002: All-CSS layouts
• 2003: Nice URLs
• 2005: Ajax
• 2009: Custom web fonts
• 2010: Responsive web design

I think he’s absolutely right with his crystal ball too:

What’s a big hint that a site is crafted by forward-looking web developers? I’d say it’s service workers, the most interesting thing happening in web development.

But leaving trends aside, Adrian reminds us:

Some things never go out of style. None of the following is tied to a particular time or event, but each is a sign a website was made by people who care about their craft:

• Making sure the site works without JavaScript
• Semantic markup
• Following accessibility standards

OOUX: A Foundation for Interaction Design · An A List Apart Article

I really, really like this approach. I’ve used something similar in my responsive design workshops, where I get people to break things down into nouns and verbs (objects and actions). I think there’s a lot of crossover with good URL design here too—this is kind of like REST for UX designers.

The Way We Build : Airbnb Design

A look at the tools that AirBnB have made to help them in their design and development process. I hope they’ll share them.

I, Website | CSS-Tricks

Chris’s homage to I, Pencil.

I, Website, am a complex combination of miracles.

Flexbox Patterns

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

chartd - responsive, retina-compatible charts with just an img tag

This could be a handy replacement for some Google Charts images of graphs. It uses SVG and is responsive by default.

I bet it wouldn’t be too tricky to use this to make some sparklines.

Color Safe - accessible web color combinations

A nice tool for choosing colour palettes that look good and are also accessible.

Layout Demos by Jen Simmons

If you want to keep up to date with all the coolest stuff landing in CSS, I recommend bookmarking this ever-changing page.

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.

A couple of alternatives to the hamburger menu | Kenan Yusuf

Two (similar) patterns for responsive navigation that don’t involve sweeping everything behind a hamburger icon.

When I’ve experimented with auto-overflowing horizontal patterns like this, I’ve found that a judiciously-placed box shadow can give a nice affordance.

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.

Swiss in CSS

Classic Swiss designs recreated in CSS (with added animation).

Blandly. A Full-Service Integrated Digital Blanding Agency

Well, we might as well bin the Clearleft website rebranding project. Somebody has beaten us to it.

Microsoft’s Radical Bet On A New Type Of Design Thinking

On universal design: “We’re reframing disability as an opportunity.”

One day someone will write a history of the Internet, in which that great series of tubes will emerge as one long chain of inventions not just geared to helping people connect in more ways, but rather, to help more and more types of people communicate just as nimbly as anyone else.

A Helpful Diagram

Blogging through Venn diagrams.

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.

Design is choice by Jaime Caballero

A lovely outlook on designing with progressive enhancement:

There will always be users coming from places you didn’t expect, using devices you didn’t test for.

Why I like the new Met logo (and why you should give it a chance): Design Observer

Michael Bierut on that logo …and graphic design in general.

Graphic designers, whether we admit it or not, are trained for the short term. Most of the things we design have to discharge their function immediately, whether it’s a design for a book or a poster, a website or an infographic, a sign system, or a business card. In school critiques, architecture and industrial design students produce models. Graphic designers produce finished prototypes. As a result, the idea that we create things that are unfinished, that can only accrue value over time, is foreign to us. It’s so easy for us to visualize the future, and so hard to admit that we really can’t. That’s what we face every time we unveil a new logo.

A Design Science Primer

The Buckminster Fuller Institute has put together this collection of resources which explain the ideas behind “comprehensive anticipatory design science.”

Seems especially relevant in light of the first issue of the Journal of Design and Science from MIT.

The legacy of the Black Mountain College lives on.

LOL Colors - Curated color palette inspiration

Here, have some colour palettes.

thoughtbot/design-sprint: Product Design Sprint Material

If you’re intrigued by the kind of design sprints I wrote about recently, here’s a handy collection of resources to get you going.

• Pre-sprint
• Understand: Gather existing knowledge, expose assumptions and unknowns
• Diverge: Illuminating all possible paths
• Converge: Choose the right path
• Prototype: Quickly build the right path
• Test & Learn: Test the right path

Why I Quit Ordering From Uber-for-Food Start-Ups by Robin Sloan in The Atlantic

Something to remember the next time someone describes an experience as “seamless” and means it to be positive:

This is the Amazon move: absolute obfuscation of labor and logistics behind a friendly buy button. The experience for a Sprig customer is super convenient, almost magical; the experience for a chef or courier…? We don’t know. We don’t get to know. We’re just here to press the button.

I feel bad, truly, for Amazon and Sprig and their many peers—SpoonRocket, Postmates, Munchery, and the rest. They build these complicated systems and then they have to hide them, because the way they treat humans is at best mildly depressing and at worst burn-it-down dystopian.

What would it be like if you didn’t have to hide the system?

Journal of Design and Science

A new publication from MIT. It deliberately avoids the jargon that’s often part and parcel of peer-reviewed papers, and all of the articles are published under a Creative Commons attribution licence.

The first issue is dedicated to Marvin Minsky and features these superb articles, all of which are independently excellent but together form an even greater whole…

Design and Science by Joi Ito:

When the cybernetics movement began, the focus of science and engineering was on things like guiding a ballistic missile or controlling the temperature in an office. These problems were squarely in the man-made domain and were simple enough to apply the traditional divide-and-conquer method of scientific inquiry.

Science and engineering today, however, is focused on things like synthetic biology or artificial intelligence, where the problems are massively complex. These problems exceed our ability to stay within the domain of the artificial, and make it nearly impossible for us to divide them into existing disciplines.

Age of Entanglement by Neri Oxman:

This essay proposes a map for four domains of creative exploration—Science, Engineering, Design and Art—in an attempt to represent the antidisciplinary hypothesis: that knowledge can no longer be ascribed to, or produced within, disciplinary boundaries, but is entirely entangled.

Design as Participation by Kevin Slavin:

The designers of complex adaptive systems are not strictly designing systems themselves. They are hinting those systems towards anticipated outcomes, from an array of existing interrelated systems. These are designers that do not understand themselves to be in the center of the system. Rather, they understand themselves to be participants, shaping the systems that interact with other forces, ideas, events and other designers. This essay is an exploration of what it means to participate.

The Enlightenment is Dead, Long Live the Entanglement by Danny Hillis:

As our technological and institutional creations have become more complex, our relationship to them has changed. We now relate to them as we once related to nature. Instead of being masters of our creations, we have learned to bargain with them, cajoling and guiding them in the general direction of our goals. We have built our own jungle, and it has a life of its own.

Atomic Classification | Trent Walton

There is one truism that has been constant throughout my career on the web, and it’s this: naming things is hard.

Trent talks about the strategies out there for naming things. He makes specific mention of Atomic Design, which as Brad is always at pains to point out, is just one way of naming things: atoms, molecules, organisms, etc.

In some situations, having that pre-made vocabulary is perfect. In other situations, I’ve seen it cause all sorts of problems. It all depends on the project and the people.

Personally, I like the vocabulary to emerge from the domain knowledge of the people on the project. Building a newspaper website? Use journalism-related terms. Making a website about bicycles? Use bike-related terms.

Most importantly, make the naming process a collaborative exercise, as outlined by Alla and Charlotte.

A Complete History of the Millennium Falcon — Kitbashed

Everything you never knew you wanted to know about the Millennium Falcon, wrapped up in one unsurprisingly insanely detailed essay from Michael.

The New Web Typography › Robin Rendle

A wonderfully thoughtful piece on typography, Jan Tschichold and the web. This really resonated with me:

It’s only been over the past year or so in which I’ve recognised myself as a ‘Web designer’ with a capital W, as I now believe that something happens to information and technology, and even typography itself, when people pass through these interconnected networks and interact with hypertext.

It’s for these reasons that I don’t believe in “digital design” or “designing for screens” and it’s why I’m often attracted to one particular side of this spectrum.

Robin proposes three “principles, suggestions, outlines, or rather things-that-I-ought-to-be nervous-about when setting text on the web”:

1. We must prioritise the text over the font, or semantics over style.
2. We ought to use and/or make tools that reveal the consequences of typographic decisions.
3. We should acknowledge that web typography is only as strong as its weakest point.

There’s an in-depth look at applying progressive enhancement to web type, and every single link in the resources section at the end is worth investigating.

Oh, and of course it’s beautifully typeset.

A 5 day sprint with Clear Left exploring library self-service machine software – Leon Paternoster

Myself and Batesy spent last week in Ipswich doing an intense design sprint with Suffolk Libraries. Leon has written up process from his perspective as the client—I’ll try to get a case study up on the Clearleft website soon.

This is really great write-up; it captures the sense of organised chaos:

I can’t recommend this kind of research sprint enough. We got a report, detailed technical validation of an idea, mock ups and a plan for how to proceed, while getting staff and stakeholders involved in the project — all in the space of 5 days.

Frontend Design | Brad Frost

Well, this pretty much sums up the front-end team at Clearleft:

Frontend design involves creating the HTML, CSS, and presentational JavaScript code that makes up a user interface.

I’ve often said that at Clearleft, development is always in the service of design. And like Brad, I often find myself defining that work by what it isn’t:

They understand UX principles and best practices, but may not spend their time conducting research, creating flows, and planning scenarios

They have a keen eye for aesthetics, but may not spend their time pouring over font pairings, comparing color palettes, or creating illustrations and icons.

They can write JavaScript, but may not spend their time writing application-level code, wiring up middleware, or debugging.

They understand the importance of backend development, but may not spend their time writing backend logic, spinning up servers, load testing, etc.

The Pain With No Name · An A List Apart Article

This rousing call-to-arms by Abby the IA makes a great companion piece to her interview on The Big Web Show.

» The Power of Responsive Design Sprints

Really interesting to see how Jason, Lyza, and co. are handling the process side of responsive design by using Agile sprints. This is how we’re doing it at Clearleft too.

There’s a really good point in here about starting with small-screen sketching:

For most of the sprint, we focus on small screens. We’re often asked how things will work on wider screens early in a sprint, but we try to resist thinking about that yet.

If you’ve managed to organize your life to fit inside a New York City apartment, you’re not going to have any trouble adjusting to a big house in the suburbs. The same is true of responsive designs.

If you nail the small screen design, the larger sizes will be easy by comparison.

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

Together • Ludwig Wendzich

Bootstrap is a product of Twitter. If you want your team to work like Twitter’s team, then by all means use Bootstrap. Pick up their design language. Their tool chain. Their decisions. Don’t be surprised when it feels off every time you use it. It will.

The same goes for Material Design. Foundation. These are all products built by other teams to work for their process. Their structure.

Finding the right tool is not what I am advocating for. Making it is.

Responsive Image Breakpoints Generator by Cloudinary

A very handy tool for figuring out breakpoints for responsive images.

Upload an image in its largest size, play around with the settings, and then generate the breakpoints, the markup, and the resized images for each breakpoint.

Words of Wisdom from @adactio - Matt Radford

A larger screen is now a progressive enhancement. Hell, with things like Siri and Google Now and Amazon’s Echo, we’re getting to the point where even a screen is an enhancement.

RWD Interview with Jeremy Keith and Trent Walton

Myself and Trent answer some questions on responsive design for Justin’s excellent newsletter.

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.

Content and Display Patterns | Brad Frost

Brad follows up with his thoughts on Dan’s article, emphasising the importance of a developer’s role in not just slavishly recreating what’s in a static comp, but seeing through to the underlying pattern beneath:

It’s so incredibly crucial to treat development as a key part of the design process.

“Content & Display Patterns,” an article by Dan Mall

A really terrific article from Dan on building pattern libraries. In summary:

1. Naming things is hard,
2. Separation of content and presentation is A Good Thing.

There are some really good insights here into getting just the right level of abstraction for a component—not too tightly tied to a specific visual display, but also not too tightly tied to a specific kind of content type:

When thinking about patterns, content strategists are primarily thinking about Content patterns, designers are primarily thinking about Display patterns, and front-end developers are responsible for bringing the two together.

(And it’s great to see Charlotte’s excellent article get a shout-out in the “Related reading” section at the end,)

Mike Hill - Industrial Design in Entertainment on Vimeo

A terrific analysis of industrial design in film and games …featuring a scene-setting opening that delineates the difference between pleasure and happiness.

Natural peer environment by Mikey Allan

‘Sfunny, I was just discussing this with Clare and Charlotte at work: how our office space (and culture) lends itself well to spontaneous exchanges of feedback and opinions.

CarbonGraffiti | When agile’s not creative

Jon writes about the difficulty of maintaining an overall design vision when you’re working to an agile methodology, slicing up work into sprints.

This pairs nicely with Mark’s recent podcast episode: On Agile.

Creating a Web Type Lockup | CSS-Tricks

A really great idea from Chris: using SVG to create the web equivalent of type lockups that can scale with all the control you want, while still maintaining accessibility.

Speaking of accessibility, Emil’s comment is very useful indeed.

Flexbox’s Best-Kept Secret

I’m filing this one away for future reference: combining flexbox with margin:auto is a magical combination.

Using auto margins with Flexbox is an effective way to get all of the flexibility of css floats, without the nastiness of breaking elements out of the document’s normal flow.

Remember this, future self!

Learn Sketch 3 - Design+Code

A very handy introduction to Sketch from an iOS-specific book. See also the subsequent chapter, Mastering Sketch 3.

Tips for Creating and Exporting Better SVGs for the Web

Sara enumerates some handy tips aimed squarely at designers exporting SVGs. It focuses on Illustrator in particular but I’m sure a lot of this could equally apply to Sketch.

Google+ | Google Web Showcase - Google Developers

Paul gives the lowdown on the Google+ responsive relaunch. They set themselves this performance budget:

• 60K of HTML,
• 60K of CSS,
• 60K of JavaScript,
• 60 frames per second animations, and
• 0.6 seconds latency.

And this bit is crucial:

One of our major rules was that all our pages needed to be both server-side and client-side rendered. With server-side rendering we make sure that the user can begin reading as soon as the HTML is loaded, and no JavaScript needs to run in order to update the contents of the page.

New design thinking by Mikey Allan

Web technology is no longer limiting us or scaring us into “staying safe” moreover it’s enabling us to get inspired by our surroundings and go and create some truly amazing, Web-Specific design.

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.

Responsive Field Day

All the videos from the excellent Responsive Field Day are now available. Even better, the audio is also available for your huffduffing pleasure!

All the presentations and panels were great. Sophie Shepherd’s terrific talk has really stuck with me.

Jeremy Keith - Responsive Field Day 2015 - YouTube

Here’s the 20 minute talk I gave at the inaugural Responsive Field Day in Portland.

Histography - Timeline of History

A nice navigable timeline of historical events from Wikipedia.

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

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

What “UX Design doesn’t exist” means to me — Cennydd Bowles

I completely agree with Cennydd (and Peter, and Leisa). If anyone working on a project—whether they’re a designer, developer, or anything else—isn’t considering the user experience, then what’s the point of even being there? By extension, labelling your work as “UX Design” is as redundant and pointless as labelling it “Good Design.”

But my complaint is with the label, not the activities. It’s the UX Design label that has little value for me. These activities happen in all good design: if you’re not trying to create positive experience then I don’t really understand what you are doing.

Russell Davies: Designing for accountability, designing for broken-ness

One failure mode is ‘I have run out of paper’, another is ‘my data has been sold to a company I don’t trust’, another is ‘my country has been invaded and they’ve seized all the servers’.

These are things to be designed for. These are user needs too. They have to be embraced.

Designing The Future, John V Willshire, dConstruct 2015 on Vimeo

Just like Nick, John Willshire has put his slides together with the audio from his gobsmackingly good dConstruct presentation on metadesign.

The Future Mundane on Vimeo

Nick Foster has put the audio of his fantastic dConstruct talk together with his slides.

It’s a terrific, thought-provoking presentation, superbly delivered …and it even has some relevance to progressive enhancement! (you’ll know what I mean if you watch/listen to the whole thing)

dConstruct : dconstruct2015 on Huffduffer

All the audio from dConstruct 2015 is now available for your huffduffing, podcasting, listening pleasure.

The conference was on Friday. Today is Monday. Drew knows what he’s doing.

The Web is Ruined and I Ruined it by David Siegel

Here’s a classic. David Siegel—of Creating Killer Websites fame—outlines exactly why he turned his back on that 1×1 spacer .gif trick he invented.

GOV.UK elements

I really like the clear styling of checkboxes and radio buttons in the GDS pattern library. Fitts’s law in action.

Lightning Design System

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

Thinking Responsively: A Framework for Future Learning · An A List Apart Article

Very thoughtful and sensible thinking from Paul.

NASA Graphics Standards Manual on Flickr

An old-school styleguide.

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.

Crafting A Bridge Between Storytelling & UX Design

I kind of want to link to every one of John’s post chronicling his 90 days at Clearleft, but this one is particular good, I think: how narrative ideas from the world of storytelling can help unlock some design problems.

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.

Dave Shea – – beyond tellerrand DÜSSELDORF 2015 on Vimeo

A wonderful, wonderful history of the web from Dave at this year’s Beyond Tellerrand conference. I didn’t get to see this at the time—I was already on the way back home—so I got Dave to give me the gist of it over lunch. He undersold it. This is a fascinating story, wonderfully told.

So gather round the computer, kids, and listen to Uncle Dave tell you about times gone by.

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.

Richard on Vimeo

The video of Richard’s great talk on responsive typography at the Up Front conference.

PDF: Designing For Deep Time: How Art History Is Used To Mark Nuclear Waste

Kelli Anderson’s thesis on the Human Interference Task Force project set up to mark nuclear waste sites for future generations (a project I’ve referenced in some of my talks).

Designing for Performance by Lara Callender Hogan

Lara’s fantastic book is now available online in HTML for free. Have a read and then order a copy of the print book for your library.

Explaining graphic design to four-year-olds — Medium

Sounds like a good exercise for explaining just about anything. Smart.

Spatial Interfaces — Elepath Exports — Medium

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

Design machines | Louder Than Ten

When another company achieves success, there’s a lot of pressure to investigate what they did right and apply that to our own organizations.

But we still have a chance. As long as we run brave organizations made up of even braver souls who are willing to embrace expression, trust their intuition and experiences, and stand up when everyone else is sitting down, we will survive.

Nicole Fenton | Interface Writing: Code for Humans

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

The ethics of digital design | Design Council

This piece by Cennydd on ethics in digital design reminded me of something Jonathan Harris wrote a while back.

I like that he cautions against hiding the seams:

Designers should also strive to give digital products a healthy balance of seamlessness and interrogability. While it’s appealing to create technology that needs little human intervention, this sort of black box can be a breeding ground for dishonest behaviour.

Contextual Styling: UI Components, Nesting, and Implementation Detail by Harry Roberts

Smart thinking from Harry here on a common issue when it comes to naming and styling. As he points out, the solution is not technical, but lies in how you form your mental model:

The design issue here is solved by subtly inverting the problem.

When Responsive Images Get Ugly by Taylor Hunt on CodePen

This is a deep, deep dive into responsive images and I can only follow about half of it, but there are some really useful suggestions in here (I particularly like the ideas for swapping out images for print).

Web Typography – a handbook by Richard Rutter — Kickstarter

You’ll want to back this—you’ll want to back the hell out of this!

Where Do We Go From Here?, From the Notebook of Aaron Gustafson

The full text of Aaron’s magnificent closing keynote from Responsive Day Out.

Visual Essentials for Product Design — Cennydd Bowles

This one-day workshop that Cennydd is running in London on July 22nd looks like it’s going to be really good.

adactio : responsiveconf3 on Huffduffer

Just over 48 hours since the third and final Responsive Day Out finished, and all of the audio is available! Here’s the podcast feed.

That Drew is something else.

Responsive day out 3: the final breakpoint | hiddedevries.nl

A fantastically-detailed write up of the whole day out. Each talk is described, and then the threads are tied together at the end. Great stuff!

As may have become clear from my notes above, Responsive Day Out 3 was a day full of variety. I had the feeling it could have easily been called Web Day Out, and I guess that makes sense, as responsive web design has naturally grown to be a pleonasm in the past few years.

Paul Robert Lloyd | Responsive Principles | CSS Day on Vimeo

I really like the way that Paul’s talk builds on top of ideas laid down by Ethan and Frank. Good stuff.

Responsive Principles (Front-end London, May 2015) // Speaker Deck

The slides from Paul’s talk-in-progress on design principles for building responsive sites. He gave us a sneak peak at Clearleft earlier this week. ‘Sgood.

GSWO Workshop with Sparkbox

Katie, Divya, and the other great designers and developers at Sparkbox run workshops on HTML and CSS for girl scouts. They’ve shared their resources and I might just borrow some of them for Codebar.

The Desktop Conundrum - daverupert.com

I can relate 100% to what Dave is saying here:

I’m disenchanted with desktop. That conviction runs so deep, I groan when I see a desktop layout JPEG.

All too often we talk the talk about taking a mobile first approach, but we rarely walk the walk. Most designers and developers still think of the small-screen viewport as the exception, not the norm.

Where visual design fits in a process – Occasional writing from @rivalee

I think the distinction between ‘how it works’ and ‘how it looks’ is blurrier than we think.

Does responsive web design make you more money?

For once, Betteridge’s Law of Headlines doesn’t hold true, because the data in this article shows that the answer is a resounding “yes!”

Talking design

Mariana Mota is writing a book on the collaborative design process. She’s sharing her research videos as she goes.

The first video features Gerry Leonidas.

SmashingConf Oxford 2015: Richard Rutter on Don’t Give Them What They Want, Give Them What They Need

A great case study from Richard, walking through the process of redesigning the website for the Royal Borough of Kensington and Chelsea.

15 Years of Dao · An A List Apart Blog Post

On the fifteenth anniversary of A Dao Of Web Design people who make websites share their thoughts.

Paul Ford’s is a zinger:

I don’t know if the issues raised in “A Dao of Web Design” can ever be resolved, which is why the article seems so prescient. After all, the Tao Te Ching is 2500 years old and we’re still working out what it all means. What I do believe is that the web will remain the fastest path to experimenting with culture for people of any stripe. It will still be here, alive and kicking and deployed across billions of computing machines, in 2030, and people will still be using it to do weird, wholly unexpected things.

Jeremy Keith @ The Digital Pond - Responsive Design - YouTube

Here’s a talk give at a community event in London last summer.

Playing With Flexbox and Quantity Queries, From the Notebook of Aaron Gustafson

Aaron documents his process of implementing Heydon’s clever quantity queries in CSS.

I am really looking forward to hearing Heydon’s talk at Responsive Day Out.

Native Scrolling by Anselm Hannemann

This gets nothing but agreement from me:

For altering the default scroll speed I honestly couldn’t come up with a valid use-case.

My theory is that site owners are trying to apply app-like whizz-banginess to the act of just trying to read some damn text, and so they end up screwing with the one interaction still left to the reader—scrolling.

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.

Gridset · Responsive Report 2014

Results of a survey of over 1000 people working on the web. It’s beautifully put together and the overall trajectory regarding responsive design looks pretty positive to me.

What Should I Design? - the design prompt generator

Get your next design game off to a quick start with this handy generator of nonsensical-yet-vaguely-plausible product ideas.

Responsive Field Day

Inspired by Responsive Day Out, the gang at Cloud Four are organising a one-day event on responsive design in Portland on September 25th. It’s gonna be a good one.

100 days: Archive

You might want to keep an eye on what the Clearlefties are doing here for the next hundred days.

One down, 99 to go.

Responsive News — We’ve made it.

The responsive BBC News site is live! Hurrah!

Here’s a look at the highs and lows of the site’s story, emphasising the importance of progressive enhancement and all that enables: feature detection (by “cutting the mustard”), conditional loading, and a mobile-first approach.

The Smithsonian’s design museum just got some high-tech upgrades

A profile of the great work Aaron and Seb have been doing at the Cooper Hewitt museum. Have a read of this and then have a listen again to Aaron’s dConstruct talk.

Future Friendly Fruition | Brad Frost

The launch of the Apple watch prompts Brad to remind us of the benefits of being future-friendly.

Once again, responsive design is not about “mobile”, “tablet”, and “desktop”. It’s about creating experiences meant to look and function beautifully on anything that can access the Web. We don’t know what gizmos will be sitting underneath Christmas trees two years from now, but there’s a damn good chance those gadgets will be able to access the Web.

The Path to Performance // Speaker Deck

The slides from Katie’s recent talk.

Performance is a rising requirement for building successful websites, but successful performance begins far earlier than development. So how do you get your entire team excited by it, specifically aesthetic-heavy designers?

The Web’s Grain by Frank Chimero

Superb. Absolutely superb.

A magnificent tour-de-force by Frank on the web’s edgelessness.

Read. Absorb. Read again. This is the essence of responsive web design, distilled.

Design Principles

These are principles of visual design—hierarchy, rhythm, etc.—nicely explored and explained.

Troika - a new music podcast | The Hickensian

Jon has started a new little music podcast—and he’s using Huffduffer to generate the RSS feed—three thematically-linked pieces of music.

Have a listen to the first episode.

Productivity Future Vision

Any sufficiently advanced vision piece is indistinguishable from Black Mirror.

Harnessing Flexbox For Today’s Web Apps - Smashing Magazine

More flexbox!

This time it’s a great article by Karen Menezes filled with practical examples showing where you can use flexbox today.

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.

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.

NASA GeneLab

A beautiful website for ISS-based biology experiments.

Welcome to the new Guardian website

The Guardian have hit the big red button and made their responsive site the default. Great stuff!

(top tip: don’t read the comments)

The Brand Deck by Scott Thomas — Kickstarter

This Eno-esque deck of cards by Scott could prove very useful for a lot of Clearleft projects.

A random principle from Adactio’s collection

This is neat—Vasilis has built a one-pager that grabs a random example from my collection of design principles.

I really like that he was able to use the predictable structure of my HTML as an API.

Atomic Design by Brad Frost

Brad’s writing a book.

Insert take-my-money.gif here.

Some thoughts on “designing in the browser” | The Haystack

An important clarification from Stephen:

You don’t actually design in the browser

When I speak of designing in the browser, I mean creating browser-based design mockups/comps (I use the terms interchangeably), as opposed to static comps (like the PSDs we’re all used to). So it’s not the design. It’s the visualization of the design—the one you present to stakeholders.

Exactly!

Personally, I think it’s as crazy to start in the browser as it is to start with Photoshop—both have worldviews and constraints that will affect your thinking. Start with paper.

Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement

You can now read Aaron’s excellent book online. I highly recommend reading the first chapter for one of the best descriptions of progressive enhancement that I’ve ever read.

Performance Budget Metrics - TimKadlec.com

Some good practical advice from Tim on setting a performance budget.

Use rule-based metrics to make sure you haven’t overlooked simple optimizations.

Use quantity-based metrics as guides to help designers and developers make better decisions about what goes onto a page.

HUB Interviews - Jeremy Keith on Huffduffer

Here’s a fun little interview I did recently, mostly about work stuff. It’s available for your huffduffing pleasure.

One thing that really bothers me is the way I repeatedly said “guys” to refer to my colleagues at Clearleft. I must stop doing that.

RWD BLOAT // Speaker Deck

Dave’s great slides from a presentation on performance and responsive design.

As we may understand: A constructionist approach to ‘behaviour change’ and the Internet of Things by Dan Lockton

An epic braindump by Dan, covering connected devices, product design, co-creation, DIY, and knopening stuff up. That’s right: knopening.

Knopen, a fairly obvious portmanteau of know and open, can be a verb (to knopen something) or an adjective (e.g. a knopen tool).

Responsive Images in Practice · An A List Apart Article

A great primer on using srcset and picture. I think I’ll be referring back to this a lot.

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.

Patty Toland — Design Consistency For The Responsive Web (Smashing Conference Freiburg 2014) on Vimeo

Patty’s excellent talk on responsive design and progressive enhancement. Stick around for question-and-answer session at the end, wherein I attempt to play hardball, but actually can’t conceal my admiration and the fact that I agree with every single word she said.

Solved By Flexbox — Cleaner, hack-free CSS

Documenting common layout issues that can be solved with Flexbox. I like the fact that some of these can be used as enhancements e.g. sticky footer, input add-ons …the fallback in older browsers is perfectly acceptable.

Keep ’em Separated — ericportis.com

I share the concerns expressed here about the “sizes” attribute that’s part of the new turbo-powered img element (or “the picture element and its associates”, if you prefer). Putting style or layout information into HTML smells bad.

This is a concern that Matt Wilcox has raised:

Change the design and those breakpoints are likely to be wrong. So you’ll need to change all of the client-side mark-up that references images.

I can give you a current use-case: right here on adactio.com, you can change the stylesheet …so I can’t embed breakpoints or sizes into my img elements because—quite rightly—there’s a separation between the structural HTML layer and the presentational CSS layer.

Responsive Images: If you’re just changing resolutions, use srcset. | CSS-Tricks

Following on from that post of Jason’s I linked to, Chris also emphasises that, for most use cases, you probably only need to use srcset (and maybe sizes), but not the picture element with explicit sources.

It’s really, really great that people are writing about this, because it can be quite a confusing topic to wrap your head around at first.

Perennial Design, by Wilson Miner · Issue 4 · The Manual

A deeply thoughtful piece (as always) by Wilson, on the mindset needed for a sustainable way of working.

When we start with the assumption that optimizing for rapid, unbounded growth is a goal, we immediately narrow the possibility space. There are only so many choices we can make that will get us there. The same choices that made annual monoculture and the shopping mall the most efficient engines for short-term growth and profit are the same qualities that made them unsustainable in the long term.

There are more ways to scale than growth. There are more ways to deepen our impact than just reaching more people. What if we put just as much effort into scaling the impact of our work over time? Can we build digital products around sustainable systems that survive long enough to outlive us, that are purpose-built to thrive without our constant cultivation?

URL Design · by Kyle Neath

This is four years old, but it’s solid advice that stands the test of time.

Jeffrey Zeldman: 20 years of Web Design and Community on Vimeo

A really nice little documentary about my friend Jeffrey.

RWD Podcast Episode #15 : Jeremy Keith — Responsive Web Design

I had a good ol’ chat with Justin Avery from Responsive Web Design Weekly. We talk about performance, Responsive Day Out, and yes, progressive enhancement.

The U.S. Digital Services Playbook

Design principles for the newly-formed USDS. I’ve added these to my collection.

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.

Tablesaw - A Flexible Tool for Responsive Tables

Those lovely people at Filament Group share some of their techniques for making data tables work across a range of screen sizes.

RWD Bloat - daverupert.com

Dave wanted to figure out if having a responsive site necessarily meant taking a performance hit, so he ran the numbers on his own site. It turns out all of performance-related issues are not related to responsive design.

The Virtual Haircut That Could Change the World | Design | WIRED

A nice profile of BERG’s Little Printer. That Matt Webb is a smart cookie. He is also a very thoughtful cookie.

Guy Walks Into a Bar - The New Yorker

If you’re going to check out the New Yorker’s nice new responsive site, might I suggest you start here?

What’s the design process at GDS? | Government Digital Service

A look behind the scenes of gov.uk. I like their attitude to Photoshop comps:

We don’t want a culture of designs being “thrown over a wall” to a dev team. We don’t make “high fidelity mock ups” or “high fidelity wireframes”. We’re making a Thing, not pictures of a Thing.

And UX:

We don’t have a UX Team. If the problem with your service is that the servers are slow and the UX Team can’t change that, then they aren’t in control of the user experience and they shouldn’t be called the user experience team.

The Making of Aprilzero

The first in a series of posts looking at the process behind builfing this “quantified self” site:

As with most decisions in my life, I asked myself: What would Tony Stark do?

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.

How to build the sensory web by John Allsopp

John peers behind the surface veneer of the web’s current screen-based setting:

The challenge for us as developers and designers for the web becomes less about screens and pixels and buttons and much more about how the web augments our lives, both actively and passively; how it makes us know ourselves and our homes and workplaces and environments better.

Navigating the Guardian | Help | The Guardian

A peek behind the scenes of an interesting new navigation pattern on the Guardian’s still-in-beta responsive site.

You can try it out here

Things we learnt designing ‘Register to vote’ | GDS design notes

A concise case study from gov.uk:

Designing for the constraints of mobile is useful – if we get the fundamentals of the service working on small screens and slow network speeds, it can work on more capable devices.

Highlights of Responsive Day Out 2: The Squishening

Neil Berry writes down his thoughts prompted by Responsive Day Out 2.

Responsive Day Out 2 | Studio 24

A great blow-by-blow account of Responsive Day Out 2 from Simon R Jones.

Responsive Day Out 2

Phil Baker writes up his thoughts on all the day’s talks.

Responsive Day Out 2 - The Squishening – Alex Gibson

What follows here is not a full account of each talk, you can listen to the audio recordings for that. This is more a collection of my main take-aways for the day, and what I found most interesting.

Takeaways from Responsive Day Out 2 - Plausible Thought

Marc Jenkins shares his thoughts on Responsive Day Out 2.

Back to basics - Katrin Kerber

Another lovely write-up of Responsive Day Out 2.

The Pursuit of Laziness: Thoughts from Responsive Day Out — Paul Robert Lloyd

Now this is what I call a conference write-up. Paul synthesises the talks from Responsive Day Out 2 into five principles for responsive design:

1. Responsible
2. Polylithic
3. Pragmatic
4. Collaborative
5. Flexible

Responding to the Responsive Web: Insights on Reshaping User Experience - The Digital Pond (London, England) - Meetup

Sally and I will be speaking at this free evening in London on August 7th.

Good, Form & Spectacle - design & cultural heritage

The brilliant George Oates has started a new design company with an emphasis on cultural heritage: “explicit notes to the future, local archives of global content.” Watch this space

Responsive Day Out 2 - The Squishening - Kirsty Burgoine Web Design and Development

Here’s Kirsty’s retrospective of Responsive Day Out 2, from the perspective of a speaker and an attendee.

adactio : responsiveconf2 on Huffduffer

Thanks to the tireless efforts of the magnificent Drew McLellan, the podcast of all the talks from Friday’s Responsive Day Out 2 are now available for your listening pleasure.

Notes from Responsive Day Out 2, June 27th in Brighton — iAllenkelhet

As well as delivering a terrific talk at Responsive Day Out 2, Ida has also written up her detailed notes of the day.

Responsive Day Out 2 2014 - #beepcheeks

Adam Onishi’s write-up of Responsive Day Out 2, paying particular attention to the format and the curation of the day.

Jeremy puts together two fantastic conferences in Responsive Day Out and dConstruct, both of which I will have attended for the first time by the end of the year and I don’t think there’s a coincidence in that. Responsive Day Out was a truly fantastic conference, and it was all down to the curation of the conference, because quite literally there wasn’t anything else.

Items tagged beepcheeks on Decade City

As always, Orde Saunders took copious notes at Responsive Day Out 2. The man’s a machine!

Responsive Day Out 2 – from the perspective of a speaker & attendee : Sally Jenkinson

Sally’s talk at Responsive Day Out 2 was really, really great—it kinda blew my mind. I’m so, so happy she agreed to be a part of the event.

Here’s her description of the day and the other talks. Pay attention to the closing call:

I didn’t get to meet everyone I wanted to, but you should all come back for dConstruct in September as I’m sure that it’ll be even better than this weekend was.

Responsive Day Out 2 - the squishening | hiddedevries.nl

Another great write-up of Responsive Day Out 2, this time from Hidde de Vries, who came over to Brighton from the Netherlands.

On being responsively creative

A terrific write-up of Responsive Day Out 2 by David Watson, tying together many of the day’s strands.

Guardian beta · The container model and blended content – a new approach to how we present content on the Guardian

This is what Oliver was talking about Responsive Day Out 2 — a new approach to information architecture.

Cast off your sidebars! You have nothing to lose but your grids!

Getting Back That Lovin’ Feeling on Sparkbox

A lovely little tale of empowerment through HTML and CSS.

Unfinished Business 73: We’ve reached peak burrito on Huffduffer

I had a lot of fun chatting with Andrew on his podcast. Yes, it’s a rambling affair but it’s worth sticking with it—we get really stuck in to some thorny questions about design and advertising.

IXS Enterprise (IXS-110) - an album on Flickr

Design fiction from a NASA scientist.

For the Love of the URL — Aaron Grando

Some URLs are ugly. Some URLs aren’t. Let’s not sacrifice them.

Frank Chimero – Only Openings

I guess it goes without saying at this point, but this piece from Frank is beautiful and thought-provoking.

This part in particular touched on some things I’ve been thinking about lately:

Design’s golden calf is simplicity. Speaking as someone who sees, makes, and uses design each and every day, I am tired of simple things. Simple things are weak. They are limited. They are boring. What I truly want is clarity. Give me clear and evident things over simple things. Make me things that presume and honor my intelligence. Shun seamlessness. It is another false token. Make me things that are full of seams, because if you give me a seam and I pull the thread, I get to see how the whole world is stitched together. Give me some credit. Show me you trust me.

Ingredients by Mark Boulton

A lovely post by Mark on the value of URLs.

The Cassette Tape as Responsive Design

This is an interesting observation about the design of cassette inlays. It reminds of Paul’s presentation at the Responsive Day Out when he looked at the “responsiveness” of television idents.

And They All Look Just the Same

Greg isn’t just lamenting a perceived “sameness” in web design here. He’s taking a long-zoom view and pointing out that there’s always a sameness …and you can choose to go along with it or you can choose to differentiate.

Responsive design testing tool – Viewport Resizer

A handy little bookmarklet for quickly checking how a site might look at different screen sizes, and you can customise it to use whichever screen sizes you like.

Using Photoshop in Responsive Workflows - Web Standards Sherpa

A nice summation by Dan of when it makes sense to use a graphic design tool like Photoshop and when it makes sense to use a web browser.

Designing in the Borderlands by Frank Chimero

This is a wonderful piece of writing and thinking from Frank. A wonderful piece of design, then.

A personal view on generalists and trans-media design

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.

Airbag Intl. / Archives

Greg says:

We need a web design museum.

I am, unsurprisingly, in complete agreement. And let’s make lots of copies while we’re at it.

A Modern Designer’s Canvas | Smashing Magazine

The transcript of Malarkey’s recent talk. Good thoughtful stuff.

Making ubuntu.com responsive: intro | Ubuntu Design Blog

Yaili is documenting the process of retrofitting ubuntu.com to be responsive. I’ll be avidly reading each post in this series.

Device-Agnostic by Trent Walton

A terrific post from Trent, touching on all the important facets of building for the web: universality, progressive enhancement, performance …great stuff!

Can This Alternative Smartphone Deliver Real Privacy to the Masses? | Co.Exist | ideas + impact

Fast Company features Aral’s tantalising Indie Phone project that he’s been working on at Clearleft Towers.

Good to see Oskar the dog getting the recognition he deserves.

On the top floor of a commercial building in the old maritime city of Brighton, England, Balkan has been quietly hacking away at Indie Phone for the last several months with the rest of his team—Victor Johansson, an industrial designer, Laura Kalbag, a professional web designer (and Balkan’s partner), and her Husky, Oskar.

Platformed. — Unstoppable Robot Ninja

The importance of long-term thinking in web design. I love this description of the web:

a truly fluid, chaotic design medium serving millions of imperfect clients

Responsive tables

An interesting pattern for handling complex data tables in responsive designs. It’s a desktop-down approach, but pretty smart.

Approaching Principles for Independent Archives | Equivalent Ideas

Thoughts from Luke Bacon on two topics that fascinate me: archives and design principles.

I’ve added these principles to my collection.

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.

An Ingeniously Designed Speaker That Creates Crowdsourced Playlists | Wired Design | Wired.com

Hey, look! The Clearleft interns are in Wired. That’s nice.

Windows of New York | A weekly illustrated atlas

Lovely little graphics inspired by New York architecture.

The Business of Responsive Design by Mark Boulton

The transcript of Mark’s talk from last week’s Handheld conference in Cardiff.

There are mountains.

The lie of the API by Ruben Verborgh

I agree completely with the sentiment of this article (although the title is perhaps a bit overblown): you shouldn’t need a separate API—that’s what you’re existing URL structure should be.

I’m not entirely sure that content negotiation is the best way to go when it comes to serving up different representations: there’s a real value in being able to paste a URL into a browser window to get back a JSON or XML representation of a resource.

But this is spot-on about the ludicrous over-engineered complexity of most APIs. It’s ridiculous that I can enter a URL into a browser window to get an HTML representation of my latest tweets, but I have to sign up for an API key and jump through OAuth hoops, and agree to display the results in a specific way if I want to get a JSON representation of the same content. Ludicrous!

Responsive scrollable tables | 456 Berea Street

I like this CSS solution to sideways-scrolling tables for small viewports. It’s not going to be right for every situation but it’s a handy trick to keep up your sleeve.

Jeremy Keith – The Power Of Simplicity – border:none

This is the talk I gave at the border:none event in Nuremberg last month. I really enjoyed it. This was a chance to gather together some thoughts I’ve been mulling over for a while about how we approach front-end development today …and tomorrow.

Warning: it does get quite ranty towards the end.

Also: it is only now that the video is released that I see I spent the entire talk looking like a dork with a loop of wire sticking out of the back of my head.

Responsive Design Won’t Fix Your Content Problem ∙ An A List Apart Column

The title is a bit sensationalist but I agree completely with what Karen is saying:

It’s time we acknowledged that every responsive web design project is also a content strategy project.

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.

Responsive design, screens, and shearing layers — Unstoppable Robot Ninja

A wonderful piece by Ethan taking issue what the criticism that responsive design is over-reliant on screen size. Instead, he says, it begins with screen size, but there’s no limit to where we can go from there.

Responsive design might begin with the screen, but it doesn’t end there.

Responsive App Design

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

“Now with Responsive!,” an article by Dan Mall

Dan gives some insight into what it took to make his personal site responsive. Stay tuned: there’ll be more of this.

If it doesn’t work on mobile, it doesn’t work | hacker journalist

A great presentation from Brian Boyer on NPR’s mobile strategy. Spoiler: it’s responsive design.

Do as Little as Possible ∙ An A List Apart Column

I heartily concur with Lyza’s mini-manifesto:

I think we need to try to do as little as possible when we build the future web …putting commonality first, approaching differentiation carefully.

It’s always surprised me how quickly developers will reach for complex, potentially over-engineered solutions, when—in my experience—that approach invariably creates more problems than it solves.

Simplicity is powerful.

embedresponsively.com

Here’s the CSS and markup you need to make third-party iframes responsive. Handy!

Better business by design

Some good-lookin’ stats from a responsive redesign:

Total page views, a metric we were prepared to see go down with the redesign, are up by 27%. Unique visitors per week are up 14% on average and visits per week are up on average 23%.

Enabling new types of web user experiences - W3C Blog

Scott gives us an excellent State Of The Web address, looking at how the web can be central to the coming age of ubiquitous computing. He rightly skips through the imitation of native apps and gets down to the potential of just-in-time interactions.

Responsive Web Design is Solid Gold

Jason recants on his article from a few years back when he described responsive design as “fool’s gold.”

Responsive web design: it’s solid gold, baby.

Human Interest by Trent Walton

Trent proposes a way to avoid implementing dark patterns: take a leaf from the progressive enhancement playbook and assume the worst conditions for your user’s context.

The perils at Great Falls - Washington Post

On the one hand, this is yet another Snowfall clone. On the other hand, the fact that it’s responsive is impressive.

Design Jargon Bullshit

Fodder for a Markov chain.

Webby Podcasts

A handy collection of links to web-related podcasts. Go forth and huffduff.

UX secrets revealed - Features - Digital Arts

I was interviewed for this article on psychology in web design. The title is terrible but the article itself turned out quite nicely.

Crippling the web - TimKadlec.com

A great call-to-arms from Tim, simply asking that we create websites that take advantage of the amazing universality of the web:

The web has the power to go anywhere—any network, any device, any browser. Why not take advantage of that?

Inevitably there is pushback in the comments from developers still in the “denial” stage of coming to terms with what the web is.

Butterick’s Practical Typography

There’s a lot of very opinionated advice here, and I don’t agree with all of it, but this is still a very handy resource that’s been lovingly crafted.

Inge Druckrey: Teaching to See on Vimeo

Sit back, relax, and enjoy this classic documentary on graphic design, courtesy of its producer Edward Tufte.

Responsive design: we are not there yet

A call for developers to let standards bodies know what we want:

It is important that we as developers focus on the right things again. If you encounter a bug, you should not only fix it for your site; you should reach out to browser vendors and web standards people to fix this in a long-term solution. It might cost you a few minutes, but brings a lot of improvement to the whole developer community.

Media Query Events Example

A page to demonstrate the conditional CSS technique I documented a while back.

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.

“What is Design?” as Principles Compiled by Jeremy Keith

Well, this is rather nice. John Maeda uses my list of design principles as a jumping-off point for investigating the differences between design for people and designing for machines.

Leveraging Advanced Web Features in Responsive Design

A terrific case study in progressive enhancement: starting with a good ol’ form that works for everybody and then adding on features like Ajax, SVG, the History API …the sky’s the limit.

Jeremy Keith – Beyond Tellerrand – beyond tellerrand 2013 on Vimeo

I gave the opening keynote at the Beyond Tellerand conference a few weeks back. I’m talked about the web from my own perspective, so expect excitement and anger in equal measure.

This was a new talk but it went down well, and I’m quite happy with it.

Other flexible media: balloons and tattoos

Vasilis considers the inherent flexibility and unknowability of web design.

I tried to come up with other fields that need to design things for a flexible canvas, in the hope of finding inspiration there. The only media types I could come up with was the art of balloon printing and the art of tattooing.

Experience Rot

Jared explains how adding new features can end up hurting the user experience.

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.

Text-align: Justify and RWD

Here’s a nifty trick: using text-align: justify to get a nice responsive grid layout.

Jessica Hische - Upping Your Type Game

A wonderful essay about type on the web by Jessica.

Progressive enhancement in the Government Service Design manual

A nice description of progressive enhancement by Norm, as applied at GDS.

A Digital Tomorrow on Vimeo

A design fiction video depicting technology that helps and hinders in equal measure.

Responsive Inspector

A handy plugin for Chrome that always you to inspect media query breakpoints and take screenshots at any of them.

Embracing the Medium

A lovely piece of writing from Richard on the nature of the web.

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.

URLs are for people, not computers

Yes, yes, yes!

Responsive Deliverables by Dave Rupert

Dave talks about the kind of deliverables that get handed over in a responsive project. Sounds a lot like what we do at Clearleft.

Responsive deliverables should look a lot like fully-functioning Twitter Bootstrap-style systems custom tailored for your clients’ needs.

Responsive Day Out by Laura Kalbag

A terrific, in-depth round-up and recollection of the Responsive Day Out by Laura that ties all of the strands together.

The canonical smart city: A pastiche by Adam Greenfield’s Speedbird

Sorta sci-fi from Adam.

Consider this a shooting script for one of those concept videos so beloved of the big technology vendors.

Life & Thyme

Good writing. Good design. Good food.

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.

Learning to See on Information Architects

A sweet, beautiful love letter to design, from Oliver.

ROCA: Resource-oriented Client Architecture

I like these design principles for server-side and client-side frameworks. I would say that they’re common sense but looking at many popular frameworks, this sense isn’t as common as it should be.

On Responsive Layout and Grids by David Bushell

I agree with David: most pre-rolled grid “solutions” are way too complicated. And in any case, applying a pre-existing grid framework for a new project seems kind of like applying a pre-existing colour palette.

As David points out, it really needn’t be so complicated.

Science Fiction Film as Design Scenario Exercise for Psychological Habitability: Production Designs 1955-2009

A white paper that looks to sci-fi films as potential prototypes for habitats for humans in space, with an emphasis on dealing with the psychological issues involved.

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.

Responsive Day Out – A designer’s perspective | 383 Blog

A write-up of the Responsive Day Out from the perspective of a designer whose background is off-web:

Unlike the experts, I haven’t had to make the transition from designing for desktop for years to suddenly becoming device agnostic, which is what I think the main issue seems to be.

Antiphonal Geometry · Harmony and proportion in responsive web design

This is the full text of Owen’s talk at the Responsive Day Out. It makes for a terrific read!

Using SVG on CSS-Tricks

Chris takes a look at all the different ways you can use SVG today.

Springboard – Coming soon from Clearleft

The latest Clearleft product will be like having an intensive set of discovery, collaboration, and exploration workshops in a box. Perfect for startups and other small businesses short on time or budget.

It starts in Spring but you can register your interest now.

Program Your Own Mind 2: A responsive day out

Some thoughts and soul-searching prompted by talks at the Responsive Day Out.

Responsive web design: the war has not yet been won

This was the crux of Elliot’s excellent talk at the Responsive Day Out. I heartily concur with this:

Once you overcome that initial struggle of adapting to a new process, designing and building responsive sites needn’t take any longer, or cost any more money. The real obstacle is designers and developers being set in their ways.

Logical breakpoints for your responsive design

Vasilis examines the multitude of factors that could influence an ideal measure.

Prototyping Responsive Typography

Some handy tips for starting off your responsive designs from the type out.

Design Staff — Helping startups design great products

Some great stories from the front lines of product design, gathered together in one handy spot.

Designing with context : Cennydd Bowles

A great meaty piece from Cennydd, diving deep into the tricky question of context.

Ensia

A lovely new responsive(ish) website dedicated to science and the environment.

“The Post-PSD Era: A problem of expectations,” an article by Dan Mall

I really like Dan’s take on using Photoshop (or Fireworks) as part of today’s web design process. The problem is not with the tool; the problem is with the expectations set by showing comps to clients.

By default, presenting a full comp says to your client, “This is how everyone will see your site.” In our multi-device world, we’re quickly moving towards, “This is how some people will see your site,” but we’re not doing a great job of communicating that.

Metadesign at Hack Farm by James Box

James’s notes from the most recent Hack Farm show that, even without a finished product, there were a lot of benefits.

Performance as design by Brad Frost

Amen, Brad, Amen.

It’s time for us to treat performance as an essential design feature, not just as a technical best practice.

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?

The responsive web will be 99.9% typography

An intriguing extrapolation of current design trends: perhaps typographically-strong single-column layouts will become popular out of sheet necessity.

Form Follows Function

A gorgeous collection of experiments that showcase just how much is possible in browsers today.

Responsive web design interview series: Trent Walton & Jeremy Keith

Trent and I answered a few questions for the Responsive Design Weekly newsletter.

» 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?

Schedule | Breaking Development Dallas 2012: Web design and development for beyond the desktop

All the videos from last year’s Breaking Development conference in Dallas are up on the site. They’re all excellent.

Jan V. White

Eight of Jan White’s excellent books on graphic design are now available for free online, licensed under CC0 …they’re in the public domain now.

All he asks in return is that you might buy one of his books still in print, and maybe make a donation to the Internet Archive.

Jan V. White is a mensch.

Lamps: a design research collaboration with Google Creative Labs, 2011 – Blog – BERG

Beautiful thoughtful work from the BERGians.

Connecting (Full Film) on Vimeo

A short film about interaction design.

A New Canon | Journal | The Personal Disquiet of Mark Boulton

An excerpt from Mark’s forthcoming book, which promises to be magnificent.

Ethan Marcotte AEA Boston June 18, 2012 on Vimeo

Ethan’s excellent talk from last year’s An Event Apart.

In this session Ethan reviews strategies for handling trickier elements that would make even the most seasoned designer quail: stuff like advertising, complex layouts, deep navigation patterns, third-party media, and, yes, actual, honest-to-goodness content.

The Pastry Box Project | 7 December 2012, baked by Cennydd Bowles

Beauteous and true.

Real design is political.

All Systems Are Go!(ing to Come Apart) - Cognition: The blog of web design

I really like these thoughts on the importance of design systems for the web. It’s not about providing a few perfect deliverables that won’t survive once they go live; it’s about designing for the unexpected, the unpredictable:

Design for every state, not the best state.

Collect + share + discover type combinations.

A lovely new service from Mike Stenhouse: install the bookmarklet and then when you come across a website with a nice combination of fonts, you can save a snapshot of the page (and its fonts) for later perusal. You can then browse those fonts on Typekit, Fontdeck, MyFonts or Google Fonts.

display: none; | Laura Kalbag

Laura explains the problems with hiding content for small screens, and uses this as an opportunity to elucidate why you should blog, even if you’re think that no-one would be interested in what you have to say:

The point I’m trying to make is that we shouldn’t be fearful of writing about what we know. Even if you write from the most basic point of view, about something which has been ‘around for ages’, you’ll likely be saying something new to someone. They might be new to the industry, you might just be filling in the holes in someone’s knowledge.

Simon Foster | Blog | The Responsive Designer

Nice notes from a recent talk on ways to approach responsive design.

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.

Let’s Talk Solar | LOGO24

Here’s a really useful case study for anyone who wants to do “guerrilla” responsive design: when you’re handed a fixed-width mockup but you know that responsive is the way to go:

I started by styling up every element, without layout. The result was a fully elastic layout that effectively served as a mobile, or small screen, layout, which just needed some tweaking of horizontal spacing.

Bingo! And this approach had knock-on benefits as it “supported writing component-based, or modular, CSS”.

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.

Designing for different devices | Government Digital Service

A behind-the-scenes look at how Gov.uk is handling mobile devices. Spoiler: it’s responsive.

I found this particularly interesting:

When considering the extra requirements users of different devices have we found a lot in common with work already done on accessibility.

Rhythm And Proportion In Grids And Type - Vanseo Design

A really nice piece on scale, ratio and rhythms in web design.

Skinny Ties and responsive eCommerce » Blog » Gravity Department

Another responsive design case study. This one’s got numbers too.

A Responsive Design Case Study – David Bushell – Web Design & Front-end Development

I love seeing the process behind responsive projects. This one is particularly nice.

Under Tomorrow’s Sky

Design Fiction at work, imagining a possible future city.

» 23 October 2012, baked by Leisa Reichelt @ The Pastry Box Project

Less wireframing, more prototyping.

—Leisa

Adaptive Content Management | Journal | The Personal Disquiet of Mark Boulton

Mark gets to the heart of the issue with making responsive designs work with legacy Content Management Systems …or, more accurately, Web Publishing Tools. There’s a difference. A very important difference.

Data Visualization Reinterpreted by VISUALIZED on Vimeo

Peter Saville talks about the enduring appeal of his cover for Unknown Pleasures.

I like to think of all the variations and mashups as not just tributes to Joy Division, but tributes to Jocelyn Bell Burnell too.

A List Apart: Articles: Responsive Comping: Obtaining Signoff with Mockups

A peak behind the scenes at the responsive design and development workflow at Bearded. It makes a lot of sense.

In mobile-centric Africa, Responsive Web Design just makes business sense!Moses Kemibaro | Moses Kemibaro

Therefore, from a business perspective, and my excitement in doing this blog post is that RWD is especially important for mobile-centric markets such as Africa.

The Guardian

Remember when I linked to the Github repository of The Guardian’s front-end team? Well, now—if you’ll pardon the mixing of metaphors—you can start to kick the tyres of the fruits of their labour. This beta site shows where their experiments with responsive design might lead.

The Airfix Responsive Workflow by Jordan Moore — Web Designer

A nice look at some possible ways to approach workflow on a responsive project.

Laying Down our Burdens: Steps towards simplifying the mobile Web

Amen, Lyza, Amen. Instead of treating web development for the multitude of devices out there as an overwhelming nigh-on-impossible task, let’s accept the fact that there are certain things that are beyond our control. And that’s okay.

Let’s build on the commonality core to the web where we can. To do this, I think we need to let go of a few things, to lay down our burdens.

Related: do websites need to look the same in every browser? NO!

The Story of the New Microsoft.com — Rainypixels

Nishant gives a great overview of the responsive redesign of the Microsoft home page, ably abetted by the Paravel gang.

Encouraging Better Client Participation In Responsive Design Projects | Smashing Magazine

Andy’s talk from the Smashing Conference in Freiburg.

The Past 100 Years of the Future

This (free!) PDF looks like it could be a nice companion piece to Chris and Nathan’s recent book:

Human-computer interaction in science-fiction movies and television.

It’s a work in progress. You’ll notice a lot of placeholders where the images should be. That’s because the studios are demanding extortionate rates for screenshots.

The Flat Design Era — LayerVault Blog

Pointing out a growing movement away from three-dimensionality towards a flatter aesthetic.

What is the medium? – David Bushell – Web Design

I’m really enjoying these thoughts prompted by Paul’s article in A List Apart. I particularly the idea of taking a long-zoom approach to progressive enhancement: evolving the aesthetic of web design over time.

A List Apart: Articles: Mo’ Pixels Mo’ Problems

The kickass articles just keep on comin’. This one from Dave is a great overview of options for dealing with images in responsive designs.

A List Apart: Articles: The Web Aesthetic

A really great article from Paul that simultaneously takes a high-level view of the web while also focusing on the details. A lot of work went into this.

Don’t confuse design testing with device testing — Stuff

Andy makes a good point here, point out the difference between device testing and design testing:

When I’m designing, it’s incredibly important for me to quickly gain an affinity with how my design feels when I hold it in my hands.

These are not device testing issues, they are design questions and there’s a huge difference between how an interface feels to use on a smartphone size display and whether the HTML, CSS and Javascript actually works on any particular make or model.

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.

Responsive Measure: A jQuery plugin for responsive typography

Here’s something that Josh debuted at Smashing Conference: a script for responsive designs to adjust font-sizes based on a desired line-length.

Inevitably, it’s a jQuery plugin but I’m sure somebody could fork it to create a standalone version (hint, hint).

034: With Jeremy Keith - ShopTalk

I had a lot of fun chatting with Chris and Dave on the Shop Talk Show. It is now available for your listening and huffduffing pleasure.

The Spirit of the Web – Jeremy Keith at Smashing Conference | Brad Frost Web

Brad’s notes from my opening talk at the Smashing Conference in Freiburg.

Responsive Web Design Patterns | This Is Responsive

A great collection of layout, navigation, and interaction patterns for responsive sites, delivered by Brad.

beta.guardian.co.uk

Those clever chaps at The Guardian are experimenting with some mobile-first responsive design. Here’s how it’s going so far.

The code is on Github.

The Computer for the 21st Century

A classic piece of design fiction written by Mark Weiser 21 years ago.

The most profound technologies are those that disappear. They weave themselves into the fabric of everyday life until they are indistinguishable from it.

Complex Navigation Patterns for Responsive Design | Brad Frost Web

Another great in-depth round-up from Brad, this time looking at your options for complex navigation patterns in responsive designs.

Meet the new-look Channel 4 News website - YouTube

Clearleft have been working with Channel 4 News on their new redesign. Here’s Jon Snow explaining responsive design.

A future friendly workflow | Opinion | .net magazine

Some more thoughts on how our workflow needs to adapt to the current ever-changing device landscape.

Making of: People Magazine’s Responsive Mobile Website (Global Moxie)

An in-depth look behind the scenes of the responsive relaunch of People Magazine’s mobile site that Josh, Karen, and Ethan were involved in. I love it when people share their process and build stories like this.

Matthew Butterick: Reversing the Tide of Declining Expectations

I don’t agree with everything in this presentation—there’s a nostalgic bias to the non-existent “good ol’ days”—but this is still very engaging and thought-provoking.

fberriman » Accidental designer

Everything Frances has written here resonates with me.

I don’t really want a label. I hate labels. I loathe the term “user experience designer”, because I still believe that “user experience” is just a fundamental to what you’re doing, and shouldn’t need stating. There is nothing but user experience design if you’re building products for people.

Web Native Design on Vimeo

A great talk on the nature of the web that Paul gave in Copenhagen recently.

The Shape of Design by Frank Chimero

Frank has published his book online in HTML. Very lovely it is too.

Implementing Responsive Design | Building sites for an anywhere, everywhere web

Tim’s book is ready for pre-order. Looks like it’s going to be good one.

Client/Agency Engagement is F*cked, Waterfall UX Design is a Symptom | disambiguity

Leisa nails it. The real stumbling block with trying to change the waterfall-esque nature of agency work (of which Clearleft has certainly been guilty) can be summed up in two words: sign off.

And from a client’s perspective, this emphasis on sign-off is completely understandable.

It takes a special kind of client to take the risk and develop the level of trust and integration required to work the way that Mr Popoff-Walker any many, many other inhabitants of agency world would like to work.

A List Apart: Articles: ALA Summer Reading Issue

How about this for a trip down memory lane—a compendium of articles from over a decade of A List Apart, also available as a Readlist epub. It’s quite amazing just how good this free resource is.

The only thing to fault is that, due to some kind of clerical error, one of my articles has somehow found its way onto this list.

If this were Twitter, you’d be at-replying me with the hashtag “humblebrag”, wouldn’t you?

UX Design at Digital Agencies is F*cked | RossPW

This resonates a lot with me. It also hits very close to home: at Clearleft, we’ve definitely been guilty of taking the wrong approach as described here.

Twitter Blog: Overhauling mobile.twitter.com from the ground up

A great behind-the-scenes look at the redesign (and redevelopment) of Twitter’s mobile subdomain silo. Man, I would love to see this progressively enhanced up to the current widescreen view for “desktop” browsers without the need for separate URLs for any class of device.

But I digress …this is good stuff.

Grids, Design Guidelines, Broken Rules, and the Streets of New York City (Global Moxie)

Josh writes about the importance of using rules and systems as tools without being bound by them.

Great Works of Fiction Presents: The Mobile Context | The Haystack.

A really great article from Stephen on how we are mistakenly making assumptions about what users want. He means it, man!

Aegir Hallmundur, designer and maker of things.

Aegir’s portfolio is a thing of a beauty on every screen size.

Stretchy Pictures | Aegirscopic

Aegir is doing some very smart image enhancement in his (responsive) portfolio. Here’s the explanation.

Jess & Russ

This is so lovely! The story of Jessica and Russ’s romance, illustrated by fifteen of their friends.

Fluid Type | Trent Walton

Trent shares his ideas on handling line lengths in fluid, responsive layouts.

LukeW | Off Canvas Multi-Device Layouts

Luke and Jason have put together some demos of various “off-canvas” navigation patterns for responsive designs.

Subtraction.com: Built to Not Last

A spot-on analysis by Khoi of the changing perception of the value in product design, as exemplified by Apple.

Sketching A New Mobile Web - Smashing Mobile | Smashing Mobile

A great article on the importance of sketching for mobile-first responsive designs, complete with practical ideas for workshopping.

FixMyStreet

Not only is FixMyStreet responsive, it’s using the “display: table-caption” trick I documented for adjustable “content first/navigation second” source order.

Responsive workflow

One developer shares how his workflow has changed thanks to responsive design. It’s insightful.

The Great Discontent: Dan Cederholm

The lovely (and responsive) Great Discontent site has a lovely interview with Dan, who is lovely.

Kiwibank: Standing Up for Something New — Paul Robert Lloyd

Paul interviews the team behind Kiwibank’s responsive homepage. There are some great insights into their process here, like the way that copywriters worked side by side with developers.

A New Take on Responsive Tables by ZURB

An interesting approach to squishing down large data tables for small-screen viewing …though I wonder if there isn’t a “Mobile First” approach that could scale up, say, lists to become tables on large screens.

It’s Not Working For Me: #crit | Mark Boulton

Mark talks about design criticism. This makes a great companion piece to the Jon Kolko article on design criticism that I linked to last week.

Jordan Moore | Building With Content Choreography

Using flexbox to creata a narrow-column stacking order that’s unrelated to the source order.

notcoming.com | Not Coming to a Theater Near You

A terrific site dedicated to the love of film, all wrapped up in a wonderful responsive design.

Do you want critique, or a hug? | Austin Center for Design

Jon Kolko shares his advice on accepting design criticism.

Design Staff – Change aversion: why users hate what you launched (and what to do about it)

There’s some good advice here about launching a new design without pissing off your users (too much).

Official Google Webmaster Central Blog: Responsive design – harnessing the power of media queries

Advice on creating responsive designs from Google. It’s not exactly the best tutorial out there (confusing breakpoints with device widths) but it’s great to see the big guns getting involved.

Scalable Navigation Patterns in Responsive Web Design | Palantir.net

An case study that tackles complex navigation in a responsive site.

Deciding what Responsive Breakpoints to use | Tangled in Design

Another call for design-based (rather than device-based) breakpoints in responsive sites.

Creating a Mobile-First Responsive Web Design - HTML5 Rocks

A great step-by-step tutorial from Brad on developing a responsive site with a Content First mindset.

Mocking Up Is Hard To Do

This seems like an eminently sensible thing to do when building responsive sites: ditch mock-ups entirely. The reasons and the workflow outlined here make a lot of sense.

Clearleft Launches New Shopify Theme – Shopify Ecommerce Blog

Josh and Michelle have been hard at work making this responsive theme for Shopify. It’s quite lovely.

“Authenticity,” an article by Dan Mall

Cute. I gave Dan some advice. He made it look all pretty.

From Print to iPad: Designing a Reading Experience

Harry’s 15 minute case-study presentation at UX London was excellent. He says the lesson is that we shouldn’t be afraid to make mistakes, but there’s another lesson here too: testing with users will save your ass.

Paying attention to content hierarchy across screen sizes | Stuff & Nonsense

Andy points one of the potential pitfalls in linearising your content for small screens.

GDS design principles

A great set of design principles for gov.uk — I’ve added them to http://principles.adactio.com/

Throw away Photoshop and be true to your medium | Government Digital Service

How designing in the browser works for rapid iteration.

BBC - BBC Internet Blog: BBC News on mobile: responsive design

BBC News are using the mobile subdomain to plant the seed of responsive design. It’s a smart move that’s been really nicely executed.

ESPI at work: The power of Keynote| Edenspiekermann

Using Keynote as a web design tool? Why not? It makes as much sense as Photoshop or Fireworks, perhaps more.

A List Apart: Articles: Style Tiles and How They Work

Samantha does an excellent job of explaining how useful style tiles can be for visual design and iteration.

Shirky: View Source… Lessons from the Web’s massively parallel development.

An oldie but a goodie: Clay Shirky looks at the design principles underlying HTML in order to figure out what made it so successful. Even though this is fourteen years old, there are plenty of still-relevant insights here.

Content Folding | CSS-Tricks

An interesting idea from Chris: instead of linearising content on smaller screens, what if you could interweave it instead? Theoretically, CSS regions makes it possible, regardless of source order.

Fashionably flexible responsive web design (full day workshop) // Speaker Deck

The slides from Andy’s one-day responsive design workshop are well worth a perusal.

Script Junkie | Flexibility: A Foundation for Responsive Design

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

Jordan Moore | Web Design, Northern Ireland, Bangor, Freelance

A sweet little meditation on the nature of the web and responsive design.

Off Canvas

Inspired by Luke’s documentation of layout patterns in responsive designs, Jason goes into more detail on the pattern of hiding navigation and extra content to the left and right of the viewport on small screens.

Style Tiles

Samantha put together this handy one-page site to explain Style Tiles as part of her South by Southwest presentation.

LukeW | Multi-Device Layout Patterns

Luke catalogues layout patterns in responsive designs.

Abstract Sequential - Print Styles Are Responsive Design

An excellent piece by Stephanie on how to approach print stylesheets. I’ve always maintained that Print First can be as valid as Mobile First in getting you to focus on what content really matters.

Scaling with EM units

Using em-based media queries to incrementally bump up the font size for larger viewports.

How I’m implementing Responsive Web Design – JeffCroft.com

Jeff documents some of the techniques he’s using to tackle responsive design, with some tips specifically for SASS.

Wilson Miner

Wilson has turned his site into a single-serving page that’s doing some interesting things with media queries (using height as well as width).

Responsive Summit » Blog » Elliot Jay Stocks

Elliot jots down some of the issues discussed at the responsive summit.

Frank Chimero — Blog

Frank has redesigned his site and it’s quite wonderful: a real reflection of his personality and outlook.

Oh, and it is, of course, responsive.

Thoughts on Responsive Navigation

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

A Responsive Design Approach for Navigation, Part 1 | Filament Group, Inc., Boston, MA

A detailed overview by Filament Group on progressively enhancing navigation for responsive sites.

Responsive Summit: The One Tool | Mark Boulton

Mark talks about the tools web designers use and the tools web designers want. The upshot: use whatever you’re most comfortable with.

How I Learned to Stop Worrying and Love Responsive Images — Paul Robert Lloyd

Here’s a great braindump from Paul following the Responsive Summit, detailing multiple ways of potentially tackling the issue of responsive images.

JoshEmerson.co.uk · Blog · The Responsive Process

Josh goes through the talking points from the recent Responsive Summit he attended. Sounds like it was a great get-together.

Responsive Design: Why You’re Doing It Wrong | Design Shack

A rallying cry for a content-focused—rather than device-focused—approach to responsive design. Despite the awful title and occasionally adversarial tone, this article is making a very good point about being future friendly.

Responsive Navigation Patterns | Brad Frost Web

Brad does a great job of rounding up various design patterns used for navigation in responsive sites.

Dress Responsively, LTD

The site’s a mockup but if you want it badly enough, these responsive-themed T-shirts could be real.

Responsive Summit • London 23rd Feb 2012

Typical! I leave the country and this excellent gathering gets organised while I’m away. I wish I could be there.

Let them know in advance if you have any responsive-related questions they should tackle.

Structure First. Content Always. | Mark Boulton

Some clarifying thoughts from Mark: “content first” doesn’t have to literally mean having the final content first …but it does mean knowing the structure of the content.

Redefined | Trent Walton

Man, I love Trent’s honesty! This had me nodding my head vigorously — yes, responsive design means fundamentally approaching the way we build for the web …that’s what makes it so exciting!

I suspect that some naysayers of responsive design, were they to do some soul-searching, would find themselves relating to Trent’s initial scepticism.

GREY GOOSE® Vodka | The World’s Best Tasting Vodka

This beautiful site not only features the oh-so-trendy vertical parallax, but it’s responsive too. Impressive!

How to Approach a Responsive Design | Upstatement

A great behind-the-scenes look at the process behind the responsive Boston Globe site, with a particular emphasis on the visual and interactive design challenges.

BenjaminKeen.com

A bookmarklet version of that handy multiple-iframe page I linked to the other day. Even more useful for testing responsive designs!

Travis Schmeisser: We Used To Build Forts on Vimeo

I loved this talk from Travis at New Adventures in Web Design, especially when he talked of the importance of Geocities and MySpace in democratising creative expression on the web.

We may have later bonded over that Ze Frank quote while in the toilet at the after-party …there may have even been hugs.

Bricss - Simple responsive design test page

A handy little document to load pages into differently-sized iframes—useful for testing responsive designs.

Nathan Sawaya — The Art of the Brick

Chloe built a gorgeous responsive site …and it’s all about LEGO!

“Girls like modern technology. Like telephones and apps. It isn’t rocket science.”

Ell oh ell.

United Pixelworkers — Welcome

Pixelworkers have relaunched with a very nice responsive design.

Building a Responsive, Future-Friendly Web for Everyone | Webmonkey | Wired.com

A nice round-up of responsive and future-friendly resources.

Bureau of Common Goods | A creative film production company

You can now hire Mandy and Keith to make gorgeous films. Their website is, unsurprisingly, beautifully crafted.

Choosing device sizes to support for your responsive designs | Matt Wilcox .net

Another plea for content-out rather than canvas-in design.

Gardens and Zoos – Blog – BERG

A lovely piece from Matt examining agency and behaviour in the things we surround ourselves with: frying pans, houseplants, pets, and robots.

These are the droids you are looking for.

What The Heck Is Responsive Web Design?

A short introductory presentation on responsive design.

A Responsive Design Approach for Complex, Multicolumn Data Tables | Filament Group, Inc., Boston, MA

A really nice pattern for data tables in responsive designs. Just as with conditional loading, the key point is making a distinction between essential and optional content.

Rebecca Cottrell » Where visual design fits in a design process

I think Rebecca is on to something here. Everyone has been so quick to self-identify as a UX designer while marginalising visual design as a purely surface-level layer …but it’s all part of the design process.

The Icon Handbook | The Hickensian | Hicksdesign

Jon gives us a run-through on what to expect from his new book. I’ve had a sneak peek and it looks amazing—I can’t wait to get my hands on a copy.

Designers, what’s the rush? | Normative - Design for Devices and the Web

A plea for more time.

We tend to think in 2 to 5 year scales, maybe we need to be thinking in longer time lines about our own careers and skills.

Mobile content strategy link-o-rama 2011 « Karen McGrane

A great round-up of links and posts relating to the increasingly-important role of content strategy and structured content in our multi-device, responsively-designed online world.

yongfook - Design is Horseshit!

There’s a good point buried in this tirade.

Here’s a more positive spin: with this much horseshit, there’s gotta be a horse in there somewhere.

Design Principles // Speaker Deck

The slides from my presentation at this year’s An Event Apart. Such a fantastic event …it was an honour to be on the roster.

Jeremy Keith - There Is No Mobile Web - BD Conf, Sept 2011 on Vimeo

The video of the opening keynote I delivered at the Breaking Development conference in Nashville earlier this year. It expands on the One Web presentation I gave at DIBI, focusing on the language we use to talk about our approaches to web development.

We Are Historians | 1sixty

A beautiful reminder that by publishing on the web, we are all historians.

Every color you choose and line of code you write is a reflection of you; not just as a human being in this world, but as a human being in this time and place in human history. Inside each project is a record of the styles and fashions you value, the technological advancements being made in the industry, the tone of your voice, and even the social and economic trends around you.

Athena - MediaWiki

Documentation of an ongoing project to create a mobile-first responsive MediaWiki theme.

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

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

Barack Obama

It’s responsive. It looks great. It’s using HTML5 structural elements and microformats.

Mark Boulton on designing websites using ‘content out’ | Interview | .net magazine

Mark continues to hammer home the most important thing to keep in mind when creating responsive designs: design from the content out, not the canvas in.

ART=WORK · Responsive Advertising

Some more thoughts on the challenges of combining advertising with responsive design.

Structuring a Responsive Stylesheet | Sparkbox

Some thoughts on structuring your CSS for responsive designs.

Responsive Advertising| Mark Boulton

A great in-depth look at the tricky problem of advertising in responsive design from Mark.

You Say Responsive, I Say Adaptive | Sparkbox

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

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.

Elena Font Family | Process Type Foundry

A lovely new typeface from Nicole Dotin that’s available to purchase as a web font under the very reasonable terms of the Process license agreement.

Foundation: Rapid Prototyping and Building Framework from ZURB

A framework for banging out ready-made responsive designs.

Sly Mongoose: A Responsive Digital Comic Proof-of-Concept

A responsively designed comic. Yeah, you heard me right. Responsive. Comic!

Productivity Future Vision (2011) - YouTube

This vision thing commissioned by Microsoft shows a future-friendly networked world where content flows like water from screen to screen.

First Responder | Rob Weychert

Rob documents how he approached his first responsive design.

Hello Again | Rob Weychert

Rob is back.

Ethan Marcotte’s 20 favourite responsive sites | Feature | .net magazine

Ethan compiles a list for .net magazine of twenty of his favourite responsive designs.

WSOL :: Envisioning a Responsive Future :: Design Beyond Device

A great collection of the future-friendly techniques of today: progressive enhancement, mobile first and responsive design.

The typography-out approach in the world of browser-based web design » Blog » Elliot Jay Stocks

An insight into Elliot’s current design process which highlights the advantages of designing in the browser when you take a content-first approach.

Caleb Ogden

The process behind a responsive realignment …and the end result is very nice indeed.

That Squiggle of the Design Process | Central

A visual representation of the design process.

Upperdog Labs: Video Canvas Responsive Design - YouTube

I never expected to see a cross between responsive design and AR, but here ya go:

A silly mashup of HTML5 technologies: We use the canvas to capture the contents of a video element. The canvas then identifies the blue markers and overlays an iframe on top of it. The iframe contains our website (upperdog.se) which has a responsive design.

Science fiction, fantasy, design and cultural invention | Design Culture Lab

Asking what the difference is between science fiction and design fiction. The answer may be …usefulness.

Fluid Baseline Grid - A sensible HTML5 and CSS3 development kit

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

The Great Discontent

A lovely interview site that has been beautifully and responsively designed.

How the Boston Globe Pulled Off HTML5 Responsive Design

I’m sitting here in Nashville with Scott, who has been answering questions from Read Write Web about the Boston Globe launch. Here’s the resulting article.

The technology behind the new BostonGlobe.com on Vimeo

A slick little video that goes behind the scenes of the Boston Globe site.

BostonGlobe.com | Upstatement

A lovely responsive portfolio showcasing a lovely responsive site. Responsinception!

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.

LukeW | Breaking Development: There Is No Mobile Web

Luke’s notes from my talk at the Breaking Development conference in Nashville summarise my points nicely.

The Boston Globe — Unstoppable Robot Ninja

Ethan chronicles the story of the Boston Globe site and his part in it.

HTML5 vs Newton: The Boston Globe | Flickr - Photo Sharing!

This photograph made my day: the brand new Boston Globe site running on a Newton.

Progressive enhancement. It works.

Pragmatic responsive design

I’ve just seen this incredible presentation from Stephanie Rieger at the Breaking Development conference in Nashville. It’s absolutely packed full of fantastically useful ideas. You really should’ve been there, but these slides can give you a taste of the presentation.

Responsive design and JavaScript - QuirksBlog

Unfortunately this article from PPK is flawed from the start: his first point (upon which all the subsequent points are based) is fundamentally flawed:

Right now responsive design is graceful degradation: design something for desktop and tablet, and remove stuff for mobile.

That’s not the way I’m doing responsive design. Responsible responsive design marries it with a mobile first approach (or more accurately, content first).

LukeW | RESS: Responsive Design Server Side Components

Luke proposes a development approach that marries the best of responsive design with content negotiation. It makes a lot of sense. I like it.

The Boston Globe

It’s here. A large-scale commercial site with a gorgeous responsive design. Try it on any device.

This is the first of many.

Mark Boulton on layouts and grid systems | Interview | .net magazine

In this interview Mark discusses the “content out” rather than “canvas in” thinking that informs his new canon.

LukeW | Why Separate Mobile & Desktop Web Pages?

Luke enumerates the reasons why Bag Check has a separate desktop website rather than one responsive URL for desktop and mobile. They’re good reasons but I think they could all be addressed with some clever conditional loading, especially seeing as the site was, of course, built mobile first.

dConstruct and Responsive Design - Ubelly

A look under the hood of the dConstruct website (including some nth-child selectors I threw in there).

How Responsive Web Design becomes Responsive Web Publishing - AQ » Blog

Some interesting questions (and one or two answers) about how responsive design affects publishing on the web.

Weightshift — Memo: The New Design

Naz shares his advice for up-and-coming designers …and the institutions that educate them.

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.

Registration | Frontend 2011

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

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.

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.

Design Firm Seeks to Humanize Technology - NYTimes.com

Those lovely BERG chaps profiled in the New York Times.

FAUXGO

Fictional logos.

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.

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.

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.

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.

Responsive Web Design! | Jessica Hische

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

Food Sense | Plant-Based Eating At Its Best

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

Paul Lloyd’s Presentations // Speaker Deck

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

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.

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.

Structured Content, Shifting Context: Responsive Design, Content Strategy

The importance of structured content for longevity and responsiveness.

The Robot-Readable World – Blog – BERG

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

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.

Paul Robert Lloyd

Paul has redesigned. Again. It’s gorgeous and it is, of course, responsive.

BBC - BBC Internet Blog: BBC World Service Language Websites: user experience and typography

A fascinating look at the intersection of typography and internationalisation on the BBC’s World Service site.

Responsive Design Testing

Another browser-based tool for viewing the same site at different sizes, but this one displays them all the same time, side by side.

ProtoFluid. Rapid Prototyping of Adaptive CSS and Responsive Design.

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

ART=WORK · Design for a Target Experience First

A thoughtful post on how to approach responsive web design. In short, it’s going to be different for every project.

responsivepx - find that tricky breakpoint

Remy created this tool for resizing a viewport to figure out where to put the breakpoints in your media queries.

Screenfly by QuirkTools — Test Your Website at Different Screen Resolutions

A handy little service for viewing sites at different dimensions. Just be aware that it doesn’t actually emulate different devices.

Responsive images with ExpressionEngine — John Faulds

Here’s an approach to responsive images in the Expression Engine CMS …but I fundamentally disagree with the UA-sniffing required.

Responsive images using CSS3 – Nicolas Gallagher

Once there’s better support for the CSS3 attr() function, this could be a nifty way of handling responsive images (although large-screen user-agents will download more than one image).

Responsive images right now — CSS Wizardry—CSS, Web Standards, Typography, and Grids by Harry Roberts

Another approach to responsive images, this time using background images. The disadvantage is that large-screen devices will download both images. Still, pretty darn clever.

Responsive images using cookies | Keith Clark

A well-thought approach to responsive images (although personally, I would use cookies to store the dimensions of the viewport rather than the dimensions of the screen).

Beautiful Swear Words

A swear word a day, typeset.

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.

Content Choreography | Trent Walton

A wonderful post by Trent Walton on the thinking and workflows we can employ with responsive design. So many opportunities!

Web designers will have to look beyond the layout in front of them to envision how its elements will reflow & lockup at various widths while maintaining form & hierarchy. Media queries can be used to do more than patch broken layouts: with proper planning, we can begin to choreograph content proportional to screen size, serving the best possible experience at any width.

Mobile-First Responsive Web Design | Brad Frost Web

A nice round-up of responsible responsive web design techniques, ‘though I would go a bit further and suggest that the rallying cry is not so much about Mobile First but Content First.

Responsive by default - Blog | Andy Hume

A superb long-zoom view of responsive design from Andy. He also talks about the pragmatism required from any front-end developer.

Red Pop - the big red button for your iPhone camera!

Brendan’s latest product looks like it’ll be a thing of beauty. But he needs help getting it funded on Kickstarter. If you like taking pictures with your iPhone, I suggest you back this project.

To hell with bad devices: Responsive web design and web standards | Marc Drummond

An excellent summation of one web developer’s journey with responsive web design.

Frank Chimero’s Blog - The Storm and The Line

A beautiful dose of perspective from Frank.

LukeW | An Event Apart: Design Principles

Luke’s notes from my talk at An Event Apart in Atlanta.

Responsive Data Tables | CSS-Tricks

Some good ideas for formatting tabular data for small screens.

Two Years — Paul Robert Lloyd

On the two-year anniversary of his arrival at Clearleft, Paul takes a look at where the craft of web design is today and where it’s heading tomorrow.

Accessibility. You’re doing it wrong. | nicepaul.com

Ignoring the awful misleading title, this is a really good post from Paul on his personal experiences dealing with accessibility on one or two projects.

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.

Tips, Tricks and Best Practices for Responsive Design | Webmonkey | Wired.com

A nice round-up of responsive design techniques, with a particular focus on content first.

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

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

Chloe Weil

Chloe’s redesign/realign is a lovely bit of HTML5 and CSS3 all wrapped up in a responsive layout.

susan jean robertson » We are the minority

Another great post from Susan. Not only are we making unwarranted assumptions about what the mythical mobile user wants, we’re basing those assumptions on the worst possible user base: ourselves.

Kisko Labs - Making kiskolabs.com responsive

Another write-up of a responsive redesign.

David Bushell – Graphic

Once again the importance of a Content First approach to responsive design is made clear:

What responsive technique do we use? Whatever suits the content best.

Layer Styles

A handy little GUI for generating CSS declarations for shadows, gradients, opacity and border radius.

Brighton Digital Festival

September in Brighton is going to be ker-razy! Here’s a nice responsive holding page listing just some of the events that will be going on …dConstruct, Maker Faire, Flash On The Beach and more.

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.

The Goldilocks Approach to Responsive Web Design

A nice little demo of the “content out” approach to responsive design.

susan jean robertson » Assumptions

Susan pushes back on the notion of the mythical mobile user.

The ‘Science’ of Good Design: A Dangerous Idea - Ben McAllister - Life - The Atlantic

The perils of “scientism” in design. Reading this reminded me of Google’s forty shades of blue.

Dribbble - My Secret for Color Schemes by Erica Schoonmaker

A very useful tip for creating cohesive colour palettes.

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.

Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement — Easy Readers

Buy. This. Book.

I mean it.

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.

css Zen Garden: All-In-One

This is cute: using media queries to display multiple CSS Zen Garden submissions without refreshing the page — just adjust your browser window.

Push Pop Press: Al Gore’s Our Choice

This looks like a beautiful way to present information, although it seems a real shame that the information is locked to just one class of device.

David Emery Online: Response

David rejects a redesign in favour of a bit of responsive tweaking — and very nice it is too.

Developing the OAuth user experience at Twitter

Ben documents the improvements in Twitter’s OAuth flow. Maybe this will help to stop people blindly giving permission to dodgy third-party sites to update their Twitter stream.

Content Only | tomphippen.com

Tom Phippen points to an excellent real-world example of a print layout that’s superior to the desktop version.

United Pixelworkers — Ethan Marcotte

I am very fond of this T-shirt that Ethan designed.

It’s the Little Things - “Mobile” versus “Small Screen”

1. A “small screen” user is not necessarily a mobile user.
2. A “small screen” device is not necessarily a mobile one.

See also: bandwidth.

In Radiolab We Trust

A great way of supporting the best podcast on the planet: a limited set of prints by five designers, illustrators and artists. Grab yours quick before they’re all gone.

More Responsive Design, Please « Jason Things

A good analysis of many of the factors involved in web design, of which responsiveness is clearly an important part.

Responsive Design Stuff

A handy list of responsive design resources.

Samantha Warren’s Web Design Blog | Design ~ Web Typography ~ Inspiration

An excellent design technique from Samantha that allows you to nail down a visual vocabulary without using something as wishy-washy as a mood board or as rigid as a fully-blown comp. Brilliant!

The style tile is not a literal translation of what the website is going to be, but a starting point for the designer and the client to have a conversation and establish a common visual language.

Beyond the mobile web by yiibu

Aaaaaand once again, the Riegers show us the way. This time it’s Stephanie’s presentation at Breaking Development in Dallas. Bloody brilliant.

Jeremy Keith Interview: Web Standards and Design Principles at An Event Apart

A quick chat with me in the hallway after my talk in Seattle.

The fall and rise of user experience : Cennydd Bowles on user experience

Cennydd’s closing remarks from this year’s IA Summit. Huzzah!

Do Lectures - Ideas that inspire action

The redesign of the Do Lectures site is gorgeous (and responsive).

BBC News - Are you experienced? Business and the web user experience

A nice overview of the increasing importance of UX on the web, written by Bobbie with soundbites from Andy.

LukeW | An Event Apart: Design Principles

Luke’s notes from my talk at An Event Apart Seattle do a good job of capturing the gist of what I was saying.

Adam Greenfield at Cognitive Cities Conference on Vimeo

On Public Objects: Connected Things And Civic Responsibilities In The Networked City.

This Place is Not a Place of Honor on Vimeo

A demo reel for the proposed solution to a very, very, very long term problem.

Story Matters

Magazine creators share their experiences of going digital.

Weekend Reading: Responsive Web Design and Mobile Context « Cloud Four

Jason Grigsby pulls together a bunch of links related to responsive design, mobile web and that tricky context problem.

Dig the new breed | Stuff and Nonsense

Like Malarkey, I welcome our future responsive design progeny overlords.

Toffee-nosed. — Unstoppable Robot Ninja

A superb explanation of rhetorical devices by Ethan.

A Richer Canvas: Mark Boulton

An excellent statement of intent from Mark. You can either read this now and start creating websites the right way, or you can scrabble to catch up further down the line; I recommend reading this now.

Embrace the fluidity of the web. Design layouts and systems that can cope to whatever environment they may find themselves in. But the only way we can do any of this is to shed ways of thinking that have been shackles around our necks. They’re holding us back.

Start designing from the content out, rather than the canvas in.

Geek Ninja Battle Night | Stuff and Nonsense

Andy hammers home the benefit of a long-term format like HTML compared to the brittle, fleeting shininess of an ephemeral platform-specific app.

Ribot - interface innovation

Fellow Brightonians, the brothers Ribot and co., launch an excellently responsive company site.

The Mobile context

Yes! Yes! Yes! Mark nails it: just because someone visits a site with a certain kind of device doesn’t mean you can make assumptions about their intentions.

• Mobile != low download speed
• Context != intent

I’m a designer who learned Django and launched her first webapp in 6 weeks | Limedaring.com

I love hearing stories like this. Anything that breaks down the perceived designer/developer divide is a good thing, in my opinion.

It’s About People, Not Devices | UX Booth

An excellent article from Bryan, hammering home the point that there is no sharp dividing line between desktop and mobile.

Remember as well that the most ubiquitous of technologies, the common thread throughout many connected devices, is the browser. Browser-based experiences may not always be as sexy, but they are often far more capable of adapting to different contexts. In times of rapid change, adaptability—rather than features—may be your product’s greatest ally.

3quarksdaily

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

Forever Future | Sascha Pohflepp

The intriguing tale of a fictional archivist, storing past visions of the future in a storage facility that acts as a space ark.

He has put money in the bank which will pay for the space well beyond his lifetime. Each year he collects technological predictions that had been made for that year and conserves the ones that didn’t come true in the form of 35mm slides. The ship itself consists of a refrigeration unit to help preserve the slides, a slide projector and light box in case these technologies have become extinct by the time of its recovery, and a system to get power from the outside. In an annual ritual on April 11th Walker adds another box to the mission.

My Father’s Final Gift « Aza on Design

The beautifully-written and moving story of a father’s last gift to his son. The father is Jef Raskin; the son is Aza Raskin.

The Shape of Design by Frank Chimero — Kickstarter

Frank Chimero is funding his book through Kickstarter. Definitely a worthwhile investment.

Media Queries

A curated collection of responsive web designs.

Ben Bashford - Notebook of Things - Emoticomp

How does an object’s character and/or behaviour tie in with communicating its purpose in life, how it looks and how it should be used?

Responsive Web Design fun and experimentation | Handcrafted Pixels | Pixel Creation

A nice little test page for responsive design techniques.

LukeW | Device Classes

Luke points to the sweet spot between creating endpoints for classes of devices, and using responsive design to allow them to adapt.

Stephen Caver

A beautiful responsive design, within the confines of Tumblr.

Anna Debenham

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

SYMBIOTIC HOUSEHOLDS on Vimeo

Design fictional biohacking.

RORY HYDE PROJECTS / BLOG » Blog Archive » ‘Know No Boundaries’: an interview with Matt Webb of BERG London

Matt is, as usual, eloquent and inspiring.

The Year in Pictures: Passages — USA TODAY

A really nice example of responsive web design from an unexpected source.

URL Design — Warpspire

An excellent collection of best practices for designing URLs. I found myself nodding vigorously along with each suggestion.

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.

Near Future Laboratory » Blog Archive » Designing Fiction in Volume Q.

Julian Bleecker explains design fiction in the context of science fiction using the examples of gestural interfaces and virtual reality.

adaptive path » making design principles stick

Kate Rutter on the importance of keeping design principles out in the open.

Shanzai! (Wired UK)

Bobbie documents the work of Jan Chipchase, currently looking into the design decisions behind counterfeit goods on sale in Shanghai.

Comic Sans Criminal - There’s help available for people like you!

A somewhat condescending piece of work about Comic Sans …from a designer who uses the oh-so-passé Museo on his personal site.

Live by the judgemental sword, die by the judgemental sword.

9 hours (9h) Designer Capsule Hotel Review - Kyoto, Japan

A fascinating look at the experience design of the 9h brand of capsule hotel. I like the consistent use of colour, light and iconography.

pixeldiva - Beautiful Design for Everyone

The notes and slides from the talk Ann gave at the London Web Standards meetup in May.

Support Web Standards: More information about Web Standards, why they're important, and how you can support them.

A one-stop link shop for resources on web standards.

Styleguides for the Web — Paul Robert Lloyd

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

41Latitude - Google Maps & Label Readability

An examination into the legibility of labels on online mapping services.

Seth's Blog: The inevitable decline due to clutter

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

Ben the Bodyguard. Coming soon to iPhone® and iPod touch®

An interesting way of using scrolling to tell a story.

The Personal Disquiet of Mark Boulton

A beautiful new responsive design from Mark.

Adfont Calendar 2010 | A free font every day from Fontdeck

It's a type drawer that's also an advent calendar. Responsive too. Check it every day between December 1st and 24th.

Mayo Nissen » City Tickets

I really like this idea for connecting cities to the papernet.

Experimenting with responsive design in Iterations - (37signals)

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

The 1140px CSS Grid System/Framework · Fluid down to mobile

A fluid grid that linearises at smaller viewport widths.

80s ALBUM ART RECREATED IN CSS ALONE | Monkeon | Web Design Leeds

A neat little experiment in replicating classic 80s albums using CSS.

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

Aza Raskin on the UI failings of kitchens.

Stop! You are doing mobile wrong! | Metal Toad Media

An excellent summation of the responsive enhancement approach to web development.

Never finished, rarely simple - Preoccupations

An excellent overview of the evolution of the St. Paul's School website from David Smith, noting an increasing emphasis on mobile usage.

Yiibu - About this site...

A great explanation of the responsive enhancement of this site.

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.

With Good References — Unstoppable Robot Ninja

Ethan shares his thoughts on the role of the reference design in the responsive workflow.

Journalism in the Age of Data: A Video Report on Data Visualization by Geoff McGhee

Telling stories with data — the video.

Evening edition - Bobulate

A lovely idea, nicely implemented: time-conditional CSS.

George Lucas Stole Chewbacca, But It’s Okay « Binary Bonsai

A fantastically detailed look by Michael at the evolution of the design of Chewbacca.

Good Fucking Design Advice

This will be a useful resource to peruse after you've figured out what to have for fucking dinner.

Lost World's Fairs

Lovely typographic showcases from Stan and friends.

Chop Shop / Radiolab / Radiolab: Goat and Cow

If you're a long-time listener to Radiolab, this T-shirt will make sense to you. I want it.

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.

Mule Design Studio’s Blog: Why We Don’t Deliver Photoshop Files

Yes, yes, yes: "A PSD is a painting of a website.” We don’t spend weeks or months understanding a client’s complex needs and issues to make them paintings.

BBC - Radio 4 Blog: Some changes to the Radio 4 web site

A few notes on the recent re-align of the Radio 4 website by Clearleft.

Frank Chimero

A whole bunch of Jenny Holzerisms for you to turn into bumper stickers.

Interesting Letterhead Designs | Letterheady

A fantastic blog of letterheads. Some of the typographic choices are perfect.

The next film: Urbanized by Gary Hustwit

Soon the trilogy will be complete: a documentary on urban planning sounds like the perfect way for Gary Hustwit to follow up Helvetica and Objectified.

Ask H&FJ: Four Ways to Mix Fonts

A nice look at some rules of thumb for combining typefaces.

Frank Chimero — Holiday

Burnout is a bitch.

Design at the End of the World, by Ben Fullerton - Core77

Designing for the apocalypse.

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.

LukeW | 10 Things I Learned In Web School

A nice manifestlet.

Understanding Graphics — Design For The Human Mind

A site on designing with data from the author of Visual Language For Designers: Principles For Creating Graphics That People Understand.

Finally ° a fluid Hicksdesign ° The Hickensian ° Hicksdesign

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

Typograph – Scale & Rhythm

A handy tool that generates font-sizing CSS based on a drag'n'drop interface.

Rams’ Principles Series: 7 of 10 | Inksie Journal of Design & Culture

Mandy's take on Dieter Rams's design principle that "good design is long-lasting."

Designing with Social Skills | Darren Hoyt Dot Com

An examination of websites behaving conversationally, including Huffduffer.

Design Swap - Spreading camaraderie through good design

An exercise in collaboration and perspective: let another designer touch your website while you touch theirs.

Don’t listen to Le Corbusier—or Jakob Nielsen : Cheerful

A beautiful call to arms against engineerism in design. Software cries out for love.

Front-End Design Conference - July 23, 2010

This web conference in July in St. Petersburg, Florida looks great — the line-up is excellent and tickets cost just $99. Bargain!

CSS3 Background-Clip Text & @font-face

A lovely bit of CSS3.

Building Social Web Applications

The blog of the book by Gavin Bell.

Designing for the Web: A book by Mark Boulton

Mark's superb book is available in HTML for free. Read it now but be warned: it will only make you want to buy the real deal.

SXSW Design Workshop - Friday, March 12, 2010 from 2-6pm

Three back-to-back talks on web design at South by Southwest.

Books in the Age of the iPad

A detailed look at traditional and digital publishing, considered from the content out.

Design discussions: Paul Shaw and the NYC Subway: idsgn (a design blog)

"There is a common misbelief that Helvetica is the signage typeface of the New York City subway system. In this ‘Design discussions’, we talk to the author who has uncovered the truth (maybe) behind the story."

A New Visual Design Language for BBC Online — Paul Robert Lloyd

Paul takes an in-depth look at the new BBC design guidelines.

Olia Lialina. A Vernacular web. Indigenous and Barbarians.

A wonderful trip down memory lane to the amateur web of the 90s.

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.

Revised Font Stack | A Way Back

A thoroughly researched and well-written look at font stacks, with some practical suggestions and advice.

News week, day 1 (Phil Gyford’s website)

The sad state of online newspapers (the design this time, not the business).

ignore the code: Realism in UI Design

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

In Defense of Lorem Ipsum « Karen McGrane

Good points, well made.

Internet Online Website!

This is a work of genius. This... this is a joke ...right?

My favourite fonts of 2009 | i love typography, the typography and fonts blog

Some beautiful typefaces here, gathered together for your enjoyment.

Digital Podge 2009 - Measurable Fun | 17th December 2009

This is a gorgeous-looking website. I have no idea what it's about.

52 Weeks of UX

Joshua Porter and Joshua Brewer will write one post a week, kickstarting a discussion on user experience.

Redesigning the Boarding Pass - Journal - Boarding Pass / Fail

The redesign of everyday things.

Designing Devices | Controls are Choices

Balancing complexity and control.

Is modern web design too like print design? (Phil Gyford’s website)

Yes. Yes. YES! "We’ve shaken off the restrictions of the early days, opened up all kinds of technical possibilities, but web design seems less exciting and less experimental than it did fifteen years ago."

FUI Fantasy User Interfaces | Mark Coleran Visual Designer

A portfolio of imaginary interfaces as seen in the movies.

Build It With Me

A nice resource (built in HTML5) to connect developers and designers who want to Make A Thing.

How a Web Design Goes Straight to Hell - The Oatmeal

I don't know whether to laugh or cry.

"It's like twitter. Except we charge people to use it."

This is just wonderful. "Please design a logo for me. With pie charts. For free."

RCA student radically improves the UK plug | ICON MAGAZINE ONLINE

Superb product design.

101 Things I Learned in Interaction Design School

A set of short, easily-digested lessons from the world of interaction design, inspired by "101 Things I Learned In Architecture School."

Humanising data: introducing “Chernoff Schools” for Ashdown – Blog – BERG

Matt gets an opportunity to use the Chernoff effect for visualising school data.

Cadence & Slang is a book about interaction design. — Kickstarter

If you want to see this book published (and you should), why not pledge a little something to the cause?

Log in or sign up? - Leah Culver's Blog

Leah has some great ideas on combing "log in" and "sign up" forms into one.

Calligraphy by Nancy Howell

Wonderful calligraphy — something we don't make much use of on the web.

Welcome - The Bold Italic - San Francisco

A beautifully designed location-based web magazine.

Service Design Tools | Communication methods supporting design processes

A nice collection of design tools and methodologies.

A Cohesive & Unified Identity for British Government — Paul Robert Lloyd

In search of typographical consistency in government departments.

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.

We are Colorblind » Patterns for the Color Blind

A pattern library that considers colour blindness.

London Reconnections: A Typeface for the Underground

A wonderfully engaging history of Johnston Underground.

ThinkGeek :: Stuff for Smart Masses

Scroll to the bottom to see a nice robots-into-zomies effect.

In praise of the sci-fi corridor - Den of Geek

This is wonderful, just wonderful; an in-depth piece on corridors in science fiction movies. Swoon!

The Good Enough Revolution: When Cheap and Simple Is Just Fine

A great article about the rising prevalence of "rough consensus and running code" in the real world.

Erik Spiekermann | design mind

Erik Spiekermann expounding on the beauty – and the difficulty – of designing numbers.

Typedia: A Shared Encyclopedia of Typefaces

Like Wikipedia for typefaces. Beautiful work from Jason, Dan, and others.

Goudy Fonts

"A tribute to two former bookkeepers who impacted American design & typography for all time."

Radio - The New York Moon

Gorgeous visual design for an interestingly eclectic site.

Chroma-Hash Demo

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

Contact Us « Kellan Studios

Nice Huffduffer-style contact form.

Extract colors from photos and make color schemes | ColorSuckr

A very handy tool for extracting colour schemes from photographs.

Questionable Characters | Home

A beautifully presented site wherein Ben and Frank endeavour to answer your design-related questions.

the Movie title stills collection

Prepare to lose yourself in this collection of movie titles from the 1920s to the present day.

teoskaffa.com AND THAT'S WASSUP

I don't normally like all-Flash sites and I really don't like sites that mess with my cursor* but this one works really well. * I'm looking at you, Harry Potter Twitter site with the password anti-pattern.

Web fonts. Where are we? Will web fonts ever be a reality? | i love typography, the typography and fonts blog

A great round-up on the current state of web typography following TypeCon 2009.

The Typography Manual - For the iPhone and iPod Touch

A glossary of typography that you can carry around with you.

Moof

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

The New York Review of Ideas

The colour scheme is a little odd (though I expect this will change from month to month) but the typography is tasteful and the content is king.

Final Eyes: Jen Schuetz, Proofreader & Quality Assurance. San Francisco, CA.

Georgeous typography.

HANDCRAFTED CSS by Dan Cederholm with Ethan Marcotte

Double the awesomeness: Dan and Ethan made a book ...and a DVD ...and a workshop.

CSS3 – a big storm is coming | Reinhold Weber

A nice rundown of media queries and multiple columns in CSS3.

Slide 1 of 44 (Scope at reboot11, Matt Webb, S&W)

Matt's opening keynote from Reboot 11 in Copenhagen.

which way?

A collection of directional signage & wayfinding artifacts, well-executed or otherwise.

FormFiftyFive - Design inspiration from around the world

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

Walls Come Tumbling Down presentation slides and transcript | For A Beautiful Web

Andy's excellent presentation from An Event Apart in Boston and @media in London. Required reading/viewing.

YourLogoMakesMeBarf.com

The ugliest logos in history.

Styling buttons to look like links | Natalie Downe

An excellent tutorial from Nat explaining how to deal with those situations where you should be using a button but the design calls for it to look like a link.

Incredibles - The Chairs

All the chairs in Pixar's The Incredibles.

Nice Web Type Suggests: Graublau Sans with Lucida sanserif

A great example of @font-face in action: comparing Graublau Sans Web with with Lucida Grande.

Redesign Mozilla

Follow along as Happy Cog document the process of redesigning the Mozilla website.

Near Future Laboratory » Blog Archive » Design Fiction: A Short Essay on Design, Science, Fact and Fiction

Download the PDF of this essay from the Near Future Laboratory and wallow in the sci-fi/tech/design goodness.

Ping - Should Design Be Held Back by a Tyranny of Data? - NYTimes.com

Douglas is featured in The New York Times (and look: there's Dustin behind him).

What’s Golden | Jason Santa Maria

An excellent piece by Stan in which he questions (without rejecting out of hand) applying proportion-based rules to the web, a medium with inherently fluid proportions.

Pulse Laser: Here & There influences

Jack Schulze goes into detail on the genesis of the wonderful Here & There map/visualisation.

H&FJ News | Hoefler & Frere-Jones

A nice concise look at the ampersand.

The League of Moveable Type

"We're done with the tired old fontstacks of yesteryear. Enough with the limitations of the web, we won't have it. It's time to raise our standards. Here, you'll find only the most well-made, free & open-source, @font-face ready fonts."

Complex inferiority: user experience in the UK

A thoughtful piece by Cennydd on the state of UX in the UK.

Tal Leming » Web Fonts

An excellent take on font-linking from someone who designs typefaces for a living.

we love typography. a place to bookmark and savour quality type-related images and quotes

An editorially managed collection of type-related goodies: "Think of it as FFFFound for all things type, typography, lettering, & signage."

8 Simple Ways to Improve Typography In Your Designs • Blog Archive • AisleOne

A quick round-up of typographic best practices applied to the web.

concept ships

An online animated spaceship and experimental aircraft art magazine. Gorgeous.

Science and Tech Ads - a set on Flickr

Vintage advertising of science and technology.

Letterpress books, posters &c. - a set on Flickr

A lovely set of letterpress printing

Accused! - Jon Engle

A logo designer accused of ripping off his own work — kind of like what happened to Dan.

UXBri

The UX Brighton website is sporting a new lick of paint and looking rather lovely.

LegiStyles™

Typographically thoughtful themes for NetNewsWIre. Even if you don't use the RSS reader, check out the gorgeous design of this site.

Wikirank

A Cederholm-designed site for tracking trends on Wikipedia. Check out the HTML5-based class names.

Is Spec Work OK?

A single-serving blindingly obvious answer.

northtemple - Accessibility to the Face

An excellent rumination on the meaning of accessibility, prompted by real world experiences.

Goodbye Google | stopdesign

Douglas explains why he's leaving Google. "I won’t miss a design philosophy that lives or dies strictly by the sword of data."

Ariel Waldman » Blog Archive » pico projects

Ariel talks about labours of love; pico projects; £5 apps; call them what you will.

Forget the mobile web: One site should work for all - at ZDNet.co.uk

Great article by Bruce defending the principle of One Web.

A List Apart: Articles: Fluid Grids

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

The Mesmerizing Curves of Ampersands | The Design Cubicle

Ampersands. Lovely, lovely ampersands.

this is a working library

I love the design of this site almost as much as I love the content.

BBC - Radio Labs - How we make websites

Michael Smethurst runs through the process used in his bit of the BBC. It's all good.

[ws] Color Scheme Designer

A handy tool for putting colour palettes together.

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"

SugarDash Pocket Log

A paper app—like a web app, but for the papernet—that provides a DIY portable log book for diabetics.

Quotes on Design

Like a crowdsourced version of Eno's oblique strategies.

Striking Web Sites with Font Stacks that Inspire - Inspiration Bit

A look at different font stacks out there in the wild.

stopdesign

Good news everyone: Douglas is back! Yay!

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.

Jounce, the online home of M. Jackson Wilkinson

Jackson's lovely new site ...written in HTML5.

Styling XFN and rel-license links - Opera Developer Community

Christopher Schmitt shows how to style XFN links using attribute selectors.

Play School: Easy Ajax - load | jQuery for Designers - Tutorials and screencasts

Remy teaches non-techies how to use jQuery in a responsible way.

Rands In Repose: A Signature Cadence

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

gridr buildrrr

A handy tool for planning grids. Limited, alas, to pixels.

24 ways: A Christmas hCard From Me To You

A great 24 Ways article by Elliot on creating and styling hCards.

The Grid System

The Grid System is a resource for all designers to learn about the benefits of using grid systems, golden ratios and baseline grids.

24 ways: 2008

Rejoice! 24 Ways is back again. Prepare for 24 days of web development articles.

Helvetireader

Jon's helvetican theme for Google Reader.

Designing for hyper-connectivity - SlideShare

This talk that James gave in Bristol last week is chock full of great stuff. Well worth a read/look.

Five Simple Steps | Books

Mark's book is almost ready. Really. It's got its own site and everything so it must be true.

Rate My Area | Review and share your favourite places!

Clearleft worked on this project; information architecture, visual design, and front-end (that was my part: markup, CSS and JavaScript). I'm very, very happy to see that it's finally launched and even happier to see the level of appreciation for g…

Microformats.org Wiki 2.0 · Microformats Wiki

Ben has been working hard to upgrade the microformats wiki. His hard work has paid off: it looks great!

ThoughtCafe » Online Magazine

I like the look of this, both visually and idealistically. "ThoughtCafe is a crowdsourced online magazine, written by the internet community for the internet community."

Everything You Know About CSS Is Wrong! - SitePoint Books

Rachel and Kevin's new book looks very interesting indeed. It is about just one thing: CSS tables.

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.

web.without.words

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

Time to stop showing clients static design visuals | For A Beautiful Web

Andy makes a great case for presenting clients with designs in HTML/CSS rather than flat, fixed, non-interactive graphics.

GT!Blog » Why Japan didn’t create the iPod

Could it be that the inability of 8-bit computers to render Kanji had a direct influence on the direction of Japan's electronic product design and economy?

Plastics in the 20th Century – post WWII - a set on Flickr

I just want to say one word to you. Just one word. Are you listening? Plastics.

Five CSS design browser differences I can live with | For A Beautiful Web

A great article by Malarkey wherein he lists five examples of progressive enrichment (as Dan is wont to call it) complete with side-by-side comparisons. Useful ammo, this.

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.

Design View / Andy Rutledge - USA.gov Redux

At first I thought that Andy Rutledge was trying to make some nuanced satirical point here but it turns out he's just a twunt.

Pattern Tap : Interface Collection for Design Inspiration

Collections of visual design patterns from web interfaces.

Typechart - Browse Web Type, Grab CSS.

A handy little tool that's beautifully designed. View typeface/style/size combinations and then grab the CSS.

minimalsites | minimal design css gallery

A gallery of minimally designed websites. There are some lovely grid/type-based designs on view here.

On Nails, Lipstick, and Redesigns — Unstoppable Robot Ninja

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

A new design | Clagnut § Blogging · Information design · Clagnut news

Richard has launched the redesign he's had bubbling away for a while now. 'Tis lovely and gridilicous.

For A Beautiful Web | Creative web site design and development training and workshops

Malarkey has launched his latest project: For A Beautiful Web is a series of web design master class training workshops covering topics including visual design for the web, best-practice XHTML mark-up and CSS, Microformats and practical web access…

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.

GUIMagnets - Prototyping made sticky

Interface elements as fridge magnets. Make prototyping fun!

iphone login screens - a set on Flickr

Screenshots of various log in screens on the iPhone. I think Cindy has been hanging out with Luke W.

Video: Made in North Carolina: The Iconfactory

"GREENSBORO, N.C. (WGHP) -- In a small nondescript office on West Friendly Ave., a group of designers produces tiny artistic masterpieces that millions of people interact with every day." Nice TV news video clip showing our heroes and their beauti…

CSS for lunch » Mastering the presentation layer of the web… at lunch time.

Here's a great project from Andrew Mager. He takes a little time out at lunch to post a small markup or CSS tip. Over time this builds up into a really valuable resource.

Sushi & Robots

Jina's new site is live and quite lovely it is too.

The Paragraph in Web Typography & Design — Jon Tan ?

A wonderfully informative and useful look at paragraphs styles ...in history and in CSS.

adaptive path » aurora concept video

A proof of concept browser from Adaptive Path together with Mozilla Labs. This must have been fun to work on.

- web without sense

A useful collection of frustrations. Find an suitable one to send to a client today.

delicious blog » Oh happy day — the new Delicious is here

Delicious has finally launched its redesign. It feels weird linking to it from Magnolia.

Shackleton Centenary Expedition

Another beautiful frosty design from the Erskine chaps.

disambiguity - » The general public myth (or, the whole world is not your user)

So, so true ...if you design for everyone, you design for no-one.

Home – Last.fm

The Last.fm beta redesign is now available for the great unwashed masses to test.

Grid Calculator

A handy tool for calculating grid and gutter widths although you'll still have to some calculating to get the figures to work in percentages (assuming you're designing for the Web).

The Paper Version of the Web at Deeplinking

A nice collection of sketches and paper prototypes.

Wordle - adactio

Wordle puts a new spin on the tired old tag cloud. Here's a cloud of my del.icio.us tags.

The Art of the Title Sequence -

A blog devoted to film title sequences.

Dave Veloz's Mac Mini Mod, Monitor, & Keyboard | The Steampunk Workshop

I would kill to get hold of this Steampunk Mac mini, flat panel monitor and brass keyboard.

Seed Conference | Chicago | 6 June 2008

A version of the beautiful Seed Conference one-sheet Website that has been reworked to use ems instead of pixels.

Cheesophile : What a friend we have in Cheeses!

Jon's demo site for his talk at The Future of Web Design. It's all about cheese. I wish it were real.

Heavy Artillery Graffiti

These are the guys that painted the walls across from the Clearleft office. Every day, at least 10 people take pictures of their work.

Wufoo: UI That Really Cares

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

Design Idea » Twitter and the Crystal Goblet

Good design is invisible. Rebecca points out why Twitter is very good social design indeed.

The Highly Extensible CSS Interface

Cameron has put all the materials from his four-part series together in one handy spot.

Home of the Geotag Icon Project

An attempt to create a standardised icon for geotagged content, much like the standardised icon for RSS.

Seed Conference | Chicago | 6 June 2008

The typography on this page is simply gorgeous. And the event looks good too.

Traces of Inspiration » Blog Archive » URL as UI

The importance of good URL design.

Captioning Sucks!

Joe's latest project is deliberately garish.

Activate The Death Ray | A demonstration site by Andy Clarke

A holding page for Malarkey's upcoming series of workshops. Add you name if your interested.

Welcome | Ben Saunders | North Pole Speed Record

Intrepid adventurer Ben Saunders is off again. This time he aims to to set a new world speed record from Ward Hunt Island to the Geographic North Pole. He is armed with a beautiful website courtesy of Colly and the lads at Erskine.

kottke.org is ten years old today (kottke.org)

kottke.org is 10. Many happy returns, Jason.

StrawPoll—Tiny polls in 140 characters or less

Another "barnacle app" built on Twitter: answer a question, view the results. Cute.

× × timoni.org × ×

I'm loving the typography on this blog.

Space Time/No Time - Brightcove

Matt Jones speaks about "Designing for SpaceTime, Building in No Time."

RIP: Yahoo! Design closed down - data visualization & visual design - information aesthetics

Yahoo Design has been shut down. I understand the need for belt-tightening but firing your smartest most innovative people isn't going to help.

Pixish: We bring visual artists and publishers together

The latest website from Derek Powazek allows artists and businesses to hook up. Nicely done.

kropp

Good typography + stylish grid + liquid layout = WIN!

Typesites

A site devoted to cataloging good website typography.

DC Design Talks 2008 | DC Talks

Live in the Washington DC area? Be sure to make it along to this on February 29th.

Vitamin Features » Stay on :target

Brian shows some clever uses of the little-known :target pseudo-class.

How to create CSS layouts without using FLOAT

An interesting CSS technique that uses table-layout instead of float.

CSS Gradient Text Effect

A neat new CSS effect. You don't see many of those these days.

Logica Stock Icon Family debuts at Iconfactory's Stockicons.com

Clean, businesslike icons by the icon artists behind Windows XP and Ubuntu Linux.

shiyuan.co.uk

The idea I like most from this portfolio is the heat-sensitive wallpaper with blooming flowers.

Flight thru Instruments - a photoset on Flickr

A collection of beautiful illustrations scanned from a flight-training manual.

wrapping up 2007 (28 December 2007, Interconnected)

A brilliant braindump by Matt Webb examining the weave of the Web and the nature of reality. Set aside some time to soak this up.

Web design 2.0 - it’s all about the resource and its URL « Derivadow.com

A great article about designing for what Tom Coates calls a "web of data", emphasising the importance of making sure that a resource sits at one URL.

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

No Ideas But In Things

"No Ideas But In Things is a library of controls, animations, layouts, and displays that might be a source of inspiration for interaction designers. Dan Saffer is the curator. The title comes from a William Carlos Williams poem."

Do websites need to look exactly the same in every browser?

Like "is it Christmas?" or "is Twitter down?" but less Boolean.

Vitamin Features » Creating Sexy Stylesheets

Jina has put together an excellent series of steps you can take to keep not just nice, but downright sexy.

nclud's Sketchbook | Cindy Li nclud'ed

Cindy is now working for nclud. That's good for Cindy and good for nclud.

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 Plumen Project

A new twist on the lightbulb.

favikon

A great little tool for creating favicons.

iPhone/iTouch Backgrounds, Set 1 · Journal · AntonPeck.com

Awesome iPhone wallpaper images from the awesome Anton.

Vespertilium clothes-peg

Best. Clothes pegs. Ever.

Sleevage » Album Cover Blog. Music, Art, Design.

I could spend ages browsing through the archives of this site dedicated to analysing album sleeve artwork. In fact, I just did.

Spam One-liners - a photoset on Flickr

When life gives you lemons, make lemonade. When life gives you spam, make pretty pictures.

Coverflow for People | FactoryCity

Chris mocks up an interface idea for Apple.

Make My Logo Bigger Cream

Just rub it on and watch it grow. Gauranteed to satisfy your client.

"Terrorist Buster" Logo — Central Intelligence Agency

No, this is not a joke. This really is the DCI Counterterrorist Center "Terrorist Buster" logo. Un. Be. Lievable.

Chinese Culture Versus German Culture » Adino Online

A series of infographics comparing Chinese and German culture. Amusing and astute.

CSS Eleven | Malarkey Rides Again

Here's the in-depth lowdown on the CSS Eleven supergroup announced by Andy at Web Directions South last week.

Design View / Andy Rutledge - quiet structure

A nice overview of avoiding clutter in web design. It's not just about whitespace; the number of edges and gradients can also add up to an undifferentiated design.

si scott design

Beautiful artwork in a minimalist interface. But you'd better have your browser window maximised on a big monitor. *sigh*

Amazon: A Quick Tour of Our New Remodel

Amazon is AB testing their next design iteration. Bye, bye tabs (yay!), hello fly-out menus (boo!).

Chattanooga Graphic Designer Helps Lead "The Invasion" At The Movies | WDEF News 12 | News, Weather and Sports for Chattanooga and the Tennessee Valley

Leslie is on the telly! How freakin' cool is this?

Styling File Inputs with CSS and the DOM // ShaunInman.com

A clever little technique by Shaun for faux-styling file input elements using a mixture of CSS and JavaScript.

PicoCool

Emily's new site for little snippets of design and subculture goodness looks like a treat.

swissmiss: urban cup holder

"The cup holder is easily clamped with one hand to posts in the street, then used as a coat/bag/umbrella hanger and a drink holder." Smart.

Last.fm – the Blog · Various Positions

Last.fm are hiring. If you're London-based and in the job market, I can think of a lot worse places to work.

typography - a photoset on Flickr

A collection of books with beautiful typography.

The Serif - Your daily dose of design inspiration - The Serif

"£5000 in £10 and £20 notes were individually dropped around the streets of London with a removable sticker." Clever.

GOOD 006 - Transparency - Weights and Measures

A really nice visual representation of just how isolated the Imperial system is.

i love typography

A new blog dedicated to, yup... typography. Looks like a keeper.

The Serif - Your daily dose of design inspiration - The Serif

An interview with type designer, Eric Olson.

The Eachday Blog — Die Speech Bubble Logo, Die.

“Attention all startups, it’s a bad idea to hang your ID hat on a speech bubble. Just don’t.”

How To Mix Fonts: Typeface Cheat Sheet

A cheat sheet for combining typefaces. No hard and fast rules but a handy guide to print out and use.

adaptive path » blog » Charmr Project

Charmr is a design concept for diabetes management devices proposed by Adaptive Path following a process of research and iteration.

Unstoppable Robot Ninja

Sidesh0w is dead! Long live the new Ethan! I for one welcome our unstoppable robot ninja overlords.

Apple - Pro - Profiles - Joshua Davis

A profile on Apple.com of Flash designer par excellénce, Josh Davis.

YouTube - ORIGINAL DESIGN GANGSTA

Word!

BBC NEWS | UK | Designs for taking on criminals

Making the link between good product design and discouraging crime.

design|snips

A collection of websites incorporating noteworthy visual design elements.

How Not To Get Noticed » SlideShare

Slides based on a usability analysis of Wordpress by some of the Happy Coggers.

Blueprint: A CSS Framework

Pulling together a bunch of CSS tricks from a range of sources: reseting, baseline typography and grids (fixed width, unfortunately).

A List Apart: Articles: Reviving Anorexic Web Writing

I love this article by Amber Simmons. The truth shines through.

What's New at The W3C Markup Validation Service

The Validator got a new lick of CSS paint and it's looking good.

Web Designer Wall - Design Trends and Tutorials

A nice collection of CSS tutorials and design trends.

Apple Developer Connection - iPhone for Web Developers - Optimizing Web Applications and Content for iPhone

Straight from the horse's mouth, advice for web developers on how the iPhone's browser renders pages. I'm very intrigued to find out how it handles liquid designs with no set min-width.

Mark Boulton Design : +44 (0)845 603 2399

Mark has launched his business site. Lovely grids and typography, as you'd expect.

Viget Labs Is Hiring - Join Our Design Team

What excellent taste this web design shop has. I don't mean the fancy scrolling—I'm talking about what's on the bookshelf.

Graphic Design and typography - Swiss Legacy » The italic poster

We may just have to get this italic poster for the Clearleft office.

Peter Saville Graphic Design - fonts

Peter Saville is releasing some of his fonts for free. I'm grabbing the beautiful serif typeface used on the front of Joy Division's "Closer"; it's gorgeous.

SpiekermannPartners › Le Monde Diplomatique

The newly-launched redesign of Le Monde Diplomatique is absolutely gorgeous. Whitespace on a newspaper: finally!

Vitamin Features » Web Design-isms: 7 Surefire Styles that Work

A nice well-illustrated article from Larissa Meek pointing to some design trends that can be applied to the Web.

Joe Clark, wanker designer - a photoset on Flickr

Having left web accessibility behind him, Joe camps out at the Clearleft office where he immediately turns into a wanker designer.

W3Conversions .:. Web Standards, Accessibility and Training

Stephanie Sullivan has redesigned. Her site is now almost as smart and sassy as she is. Very nice work, Steph.

Eric's Archived Thoughts: Formal Weirdness

Eric explores the dark cabbalistic world of attempting to style form controls. This explains why he doesn't use the universal selector for resetting default styles.

Color Oracle

A very handy little app that sits in your menu bar on OS X and can instantly show you how your screen would look if you were colour blind.

Stuff and Nonsense

Malarkey's got a brand new bag... if by "bag" you mean "website". And a very nice bag it is too.

Guardian Unlimited

The front page of The Guardian website has been redesigned with some good use of typography and colour. Shame it's so wide though.

What I've been working on: The New Google Analytics, by Jeffrey Veen

Finally revealed: what Jeff has been working on since he moved into the lair of the Google. He's been making Google Analytics look and feel nicer.

Make the logo bigger

Now when your satanic client tells you to make the logo bigger, you can always rock out.

110am. A Seasonal Design

Tom Watson's new site design changes stylesheets with the season. More of this kind of thing please, Web.

Newsvine - Newsvine Relaunches... Announcing Evergreen

Mike and the team have redesigned/realigned Newsvine with some nice customisation of the front page.

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

Official Website to Help Save William Morris Gallery & Vestry House Museum, Walthamstow, Waltham Forest, London

The William Morris gallery is going to be shut down unless we can do something about it. Let's do something about it.

Andy Pearson is a web designer and developer from the UK

A nice subtle lifestream implementation complete with fading over time.

disambiguity - » Waterfall Bad, Washing Machine Good (IA Summit 07 Slides)

Leisa's slides from the IA Summit in Vegas. Looks like it was an excellent presentation, channelling the spirit of Kelly Goto and Jeff Veen.

mezzoblue § Chalkwork Basic Royalty-free Icons

Dave has made some icons — very nice ones.

Digital Web Magazine - Redesigning the ExpressionEngine Site

A really nice article by Jesse Bennett-Chamberlain detailing the process behind a site design.

Subtraction: Oh Yeeaahh!

Khoi has posted the slides from his grids workshop online. Download and learn.

Coffee/latte art - the mark of a professional barista

Coffee porn, some of which is from the baristas working at Travelbag in Brighton.

Upcoming.org Suggestion Board

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

Urban Dirty: Free texture stock photography for your artwork, desktop and design

A nice collection of royalty free texture photos using the Flickr API.

A List Apart: Articles: Paper Prototyping

A great hands-on article on the benefits of playing with paper.