My new favourite Twitter account.
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.
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 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
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.
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 are updating their brand identity and they’re doing it in the open. A brave, but fascinating move.
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:
I’ve always loved Jeffrey’s writing.
Dan has been researching the history of design systems, annotating as he goes.
An entertaining presentation from South By Southwest on the UI element of last resort.
It’s funny because it’s true.
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.
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.
A newsletter dedicated to all things related to design systems, style guides, and pattern libraries.
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.
A handy tool for testing the legibility of different typefaces under all sorts of conditions.
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
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.
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.
A wonderful deep dive into the history of styling languages before CSS. I love spelunking down these internet history potholes—fascinating stuff!
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.
A catalogue of objects and observations from cities around the world.
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.
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.
Vitaly takes a look at some of the more unusual patterns used in responsive designed.
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.
Ariel and Lisa have redesigned the excellent Spacehack site and it’s looking stellar!
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?
Here’s a nice little pattern from Dave—showing data tables one column at a time on smaller screens.
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.
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.
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!
I really enjoyed chatting to Ade on The Design Jones podcast. I rambled on about design, the web, and all that stuff.
Some smart thoughts on web fonts.
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! ♫
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.
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:
- Semantic markup
- Following accessibility standards
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.
A look at the tools that AirBnB have made to help them in their design and development process. I hope they’ll share them.
Chris’s homage to I, Pencil.
I, Website, am a complex combination of miracles.
Here’s a well put-together collection of common patterns that are now much easier thanks to flexbox.
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.
A nice tool for choosing colour palettes that look good and are also accessible.
If you want to keep up to date with all the coolest stuff landing in CSS, I recommend bookmarking this ever-changing page.
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.
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.
Well, this is rather wonderful! A one-stop-shop for exploring UI patterns on CodePen …this is going to be time sink.
Classic Swiss designs recreated in CSS (with added animation).
Well, we might as well bin the Clearleft website rebranding project. Somebody has beaten us to it.
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.
Blogging through Venn diagrams.
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.
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.
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.
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.
Here, have some colour palettes.
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.
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?
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…
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.
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.
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.
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.
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.
Everything you never knew you wanted to know about the Millennium Falcon, wrapped up in one unsurprisingly insanely detailed essay from Michael.
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”:
- We must prioritise the text over the font, or semantics over style.
- We ought to use and/or make tools that reveal the consequences of typographic decisions.
- 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.
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.
Well, this pretty much sums up the front-end team at Clearleft:
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 understand the importance of backend development, but may not spend their time writing backend logic, spinning up servers, load testing, etc.
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.
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).
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.
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.
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.
We have some new
font keywords that are basically shortcuts to using the system fonts on a device. This article explains the details.
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.
A really terrific article from Dan on building pattern libraries. In summary:
- Naming things is hard,
- 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,)
A terrific analysis of industrial design in film and games …featuring a scene-setting opening that delineates the difference between pleasure and happiness.
‘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.
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!
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.
Paul gives the lowdown on the Google+ responsive relaunch. They set themselves this performance budget:
- 60K of HTML,
- 60K of CSS,
- 60 frames per second animations, and
- 0.6 seconds latency.
And this bit is crucial:
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.
This looks like a terrific presentation from Alla on iconography, semiotics, and communication.
The comprehensive style guide and pattern library for North Carolina.
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.
Here’s the 20 minute talk I gave at the inaugural Responsive Field Day in Portland.
A nice navigable timeline of historical events from Wikipedia.
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.
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.
Just like Nick, John Willshire has put his slides together with the audio from his gobsmackingly good dConstruct presentation on metadesign.
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)
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.
A nice combination of style guide and pattern library, with plenty of documentation.
Very thoughtful and sensible thinking from Paul.
An old-school styleguide.
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.
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.
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.
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.
The video of Richard’s great talk on responsive typography at the Up Front conference.
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).
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.
Sounds like a good exercise for explaining just about anything. Smart.
A detailed and humorous deep dive into motion design and spatial depth in digital interfaces.
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.
The text of Nicole’s excellent talk on writing helpful, human microcopy.
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.
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.
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).
You’ll want to back this—you’ll want to back the hell out of this!
The full text of Aaron’s magnificent closing keynote from Responsive Day Out.
This one-day workshop that Cennydd is running in London on July 22nd looks like it’s going to be really good.
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.
I really like the way that Paul’s talk builds on top of ideas laid down by Ethan and Frank. Good stuff.
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.
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.
I think the distinction between ‘how it works’ and ‘how it looks’ is blurrier than we think.
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!”
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.
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.
Here’s a talk give at a community event in London last summer.
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.
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.
A look at the risks of relying on a purely graphical icon for interface actions. When in doubt, label it.
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.
Get your next design game off to a quick start with this handy generator of nonsensical-yet-vaguely-plausible product ideas.
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.
You might want to keep an eye on what the Clearlefties are doing here for the next hundred days.
One down, 99 to go.
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.
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.
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 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?
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.
These are principles of visual design—hierarchy, rhythm, etc.—nicely explored and explained.
Any sufficiently advanced vision piece is indistinguishable from Black Mirror.
This time it’s a great article by Karen Menezes filled with practical examples showing where you can use flexbox today.
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.)
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.
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.
A beautiful website for ISS-based biology experiments.
The Guardian have hit the big red button and made their responsive site the default. Great stuff!
(top tip: don’t read the comments)
This Eno-esque deck of cards by Scott could prove very useful for a lot of Clearleft projects.
Brad’s writing a book.
Insert take-my-money.gif here.
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.
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.
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.
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.
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.
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).
A great primer on using
picture. I think I’ll be referring back to this a lot.
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.
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.
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.
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?
This is four years old, but it’s solid advice that stands the test of time.
A really nice little documentary about my friend Jeffrey.
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.
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.
Those lovely people at Filament Group share some of their techniques for making data tables work across a range of screen sizes.
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.
A nice profile of BERG’s Little Printer. That Matt Webb is a smart cookie. He is also a very thoughtful cookie.
If you’re going to check out the New Yorker’s nice new responsive site, might I suggest you start here?
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.
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 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?
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.
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.
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.
Neil Berry writes down his thoughts prompted by Responsive Day Out 2.
A great blow-by-blow account of Responsive Day Out 2 from Simon R Jones.
Phil Baker writes up his thoughts on all the day’s talks.
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.
Marc Jenkins shares his thoughts on Responsive Day Out 2.
Another lovely write-up of Responsive Day Out 2.
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:
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.
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
Here’s Kirsty’s retrospective of Responsive Day Out 2, from the perspective of a speaker and an attendee.
As well as delivering a terrific talk at Responsive Day Out 2, Ida has also written up her detailed notes of the day.
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.
As always, Orde Saunders took copious notes at Responsive Day Out 2. The man’s a machine!
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.
Another great write-up of Responsive Day Out 2, this time from Hidde de Vries, who came over to Brighton from the Netherlands.
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!
A lovely little tale of empowerment through HTML and CSS.
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.
Design fiction from a NASA scientist.
Some URLs are ugly. Some URLs aren’t. Let’s not sacrifice them.
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.
A lovely post by Mark on the value of URLs.
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.
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.
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.
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
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.
We need a web design museum.
I am, unsurprisingly, in complete agreement. And let’s make lots of copies while we’re at it.
The transcript of Malarkey’s recent talk. Good thoughtful stuff.
Yaili is documenting the process of retrofitting ubuntu.com to be responsive. I’ll be avidly reading each post in this series.
A terrific post from Trent, touching on all the important facets of building for the web: universality, progressive enhancement, performance …great stuff!
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.
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
An interesting pattern for handling complex data tables in responsive designs. It’s a desktop-down approach, but pretty smart.
Thoughts from Luke Bacon on two topics that fascinate me: archives and design principles.
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.
Hey, look! The Clearleft interns are in Wired. That’s nice.
Lovely little graphics inspired by New York architecture.
The transcript of Mark’s talk from last week’s Handheld conference in Cardiff.
There are mountains.
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!
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.
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.
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.
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.
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.
Dan Bricklin—co-creator of the original VisiCalc spreadsheet—turns his attention to responsive design, specifically for input-centric tasks.
Dan gives some insight into what it took to make his personal site responsive. Stay tuned: there’ll be more of this.
A great presentation from Brian Boyer on NPR’s mobile strategy. Spoiler: it’s responsive design.
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.
Here’s the CSS and markup you need to make third-party iframes responsive. Handy!
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%.
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.
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.
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.
On the one hand, this is yet another Snowfall clone. On the other hand, the fact that it’s responsive is impressive.
Fodder for a Markov chain.
A handy collection of links to web-related podcasts. Go forth and huffduff.
I was interviewed for this article on psychology in web design. The title is terrible but the article itself turned out quite nicely.
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.
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.
Sit back, relax, and enjoy this classic documentary on graphic design, courtesy of its producer Edward Tufte.
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.
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.
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.
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.
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.
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.
Jared explains how adding new features can end up hurting the user experience.
Carousels are shit. Auto-animating carousels are really shit. Now proven with science!
A comprehensive look at the current state of things in the world of responsive design, with a look to possible future APIs.
Here’s a nifty trick: using text-align: justify to get a nice responsive grid layout.
A wonderful essay about type on the web by Jessica.
A nice description of progressive enhancement by Norm, as applied at GDS.
A design fiction video depicting technology that helps and hinders in equal measure.
A handy plugin for Chrome that always you to inspect media query breakpoints and take screenshots at any of them.
A lovely piece of writing from Richard on the nature of the web.
Jon gives some insight into how and why we use pattern portfolios as deliverables at Clearleft.
Keep it under your hat, but Paul has soft-launch his Project Portillo. And very nice it is too.
Yes, yes, yes!
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.
A terrific, in-depth round-up and recollection of the Responsive Day Out by Laura that ties all of the strands together.
Sorta sci-fi from Adam.
Consider this a shooting script for one of those concept videos so beloved of the big technology vendors.
Good writing. Good design. Good food.
Timoni tackles the tricky topic of teaching taps.
Discoverability can be hard, but that shouldn’t stop us trying out new interactions.
A sweet, beautiful love letter to design, from Oliver.
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.
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.
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.
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.
This is the full text of Owen’s talk at the Responsive Day Out. It makes for a terrific read!
Chris takes a look at all the different ways you can use SVG today.
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.
Some thoughts and soul-searching prompted by talks at the Responsive Day Out.
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.
Vasilis examines the multitude of factors that could influence an ideal measure.
Some handy tips for starting off your responsive designs from the type out.
Some great stories from the front lines of product design, gathered together in one handy spot.
A great meaty piece from Cennydd, diving deep into the tricky question of context.
A lovely new responsive(ish) website dedicated to science and the environment.
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.
James’s notes from the most recent Hack Farm show that, even without a finished product, there were a lot of benefits.
Amen, Brad, Amen.
It’s time for us to treat performance as an essential design feature, not just as a technical best practice.
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?
An intriguing extrapolation of current design trends: perhaps typographically-strong single-column layouts will become popular out of sheet necessity.
A gorgeous collection of experiments that showcase just how much is possible in browsers today.
Trent and I answered a few questions for the Responsive Design Weekly newsletter.
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?
All the videos from last year’s Breaking Development conference in Dallas are up on the site. They’re all excellent.
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.
Beautiful thoughtful work from the BERGians.
A short film about interaction design.
An excerpt from Mark’s forthcoming book, which promises to be magnificent.
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.
Beauteous and true.
Real design is political.
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.
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.
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.
Nice notes from a recent talk on ways to approach responsive design.
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.
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”.
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.
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.
A really nice piece on scale, ratio and rhythms in web design.
Another responsive design case study. This one’s got numbers too.
I love seeing the process behind responsive projects. This one is particularly nice.
Design Fiction at work, imagining a possible future city.
Less wireframing, more prototyping.
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.
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 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.
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.
A nice look at some possible ways to approach workflow on a responsive project.
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!
Nishant gives a great overview of the responsive redesign of the Microsoft home page, ably abetted by the Paravel gang.
Andy’s talk from the Smashing Conference in Freiburg.
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.
Pointing out a growing movement away from three-dimensionality towards a flatter aesthetic.
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.
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 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.
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.
Chris and Nathan’s book is finally out. I’m going to enjoy reading through this.
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).
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.
Brad’s notes from my opening talk at the Smashing Conference in Freiburg.
A great collection of layout, navigation, and interaction patterns for responsive sites, delivered by Brad.
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.
Another great in-depth round-up from Brad, this time looking at your options for complex navigation patterns in responsive designs.
Clearleft have been working with Channel 4 News on their new redesign. Here’s Jon Snow explaining responsive design.
Some more thoughts on how our workflow needs to adapt to the current ever-changing device landscape.
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.
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.
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.
A great talk on the nature of the web that Paul gave in Copenhagen recently.
Frank has published his book online in HTML. Very lovely it is too.
Tim’s book is ready for pre-order. Looks like it’s going to be good one.
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.
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?
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.
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.
Josh writes about the importance of using rules and systems as tools without being bound by them.
A really great article from Stephen on how we are mistakenly making assumptions about what users want. He means it, man!
Aegir’s portfolio is a thing of a beauty on every screen size.
Aegir is doing some very smart image enhancement in his (responsive) portfolio. Here’s the explanation.
This is so lovely! The story of Jessica and Russ’s romance, illustrated by fifteen of their friends.
Trent shares his ideas on handling line lengths in fluid, responsive layouts.
Luke and Jason have put together some demos of various “off-canvas” navigation patterns for responsive designs.
A spot-on analysis by Khoi of the changing perception of the value in product design, as exemplified by Apple.
A great article on the importance of sketching for mobile-first responsive designs, complete with practical ideas for workshopping.
One developer shares how his workflow has changed thanks to responsive design. It’s insightful.
The lovely (and responsive) Great Discontent site has a lovely interview with Dan, who is lovely.
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.
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.
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.
Using flexbox to creata a narrow-column stacking order that’s unrelated to the source order.
A terrific site dedicated to the love of film, all wrapped up in a wonderful responsive design.
Jon Kolko shares his advice on accepting design criticism.
There’s some good advice here about launching a new design without pissing off your users (too much).
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.
An case study that tackles complex navigation in a responsive site.
Another call for design-based (rather than device-based) breakpoints in responsive sites.
A great step-by-step tutorial from Brad on developing a responsive site with a Content First mindset.
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.
Josh and Michelle have been hard at work making this responsive theme for Shopify. It’s quite lovely.
Cute. I gave Dan some advice. He made it look all pretty.
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.
Andy points one of the potential pitfalls in linearising your content for small screens.
How designing in the browser works for rapid iteration.
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.
Using Keynote as a web design tool? Why not? It makes as much sense as Photoshop or Fireworks, perhaps more.
Samantha does an excellent job of explaining how useful style tiles can be for visual design and iteration.
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.
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.
The slides from Andy’s one-day responsive design workshop are well worth a perusal.
Emily walks us through a responsive design case study, stressing the importance using percentages for layout.
A sweet little meditation on the nature of the web and responsive design.
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.
Samantha put together this handy one-page site to explain Style Tiles as part of her South by Southwest presentation.
Luke catalogues layout patterns in responsive designs.
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.
Using em-based media queries to incrementally bump up the font size for larger viewports.
Jeff documents some of the techniques he’s using to tackle responsive design, with some tips specifically for SASS.
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).
Elliot jots down some of the issues discussed at the responsive summit.
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.
Prompted by Brad’s recent post, here are some musings on three methods of handling navigation in responsive sites.
A detailed overview by Filament Group on progressively enhancing navigation for responsive sites.
Mark talks about the tools web designers use and the tools web designers want. The upshot: use whatever you’re most comfortable with.
Here’s a great braindump from Paul following the Responsive Summit, detailing multiple ways of potentially tackling the issue of responsive images.
Josh goes through the talking points from the recent Responsive Summit he attended. Sounds like it was a great get-together.
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.
Brad does a great job of rounding up various design patterns used for navigation in responsive sites.
The site’s a mockup but if you want it badly enough, these responsive-themed T-shirts could be real.
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.
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.
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.
This beautiful site not only features the oh-so-trendy vertical parallax, but it’s responsive too. Impressive!
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.
A bookmarklet version of that handy multiple-iframe page I linked to the other day. Even more useful for testing responsive designs!
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.
A handy little document to load pages into differently-sized iframes—useful for testing responsive designs.
Chloe built a gorgeous responsive site …and it’s all about LEGO!
Pixelworkers have relaunched with a very nice responsive design.
A nice round-up of responsive and future-friendly resources.
You can now hire Mandy and Keith to make gorgeous films. Their website is, unsurprisingly, beautifully crafted.
Another plea for content-out rather than canvas-in design.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Documentation of an ongoing project to create a mobile-first responsive MediaWiki theme.
The process behind the mobile-first responsive design of audiovroom.com.
It’s responsive. It looks great. It’s using HTML5 structural elements and microformats.
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.
Some more thoughts on the challenges of combining advertising with responsive design.
Some thoughts on structuring your CSS for responsive designs.
A great in-depth look at the tricky problem of advertising in responsive design from Mark.
On the importance of using a fluid grid in responsive 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.
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.
A framework for banging out ready-made responsive designs.
A responsively designed comic. Yeah, you heard me right. Responsive. Comic!
This vision thing commissioned by Microsoft shows a future-friendly networked world where content flows like water from screen to screen.
Rob documents how he approached his first responsive design.
Rob is back.
Ethan compiles a list for .net magazine of twenty of his favourite responsive designs.
A great collection of the future-friendly techniques of today: progressive enhancement, mobile first and responsive design.
An insight into Elliot’s current design process which highlights the advantages of designing in the browser when you take a content-first approach.
The process behind a responsive realignment …and the end result is very nice indeed.
A visual representation of the design process.
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.
Asking what the difference is between science fiction and design fiction. The answer may be …usefulness.
A set of default styles to get started on a mobile-first responsive design.
A lovely interview site that has been beautifully and responsively designed.
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.
A slick little video that goes behind the scenes of the Boston Globe site.
A lovely responsive portfolio showcasing a lovely responsive site. Responsinception!
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.
Luke’s notes from my talk at the Breaking Development conference in Nashville summarise my points nicely.
Ethan chronicles the story of the Boston Globe site and his part in it.
This photograph made my day: the brand new Boston Globe site running on a Newton.
Progressive enhancement. It works.
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.
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).
Luke proposes a development approach that marries the best of responsive design with content negotiation. It makes a lot of sense. I like it.
It’s here. A large-scale commercial site with a gorgeous responsive design. Try it on any device.
This is the first of many.
In this interview Mark discusses the “content out” rather than “canvas in” thinking that informs his new canon.
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.
A look under the hood of the dConstruct website (including some nth-child selectors I threw in there).
Some interesting questions (and one or two answers) about how responsive design affects publishing on the web.
Naz shares his advice for up-and-coming designers …and the institutions that educate them.
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.
A nice Huffduffer-style mad libs form gives this registration form a friendly quality.
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.
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.
Those lovely BERG chaps profiled in the New York Times.
Samantha gives the rundown of a hands-on use of Style Tiles.
Dan gives his pragmatic perspective on making Dribbble more adaptive. Baby steps.
When time, resources and funds are more abundant, I’d love us to rethink things in a more holistic manner, but for now incremental improvements will keep us moving.
The video of my talk/rant at the DIBI conference in Newcastle/Gateshead earlier this year, for your viewing pleasure.
I’m usually not a fan of CSS “frameworks” but I like the thinking that’s gone into this fluid, responsive system. I particularly like this advice:
Take it apart, steal the parts that you like, and adapt them to your own way of working.
A truly lovely responsive design from Tiffany Duening and co.
Jessica Hische has redesigned her site in a lovely and responsive manner.
A gorgeous adaptive (though not quite responsive) design …and it’s all about food.
I recommend you look through all of Paul’s presentation …because they’re all excellent.
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.
Tantek’s braindump of research he and Erin have been doing on web actions—verbs for the web, specifically interactions across sites: sharing, liking, and so on. I agree with him that this terminology feels better than “web intents.”
Some great, considered thoughts from Mark on how CSS Grid Layout could work as part of a larger tradition in design.
Erin documents the next step after web intents.
The importance of structured content for longevity and responsiveness.
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.
I wholeheartedly agree with this summation of what professional web design and development entails.
Paul has redesigned. Again. It’s gorgeous and it is, of course, responsive.
A fascinating look at the intersection of typography and internationalisation on the BBC’s World Service site.
Another browser-based tool for viewing the same site at different sizes, but this one displays them all the same time, side by side.
Another browser-based tool for testing your responsive designs at different screen sizes.
A thoughtful post on how to approach responsive web design. In short, it’s going to be different for every project.
Remy created this tool for resizing a viewport to figure out where to put the breakpoints in your media queries.
A handy little service for viewing sites at different dimensions. Just be aware that it doesn’t actually emulate different devices.
Here’s an approach to responsive images in the Expression Engine CMS …but I fundamentally disagree with the UA-sniffing required.
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.
A swear word a day, typeset.
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.
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.
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.
A superb long-zoom view of responsive design from Andy. He also talks about the pragmatism required from any front-end developer.
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.
An excellent summation of one web developer’s journey with responsive web design.
A beautiful dose of perspective from Frank.
Luke’s notes from my talk at An Event Apart in Atlanta.
Some good ideas for formatting tabular data for small screens.
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.
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.
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.
A nice round-up of responsive design techniques, with a particular focus on content first.
A thoroughly lovely responsive design, very nicely and thoughtfully executed.
Chloe’s redesign/realign is a lovely bit of HTML5 and CSS3 all wrapped up in a responsive layout.
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.
Another write-up of a responsive redesign.
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.
A handy little GUI for generating CSS declarations for shadows, gradients, opacity and border radius.
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.
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.
A nice little demo of the “content out” approach to responsive design.
Susan pushes back on the notion of the mythical mobile user.
The perils of “scientism” in design. Reading this reminded me of Google’s forty shades of blue.
A very useful tip for creating cohesive colour palettes.
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.
Buy. This. Book.
I mean it.
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.
This is cute: using media queries to display multiple CSS Zen Garden submissions without refreshing the page — just adjust your browser window.
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 rejects a redesign in favour of a bit of responsive tweaking — and very nice it is too.
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.
Tom Phippen points to an excellent real-world example of a print layout that’s superior to the desktop version.
I am very fond of this T-shirt that Ethan designed.
- A “small screen” user is not necessarily a mobile user.
- A “small screen” device is not necessarily a mobile one.
See also: bandwidth.
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.
A good analysis of many of the factors involved in web design, of which responsiveness is clearly an important part.
A handy list of responsive design resources.
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.
Aaaaaand once again, the Riegers show us the way. This time it’s Stephanie’s presentation at Breaking Development in Dallas. Bloody brilliant.
A quick chat with me in the hallway after my talk in Seattle.
Cennydd’s closing remarks from this year’s IA Summit. Huzzah!
The redesign of the Do Lectures site is gorgeous (and responsive).
A nice overview of the increasing importance of UX on the web, written by Bobbie with soundbites from Andy.
Luke’s notes from my talk at An Event Apart Seattle do a good job of capturing the gist of what I was saying.
On Public Objects: Connected Things And Civic Responsibilities In The Networked City.
A demo reel for the proposed solution to a very, very, very long term problem.
Magazine creators share their experiences of going digital.
Jason Grigsby pulls together a bunch of links related to responsive design, mobile web and that tricky context problem.
Like Malarkey, I welcome our future responsive design progeny overlords.
A superb explanation of rhetorical devices by Ethan.
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.
Andy hammers home the benefit of a long-term format like HTML compared to the brittle, fleeting shininess of an ephemeral platform-specific app.
Fellow Brightonians, the brothers Ribot and co., launch an excellently responsive company site.
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 love hearing stories like this. Anything that breaks down the perceived designer/developer divide is a good thing, in my opinion.
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.
An argument against skeuomorphic design. The Windows Mobile 7 design vocabulary is rightly praised for its no-nonsense beauty.
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.
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.
Frank Chimero is funding his book through Kickstarter. Definitely a worthwhile investment.
A curated collection of responsive web designs.
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?
A nice little test page for responsive design techniques.
Luke points to the sweet spot between creating endpoints for classes of devices, and using responsive design to allow them to adapt.
A beautiful responsive design, within the confines of Tumblr.
Anna’s redesign is beautiful, no matter what browser or device you’re using.
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.
A really nice example of responsive web design from an unexpected source.
An excellent collection of best practices for designing URLs. I found myself nodding vigorously along with each suggestion.
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.
Julian Bleecker explains design fiction in the context of science fiction using the examples of gestural interfaces and virtual reality.
Kate Rutter on the importance of keeping design principles out in the open.
Bobbie documents the work of Jan Chipchase, currently looking into the design decisions behind counterfeit goods on sale in Shanghai.
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.
A fascinating look at the experience design of the 9h brand of capsule hotel. I like the consistent use of colour, light and iconography.
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.
Paul gives an excellent and thorough explanation of why systems thinking is important in web design.
An examination into the legibility of labels on online mapping services.
I firmly believe that this is very relevant to visual design on the web.
An interesting way of using scrolling to tell a story.
A beautiful new responsive design from Mark.
It's a type drawer that's also an advent calendar. Responsive too. Check it every day between December 1st and 24th.
I really like this idea for connecting cities to the papernet.
37 Signals document their experiments with responsive web design. Looking good.
A fluid grid that linearises at smaller viewport widths.
A neat little experiment in replicating classic 80s albums using CSS.
Aza Raskin on the UI failings of kitchens.
An excellent summation of the responsive enhancement approach to web development.
An excellent overview of the evolution of the St. Paul's School website from David Smith, noting an increasing emphasis on mobile usage.
A great explanation of the responsive enhancement of this site.
I like this idea: stencils for common interface elements to be used with good ol' pen and paper.
An excellent little rant by Cennydd that I agree with 100%: hovering does not demonstrate user intent.
Ethan shares his thoughts on the role of the reference design in the responsive workflow.
Telling stories with data — the video.
A lovely idea, nicely implemented: time-conditional CSS.
A fantastically detailed look by Michael at the evolution of the design of Chewbacca.
This will be a useful resource to peruse after you've figured out what to have for fucking dinner.
Lovely typographic showcases from Stan and friends.
If you're a long-time listener to Radiolab, this T-shirt will make sense to you. I want it.
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.
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.
A few notes on the recent re-align of the Radio 4 website by Clearleft.
A whole bunch of Jenny Holzerisms for you to turn into bumper stickers.
A fantastic blog of letterheads. Some of the typographic choices are perfect.
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.
A nice look at some rules of thumb for combining typefaces.
Burnout is a bitch.
Designing for the apocalypse.
Adam Greenfield is spot-on here, dismantling Apple's "imitate real world objects" design guideline for iPhone and iPad apps.
A nice manifestlet.
A site on designing with data from the author of Visual Language For Designers: Principles For Creating Graphics That People Understand.
Jon gets flexible. This is the mark of a true web designer.
A handy tool that generates font-sizing CSS based on a drag'n'drop interface.
Mandy's take on Dieter Rams's design principle that "good design is long-lasting."
An examination of websites behaving conversationally, including Huffduffer.
An exercise in collaboration and perspective: let another designer touch your website while you touch theirs.
A beautiful call to arms against engineerism in design. Software cries out for love.
This web conference in July in St. Petersburg, Florida looks great — the line-up is excellent and tickets cost just $99. Bargain!
A lovely bit of CSS3.
The blog of the book by Gavin Bell.
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.
Three back-to-back talks on web design at South by Southwest.
A detailed look at traditional and digital publishing, considered from the content out.
"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."
Paul takes an in-depth look at the new BBC design guidelines.
A wonderful trip down memory lane to the amateur web of the 90s.
This is the way to do an adaptable liquid layout. Media queries are your friend. Oh, and the content's good too.
A thoroughly researched and well-written look at font stacks, with some practical suggestions and advice.
The sad state of online newspapers (the design this time, not the business).
Finding the sweet spot between realism and abstraction in interface elements.
Good points, well made.
This is a work of genius. This... this is a joke ...right?
Some beautiful typefaces here, gathered together for your enjoyment.
This is a gorgeous-looking website. I have no idea what it's about.
Joshua Porter and Joshua Brewer will write one post a week, kickstarting a discussion on user experience.
The redesign of everyday things.
Balancing complexity and control.
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."
A portfolio of imaginary interfaces as seen in the movies.
A nice resource (built in HTML5) to connect developers and designers who want to Make A Thing.
I don't know whether to laugh or cry.
This is just wonderful. "Please design a logo for me. With pie charts. For free."
Superb product design.
A set of short, easily-digested lessons from the world of interaction design, inspired by "101 Things I Learned In Architecture School."
Matt gets an opportunity to use the Chernoff effect for visualising school data.
If you want to see this book published (and you should), why not pledge a little something to the cause?
Leah has some great ideas on combing "log in" and "sign up" forms into one.
Wonderful calligraphy — something we don't make much use of on the web.
A beautifully designed location-based web magazine.
A nice collection of design tools and methodologies.
In search of typographical consistency in government departments.
A very in-depth article on visually representing Boolean logic in an interface. Stick with it; it's worth it.
A pattern library that considers colour blindness.
A wonderfully engaging history of Johnston Underground.
Scroll to the bottom to see a nice robots-into-zomies effect.
This is wonderful, just wonderful; an in-depth piece on corridors in science fiction movies. Swoon!
A great article about the rising prevalence of "rough consensus and running code" in the real world.
Erik Spiekermann expounding on the beauty – and the difficulty – of designing numbers.
Like Wikipedia for typefaces. Beautiful work from Jason, Dan, and others.
"A tribute to two former bookkeepers who impacted American design & typography for all time."
Gorgeous visual design for an interestingly eclectic site.
Another interesting take on assigning a visual clue to password fields.
Nice Huffduffer-style contact form.
A very handy tool for extracting colour schemes from photographs.
A beautifully presented site wherein Ben and Frank endeavour to answer your design-related questions.
Prepare to lose yourself in this collection of movie titles from the 1920s to the present day.
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.
A glossary of typography that you can carry around with you.
The sign up process is using the Huffduffer model. Good to see more human forms in the wild.
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.
Double the awesomeness: Dan and Ethan made a book ...and a DVD ...and a workshop.
A nice rundown of media queries and multiple columns in CSS3.
Matt's opening keynote from Reboot 11 in Copenhagen.
A collection of directional signage & wayfinding artifacts, well-executed or otherwise.
Beyond the personal annual report; it's the personal brand identity guidelines.
Andy's excellent presentation from An Event Apart in Boston and @media in London. Required reading/viewing.
The ugliest logos in history.
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.
All the chairs in Pixar's The Incredibles.
A great example of @font-face in action: comparing Graublau Sans Web with with Lucida Grande.
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.
Douglas is featured in The New York Times (and look: there's Dustin behind him).
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.
Jack Schulze goes into detail on the genesis of the wonderful Here & There map/visualisation.
A nice concise look at the ampersand.
"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."
A thoughtful piece by Cennydd on the state of UX in the UK.
An excellent take on font-linking from someone who designs typefaces for a living.
An editorially managed collection of type-related goodies: "Think of it as FFFFound for all things type, typography, lettering, & signage."
A quick round-up of typographic best practices applied to the web.
An online animated spaceship and experimental aircraft art magazine. Gorgeous.
Vintage advertising of science and technology.
A lovely set of letterpress printing
A logo designer accused of ripping off his own work — kind of like what happened to Dan.
The UX Brighton website is sporting a new lick of paint and looking rather lovely.
Typographically thoughtful themes for NetNewsWIre. Even if you don't use the RSS reader, check out the gorgeous design of this site.
A Cederholm-designed site for tracking trends on Wikipedia. Check out the HTML5-based class names.
A single-serving blindingly obvious answer.
An excellent rumination on the meaning of accessibility, prompted by real world experiences.
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 talks about labours of love; pico projects; £5 apps; call them what you will.
Great article by Bruce defending the principle of One Web.
Superb article by Ethan on calculating percentages for liquid layouts. Read it. Do it.
Ampersands. Lovely, lovely ampersands.
I love the design of this site almost as much as I love the content.
Michael Smethurst runs through the process used in his bit of the BBC. It's all good.
A handy tool for putting colour palettes together.
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"
A paper app—like a web app, but for the papernet—that provides a DIY portable log book for diabetics.
Like a crowdsourced version of Eno's oblique strategies.
A look at different font stacks out there in the wild.
Good news everyone: Douglas is back! Yay!
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.
Jackson's lovely new site ...written in HTML5.
Christopher Schmitt shows how to style XFN links using attribute selectors.
Remy teaches non-techies how to use jQuery in a responsible way.
Heartfelt and moving: praise for those who sprinkle doses of humanity into software interfaces.
A handy tool for planning grids. Limited, alas, to pixels.
A great 24 Ways article by Elliot on creating and styling hCards.
The Grid System is a resource for all designers to learn about the benefits of using grid systems, golden ratios and baseline grids.
Rejoice! 24 Ways is back again. Prepare for 24 days of web development articles.
Jon's helvetican theme for Google Reader.
This talk that James gave in Bristol last week is chock full of great stuff. Well worth a read/look.
Mark's book is almost ready. Really. It's got its own site and everything so it must be true.
Ben has been working hard to upgrade the microformats wiki. His hard work has paid off: it looks great!
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."
Rachel and Kevin's new book looks very interesting indeed. It is about just one thing: CSS tables.
A comprehensive set of sketches, diagrams and screenshots from Soxiam showing the evolution and iteration of interfaces on Vimeo and other sites.
Weekly gallery of popular websites reconstructed by removing all words and images, replacing them with blocks.
Andy makes a great case for presenting clients with designs in HTML/CSS rather than flat, fixed, non-interactive graphics.
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?
I just want to say one word to you. Just one word. Are you listening? Plastics.
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.
Just for the record, this is a superb example of a bulletproof liquid layout: Simon Wiffen, solo acoustic singer-songwriter from Leeds.
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.
Collections of visual design patterns from web interfaces.
A handy little tool that's beautifully designed. View typeface/style/size combinations and then grab the CSS.
A gallery of minimally designed websites. There are some lovely grid/type-based designs on view here.
Ethan has redesigned. It's shiny and beautifully proportioned.
Richard has launched the redesign he's had bubbling away for a while now. 'Tis lovely and gridilicous.
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â€¦
A good list of interface guidelines based on real world experience with a mobile phone, an music player and an operating system.
Interface elements as fridge magnets. Make prototyping fun!
Screenshots of various log in screens on the iPhone. I think Cindy has been hanging out with Luke W.
"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…
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.
Jina's new site is live and quite lovely it is too.
A wonderfully informative and useful look at paragraphs styles ...in history and in CSS.
A proof of concept browser from Adaptive Path together with Mozilla Labs. This must have been fun to work on.
A useful collection of frustrations. Find an suitable one to send to a client today.
Delicious has finally launched its redesign. It feels weird linking to it from Magnolia.
Another beautiful frosty design from the Erskine chaps.
So, so true ...if you design for everyone, you design for no-one.
The Last.fm beta redesign is now available for the great unwashed masses to test.
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).
A nice collection of sketches and paper prototypes.
Wordle puts a new spin on the tired old tag cloud. Here's a cloud of my del.icio.us tags.
A blog devoted to film title sequences.
I would kill to get hold of this Steampunk Mac mini, flat panel monitor and brass keyboard.
A version of the beautiful Seed Conference one-sheet Website that has been reworked to use ems instead of pixels.
Jon's demo site for his talk at The Future of Web Design. It's all about cheese. I wish it were real.
These are the guys that painted the walls across from the Clearleft office. Every day, at least 10 people take pictures of their work.
A nice piece of UI design. I think Kathy Sierra would like this.
Good design is invisible. Rebecca points out why Twitter is very good social design indeed.
Cameron has put all the materials from his four-part series together in one handy spot.
An attempt to create a standardised icon for geotagged content, much like the standardised icon for RSS.
The typography on this page is simply gorgeous. And the event looks good too.
The importance of good URL design.
Joe's latest project is deliberately garish.
A holding page for Malarkey's upcoming series of workshops. Add you name if your interested.
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 10. Many happy returns, Jason.
Another "barnacle app" built on Twitter: answer a question, view the results. Cute.
I'm loving the typography on this blog.
Matt Jones speaks about "Designing for SpaceTime, Building in No Time."
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.
The latest website from Derek Powazek allows artists and businesses to hook up. Nicely done.
Good typography + stylish grid + liquid layout = WIN!
A site devoted to cataloging good website typography.
Live in the Washington DC area? Be sure to make it along to this on February 29th.
Brian shows some clever uses of the little-known :target pseudo-class.
An interesting CSS technique that uses table-layout instead of float.
A neat new CSS effect. You don't see many of those these days.
Clean, businesslike icons by the icon artists behind Windows XP and Ubuntu Linux.
The idea I like most from this portfolio is the heat-sensitive wallpaper with blooming flowers.
A collection of beautiful illustrations scanned from a flight-training manual.
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.
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.
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 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."
Like "is it Christmas?" or "is Twitter down?" but less Boolean.
Jina has put together an excellent series of steps you can take to keep not just nice, but downright sexy.
Cindy is now working for nclud. That's good for Cindy and good for nclud.
Check out the redesigned site for the podcast from Jon and John. Acknowledge the divinity in its gloriously liquid splendour. Smashing work, chaps!
A new twist on the lightbulb.
A great little tool for creating favicons.
Awesome iPhone wallpaper images from the awesome Anton.
Best. Clothes pegs. Ever.
I could spend ages browsing through the archives of this site dedicated to analysing album sleeve artwork. In fact, I just did.
When life gives you lemons, make lemonade. When life gives you spam, make pretty pictures.
Chris mocks up an interface idea for Apple.
Just rub it on and watch it grow. Gauranteed to satisfy your client.
No, this is not a joke. This really is the DCI Counterterrorist Center "Terrorist Buster" logo. Un. Be. Lievable.
A series of infographics comparing Chinese and German culture. Amusing and astute.
Here's the in-depth lowdown on the CSS Eleven supergroup announced by Andy at Web Directions South last week.
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.
Beautiful artwork in a minimalist interface. But you'd better have your browser window maximised on a big monitor. *sigh*
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?
Emily's new site for little snippets of design and subculture goodness looks like a treat.
"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 are hiring. If you're London-based and in the job market, I can think of a lot worse places to work.
A collection of books with beautiful typography.
"£5000 in £10 and £20 notes were individually dropped around the streets of London with a removable sticker." Clever.
A really nice visual representation of just how isolated the Imperial system is.
A new blog dedicated to, yup... typography. Looks like a keeper.
An interview with type designer, Eric Olson.
“Attention all startups, it’s a bad idea to hang your ID hat on a speech bubble. Just don’t.”
A cheat sheet for combining typefaces. No hard and fast rules but a handy guide to print out and use.
Charmr is a design concept for diabetes management devices proposed by Adaptive Path following a process of research and iteration.
Sidesh0w is dead! Long live the new Ethan! I for one welcome our unstoppable robot ninja overlords.
A profile on Apple.com of Flash designer par excellénce, Josh Davis.
Making the link between good product design and discouraging crime.
A collection of websites incorporating noteworthy visual design elements.
Slides based on a usability analysis of Wordpress by some of the Happy Coggers.
Pulling together a bunch of CSS tricks from a range of sources: reseting, baseline typography and grids (fixed width, unfortunately).
I love this article by Amber Simmons. The truth shines through.
The Validator got a new lick of CSS paint and it's looking good.
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 has launched his business site. Lovely grids and typography, as you'd expect.
What excellent taste this web design shop has. I don't mean the fancy scrolling—I'm talking about what's on the bookshelf.
We may just have to get this italic poster for the Clearleft office.
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.
The newly-launched redesign of Le Monde Diplomatique is absolutely gorgeous. Whitespace on a newspaper: finally!
A nice well-illustrated article from Larissa Meek pointing to some design trends that can be applied to the Web.
Having left web accessibility behind him, Joe camps out at the Clearleft office where he immediately turns into a wanker designer.
Stephanie Sullivan has redesigned. Her site is now almost as smart and sassy as she is. Very nice work, Steph.
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.
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.
Malarkey's got a brand new bag... if by "bag" you mean "website". And a very nice bag it is too.
The front page of The Guardian website has been redesigned with some good use of typography and colour. Shame it's so wide though.
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.
Now when your satanic client tells you to make the logo bigger, you can always rock out.
Tom Watson's new site design changes stylesheets with the season. More of this kind of thing please, Web.
Mike and the team have redesigned/realigned Newsvine with some nice customisation of the front page.
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.
A nice subtle lifestream implementation complete with fading over time.
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.
Dave has made some icons — very nice ones.
A really nice article by Jesse Bennett-Chamberlain detailing the process behind a site design.
Khoi has posted the slides from his grids workshop online. Download and learn.
Coffee porn, some of which is from the baristas working at Travelbag in Brighton.
Did you notice that Upcoming recently switched from liquid to fixed? Have your say about that here.
A nice collection of royalty free texture photos using the Flickr API.
A great hands-on article on the benefits of playing with paper.