Style Guide Resources
A very handy collection from Anna: articles, books, talks, podcasts, and examples of front-end style guides. If something’s missing, feel free to add it.
A very handy collection from Anna: articles, books, talks, podcasts, and examples of front-end style guides. If something’s missing, feel free to add it.
A self-describing list of cursors available through CSS.
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.
Harry has written down his ideas and recommendations for writing CSS.
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.
The challenges of maintaining a living breathing front-end style guide for an always-evolving product (the Lonely Planet website in this case).
Personally, I’m all for more browsers. The more, the merrier.
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.
A look at the architectural history of the network hubs of New York: 32 Avenue of the Americas and 60 Hudson Street. Directed by Davina Pardo and written by her husband Andrew Blum, author of Tubes: A Journey to the Centre of the Internet.
These buildings were always used as network hubs. It’s just that the old networks were used to house the infrastructure of telephone networks (these were the long line buildings).
In a way, the big server hotel of New York—111 Eight Avenue—was also always used to route packets …it’s just that the packets used to be physical.
Heydon Pickering put together a great collection of accessible self-contained interface patterns that demonstrate smart use of ARIA.
Words of wisdom from Scott on the clash of brand guidelines and the flexible nature of the web:
One thing I am pretty sure of though, is that having a fast, accessible, user-friendly site can reflect incredibly well on a company, and I’d love to see more guidelines and expectations that prioritize these aspects of a service as branding requirements in addition to the usual visual details.
Here’s a nice little UI addition to Chrome. When you focus on the URL bar, if the current site has site-specific search discoverable via rel=”search”, then you get a greyed-out hint to press tab so you can start searching the site.
Nat’s take on Chrome’s proposal to bury URLs:
The URLs are the cornerstone of the interconnected, decentralised web. Removing the URLs from the browser is an attempt to expand and consolidate centralised power.
I really like this interface idea from Brad that provides the utility of input masks but without the accessibility problems.
I love the thinking behind this plugin that highlights the weasel words that politicians are so found of.
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.
If your startup gets acquired and shut down by a larger company, this is the way to announce it—no “we’re excited to announce”; no “incredible journey”. Instead there’s an apology and regret (which is exactly what your users will be feeling).
A reusable set of responsive patterns and templates for UK councils.
Mike writes about what it was like being a client for a change. After working with him on the Code for America project, I can personally vouch for him as a dream client:
Clearleft’s pattern deliverables are the special-special that made the final work so strong. Jon Aizlewood’s introduction to the concept convinced me to contact Clearleft. Jeremy Keith’s interest in design systems kicked off the process, and Anna Debenham’s fucking rock star delivery brought it all home.
This looks like a nifty take on the ol’ using-labels-like-placeholders pattern for forms. I still prefer to have a label visible at all times, but this seems like a nice compromise.
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.
A lovely little tour of eleven ubiquitous icons.
A great post from Anna on the front-end styleguides she’s worked on for A List Apart and Code for America. ‘Twas a pleasure working with her on the Code for America project.
A-mer-ica! Fuck yeah!
Another front-end style guide for the collection. This time it’s from A List Apart. Lovely stuff!
This observation by Josh seems obvious in hindsight (all the best insights do), but there’s a powerful idea there:
So here is the real difference: scrolling is a continuation; clicking is a decision. Scrolling is simply continuing to do what you’re currently doing, which is typically reading. Clicking, however, is asking the user to consider something new…is this new thing the same as what I’m already doing, or something new?
A nice little cheat sheet for simple simple typography wins.
This is called expletive infixation.
I’ll always remember the “Phila-fucking-delphia” example from Steven Pinker’s The Language Instinct:
If you said “Philadel-fucking-phia”, you’d be laughed out of the pool hall.
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.
Hot on the heels of the Mailchimp styleguide, here’s the collection of patterns used by Mapbox. I’m not keen on some of their markup choices, but again, it’s great to see organisations publicly documenting this stuff.
The markup for the patterns that Mailchimp use on their products. I love getting a glimpse of how companies handle this kind of stuff internally.
Dan Bricklin—co-creator of the original VisiCalc spreadsheet—turns his attention to responsive design, specifically for input-centric tasks.
I bet you’re going to just keep clicking and clicking and clicking…
This is a great idea—the Brighton Cookbook Club:
You know when you get a new cookbook, but you only ever end up using two or three recipes from it? Coming along to Cookbook Club means that you’ll get to try a whole range of recipes from one book to see what you fancy, maybe broaden your palate, and have a jolly fun evening meeting others while you’re at it!
The transcript of a terrific talk by Harry on how dark patterns are often driven by a slavish devotion to conversion rates.
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.
A very handy starting point for creating a front-end style guide.
A terrific quiz about browser performance from Jake. I had the pleasure of watching him present this in a bar in Amsterdam—he was like a circus carny hoodwinking the assembled geeks.
I guarantee you won’t get all of this right, and that’s a good thing: you’ll learn something. If you do get them all right, either you are Jake or you are very, very sad.
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.
The existential angst of unfeeling feedback.
An acquisition, or an aqui-hire, is always a failure. Either the founders failed to achieve their goal, or – far likelier – they failed to dream big enough. The proper ambition for a tech entrepreneur should be to join the ranks of the great tech companies, or, at least, to create a profitable, independent company beloved by employees, customers, and shareholders.
A cute little read-only Twitter client from James that only displays fully-formed tweets: no hashtags, no @-replies.
Want to style those new HTML5 input types? I hope you like vendor prefixes.
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.
This is wonderful stuff! I’m a big fan of the
datalist element but I hadn’t realised how it could be combined with
input types like
The story of one site’s disgraceful handling of acquisition and shutdown (Punchfork, acquired by Pinterest) and how its owner actively tried to block efforts to preserve user’s data.
Armchair travelling to Ballardian locations.
A collection of those appalling doublespeek announcements that sites and services give when they get acquired. You know the ones: they begin with “We’re excited to announce…” and end with people’s data being flushed down the toilet.
Timoni tackles the tricky topic of teaching taps.
Discoverability can be hard, but that shouldn’t stop us trying out new interactions.
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.
Dan isn’t keen on the term “natural user interface.” Here’s why.
A nice feature on Seb in the latest issue of Make magazine.
Biting satire that hits its mark superbly. Ouch! Be careful — this is sharp …and funny.
Cennydd uses the word “select” as an input-neutral term for what we might be tempted to call clicks or taps. Personally, I like the term “choose”, although that word might have too much intent bundled with it.
Reviews based entirely on the feel of the knob.
Here are some nice patterns that Paul uses for starting points in his own projects.
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?
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?
Beautiful thoughtful work from the BERGians.
A short film about interaction design.
A lovely new service from Adrian that allows you to sync up guitar tabs with videos. It’s a very impressive in-browser app.
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.
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.
Luke and Jason have done some excellent research (and put together some demos) into how the placement of navigation could be optimised for touch screens of all sizes. Turns out that the “standard” convention of having navigation along the top is far from ideal on a touch-enabled device.
The Guardian’s front-end patterns library. The modules section contains their equivalent of a pattern primer. Very nice!
Interaction dissolving into the environment.
CSSquirrel shares my feelings on the email notification anti-pattern.
I like this passwordless log in pattern but only for specific use cases: when you know that the user has access to email, and when you don’t expect repeat “snacking” visits throughout the day.
These short pocketbooks from Five Simple Steps look like they’ll be very handy indeed. Shame they won’t be available in dead-tree format: I bet they’d be really cute.
Chris and Nathan’s book is finally out. I’m going to enjoy reading through this.
Hey look; Anna’s in a CSSquirrel comic! And for good reason: Kyle is as impressed as I am with Anna’s research into browsers on gaming devices.
There’s also a call for more community device labs. I approve.
The truth about startups. Got a startup? Take the quiz. It’s harsh but fair.
This is an important subject (and one very close to my heart) so I’m very glad to see these data protection guidelines nailed to the wall of the web over at Contents Magazine.
Here’s a brainbuster for ya: a single file that renders both as HTML and as a JPEG. As an HTML page, it even contains an img element with a src of …itself!
Compare the “view source” output with the generated source output to see it’s being interpreted.
A beautiful short film about The Long Now Foundation’s Rosetta Project.
A fascinating insight into the psychological implications of animated progress indicators.
Some sensible advice from Oliver Reichenstein. Cluttering your social media icons isn’t helping and may actively be hindering your audience.
Paul has open-sourced his front-end style guide and put it up on Github. It’s a very handy starting point for making your own.
See now, this is why liquid layouts are the way to go.
This post by Jason Fried is three years old but it’s more relevant than ever.
What a loss. Is that the best the next generation can do? Become part of the old generation? How about kicking the shit out of the old guys? What ever happened to that?
Just copy and paste.
Dear soon-to-be-former user…
Sneaking in to climb the Shard at night.
In amongst all the shiny demos on this site, this one could actually be useful.
Existential ennui delivered through interface copy.
Emily walks us through a responsive design case study, stressing the importance using percentages for layout.
Anna goes through some of her favourite pattern libraries. It’s really, really great to see this stuff getting documented.
I met one of the guys from the Starbucks team at South by Southwest and he mentioned that they had a markup pattern library. I encouraged them to make it public, and it here it is!
I really hope that more companies and agencies will start sharing stuff like this.
Andy documents the kinds of symbols being used to represent revealable navigation on mobile.
Luke catalogues layout patterns in responsive designs.
A trip to Buzludzha in Bulgaria, a derelict monument to an abandoned ideology.
Prompted by Brad’s recent post, here are some musings on three methods of handling navigation in responsive sites.
Richard gives the lowdown on the new translate attribute in HTML.
A hackweek project from Twitter employees to create the best/worst recruitment video of all time.
Nik demos the neat interactions in Realmac’s latest piece of iOS software in this cute little video.
Harry interviews Glenn about web intents (web actions). Glenn gives a good clear explanation of what they are.
The video of my presentation on digital preservation at last year’s Build conference.
Our communication methods have improved over time, from stone tablets, papyrus, and vellum through to the printing press and the World Wide Web. But while the web has democratised publishing, allowing anyone to share ideas with a global audience, it doesn’t appear to be the best medium for preserving our cultural resources: websites and documents disappear down the digital memory hole every day. This presentation will look at the scale of the problem and propose methods for tackling our collective data loss.
Matt is offering up his space in central Brighton every Wednesday afternoon for free-for-all Arduino tinkering. I should try to get over there.
Stephanie focuses on Android but this is a cautionary tale about trying to impose control over what you’re sending to the multitude of mobile devices out there.
Designing to fixed screen sizes is in fact never a good idea…there is just too much variation, even amongst ‘popular’ devices.