BlogmyQuery – BMQ

If you have a problem and need a solution for it, chances are high that a JavaScript library or jQuery plugin exists that was created to solve this very problem. Such libraries are always great to have in your bookmarks or in your local folders, especially if you aren’t a big fan of cross-browser debugging.

A JavaScript library isn’t always the best solution: it should never be a single point of failure for any website, and neither should a website rely on JavaScript making the content potentially inaccessible. Progressive enhancement is our friend; sometimes JavaScript won’t load, or won’t be supported — e.g. users of mobile devices might run into latency issues or performance issues with some JavaScript-libraries. Often large all-around JavaScript libraries such as jQuery might be an overkill, while tiny JavaScript micro-libraries could serve as good, “light” alternatives for a particular problem. We’ll present some of them today.

In this two-part overview, we feature some of the most useful JavaScript and jQuery libraries which could be just the right solutions for your common problems. You might know some of these libraries, but you probably don’t know all of them. In either case, we hope that this overview will help you find or rediscover some tools that you could use in your next projects.

Due to the length of this post, we’ve split it into two parts for your convenience:

• Part 1: Web Forms, Typography, Time-Savers and Images
• Part 2: Text, Tables, Lists and Useful Development Tools

Quick Overview:

Below you’ll find a brief overview and links to the libraries and tools featured in this post. They are supposed to help you find just the right tool quickly without browsing the whole page.

• Web Forms:
  forms framework – auto-saving drafts – file upload (and resuming large downloads) – <select> boxes – modal boxes – form accordion – dynamic labels – drop-down with images – tooltips – extended input – form validation – credit card validation (alternative) – email check – password complexity
• Web Typography:
  repairing vertical baseline – align text to a grid – responsive measure – fixing widows – fluid line height – scalable headlines (or smart headlines) – Lettering.js – Kerning.js
• Little Time-Savers:
  exchange rates and currency – date/time formatting – relative timestamps – number and currency formatting – cookies.js – zip.js – countdown.js – sticky content – Google Maps – interactive maps – progress bar – favicon notifications (or Notificon)
• Images, Maps, Graphs:
  world maps – subway map – Google maps – open source maps – SVG fallback – gauges – graphs – timeline – Retina display – magnifying glass – interactive graphs – plots – time visualization

Web Forms and Input Validation

Select2 jQuery Plugin
A jQuery-plugin for replacement and enhancement of <select>-boxes. The plugin supports search, remote data sets, and infinite scrolling of results. Users can just start typing what they’re looking for. Non-matching entries are removed from the view, and options can be selected using “Enterâ€� or a mouse click. The plug-in works with standard select input fields as well as with multiple selects and optgroup. It also has support for selected, disabled and default text (HTML5’s placeholder attribute). The plug-in is based on Chosen, an alternative solution which is currently available in jQuery, MooTools and Prototype flavors and as a Drupal 7 module.

 

jQueryCoreUISelect
Another cross-browser solution to enhance the <select> element with jQuery and CSS. Requires jQuery 1.6 or higher. It provides full customization, support of optiongroup, automatic calculations, keyboard support, callback functions and is compatible with mobile devices.

Sisyphus.js
This script allows Gmail-like auto-saving of drafts. It stores form data to the HTML5 local storage of the user’s browser and restores it when the user reloads or reopens the page or opens the page in a new tab. The data is cleared from local storage when the user submits or resets the form.

jQuery Credit Card Validator
This library attaches to the input event (with a fallback to the keyup event) and so every time a number in the input field changes, it calls a validation function. When a card is recognized, the credit card type is highlighted; and if the credit card number is correct, it is highlighted with a green checkmark as well. The plugin supports American Express, Diners Club, Discover Card, JCB, Laser, Maestro, MasterCard, Visa and Visa Electron. You might want to consider credit cards JavaScript validator and the Smart Validate Credit Card Validation plugin.

TextExt
This library allows you to transform HTML text into input fields, without resorting to code inflation. The plugin inserts aesthetic as well as practical input possibilities, e.g. Tags, Ajax, Focus and others.

Avgrund: Better Modal Boxes
A jQuery plugin for displaying a depth illusion between popup and page. The original script by Hakim El Hattab uses CSS transitions and transformations, and the plugin gracefully degrades in those that do not support transitions and transforms. MIT licensed.

VisualSearch.js
This library enhances ordinary search boxes with the ability to autocomplete faceted search queries. You can specify the facets for completion, along with the completable values for any facet. You can retrieve the search query as a structured object, so you don’t have to parse the query string yourself.

Ideal Forms Framework
A very comprehensive jQuery plugin for building and validating responsive HTML5 forms. It provides keyboard support, customizable input types, “on the spot” validation, localization and HTML5 placeholder polyfill. Supported in IE8+, Chrome, Firefox, Opera, iOS5+, Android 4.0+.

Mailcheck
With this JavaScript spell-checker you can suggests another domain when the user misspells it in an email address. Mailcheck helps effectively reducing sign up typos. While it already includes some  domains, you can easily supply your own.

Validate.js
A lightweight JavaScript form validation library. You can validate form fields using over a dozen rules and set custom messages; the library doesn’t have any dependencies and you can define your own validation callbacks for custom rules. Works in all major browsers (even IE6!).

jQuery File Upload
File Upload widget with multiple file selection, drag&drop-support, progress bars and preview images. It supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.

Grumble.js
This jQuery plugin provides tool tips without being limited to cardinal directions. A grumble can be rotated around a given element at any angle, all 360 degrees and at any distance — with CSS. Works in Internet Explorer 6+ and modern browsers. Also, check Tipped, a larger library of various designs and implementations of tooltips with an extensive API.

Dialogs for Twitter Bootstrap
A small JavaScript library which allows you to create dialog boxes using Twitter’s Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers. You might want to check out the Date Range Picket for Bootstrap as well as a growing library of HTML Snippets for Twitter Bootstrap.

ddSlick
Prashant Chaudhary has realeased a free lightweight jQuery plugin that lets you create a custom drop-down that can include images, a short description, along with your usual text and value. It also supports callback functions on selection. You could use CSS3 Drop-Downs as well.

noty
This jQuery plugin makes it easy to create alert, success, error, warning, information and confirmation messages. The notification can be positioned anywhere on the page and you can customize the text, animation, speed and buttons easily.

jQuery.complexify.js
Complexify helps you to accurately gauge the quality of a user’s password to give them visual feedback, and to enforce a minimum level of security.

Numberfy
With Numberfy you can integrate native support for line numbers in your website’s text areas. On every key press in the text area, the text area’s current value is split into lines. This script will not work in IE due to a bug in the text-wrap properties.

FormAccordion
A jQuery plugin for easily hiding and revealing related form fields conditionally.

jQuery.superLabels
You can use the library to give your forms a fade-out label. This implementation makes the label slide across the field when gaining focus and fade out when a value is entered. A fallback is provided as well.

cryptico
An encryption system utilizing RSA and AES for JavaScript.

Web Typography Libraries and Plugins

Baseline.js
A jQuery plugin for restoring baselines thrown off by odd image sizes. To use it, you just call the plugin passing the height of your baseline as a variable. You can also define multiple baselines for different responsive breakpoints.

FTColumnflow
Developed by the development team of Financial Times, this library is essentially a polyfill that fixes the inadequacies of CSS column layouts. With the library, you can provide configurable column widths, gutters and margins, define elements spanning columns, keep-with-next to avoid headings at the bottom of a column, group columns into pages and standardize line height to align text baseline to a grid.

Responsive Measure jQuery Plugin
A simple script that allows you to pass in a selector (ideally the container where your primary content will go), which generates the ideal font size needed to produce the ideal measure for your text. The script also  generates a resolution-independent font-scale based on the ideal font-size. Created by Josh Brewer.

The Widow Tamer
The Widow Tamer is a small JavaScript library that automatically “fixes” typographic widows. It’s designed to work with responsive sites, fixing widows as it finds them on resize or orientation change.

Fluid Line-Height
With his article, Tim Brown inspired developers to release tools that adjust line-height for optimum readability on responsive websites. The so-called molten-leading binds the height of the line to an element’s minimum and maximum width. jQuery-minLineHeight is a jQuery plugin that works similarly with minimum and maximum width association.

FitText.js
This jQuery plugin helps you create scalable headlines that fill the width of a parent element in your fluid or responsive layouts. You might want to check out Lettering.js as well to get a complete down-to-the-letter control of letters in your projects.

Kerning.js
This library lets you kern, style, transform, and scale your Web type with CSS rules, automatically. You can adjust pairings, introduce font conditionals and augment properties.

SlabText.js
The script splits headlines into rows before resizing each row to fill the available horizontal space. The ideal number of characters to set on each row is calculated by dividing the available width by the pixel font-size – the script then uses this ideal character count to split the headline into word combinations that are displayed as separate rows of text.

Little Time-Savers

money.js: Open-Source Exchange Rates and Currency Conversion
Joss Crowcroft has created an Open Source Exchange Rates API, which provides up-to-date, flexible and portable currency-conversion data that can be used in any application, framework or language (not just JavaScript). It has no access fees, no rate limits, no nasty XML: just free, hourly updated exchange rates in JSON. Joss also built money.js, a JavaScript currency conversion library that can be easily integrated in any website. A demo playground and detailed documentation are provided on the website, and the source code is available on GitHub.

