Tags: pattern

I Don’t Want Your Fucking App

Doorslamming.

On pattern portfolios | Clear Thinking - The Clearleft Blog

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

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

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

Implementing off-canvas navigation for a responsive website by David Bushell

This off-canvas demo is a great practical example of progressive enhancement from David. It’s also a lesson in why over-reliance on jQuery can sometimes be problematic.

Base CSS | Pasteup | Guardian News

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

Social Login Buttons Aren’t Worth It | MailChimp Email Marketing Blog

A great in-depth explanation by Aarron on why Mailchimp dropped their Facebook and Twitter log-in options. Partly it was the NASCAR problem, but the data (provided by user testing with Silverback) also brought up some interesting issues.

CSSquirrel : The Savage Beatings Anti-Pattern

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

Photo Album - Imgur

At least one of these will probably drive you crazy.

NoPassword

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

Responsive Web Design Patterns | This Is Responsive

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

Complex Navigation Patterns for Responsive Design | Brad Frost Web

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

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

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

LukeW | Off Canvas Multi-Device Layouts

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

Build a smart mobile navigation without hacks | Tutorial | .net magazine

A really great markup and CSS pattern for “content first, navigation second” from Aaron.

paulrobertlloyd/barebones

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

Scalable Navigation Patterns in Responsive Web Design | Palantir.net

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

Privacy Patterns

Cataloguing patterns (best practices, really) for privacy-concious site owners.

An Ajax-Include Pattern for Modular Content | Filament Group, Inc., Boston, MA

Scott walks through the code and thinking behind the conditional loading pattern on The Boston Globe site. This is such a useful and valuable pattern!

Style guide round-up

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

Style Guide

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

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

Off Canvas

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

LukeW | Multi-Device Layout Patterns

Luke catalogues layout patterns in responsive designs.

Time to Kill Off Captchas: Scientific American

Yes, yes, yes! This article does an excellent job of explaining what Captchas are attempting to do and why, therefore, they are so utterly shit.

Responsive Navigation Patterns | Brad Frost Web

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

Pears

A great pattern library from Dan.

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.

The mobile web splash screen antipattern [Legends of the Sun Pig - Martin Sutherland’s Blog]

Excellent points, eloquently delivered, on why sites shouldn’t be shoving their native Apps in the face of people who just arrived at their website on a mobile device.

Putting up a splash screen is like McDonalds putting a bouncer on the door, and telling customers who just parked their car and want to enter the restaurant that they should use the drive-through instead.

Twitter Bootstrap

Bootstrap is Twitter’s CSS and markup style guide—very similar to the pattern portfolios that we often provide as deliverables at Clearleft.

HTML5Pattern

A handy list of regular expressions that you can use in the new pattern attribute on the input element in HTML5.

Quoting and citing with blockquote, q, cite, and the cite attribute | HTML5 Doctor

An excellent article from Oli on markup patterns for quotations …though I still think that the cite element can be used for people’s names.

txt2re: headache relief for programmers :: regular expression generator

I’m rubbish at regular expressions so this little tool might just save my skin someday.

Virgin’s Evil Microcopy | Flickr - Photo Sharing!

It’s like, how much darker could the pattern be? None. None more dark.

Virgin's Evil Microcopy

Flyer beware; real cost of flying Ryanair « Alan Colville

Superb in-depth analysis of Ryanair’s website dark patterns and nasty brand strategy.

City Crawlers Berlin

This looks like it could be a good book: a collaborative project to find patterns and stories in the data of one city.

Oh, and the site is lovely and responsive.

Styleguides for the Web — Paul Robert Lloyd

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

Web 2.0 Suicide Machine - Meet your Real Neighbours again! - Sign out forever!

A quick way of leaving Facebook, Twitter, Linked In and MySpace. It uses the password anti-pattern but after using this, I guess you won't be needing that password again.

Service Design Tools | Communication methods supporting design processes

A nice collection of design tools and methodologies.

We are Colorblind » Patterns for the Color Blind

A pattern library that considers colour blindness.

The Value Class Pattern - Articles - MIX Online

A microformats article by yours truly, reworking a blog post from a while back about the value class pattern.

Twitter Status - Phishing scam

And this, boys and girls, is why the password anti-pattern is bad, m'kay?

Don't Give Your Account Passwords Away, a Mission on PMOG

A PMOG mission where players learn about the password anti-pattern.

Twitter Status - Don't Click That Link!

Twitter's promotion of the password anti-pattern bites them on the ass.

Twitter AWESOMENESS!!!

View source.

FatBusinessman.com : On Authentication

David has written an excellent comparison of the two differing mindsets when approaching online authentication. In no uncertain terms, OAuth (or an OAuth style authentication) is right and the password anti-pattern is wrong, wrong, wrong.

Pattern Tap : Interface Collection for Design Inspiration

Collections of visual design patterns from web interfaces.

The Art of Jim Denevan

The circlemakers work with vegetation. Andy Goldsworthy works with the landscape. Jim Denevan works with sand.

Facebook Security Advice: Never Ever Enter Your Passwords On Another Site, Unless We Ask You To

I never thought I'd find myself linking to and agreeing with a post on TechC*nt but it's good to see somebody pointing out Facebook's hypocrisy with using the password anti-pattern.

Fun (and Fraud Detection) with Benford’s Law | Data and the Web

Benford's law blows my mind. Be sure to watch the video. This is all related to network theory and power law distributions ...I'm just not sure how.

Mickipedia » Blog Archive » Social Networking Fatigue. I has it.

Good Reads is responsible for one of the most egregious abuses of trust — using the password anti-pattern to spam your address book. Micki has the details.

Looking Back: How Different Groups Voted

A really nice interactive infographic from the New York Times.

Coding Horror: Please Give Us Your Email Password

An excellent rant by Jeff Atwood that explains just why the password anti-pattern is such an abhorrent practice: "How did we end up in a world where it's even remotely acceptable to ask for someone's email credentials?"

Yahoo! Address Book API - YDN

You can know use an API (with BBAuth) to get contact Yahoo account contact details. There really is no excuse now for still using the password anti-pattern.

Spokeo? More like Spooky-o; bad practice taken to the extreme. at Aral Balkan

Aral points to what is possibly the most egregious password anti-pattern implementation yet: a new startup called Spokeo http://www.spokeo.com/public/join

Coding Horror: A Question of Programming Ethics

A cautionary tale that explains just why the password anti-pattern needs to die. Coding horror indeed: in this case, 1,777 GMail accounts were compromised.

hCardMapper - How to use hCards to fill in forms

An open source project for parsing hCards to add to sign-up forms.

disambiguity - » Design Ethics - Encouraging responsible behaviour

Leisa joins in on the password anti-pattern. As she says, this is a question of ethics. I've already made my position clear to my colleagues and clients. Have you?