Accounting.js: Easier Number and Currency Formatting
This simple, tiny JavaScript library will solve your currency and numbers-related formatting hassles, and it even includes optional Excel-style column rendering to line up symbols and decimals. It will make all of your numbers and currencies look much more uniform and professional.

Moment.js: Format Dates And Times
Moment.js is a lightweight JavaScript library which lets you format, parse and manipulate dates. You can add or subtract dates from one another, as well as parse things like Unix Timestamps. Display options include formatted dates, time from now, difference, time from another moment, native date and support for leap years.

Smart Time Ago
This little jQuery library provides you with an intelligent way of updating relative timestamps in your documents. Smart Time Ago checks and updates every 60 seconds the relative time, within a scope which you specify at the start. It checks the newest time in your scope and tunes the checking time interval to a proper value. The tool can be used as a jQuery plugin, or – if using node – can be installed from npm.

sortByTimeAgo.js
A little JavaScript library that takes an array of objects with TimeAgo properties and sorts them from newest to oldest.

Piecon
Piecon is a tiny JavaScript library for dynamically generating progress pie charts in your favicons. It has been tested to work in Chrome 15+, Firefox 9+ and Opera 11+.

Notificon: Favicon Notifications and Alerts
Matt Williams’ Notificon is a JavaScript library for creating favicon alerts and notifications. Instead of having to create a number of favicons and serving them to the client, you can specify a label and a favicon (the default being the current favicon), and it will generate a favicon notification for you. The script currently works with Chrome 6+, Firefox 2+ and Opera, but it’s a nice little add-on for browsers that support it.

jQuery Stick ‘em: Make Content Sticky on Scroll, to a Point
A problem: some of the images in the layout are very tall, so by the time you scrolled down to the bottom of the images, you would have to scroll back up just to read the description of the images or navigation items. The solution: make the content sticky as you are scrolling. This library solves this problem.

Countdown.js
Human descriptions for a span of time are often fuzzier than a computer naturally computes. For example, how long does “in 1 month” mean? We casually talk about four weeks, but in fact there is only one month in a year which is four weeks long. Countdown.js tackles this problem by producing an accurate and intuitive description of timespans which are consistent as time goes on.

geolib
A small library to provide some basic geo functions like distance calculation, conversion of decimal coordinates to sexagesimal and vice versa.

Cookies
Cookies.js is a small client-side JavaScript library that makes managing cookies easy. It caches cookie values, making sequential reads faster, supports AMD / CommonJS loaders and is supported in Chrome, Firefox 3+, Safari 4+, Opera 10+ and Internet Explorer 6+.

firstImpression.js
firstImpression.js is a micro-library (1 Kb minified) that answers the simple question, “Has this user visited this site before?� The detection doesn’t require much logic, so the majority of the code is just a plain JavaScript port of the popular jquery.cookie plugin.

Chirp.js: Tweets on Your Website
A lightweight templating JavaScript library that enables you to display tweets on your website. Client-side caching is available; and you can set if you’d like to show retweets and replies, too.

simpleWeather jQuery Plugin
A simple jQuery plugin to display the weather information for any location. The data is pulled from the public Yahoo! Weather feed via the YQL API.

zip.js
A JavaScript library to zip and unzip files. zip.js provides a low-level API for writing and reading large zip files (up to 4GB with File Writer API). Works with Chrome, Firefox, Safari 6 and (unfortunately) Internet Explorer 10+. With Safari 5 and IE9, you must disable Web Workers and use a Typed Array polyfill.

Images, Maps, Graphs and Visualization Libraries

jVectorMap
jVectorMap is a jQuery plugin that renders SVG and VML vector maps in browsers ranging from the ancient Internet Explorer 6 to modern browsers. jVectorMap uses JavaScript, CSS, HTML, SVG or VML, and no Flash or any other proprietary browser plugin is required.

Subway Map Visualization jQuery Plugin
If you often deal with government projects, university departments or any websites of sophisticated organizations, every now and again you’ll be asked to design a nice visualization that would explain the various divisions, structures and internal hierarchy of those organizations. Where do you start? Well, creating a Subway Map-alike visualization is an option worth considering.

GMaps.js
This library allows you to easily use Google Maps in your projects. Extensive documentation or large amount of code aren’t required anymore. You might want to check out Gmap3 jQuery plugin as well.

Leaflet: Open-Source Interactive Maps With JavaScript
A library for creating tile-based interactive maps for desktop and mobile browsers. An easy-to-use API is available, and the tool emphasizes usability, performance, flexibility and excellent browser support. The library offers a variety of map layers, including tiles, markers, pop-ups, image overlays and GeoJSON. It supports panning on both mobile and desktop browsers, double-tap zoom on mobile browsers (plus multi-touch zoom on iOS) and more. On iOS, hardware acceleration is enabled, and Leaflet has a modular structure that lets you reduce the size of the library to make it even faster. The project is open source and available for further development and forking on GitHub.

SVGeezy: a JavaScript plugin for SVG fallbacks
A JavaScript library which detects SVG images on your website and automatically “looks” for a standard image fallback for those older, less capable browsers. Created by Ben Howdle and Jack Smith.

Retina.js
A script that checks each image on your website, when it’s loaded by a user, and replaces low-resolution image with their high-resolution equivalent, if available. It’s assumed that you use Apple’s high resolution modifier (@2x) to designate high resolution versions of images.

JustGage
A JavaScript library for generating and animating gauges. Based on Raphaël library for vector drawing, it’s resolution-independent and works in all modern browsers.

arbor.js
A graph visualization library for building trees with connected nodes of data. Arbor.js is essentially a layout algorithm with abstractions for graph organization and screen refresh handling.

Timeline: Generate Timelines To Visualize Data
This library is supposed to pull in media from different sources. It has built-in support for pulling in data from Twitter, YouTube, Flickr, Vimeo, Google Maps and SoundCloud—and more will be included in the near future. You can easily fill in data from a Google spreadsheet, or use a more detailed method such as JSON to create your time-line. You can also host it on your website by using the Timeline jQuery plugin. The library is available on GitHub, or as WordPress plugin.

Unicon
Unicon is a Grunt.js task that makes it easy to manage icons and background images for all devices, preferring HD (retina) SVG icons but also provides fallback support for standard definition browsers, and old browsers alike. From a CSS perspective, it’s easy to use, as it generates a class referencing each icon, and doesn’t use CSS sprites.

Foresight.js
This device recognition library, gives websites the ability to gauge the users device capabilities before the image is requested from the server. Judging display resolution and network speed, it customizes the img src attribute to optimize the websites image resolution to the individual users hardware.

A Magnifying Glass With CSS3 And jQuery
This technique achieves an aesthetically pleasing visual effect. The CSS3 box-shadow and border-radius properties are used to create the magnifying glass itself, while jQuery is used to detect the cursor coordinates and mouse movements and present the larger image. And when your cursor moves off the image, the magnifying glass elegantly fades away. The included tutorial makes it very easy to learn and understand how to achieve this effect. The technique includes both a small and a large image in the markup, so optimizing the technique to load a larger image on demand might be a good idea.

Rickshaw
This free and open source JavaScript toolkit provides the elements which you need to create interactive graphs, such as renderers, legends, hovers and range selectors. Rickshaw is based on D3, graphs are drawn with standard SVG and styled with CSS.

Flot: Plotting for jQuery
A JavaScript plotting library for jQuery, supports Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+. You can use different types of graphs, use multiple axes, annotate a chart, update graphs with AJAX, provide support for zooming and interaction with the data points, use stacked charts, theresholding the data, apply pie charts and plot prerendered images.

Chronoline.js
Chronoline.js is a library that allows you to create a chronology time-line out of events on a horizontal timescale. From a list of dates and events, it can generate a graphical representation of schedules, historical events, deadlines, and more.

Cubism
This D3 plugin helps you to visualize time series and construct better real-time dashboards, pulling data from Graphite, Cube and other sources. Cubism scales and reduces server load by pulling only the most recent values. Cubism can scale easily to hundreds of metrics updating every ten seconds. Cubism’s horizon charts allow you to see many more metrics at-a-glance space than standard area charts.

Envision.js
An alternative library for creating fast, dynamic and interactive HTML5 visualizations.

Data Visualization JavaScript Libraries
A growing, curated collection of data visualization JavaScript libraries that make it easier to create meaningful and beautiful data visualizations. If you haven’t one a useful data visualization library in the list above, you’ll definitely find the right one in this overview.

Last Click

jQuery Fundamentals
This HTML book is designed to get you comfortable working through common problems you’ll be called upon to solve using jQuery. You can read the content and try the various interactive examples. Each chapter will cover a concept and give you a chance to try example code related to the concept. Written by Addy Osmani.

JavaScript Patterns Collection
A JavaScript pattern and anti-pattern collection that covers function patterns, jQuery patterns, jQuery plugin patterns, design patterns, general patterns, literals and constructor patterns, object creation patterns, code reuse patterns, DOM and browser patterns.

JavaScript Garden
A growing collection of documentation about the most quirky parts of the JavaScript programming language. It gives advice to avoid common mistakes and subtle bugs, as well as performance issues and bad practices, that non-expert JavaScript programmers may encounter on their endeavors into the depths of the language.

Useful JavaScript and jQuery Libraries: Two Parts

Due to the length of this resource, it was split into two parts:

• Part 1: Web Forms, Typography, Time-Savers and Images
• Part 2: Text, Tables, Lists and Useful Development Tools

© Smashing Editorial for Smashing Magazine, 2012.

BuddyPress is social networking in a box, the loveable plugin that has people around the world getting social. But using BuddyPress isn’t all about waking up one morning and being struck by the amazing idea of creating the next Facebook. BuddyPress is a tool for creating communities. In fact, if you look at successful implementations of BuddyPress, you’ll see they aren’t Facebook clones, but rather niche groups that have put BuddyPress to work in growing their community. The 1.7 release should make BuddyPress compatible with any WordPress theme, making it even more accessible to potential community builders.

But people are already doing it successfully. In this article, we’ll look at some of them — five communities that are using BuddyPress, some big, some small, some established, some emerging, some successful and some unsuccessful.

The University: CUNY Academic Commons

Current membership: 3,100

The CUNY Academic Commons is an academic network of graduate students, staff, faculty and administrators across the 24 campuses of the City University of New York. It has two main aims: first, to foster connections between members of CUNY. As a community with 24 campuses across New York City, CUNY is highly distributed. Members might share interests with people who are only a few miles from each other yet never have occasion to meet. Secondly, CUNY aims to “provide a space where members can do work, as individuals or collaboratively, in a way that is flexible, powerful, and visible to a larger public.�

Who Is Behind It?

The Commons was conceived and created by CUNY faculty members. The project director is Matthew K. Gold, a professor of English at NYC College of Technology and CUNY Graduate Center. A committee comprising faculty and staff from across CUNY is responsible for overseeing the website’s strategy and policies.

The development and community teams are responsible for the day-to-day technical maintenance and community building around the website. They are made up of around 10 people, most of whom are CUNY faculty or students. The development team takes care of maintaining the website and fixing bugs. They are all active members of the WordPress community. Boone Gorges is on the core BuddyPress team, and the CUNY Academic Commons has sponsored the development of many public-facing plugins.

Besides the development team, the community facilitators handle the non-technical aspects of community management. They’re responsible for website support and documentation. The community facilitators are the people who foster connections across the website, monitor the network’s activity and write round-up posts. The key to success for the Commons has been the active community team. As developer Boone Gorges says, “No matter how good the tools are, communities don’t form themselves; our facilitators keep up the energy and activity levels on the site, moving the community forward.�

Why BuddyPress?

The Commons was inspired by work done by Jim Groom and his team at the University of Mary Washington (UMW) on the UMW Blogs platform, which is built on WordPress. CUNY is a public university, and thus the team felt that using and supporting free software was important. As it was building the Commons, BuddyPress was nearing its 1.0 release. It was also the only real social-networking plugin for WordPress.

The Commons is a community of academics focused on collaborative work and, as such, has needed a large number of customizations to enable collaborative writing and discussion. It worked to the team’s advantage that BuddyPress was conceptualized from the start as a platform for further development, taking advantage of WordPress’ rich plugin architecture. Had the team used a proprietary platform or even an open-source alternative, it never would have been able to make the improvements it did, such as optimizations to the group forums, the creation of collaborative editing spaces, better filtering of member directories, and support for full email notifications of new activity. BuddyPress’ freedom and flexibility enabled the team to create a platform geared to the needs of its community.

How the Commons Works

The Commons is intended to be a flexible and open space for collaboration. Users can create groups, blogs or wiki pages (or even all three). Membership is restricted to individuals with a cuny.edu email address, which means they haven’t had any issues requiring moderation.

Boone outlines some typical use cases:

• Interest groups
  Individuals who share a common interest — Spanish language, poetry, games and education, bicycle culture in New York City — may use the group’s infrastructure for conversation and collaboration.
• Conferences and events
  When a CUNY school is to host an academic conference, a Commons blog may be used to publicize the event, and a group might be established to foster communication about the event.
• Graduate courses
  Classes held on the Commons use blogs for public-facing writing and use groups for their private discussion forums and other collaborative features.
• Committee work
  When an administrative committee needs a place to share documents and engage in ongoing discussion about its work, it often turns to Commons groups.
• Academic journal publications
  Several academic journals have recently found a home on the Commons. For a given journal, a WordPress blog is used for publication, while a private group is used for planning and review.
• Academic departments
  Several academic departments use Commons groups as a replacement for listservs. They share news and documents with each other and have discussions in the forums.

Every CUNY member has their own profile.

The Commons’ current theme is a child theme of BuddyPress’ default theme. Recently, the Commons was awarded a grant from the Alfred P. Sloan Foundation to develop the Commons in a Box software package, which will include some of CUNY’s more popular customizations. An important aspect of this will be the default theme, which will be built with the Infinity Theming Engine (by Infinity’s developers, Marshall Sorenson and Bowe Frankema). Later this year, the Commons will have its own theme converted to use the Commons in a Box theme.

There are some challenges to face. For example, CUNY uses MediaWiki for the wiki section of the website. The team managed to create a single sign-on for WordPress and MediaWiki, but managing the link between them — in terms of theming consistently, supporting different interfaces for user input, sharing log-ins and consolidating activity — has been an ongoing challenge.

The biggest challenge, however, has been resources. Boone has this to say:

Our team has a lot of great ideas about how to improve our site and BuddyPress itself, but it’s hard to put all these ideas into motion. Our development team has perhaps more BuddyPress-specific development talent than any other dev team out there — but we still don’t have enough developers with BuddyPress knowledge. (Hint hint: WordPress professionals who are looking for clients would do well to learn BuddyPress. There’s lots of work to be done.)

Customizations and Plugins

The CUNY members’ directory

The CUNY Commons team and members of the Commons have developed and co-developed dozens of plugins, many of which are publicly available in WordPress’ plugins repository.

Notable examples include:

• Invite Anyone
  To expand BuddyPress’ invitation abilities.
• BuddyPress Group Email Subscription
  For fine-grained control of emails and digest notifications of group activity.
• BuddyPress Docs
  For group-based document collaboration.

CUNY regularly releases custom plugins.

Some Commons customizations have been integrated into BuddyPress and WordPress. For example, the profile visibility features in BuddyPress 1.6 were built for the Commons, while the AJAX autosuggest for adding users to blogs in WordPress 3.4 is based on one of its patches.

Smaller pieces of functionality have been published by the team on its development blog.

In terms of plugins, the most important ones for CUNY Commons are these:

• BuddyPress Docs
  This lets users collaborate on writing important documents without resorting to third-party solutions like Google Docs. It provides full version history using WordPress’ post revisions, and it integrates fully with BuddyPress’ activity streams.
• BuddyPress Group Email Subscription
  This lets group members subscribe to email notifications with fine-grained control. Users can have different subscription settings for each group, ranging from immediate notification of each piece of group activity, all the way down to weekly digests summarizing important activity in all your groups.

Advice

Boone has this piece of advice for people starting out with their own BuddyPress community:

Think outside the BuddyPress box. Out of the box, BuddyPress is a great system, but it doesn’t (and can’t) meet all the needs of every community. So, before you start, you should have a sense of how you want your community members to engage with each other, and then think about the ways in which the software can help them do so. In contrast, don’t let BuddyPress’ default settings dictate the way you set up your community site — BuddyPress’ inherent flexibility and customizability mean that you don’t have to settle for what you get when you first download the software.

Free Pass

I asked each of my interviewees what they would integrate into BuddyPress’ core if they had one free pass. The Commons is in the lucky position of having a lead developer who is one of the core committers to BuddyPress. With respect to CUNY Academic Commons, BuddyPress doesn’t need many more user-facing features, but it does need under-the-hood improvements to make it easier to extend and customize. This has been happening throughout the 1.5 and 1.6 development cycles, which have seen improvements to performance and scaling, as well as additional developer APIs for easy hooking into BuddyPress’ core frameworks. As BuddyPress’ core becomes more stable and lean, the team at CUNY will be able to build even more custom plugins and functionality, which can be used in the Commons and disseminated to the wider community.

The Pilot: Rockhaq

Current membership: 50

Rockhaq is a music journalism community for schools and colleges. It has just finished a limited pilot and is on the verge of rolling out to other schools in the UK. Its aim is to motivate students to write music reviews, with a view to increasing student engagement and improving literacy skills. The top students in the community have been rewarded with live music missions, and Rockhaq has given away tickets for acts such as Blink 182 and Nicki Minaj and provided interview opportunities with bands that students have wanted to speak with. According to Michelle Dhillon, Rockhaq “merges the virtual and real-life worlds together to create a dynamic uber-social journalism network.�

Chuffed to see @takeabow30 started writing his Blink 182 review straight after last night’s show in Notts. Watch out for it on site soon :)

– @rockhaq

@michelledhillon @rockhaq THANKYOU, THANKYOU ONCE AGAIN. You have fulfilled a lifetime dream that will resonate with me for years to come.

– @takeabow30

Who Is Behind It?

The brain behind Rockhaq is Michelle Dhillon, a professional journalist and editor. She singlehandedly oversees all community and editorial aspects, including providing lectures and tips on improving writing skills, choosing the top five weekly reviews and the review of the week, and liaising with community members both on an off site.

In addition to Michelle, a team of three Web developers have helped to build and design the community platform and provide support. Michelle is looking to extend Rockhaq into teaching live music photography, so she has enlisted the help of music photographer and teacher Phil Swift.

Why BuddyPress?

Rockhaq members can unlock achievements that appear in their profile.

I asked Michelle why she chose BuddyPress over other platforms:

I was always going to use the WordPress platform; that was a given. I love this solution because it’s so flexible and puts a lot of power into the hands of the end user to be able to change and adapt the features they want really easily. BuddyPress wasn’t always in my plans, but I always intended to use a gaming plugin, and I was really impressed with Paul Gibbs’ Achievements plugin. This was my main reason for choosing BuddyPress, and I’m so glad I did because it’s a really nifty community package.

Michelle’s primary reason for using BuddyPress was the Achievements plugin, but she also likes that BuddyPress allows you to turn certain social-networking elements off very quickly. This has been a significant help, especially for running a pilot in which the environment needs to be as controlled as possible.

Rockhaq was built by Tammie Lister on a customized version of the BuddyPress default theme. It makes use of music photographer Phil Swift’s photos from live gigs of acts such as The Ting Tings, The Hives, Justice and Kasabian. This gives the platform its own unique online identity. As Michelle says, “The work here has been done so cleverly and intelligently — it looks and feels fantastic, and most importantly, it is us.â€�

Because it is still being piloted, Michelle hasn’t had to do any major customizations. It is important that the features be simple and uncomplicated because the developers want to test the basics of the platform thoroughly. The only alteration they have made is to remove status updates from BuddyPress’ core.

Challenges

The activity stream is moderated but still fun and interactive.

A very real issue that Michelle has had to tackle is cyber-bullying. This is a big concern in educational environments that use social networking, so Michelle has had to assure teachers and schools that the community is safe and regulated for students. Thus, it needs to be moderated, or at least be closely observed. At the same time, it needs to be fun and allow for interaction, so comments and public messages are permitted.

So far, Rockhaq hasn’t faced any major problems, besides a few members posting immature comments, which were moderated and quickly removed. Part of the ethos behind Rockhaq is “educating young people about how to use social networks in a positive and fruitful way, rather than foster and perpetuate negative behavior that has been generated by unregulated or poorly regulated social networks like Facebook.�

Plugins

• Achievements
  This has been and continues to be the most important plugin for Rockhaq. It is invaluable in keeping the students motivated.
• Gravity Forms
  This works for Rockhaq because it is usable and flexible. Michelle uses it for contact forms and mailing list queries and to help users spread the word.
• Twitter Widget Pro
  Some Twitter plugins don’t work well or refresh properly, but this one does. Twitter is hugely important to Rockhaq because it enables students to stay in touch with what’s going on. The Twitter feed is even more important than Facebook.

Advice

I asked Michelle what advice she would give to someone starting their own BuddyPress community:

Be prepared — for anything! That includes positive as well as negative incidents. We’ve been very excited as ours have been overwhelmingly positive, but you still have to be prepared for users logging on at all hours, adding much more work than you’d anticipated and being obsessed with your community. Also, be prepared to publicize it — we’ve been featured in major local media already, and I didn’t expect that either. You will be working all hours!

Free Pass

Michelle seemed excited by the thought of adding a feature to BuddyPress’ core. “I’m like a kid in a sweet shop when it comes to plugins, and one is never enough,� she says. “However, if you had to ask me, then I would be very biased and say a group blogging feature. This seems to make sense for a social networking plugin that uses WordPress, the mother of all open-source blog networks!�

The Newspaper: My Telegraph

Current membership: 130,000 active users; 3000 who blog regularly; 5000 – 10,000 daily commenters on The Telegraph

My Telegraph was started in 2006 to provide an online home for readers of British daily newspaper The Telegraph. The team at The Telegraph recognized that people were reading news on all sorts of websites, but that their most loyal readers identified themselves with The Telegraph and valued discussion with like-minded people. The first version of the website was designed so that people could blog in three clicks, but over the years they added more sophisticated functionality, such as profiles and groups, so they moved to BuddyPress.

Who Is Behind It?

My Telegraph has a dedicated developer, core BuddyPress developer Paul Gibbs, and a community manager, Kate Day, both of whom spoke to me for this article. In addition, specialist editorial teams run specific groups. For example, the Books desk looks after the Short Story Club. And a team of moderators monitor all user-generated content on My Telegraph, as well as on the main Telegraph website.

Why BuddyPress?

While various out-of-the-box solutions exist, BuddyPress is the most advanced in functionality. Another important factor in the team’s decision was that BuddyPress has a community of developers that actively enhance the platform and come up with ideas that the folks at The Telegraph might not come up with. A fringe benefit is that, while blogging takes more than three clicks, many people are familiar with WordPress’ user experience.

By implementing BuddyPress, My Telegraph has been able to scale beyond a blogging platform to a platform for general engagement.

How It Works

Moderators, journalists and even a novelist take care of the different groups.

With a community on that scale, I wanted to know what approach the team takes to moderation. Here’s what Kate has to say:

We try to take a light touch to moderation. My Telegraph is very much our readers’ space — journalists set the agenda elsewhere on our website! Nothing is screened before it goes live, and moderators simply work through a queue of flags that are generated when readers click on the “Reportâ€� buttons. Some of the groups are slightly more structured, with journalists, freelancers and, in one case, a novelist, leading the conversations via a group blog.

Moderation is the biggest challenge the team faces. The team needs to find the right balance between allowing people to enjoy a free-flowing conversation while preventing things from turning nasty. Spam is another issue — My Telegraph ranks high on Google and is a magnet for spammers.

Plugins

Like CUNY Commons, My Telegraph has its own WordPress.org profile page. So far, the team has released the Expire User Passwords plugin, which forces users to change their passwords every 30 days. Paul often looks for things that would be of use to other websites to open source. He plans to release more soon.

My Telegraph runs a lot of bespoke plugins and tweaks, such as the Group Competition plugin and the upcoming Bookshelf feature. Its most useful third-party plugin is BP Group Blogs, which ties together blogs and groups. Unfortunately for Paul, the plugin is quite old and can cause problems when the website is updated.

Advice

Both Paul and Kate had advice for people starting a BuddyPress community.

Here’s Kate’s take, from the community manager’s perspective:

Communities are like gardens. They take time to grow, and they need some care and attention. Don’t expect results straight away, but when relationships start growing between members of your community, the results are fantastic and constantly surprising. We’ve had members create a collaborative eBook, meet up for coffee mornings, even go on holiday together! And I hope a great many more people have enjoyed some really interesting discussions.

And Paul, from the developer’s perspective:

Start small. Launch early with a small piece of your intended functionality, and grow your community as you grow your site. Otherwise, it’s very easy to end up with so much “stuff� on the site that new users aren’t sure what they should be doing.

And make sure you have someone on the site participating with your community regularly and talking to them. You need to encourage your community to grow, as it won’t if it’s left alone by itself.

Free Pass

Paul, like Boone, is a BuddyPress core developer, so he always gives input into which features to integrate in BuddyPress’ core. However, for The Telegraph he would like to add a group management screen to the WordPress admin area. This would be similar to the activity management screen that appeared in BuddyPress 1.6. Dealing with users in groups is something that My Telegraph does a lot. Luckily for Paul, BuddyPress 1.7 will have exactly that.

The Non-Profit: Shift.ms

Current membership: 3631

Shift.ms is an online social support network for people with multiple sclerosis (MS). Over 2.5 million people (“MSers�) worldwide have this chronic neurological condition. People are most commonly diagnosed with MS in their 20s and 30s. Shift.ms founder George Pepper was diagnosed when he was 22, and at the time he found it difficult to find people his own age who were having a similar experience.

MS is progressive, so newly diagnosed MSers have different needs than those who have been living with it for many years. In 2007, George set up Shift.ms as a peer support network for young MSers.

Who Is Behind It?

Shift.ms is a community-led organization, and all of its members provide the content and decide on its direction. It has two ongoing employees, George himself and a community coordinator, Beki. BuddyPress designer and developer Tammie Lister is responsible for the design and development of the website, and WP Valet takes care of ongoing support and hosting.

Why BuddyPress?

I asked the team members why they chose BuddyPress over other solutions. For them, the strength of BuddyPress lay in the thriving community around it. In addition, a lot of plugins existed, which meant they could extend BuddyPress on a tiny budget.

Shift.ms already had an online magazine that was built using WordPress, so using BuddyPress enabled it to easily integrate its community with that. The particular advantage for Shift.ms, however, was that members could create and update their own profiles.

Much of the activity takes place in the forum.

Community members hang out mainly in the forum, where they can ask questions about living with the condition that they might not want to ask a health professional or a loved one. While all of the comments are read by George and Beki, moderating them is not usually necessary because the community is good at self-moderation and spots any occasional spam accounts that slip under the radar.

The theme itself is a custom child theme of the BuddyPress default. It has had heavy customization and uses several different custom post types. However, the main challenge has been finding a balance between the expected behavior of the community and what BuddyPress and WordPress can do; these things aren’t always in harmony.

Snippets

I asked Shift.ms if it had any code snippets to share. The one below was written by BuddyPress core developer Paul Gibbs. The team needed to solve an issue in which an external company had provided a video template as a page. Shift.ms wanted the page comments to appear in the stream (they usually don’t).

function shiftms_addpagecomments() {
     return array( 'page', 'post' );
}
add_filter( 'bp_blogs_record_comment_post_types', 'shiftms_addpagecomments' );

Shift.ms needs a range of excerpt sizes, and this snippet lets them achieve that:

function shiftms_string_limit_words($string, $word_limit) {
     $words = explode(' ', $string, ($word_limit + 1));
     if(count($words) > $word_limit)
     array_pop($words);
     return implode(' ', $words);
}

This function is called using:

<?php  $excerpt = get_the_excerpt(); 
     echo shiftms_string_limit_words($excerpt, 20);?>

In some places, opening links in a new window is necessary:

function shiftms_openlinks($text) {
     $return = str_replace('<a href = ', '<a target = "_blank" href = ', $text);
     $return = str_replace('<a target = "_blank" href = "http://shift.ms', '<a href = "http://shift.ms', $return);
     $return = str_replace('<a target = "_blank" href = "#', '<a href = "#', $return);
     $return = str_replace(' target = "_blank">', '>', $return);
     return $return;
}
add_filter('the_content', 'shiftms_openlinks');
add_filter('comment_text', 'shiftms_openlinks');

In addition to BuddyPress, Shift.ms finds Gravity Forms useful because it lets non-technical team members have control of forms.

Advice

I asked Shift.ms if it has any advice for someone starting a BuddyPress community. Here’s what it had to say:

BuddyPress developers are few and far between at the moment, but their number is growing fast. I’d say get someone in who has specific BuddyPress experience; WordPress knowledge is fantastic, but there are a number of significant differences.

Free Pass

For users, George would like to see a map integrated into core so that he can show where all members reside. Developer Tammie Lister would like to see more privacy controls. She’d like to give users more control over what is publicly displayed, which would help them feel safer in these more personal communities.

The One that Got Away: TribLocal

Current membership: 100,000

TribLocal is designed to collect and deliver local news via 88 community websites covering the Chicago suburbs. I spoke to developer Tom Willmot, of Human Made, the development shop behind the website. Many of the visitors show up just to read headlines, check out the police blotter or click through the photo galleries of news and events in their neighborhood. More engaged users sign up for accounts to post their own stories and event listings, which the production staff moderate and consider for the home page. Like any blog, this one has comments, social-media sharing tools, RSS and member profiles. In additional to original reporting and community contributions, TribLocal has an aggregation strategy to highlight interesting local news elsewhere.

The Team

In addition to the development team that handles the technical side of things, the community is run by a team of community producers. The news team writes articles for the various local websites, moderates articles submitted by the local journalists and chooses the best ones for inclusion in the weekly newspaper.

Why BuddyPress?

The TribLocal websites were originally built with a custom solution. When Human Made came on board, the client had already decided to replace its existing solution with WordPress Multisite and BuddyPress. The key element that BuddyPress brought to the table was to put user log-ins and profiles on the front end. BuddyPress provides this out of the box.

How It Works

The community producers review content that is submitted via the website and decide whether to promote it on the home page of the website or run it in the following week’s newspaper via a reverse-publishing system. In addition, producers also monitor the website for things like terms-of-service issues.

Members can add events through the front end of the website.

Members can publish three post types:

• Stories,
• Photo galleries,
• Calendar events.

Events have been the most popular. A home page calendar shows upcoming events, and users can download the ICS file.

Members’ events appear on the home page.

Other features are:

• A photo section to encourage users to post their photographs. Shots of severe weather in the Chicago area have been particularly popular.
• A voting system for high school athlete of the month, local volunteer recognition and other initiatives.
• Members becoming regular contributors, with some having their own official blogs covering areas of local interest.

I asked Tom how the members interact with each other:

As far as member-to-member interaction, we had @mentions, which I think are standard to BuddyPress. While we had open registration, member pages, etc., we didn’t activate the feature for people to friend/follow each other. So, in that sense, maybe it wasn’t a true “social network in a box,� but it was an innovative way to engage people in the news and really unlike anything else in local community journalism.

A key requirement was to have user-generated content. Users needed to be able to act as authors, with the ability to post news, photo galleries and events from the front end. This required extending BuddyPress’ user profiles beyond simply logging in and recreating something resembling WordPress’ back-end functionality for users.

Leaving BuddyPress

Human Made has had issues using BuddyPress, not because of any inherent problem in BuddyPress itself, but because it had more functionality than was needed. The client had preselected BuddyPress, so they were stuck with it. The development team only needed the user log-in and profile features, so a lot of features and associated code were superfluous to the project.

This meant that the website had some performance issues due to the number of queries generated by BuddyPress. The client’s internal system prevented them from using Memcached, so instead they used a combination of Varnish for full-page caching and flat HTML fragment caching for widgets and comments. The heavy customization of BuddyPress caused problems when it came time to upgrade the plugin: BuddyPress changed fundamentally between versions, and the team was unable to update to the latest version.

Advice

Tom has this advice for anyone starting a BuddyPress community:

We would advise them to start with BuddyPress at the outset. We had limitations because the client had already designed the site, which restricted how we were able to approach the development. Ideally, the theme and development would be built to work integrally with BuddyPress, rather than having to adapt existing concepts.

Free Pass

If Tom had one free pass, he’d love to see BuddyPress more closely follow WordPress’ core architecture and APIs.

Conclusion

If there’s one commonality among these successful BuddyPress installations, it’s the people behind them. From Michelle’s passion for music journalism and improving student literacy, to Kate’s desire for a community for Telegraph readers, to the CUNY ethos of providing a collaborative working space for staff and students, to George’s aim to provide support for MS sufferers, these communities were started by passionate people who wanted to create a forum for other passionate people to converse, to work towards a shared goal, or to share advice and support each other. The BuddyPress plugin is wonderful, but the personal passion is what really drives these communities.

Resources

If you’re thinking of starting a community and you’ve got the drive for it, check out some of these resources to help you get started with BuddyPress:

• “25 Cool BuddyPress Themes to Start a Community,â€� Dustin Betonio, Tripwire Magazine
• “Create a Social Network With WordPress and BuddyPress,â€� Oliver Dale, WPLift

You could also take a trip to the first BuddyCamp, which is happening this October in Vancouver.

(al)

© Siobhan McKeown for Smashing Magazine, 2012.

In the first television advertisement for the iPad, the narrator intoned, “It’s crazy powerful. It’s magical. You already know how to use it.� This was an astonishing claim. Here was a new, market-defining, revolutionary device, unlike anything we had seen before, and we already knew how to use it. And yet, for the most part, the claim was true. How does a company like Apple make such great new things that people already know how to use?

One answer lies in the ability of Apple designers to draw upon patterns that people are familiar with. The interaction medium might be completely new: before the iPhone, few people had used a multitouch screen. But everyone knew how to pinch or stretch something, and this interaction pattern was easily transferrable to the small screen after seeing it done just once. As Alan Cooper writes in About Face, “All idioms must be learned; good idioms need to be learned only once.�

The Role Of Dopamine In Pattern Recognition

Our brains like to find such patterns. We are wired to search for patterns that our past experiences have shown will lead to successful interactions (in love, war, gambling, investing, etc.). Jonah Lehrer, in How We Decide, writes that our brain produces a pleasure-inducing neurochemical, dopamine, when we recognize familiar patterns in the world around us. When we act on these patterns and are successful in whatever we are trying to do, we get an additional burst of this pleasing chemical.

If we think we recognize a pattern but are mistaken, or if the pattern doesn’t behave in the way we expect it to, then we do not get that second infusion of the neurochemical, and we readjust our expectations. Many neuroscientists believe this reward system is one way in which learning takes place. The process creates a self-reinforcing, pleasure-based cycle that encourages us to learn from our mistakes and to become better interpreters of the world around us.

The dopamine reward system produces positive or negative emotions based on our experiences in the world. Lehrer argues that this reverses our age-old understanding of the role of emotions in the decision-making process. Since Plato, the rational mind has been depicted as the charioteer holding the reins on our unruly emotions. What makes humans unique, according to this metaphor, is our ability to use logic and rationality to control our emotions and make rational decisions. Lehrer’s book details recent research in neuroscience that upends this reason-based model of decision-making. Emotions, some of them caused by the dopamine-based reward system, play a central role in our decision-making processes.

(Image: Sue Clark)

These discoveries in neuroscience provide a strong argument for using design patterns in interaction design. Take the carousel pattern, which is prevalent in desktop, tablet and handheld devices. The Yahoo Design Library has a useful illustration of this design pattern. Content appears to slide in from one side of the panel; items at each end are partially obscured to indicate that more virtual space, and more content, lies outside the carousel pane; arrows appear, when appropriate, to indicate how to get to that additional content. This is a very simple pattern that people can learn after using the feature just once.

New users of Pandora will encounter this carousel pattern almost to the letter, and even if they are encountering it for the first time, they will learn it almost immediately. Then, when they encounter versions of the carousel pattern in other designs, they will recognize it before they even begin to interact with it. Their recognition of the pattern will produce pleasure as the dopamine neurons begin firing. When the user then interacts with the pattern — by clicking the arrow on either end to reveal additional content, for instance — and is successful, then more dopamine is produced, leading to additional feelings of pleasure.

Carousel design pattern, via Yahoo Developer Network

Admittedly, neuroscientists have not yet attached functional magnetic resonance imaging machines to users in order to measure their brain’s dopamine production as they experience the carousel (or any other) interaction design pattern. To date, our insight into the brain’s responses to the patterns we encounter in the world is limited to what we can extrapolate to humans from experiments that have been conducted on monkeys and to inferences we can draw from the work of psychologists.

Lehrer’s radar technician’s story

Lehrer tells the story of a radar technician during the first Gulf War who spent several days watching blips that represented fighter aircraft returning to ship from a certain point on the coast of Kuwait. One set of blips in the early morning made the technician feel nervous, and he couldn’t explain why. They looked to him to be just the same as those he had observed hour after hour in days past, but his emotional response to this particular set of early morning blips told him that something was wrong. Acting on little more than this emotional response, he ordered the blips to be shot down — thus saving countless lives: the blips turned out to be enemy missiles en route to destroy Allied ships in the Gulf.

The technician could not explain how he knew they were not just another pair of fighter jets. It was only after much review and the discoveries of a cognitive psychologist who was brought in to review the case that investigators determined that what was different about those blips was where they first appeared on his screen: a little farther from shore than all of the other blips. He couldn’t tell at the time that this is what made them different, but subconsciously his brain detected a change in the pattern that he had been observing for hours. The change in pattern caused an emotional and somatic response of panic and anxiety and caused him, despite his reason, to order the blips to be destroyed.

The radar technician’s story (and many others recounted in Lehrer’s book) suggests that our brains observe and act on patterns without our being conscious of it. Recognizable patterns appear, our dopamine neurons fire, our learning is reinforced, and we remain in a state of “flow.� But when a pattern is broken or behaves unexpectedly, all hell breaks loose. Our brain sends out a “prediction error signal�. An area of the brain called the anterior cingulate cortex (ACC) monitors the activity of the prefrontal cortex, and when the ACC detects the absence of activity among dopamine neurons that results from the predicted event not occurring, it sends out this error signal. This results in other chemicals being produced, by the amygdala and the hypothalamus, among other areas, which causes these feelings of panic and anxiety: the heart races, the muscles tense, we become short of breath.

Broken Patterns Cause Panic And Anxiety

Ordinarily, we do not want our users to experience these feelings of panic and anxiety when they use our systems. Yet we know it happens frequently. One reason is that we often present users with interfaces that lack the visual cues to indicate what patterns are being employed. Consider Roku’s Channel Store. When users visit the interface to add a channel to their system, they are confronted with what appears to be a static table of contents. Without prior experience of the carousel pattern, users might interpret this 3 × 4 tabular interface as offering only 12 channels.

In fact, this table does behave according to the carousel pattern. Additional content does lie to the right and left of each row. The content even scrolls vertically as well, but users would never know this from the visual display of the information. Even worse, a new user will learn little about the carousel pattern to apply to their next encounter with it. Ironically, Roku is best known as a Netflix streamer, and Netflix itself applies the carousel pattern expertly to its similar table of contents in its streaming interfaces on game devices such as the Wii. Way back in Design of Everyday Things, Donald Norman defined “visibility� as meaning that “the correct controls are visible, and they convey the correct information.� Neither is the case in the design of Roku’s Channel Store, so users have no way of knowing, without extensive exploration, that the carousel pattern is being employed.

Roku’s Channel Store.

Sometimes, the problem is the reverse: users will think a design pattern is being used when it isn’t. What we recognize as a pattern doesn’t function as we expect; our brains think that something has gone wrong, and the result, again, is anxiety and panic. Take the basic design of a list of items on a smartphone. Users of iOS know this pattern well; it is famously illustrated in Josh Clark’s Tapworthy: Designing Great iPhone Apps. A left-to-right swipe gesture opens a control for deletion, prompting the user to confirm the delete action. This design pattern is easy to learn, but its implementation in other smartphone applications is sporadic and unpredictable. Palm’s webOS email system, for example, uses the swipe gesture for deletion but offers no “Delete� button to confirm the gesture. The email item simply vanishes off the screen. In the messaging application on Palm’s OS, on the other hand, the system does present a deletion control.

Swiping left to right to delete in iOS. (Image: Josh Clark)

Early versions of the Android OS didn’t acception the swipe gesture for deletion at all, and it usually interpreted the gesture as a tap by opening the “Edit Itemâ€� page. The Gingerbread update introduced even more inconsistency to the user experience: a right-to-left swipe over a contact, for instance, opens the instant messaging app, and a left-to-right swipe opens the phone app — and initiates a phone call! A user who would naturally expect this gesture to trigger a prompt to delete the contact suddenly finds themselves calling that contact. Talk about panic!

Pattern-Matching Is Harder Than It Sounds

All of us have experienced this feeling of panic to one degree or another. I still feel it when I instinctively move my mouse (in Windows) to the task bar to return to a Web page that I thought I had minimized, when in fact (and for at least three years now) the page I am looking for is open in a different tab, rather than in a minimized, separate window. Interaction habits of mind do not change quickly. And because I use three different Web browsers on at least four different computers, I am constantly unsettled in my search for the “Home� button, which used to be to the left of the URL window in most browsers, but now is all the way on the right in the standard installation of Firefox 12 on both Windows and Mac and doesn’t exist at all in a standard installation of Safari. There is no longer a reliable pattern to determine where I will find the “Home� button on a Web browser. But my brain wants one, feels good when it finds one and rebels (chemically) when it doesn’t.

To be sure, inconsistencies across platforms, browsers and software can have many causes, from patent issues to design legacies. And it is inevitable that interaction designs will change and improve over time. We should not be held to existing patterns just because the human brain prefers it. But we can design according to our developing understanding of how the brain functions. We can employ idioms, such as “pinch,� that are not obvious but are quickly learned. We can progress gradually, building on fundamental elements of existing designs so that new interaction designs retain enough of the old that our brains still recognize them. We can also cautiously introduce new schemes as redundant elements: one doesn’t have to use three- and four-finger swipe gestures on the MacBook Pro’s mousepad, but once one discovers these gestures, they are easy to adopt as natural improvements to the pointer controls and buttons in application interfaces.

In fact, this last approach takes advantage of the brain’s chemistry. The prediction error signal is sent when an expected event does not occur and the result is disappointment or failure. But sometimes, the result of a prediction error is delight, not panic. The expected result did not occur, but something better did. David Rock, in Your Brain at Work, observes that this experience of delight or novelty also produces dopamine and feelings of pleasure. The experience is similar to that of humor: jokes often work because the punchline presents an unexpected twist, a novel outcome. More importantly, jokes work best when the stakes are minimal: no one really gets hurt in a pratfall. When jokes cut too close to the bone, they are painful. We cringe.

New interaction designs can be introduced according to the same principle: if they cause unexpected delight, and no one (and no one’s data) gets hurt, they will induce unexpected pleasure and will be quickly adopted over the legacy designs they are meant to replace.

Further Resources

• About Face 3: The Essentials of Interaction Design, Third Edition, by Alan Cooper, Robert Reimann, David Cronin
• How We Decide, Jonah Lehrer
• Your Brain At Work: Strategies for Overcoming Distraction, Regaining Focus, and Working Smarter All Day Long, David Rock

(al)

© Charles Hannon for Smashing Magazine, 2012.

Mobile devices are shipping with higher and higher PPI, and desktops and laptops are following the trend as well. There’s no avoiding it: High-pixel-density, or “Retina,� displays are now becoming mainstream—and, as you’d expect, our websites are beginning to look a little fuzzy in their backlit glory. But before we go off in the knee-jerk direction of supersizing all our sites, we must first identify the problems ahead and figure out the most responsible way forward—keeping our users in mind first and foremost.

The big problem: gigantic images

In an effort to stay ahead of the curve, many of us have begun the process of making our website designs “@2x,â€� quietly hoping @3x never becomes a thing. While a @2x image sounds like it would only be twice the number of kilobytes, it’s actually around three to four times larger. As you can see in my @1x vs. @2x demonstration, the end result is that photos or highly detailed compositions easily start bringing these numbers into the megabytes.

“Why is this a problem?� I hear you ask. “Shouldn’t the web be beautiful?� Most definitely. Making the web a better place is probably why we all got into this business. The problem lies in our assumption of bandwidth.

In the wealthiest parts of the world, we treat access to high-speed broadband as a civil right, but for lots of people on this planet, narrow or pay-per-gigabyte bandwidth are real things. “Because it looks pretty� is not a good enough reason to send a 1MB image over 3G—or, god forbid, something like the EDGE network.

Even in our high-bandwidth paradises, you don’t have to look far for examples of constrained bandwidth. A visitor to your website might be using a high-PPI tablet or phone from the comfort of her couch, or from the middle of the Arizona desert. Likewise, those brand-new Retina Macbook Pros could be connected to the internet via Google Fiber, or tethered to a 3G hotspot in an airport. We must be careful about our assumptions regarding pixels and bandwidth.

Failed paths: JavaScript

I’ll just use JavaScript.

— Everyone ever

JavaScript has solved a lot of our past problems, so it’s human nature to beseech her to save us again. However, most solutions fall short and end up penalizing users with what is commonly referred to as the “double download.�

Mat Marquis explained this, but it’s worth reiterating that in their quest for speed and making the web faster, browsers have begun prefetching all the images in a document before JavaScript has access and can make any changes.

Because of this, solutions where high-resolution capabilities are detected and a new image source is injected actually cause the browser to fetch two images, forcing high-resolution users to wait for both sets of images to download. This double download may not seem overly penalizing for a single image, but imagine scaling it to a photo gallery with 100 images per page. Ouch.

Other attempts exist, such as bandwidth detection, cookie setting, server-side detection, or a mixture of all three. As much as I’d like robots to solve my problems, these solutions have a higher barrier to entry for your average web developer. The major pain point with all of them is that they introduce server/cookie dependencies, which have been historically troublesome.

We need a purely front-end solution to high resolution images.

Sound familiar? That’s because high-resolution images and responsive images actually come back to the same root problem: How do we serve different images to different devices and contexts using the same HTML tag?

The solution: good ol’ fashioned progressive enhancement

Those of us involved in CSS and Web Standards groups are well acquainted with the concept of progressive enhancement. It’s important we stick to our collective guns on this. Pixels, whether in terms of device real estate or device density, should be treated as an enhancement or feature that some browsers have and others do not. Build a strong baseline of support, then optimize as necessary. In fact, learning how to properly construct a progressively enhanced website can save you (and your clients) lots of time down the line.

Here are the rules of the road that my colleagues at Paravel and I have been following as we navigate this tangled web of high-density images:

• Use CSS and web type whenever possible
• Use SVG and icon fonts whenever applicable
• Picturefill raster graphics

Let’s talk a bit about each.

CSS and web fonts

CSS3 allows us to replicate richer visual effects in the browser with very little effort, and the explosion of high-quality web fonts allows us to build sites on a basis of rich typography instead of image collages. With our current CSS capabilities, good reasons to rely on giant raster graphics for visual impact are becoming few and far between.

So the old rule remains true: If you can accomplish your design with HTML/CSS, do it. If you can’t accomplish your design with CSS, then perhaps the first question you need to ask yourself is, why not? After all, if we consider ourselves in the business of web design, then it’s imperative that our designs, first and foremost, work on the web—and in the most efficient manner possible.

Take a step back and embrace the raw materials of the web: HTML and CSS.

SVG and icon fonts

SVG images are XML-based vector paths originally designed as a Flash competitor. They are like Illustrator files in the browser. Not only are they resolution-independent, they tend to create extremely lightweight files (roughly determined by the number of points in the vector).

Icon fonts (like Pictos or SymbolSet) are essentially collections of vector graphics bundled up in a custom dingbat font, accessible through Unicode characters in a @font-face embedded font. Anecdotally, we at Paravel have noticed that tiny raster graphics, like buttons and icons, tend to show their awkwardness most on higher-resolution screens. Icon fonts are a great alternative to frustrating sprite sheets, and we’ve already begun using icon fonts as replacements whenever possible.

Support for @font-face is great, and basic SVG embedding support is nearing ubiquity—except for ye old culprits: older versions of IE and Android. Despite this, we can easily begin using SVG today, and if necessary make concessions for older browsers as we go by using feature detection to supply a polyfill or fallback, or even using newfangled projects that automate SVG/PNG sprite sheets.

There are cases where these formats fall short. Icon fonts, for instance, can only be a single color. SVGs are infinitely scalable, but scaling larger doesn’t mean more fidelity or detail. This is when you need to bring in the big guns.

Picturefill raster graphics

No stranger to this publication, the <picture> element, put forth by the W3C Responsive Images Community Group, is an elegant solution to loading large raster graphics. With <picture>, you can progressively specify which image source you want the browser to use as more pixels become available.

The <picture> element is not free from hot drama, and also has a worthy contender. The image @srcset attribute, notably put forth by Apple, is based on the proposed CSS property image-set(), designed for serving high-resolution assets as background images. Here’s a sample of the proposed syntax, (presented with my own personal commentary):

<img alt="Cat Dancing" src="small-1.jpg"
srcset="small-2.jpg 2x,  // this is pretty cool
large-2.jpg 100w,       // meh
large-2.jpg 100w 2x     // meh@2x
">

As a complete responsive images solution, @srcset has a bothersome microsyntax and is not feature-complete (i.e. it has custom pixel-based h & w mystery units and does not support em units). But it does have some redeeming qualities: In theory, the @srcset attribute could put bandwidth determination in the hands of the browser. The browser, via user settings and/or aggregate data on the speed of all requests, could then make the best-informed decision about which resolution to request.

However, as the spec is written, @srcset is simply a set of suggestions for the browser to choose from or completely ignore at its discretion. Yielding total control to the browser makes this web author cringe a little, and I bet many of you feel the same.

Wouldn’t it be nice if there were a middle ground?

Noticing the strengths of the @srcset attribute, the Responsive Images Community Group has put forth a proposal called Florian’s Compromise, which would blend the powers of both @srcset and the <picture> element.

 
<picture alt="Cat Dancing">
<source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">
<source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">
<source srcset="small-1.jpg 1x, small-2.jpg 2x">
<img src="small-1.jpg">
</picture>

No doubt, the <picture> syntax is more verbose, but it is extremely readable and doesn’t use the confusing “100wâ€� shorthand syntax. Expect things to change going forward, but in the meantime, we’re currently using the div-based Picturefill solution from the Filament Group, which we find is easy to use and requires no server architecture or .htaccess files. It simply polyfills the <picture> element as if it existed today.

Under the hood, our previous demonstration was using two instances of the original Picturefill to swap sources as the browser resized. I’ve made some quick modifications to our demo, this time combining both @1x and @2x sources into one Picturefill demo with the newer syntax.

Experimental technique: the 1.5x hack

Another thing we’ve been doing at Paravel is playing with averages. Your mileage may vary, but we’ve noticed that high-resolution screens typically do a great job of getting the most out of the available pixels—as you can see in this @1.5x experiment version of our demo:

If you don’t have a high-resolution screen, you can increase your browser zoom to 200 percent to simulate how compression artifacts would look on one. The @1x image clearly has the worst fidelity on high-resolution screens, and the @2x image definitely has the highest fidelity. The @1.5x version, however, fares nearly as well as the @2x version, and has a payload savings of about 20 percent. Which would your users notice more: the difference in fidelity or the difference in page speed?

Ultimately, the usefulness of the @1.5x technique depends on the situation. Notably, it does penalize the @1x user, but maybe there’s an even happier middle ground for you at @1.2x or @1.3x. We currently see the “just a bit largerâ€� method as a viable solution for getting a little more out of medium-importance images without adding another degree of complexity for our clients. If you’re in a situation where you can’t make drastic changes, this might be a great way to gain some fidelity without (relatively) overwhelming bloat.

Above all: use your brain

Recently, while redesigning Paravel’s own website, we learned to challenge our own rules. Since we have talented illustrator Reagan Ray on our team, our new site makes heavy use of SVG. But when we exported our most beloved “Three Amigos� graphic, we made a quick audit and noticed the SVG version was 410kb. That felt heavy, so we exported a rather large 2000x691 PNG version. It weighed in at just 84kb. We’re not UX rocket scientists, but we’re going to assume our visitors prefer images that download five times faster, so that image will be a PNG.

Just use your brain. I’m not sure our industry says this often enough. You’re smart, you make the internet, and you can make good decisions. Pay attention to your craft, weigh the good against the bad, and check your assumptions as you go.

Be flexible, too. In our industry there are no silver bullets; absolute positions, methods, and workflows tend to become outdated from week to week. As we found with our own website, firmly sticking to our own made-up rules isn’t always best for our users.

Doing right by users is the crux of front-end development—and, really, everything else on the web, too. Pixel density may change, but as the saying goes, what’s good for the user is always good for business.

Translations
Italian

RSS readers: Don't forget to join the discussion!

It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all.

— John Allsopp, The Dao of Web Design

Twelve years ago, John Allsopp asked us to embrace the adaptable nature of the web. We didn’t listen.

Although the web standards movement that followed advocated the separation of presentation and content—an essential requirement for adaptive design—this only manifested itself in code. Floated divs replaced table cells, yet layouts remained governed by the inflexible conventions of print.

Today, when every device begs to be connected, it has become easier—almost necessary—to accept the adaptable nature of the web. Responsive web design is an emerging best practice, and our layouts are becoming more flexible. But once again, innovation is focused on technical implementations while the visual aesthetic remains ignored.

To put it another way, we’re embracing “responsiveâ€� but neglecting the second part: “design.â€� We’re replacing fixed-width divs with fluid ones. As we undergo a period of reassessment, both of our practice and of our tools, now is the right time to seek out an aesthetic that is truer to the medium.

The material of the web

To properly design for a medium, you need to understand it. I like to think of the web as a kind of material, with unique characteristics we can take advantage of, and limits it can reach before it breaks. The web could almost be considered a composite, made up of HTTP (the how), URLs (the where), and HTML (the what). Omit any one of these ingredients and you’re no longer building the web.

It’s this combination of protocols and conventions that helps the web achieve what Sir Tim Berners-Lee calls its “primary design principle�: universality.

It should be accessible from any kind of hardware that can connect to the internet: stationary or mobile, small screen or large.

With universality so inherent to the medium, it could be said that the web is responsive by default. “Responsive� isn’t so much a technique or process, but a fundamental characteristic of the platform—and it’s one we threaten with each line of CSS and JavaScript we lay upon it. Universality transcends visual design, too: Websites need to be just as easy to use when displayed as plain text or read out loud.

This nature, and these characteristics, should inform every aspect of our design. So how might the overriding aesthetic of the web change were we to design with this universal nature in mind?

The medium is the message

Like the web, television is a medium where the access devices differ: Televisions can vary in size, resolution, aspect ratio, and refresh rate.

This was especially true in the 1970s and early 1980s. Although programs were recorded in color, broadcasters still had to consider the large number of people who owned black-and-white sets. On-screen graphics needed to work on both types of screens, so designers used contrasting shapes and colors. For example, the idents for BBC1 used a yellow (and later, bright green) rotating globe on a dark blue field. The resulting design may have been garish, but it worked.

BBC1 idents from 1974 and 1981

Television is facing another period of transition, this time toward a high-definition widescreen format. Because many viewers own standard-definition 4:3 televisions, designers again need to compromise, working within a “safe area� to ensure graphics don’t get cropped on older sets. As such, graphics on widescreen televisions tend to float in the middle of the screen, not yet able to make use of the full width.

The overriding aesthetic of television will continue to change, but it will remain governed by advances in technology and designers’ understanding of its limitations.

Everything old is new again

Before “killer websites� and the desire to produce print-like layouts—when bandwidth was limited and small screens could only display 256 colors—pixel graphics were considered de rigueur. Layouts were simple and focused.

In 1995, Hotwired used just sixteen colors. Navigation on the homepage consisted of little more than six four-color, 1kb GIFs representing each topic area. The layout was just those images, centered:

Hotwired, circa 1995

Surrounded by high-resolution displays and limitless bandwidth, it’s easy to forget that similar constraints still exist. Although devices are becoming ever more powerful and feature-rich, less capable devices continue to be developed as well; for example, the Amazon Kindle is a popular device, yet most of the line’s e-reader models feature cellular connectivity and a monochrome E Ink display.

Embracing constraints

In the move to adaptive layouts, another constraint has revealed itself: Bitmap images fail to respond, be it to the size of the viewport or to available bandwidth.

This isn’t a failing of the web; that we can embed different types of media into a webpage is a useful feature. But not all formats share the web’s characteristics. There’s a tremendous opportunity to develop a responsive bitmap format, and I doubt images will truly feel part of the web until such a thing exists. In the meantime, the question persists: How can we make highly detailed photographic images work within such an adaptable medium?

Many have tried to answer this question with technical solutions. Since complex and fragile hacks were found wanting, efforts have moved to defining new standards, with a consensus forming around those that detect when differently sized versions of an image should be requested and displayed.

It’s in the realm of constraint that creativity is fostered. Designers have yet to push against the limits of what is possible. In seeking design solutions to this problem, we could create an aesthetic more appropriate to the medium—and perhaps realize that the responsive image problem only exists because our design conventions remain rooted in print. Without such a period of experimentation and reflection, I fear we could actually introduce standards that go against the medium’s universality; modern-day <font> elements almost.

Designing around the problem

Thankfully, developers and designers are starting to undertake such experimentation, and are finding solutions that negate the need for new standards.

1. Optimization

Rather than generating differently sized images and determining which should be shown, another option is to serve a single, highly optimized image instead.

The dConstruct Archive is a small site where people can listen to talks given at previous dConstruct conferences. Here, background detail around the face of each speaker has been blurred out, generating images with fewer compression artifacts and therefore smaller file sizes. This technique works especially well for portraits, as humans tend to focus on facial features anyway.

Original image: 9kb. Optimized image: 4kb

To work out which image sizes to use, the smallest and largest displays were taken into account. We can already see a failing in current responsive image proposals. If you visit this site, you will notice that larger viewports sometimes display smaller images, because the size of the image required is often dependent on the size of its containing block, not the size of the viewport. Yet viewport is the value the proposed standards would have us query.

2. Altering the aesthetic

If images with fewer colors and higher levels of compression can deliver smaller files, then perhaps our designs should reflect this.

With a theme of “playing with the future,� the dConstruct 2012 conference site employed a highly typographic design that featured monochrome images with areas of flat color. This design decision meant images could be really small, some needing as few as eight colors:

Original image: 14kb. Optimized image: 11kb

As we saw in the television example, the constraints of a medium can impact the resulting aesthetic. In that case, should images with fewer colors or blurred backgrounds—and perhaps even noticeable compression artifacts—become an accepted norm on the web? Surely the popularity of services like Instagram (itself a product born of constraints) has proven that photography is judged by its content, not by its resolution.

3. Progressive enhancement

Altering the visual aesthetic to suit the needs of the medium is a fine ideal, but it’s unlikely to be accepted by some clients, and let’s face it: It’s not always appropriate. In fact, it seems we rarely ask that question: What is appropriate? By evaluating our content, we can decide how many images are actually required to convey a message.

Rather than increasing the resolution of images as sites scale up, we can think about increasing their number instead. This ties in well with the ideas around progressive enhancement: providing a baseline experience that’s enhanced as device capability improves.

The BBC News mobile site is a great example of progressive enhancement. The raw HTML source references just two images: the BBC logo, and an image for the main story. Every device receives this, and pages can weigh as little as 28kb—quite a feat in the world of 5Mb websites.

When accessed on more powerful devices like newer smartphones, tablets, and desktop computers (those that can "cut the mustard"), an image is displayed for each story. These images have been deemed “nice to have�—enhancements to the core experience that are conditionally requested after the basic page has loaded.

Progressive enhancement has long featured in the developer’s toolbox, but it should now feature throughout the design process. By thinking about websites in less binary terms (desktop versus mobile; IE6 versus “modern� browsers), we can create experiences that adapt to the diverse landscape of the web.

Adapting our assumptions (not just our layouts)

Imagine the design of a new website. Do you see a layout framed by a header and footer, with navigation running along the top and a main content area featuring a sidebar?

We need to reset such assumptions.

Rather than seek inspiration from print, perhaps we should look more toward software design. Desktop applications have long been imitated on the web, particularly for productivity applications, and they are often insufferable as a result. More successful interfaces combine the best aspects of desktop applications with the native interface of the web—think Gmail versus Yahoo! Mail.

Similar thinking is now being brought to content-focused applications, largely thanks to the introduction of the Chrome Web Store in 2010. This feature gave Chrome developers a marketplace to sell and promote apps built using web standards, and many have created apps that repurpose content available on the web.

That these apps can only be viewed using Chrome is an unnerving requirement, and one worthy of protest. But, if we look at these apps from a purely visual standpoint and compare them to their traditional website counterparts, we’ll see that a blank canvas removed of assumptions can deliver experiences more applicable to the web.

Only the news that’s fit to print

When we think of websites inspired by print, those of newspapers spring to mind. The website for The New York Times features a fixed, densely packed, multi-column grid. Like many contemporary sites, content is suffocated by advertising, sharing widgets, and related links:

The inappropriateness of this design becomes more apparent when compared to its Chrome App (which is thankfully accessible in other browsers). Content takes center stage, with a less cluttered, more focused interface that’s also responsive—to a point. Note that it also features less photographic imagery, supporting the idea that responsive images might only be a problem when web designers try to replicate print.

Task-oriented sites

Another website that suffers from similarly crowded layouts is BBC Good Food:

Yet, when viewing a recipe page in its Chrome app, we again see a more considered, user-centered design; it’s far easier to follow a recipe when you don’t have to scroll the page.

Content, not chrome

A final example of this trend can be found on Rdio. As the music-streaming service has evolved, its designers have sought consistency between the website and desktop application. Where once these interfaces shared only a few components, now they are largely the same. This has resulted in a design that falls somewhere between the two: not quite a website, but not quite a desktop application either.

Like the Chrome apps for The New York Times and BBC Good Food, this nudge toward a more app-like interface has resulted in a stronger focus on content (in this case, album covers), a more fluid layout, and less intrusive navigation.

In some respects, the new interface shares qualities with Microsoft’s “Metro� design language, found on Windows Phone and Windows 8. When you consider that some of the design principles behind Metro include “Clean, Light, Open and Fast,� “Content, Not Chrome,� and “Be Authentically Digital,� it would be hard to argue that these values couldn’t equally apply to web interfaces.

Of course, one of the reasons these apps can be treated differently from traditional websites is the absence of display advertising—a constraint not so much of the web, but of the business models built upon it. Online advertising is enduring a long and painful death: Adverts are getting larger and more hostile, while services that remove them, like AdBlock, Instapaper, and Readability, are gaining popularity. Yet without proven business models to replace it, display advertising will likely stay with us for a few more years.

This shouldn’t stop us from learning from these app-inspired designs, though. At the very least, they highlight alternative layout possibilities, and how desirable services can be when greater focus is given to content.

The journey continues

As we enter the third decade of the web’s existence, we should be gaining a sense of what works, and what doesn’t. We should now have the confidence to choose which aspects of other media and platforms to take inspiration from, and which to ignore. We should be inspired by the conventions of other media, but no longer governed by them.

With universality as a guiding principle, we can ingrain approaches like progressive enhancement throughout our design process. Everything on the web ultimately needs to degrade down to plain text (images require alt text; videos require transcripts), so the text editor might just become the most powerful app in the designer’s toolbox.

As the web matures, we should acknowledge and embrace its constraints—and the aesthetic those constraints can produce. When we do, we might discover that the true web aesthetic is hardly visual at all.

Translations:
Italian
Portuguese
Arabic

RSS readers: Don't forget to join the discussion!