Quality and velocity

or, Maintaining a standard of design and code quality in a lean environment

A standard of quality

It goes: Strive for quality in work. Require a high standard of quality in products and services, in business. In all things: quality of design, quality of code, quality of content, quality of usability and accessibility.

How do we define a high standard of quality?

One way of valuing quality is as a measure of craftsmanship.

Craftsmanship, to quote Richard Sennett, is “a basic human impulse: the desire to do a job well for its own sake”. Craftsmanship, by definition, implies a learned — or, more broadly, a practiced — skill in a particular craft. Craftsmanship, then, is an implicit standard of high quality.

In his article Crafting the Front End, Ben Bodien considers the attributes that make a craftsman (craftsperson) the maven of their craft. They are, paraphrased: “an appreciation of good work, a belief in quality at every level, vision, a preference for simplicity, and sincerity”. Further, the article explains that a craftsman is adept at his skill by maintaining a personalized toolkit, specialized to his strengths.

Quality in collaborative work then is finding the best designers, developers, writers and content creators; those who excel at a craft and expect the same of peers.

Craftsmanship and delivery

A high standard of quality and craftsmanship would suggest careful, considered effort and refinement over a long duration of time. In an environment of agile development and lean principles —  frequent release for purposes of quantitative learning — is there a conflict between work quality and the timely delivery of product? If the goal is to constantly test a product to gain user feedback and an understanding of progress, are the two constants — quality and pace — at odds?

As it stands, gaps in traditional ways of working allow for output without validation. This applies to design decisions as often as it applies to product research and feature investment. As with development, if allowed all the time in the world design quality will stagnate or diminish as authors add more and refine less. Rapid iteration is not counter-intuitive to a good design process. In fact, it is the opposite. The early concepting and sketching stages of design often need an exhausting devotion to the repetitive generation of ideas. The strength of visual design is in iteration. Similarly, rapid prototyping does not necessitate haphazard, disposable code.

The proposal then, is that there is no inherent compromise in essential — fundamental, quintessential– quality in work and the rate at which it is completed.

Elements of craftsmanship

Accepting that duration of products will differ, the pace of completion will vary, and unforeseen variables will disrupt workflows: how can we best infuse an essential standard of quality in our work? What elements of craftsmanship can shape our process? What elements of craftsmanship are at the heart of work we take pride in?

Consider a draft list of candidates.

Fundamentally usable design

Get things straight from the beginning: start with fundamentally usable design. Paul Schriver recently wrote on the notion of  ”Minimum Usable Design”. While the method he describes doesn’t quite live up to its premise, the term (which, admittedly is a bit silly) contains a kernel of truth. That is, favor simplicity and usability by designing for the largest user audience first. Design the aspects of a product or service that are relevant to a broad set of users. Avoid designing every feature or layout.

As we establish basics, add specialized features in iterations; prioritize the design process. In doing so, we save time and sidestep the risk of diminishing returns, as explained by Dmitry Fadeyev in response to Schriver’s article. He writes:

Once you implement the core foundation, you’ve satisfied most users, and as you go up from there, adding more and more features and refinements, the payoff for your efforts will steadily fall.

A smarter design process produces less waste and better design. This is especially crucial if the product is nested in a responsive web design workflow. Convey a broad design vision at the start, iterate as the audience returns measurable needs and the technology becomes less opaque.

Accessible, measurable concepts

Accessibility is critical to early user-testing, whether as designs presented for feedback or in product prototyping. Keep design straightforward: free of embellishment and difficult color or typographic choices. Thoroughly consider decisions, unapologetically remove unnecessary features or flourishes that put accessibility and testing in jeopardy.

A prototype or Minimum Viable Product (MVP) must be usable by the users testing it; measurable feedback is only useful if consistent and trusted. In cases where a single technology or browser scenario is not specified in early testing, always aim for broad compatibility on different devices.

Do not lose sight of established best practices. Progressive enhancement, web standards, image optimization and a mobile first approach are more important than ever. Remember your audience and their capabilities and limitations. Technology bootstraps and boilerplates, by their nature, often prepare for every contingency. Bloated with fallbacks and callbacks for edge cases — pandering to deprecated browsers and strutting the latest clever Javascript framework — prepackaged boilerplates are liable to become a hinderance if the markup survives to the late stages of product development. Avoid temptation, be wary of shiny things. This may seem dogmatic, but it is important to avoid points of no return in development. A bit of research and discussion with peers to weigh the benefits against the needs of the product will, more often than not, fend off the unforeseen implications of using untested technology in otherwise stable development environments.

Follow the rules! The Web Content Accessibility Guidelines (WCAG) tell us everything we need to know to build compliant web services. Additionally, keep note of HTML5 support for The Roles Model (ARIA). Be mindful of users with visual impairments and learning disabilities. Simulate users environments where you can, consult with experts where you cannot.

User experience modeled on shared and personal learning

Ben Bodean, in his article on craftsmanship, wrote on the importance of a craftsman’s toolkit. He provides it as a metaphor for the tools and knowledge we collect to enable our craft in a chosen field. We specialize each toolkit through the tools, and individualize by our unique, particular experiences.

In terms of design, our toolkit is a personal collection of layouts, concepts and recurring patterns that we find online, in publication, on the street. There is a parallel to the photographer’s morgue of editorial shops and studios. It is the scaffolding borrowed from the shared libraries of our peers; the templates and stencils we forage to fill the gaps in our software applications.

Design, and the process of establishing user experience, is stronger for shared material. Building on the learnings of others makes for an efficient and timely process, but more importantly reduces the potential for repetitive mistakes. Accepted user behaviors, design patterns — a cumulative result of the trial and error of others.

Modular, reusable patterns of code

In the same way, front end development should encourage reusability. Stop redundancy and repetition by stashing pieces of code. Pool from previous projects, build a centralized repository. Use snippets in text editors. As you assemble a toolkit, prepare a collection of common, reusable markup and style patterns. Examine standard elements for commonality; how often does the underlying markup for lists, headings, tables, navigation and content styling change? The best minds in the industry insist on modularity — for example Dan Cederholm’s pea.rs, Jeremy Keith’s Pattern Primer and the BBC’s Global Experience Language.

If possible, build and keep lightweight framework skeletons and vanilla themes with basic functionality, without the frills. Import entire bits of previous projects when starting something new. Be lazy, efficient and advocate cohesion.

Output adhering and contributing to, a guide of living standards

The simplest way to maintain quality is to ensure consistency. As organizations and teams often change, the most reliable way of keeping a legacy of regularity in work or appearance is through guidelines, or style guides. Newspapers have written and adhered to their own language style guides for a century; transportation networks, large corporations and cultural institutions achieved visual uniformity through graphic design in the mid-20th century. Style guides are keystones of modern branding.

Design guidelines determine typographic selection, a color palette, image treatment, the outlay of a complex grid system. Language style guides set a tone of voice, punctuation and spelling, the context and definition of words.

In her article on style guides, Anna Debenham provides a number of excellent examples, as applied to both design and front end development.

Development guidelines offer the same possibility as their printed precursors. From detailing code conventions as minute as indentation and capitalization to providing accessible and standards-compliant examples of common markup patterns, development guidelines have the potential to persist as evangelists of good code on ever-shifting products.

As software products mature, the developers and teams mobilized to build them often move to other projects. In an agile work environment, it is not uncommon to bring on developers from outside the team as needed to fulfill a temporary increase in work. Every developer arrives with different experiences, opinions and preferences. Proper documentation and guidelines are a practical way to stop your product from evolving into a zombie Frankenstein, cobbled together from wildly varying bits of code.

It is useful to start with the conventions of others. Google, Tait Brown, Paul Lloyd, Nicholas Gallagher and Richard Hallows all provide wonderful examples. However, for an organization with shifting staff, writing one as a team is ideal. Take inspiration from other guides, but taylor it to the team’s quirks and practices. The document is not static, but always open to correction and expansion; a living standard. Dock this knowledge in a versioned repository to take advantage of branching and revision history.

On the topic of design, it may not be appropriate to place brand or visual guidelines on an organization, particularly if the organization specializes in making products for others. Instead, perhaps an umbrella guide of suggestions, nudges and hints to bake in an instinctual feel of connected identity.

Collaboration

To this point: Essential quality as elements of craftsmanship, placed brick by brick as a foundation for your workflow. However, as it goes, knowledge isn’t very useful if not shared. Craftsmanship is a fine thing as an individual. Collaborative work amongst talented makers, however, is only as successful as the platform they share.

Define and share guidance. Encourage peer reviews, critiques, group presentations. Expect technical documentation and open data culled from research and measured learnings. Centralize resources: single points of access for design assets and templates, repositories of protected source code.

A proverbial well-oiled machine

The less obstacles in a product cycle, the sooner users give feedback, the stronger a design — a hypothesis — pushed through iteration will be. By establishing a standard of quality, focus can move exclusively to rapid release cycles, testing and intuitive decision-making. By establishing a standard of quality, all output — no matter how temporary or disposable — is accessible, lean, and fundamentally usable.

As work cycles inevitably stagger or drift, pause and reflect. Nothing is so urgent that it is not susceptible to questions of relevance. As Ben Bodean wrote, on craftsmanship and quality:

A good craftsperson regularly takes a step back from their work, and questions every facet of their product for its precise alignment with their core values of quality and sincerity.

Custom WordPress RSS feeds and Feedburner

A great deal of web content is accessible through syndication feeds. RSS, the de facto standard, is often the singular path to publishings of an author’s blog. Despite rumblings of its demise, RSS remains an essential method of news consumption. As such, a feed should strive to provide the clearest, cleanest presentation of content possible outside of the feed’s source website.

I recently introduced a second stream of content to this site, Snapshots of web content that I find inspiring or informative. The format for presentation of this stream is still under debate, but the current solution mixes the posts into my normal blog stream. When it came to delivering this content to an RSS client, I wanted to ensure that readers weren’t forced to click through to this site first to view the linked content. Additionally, the posts categorized as snapshots should be differentiated in the feed.

Subscriptions for this site, like many others, are tracked through Feedburner. My goal was to create a custom RSS feed to accommodate a different type of content post which would overwrite the default WordPress feed, then track the custom feed with Feedburner.

This requires three steps.

WordPress

Automation

With the release of version 3.0, WordPress has supported a small but very helpful function for handling the output of RSS feeds. Previously, all links had to be added manually in the header section of the theme templates. The new function automates the entire process; on an index page it will create a feed for all posts and a feed for all comments; on an individual post, the two global feeds with the addition of a comments feed relevant to the current post. To enable automation, first remove all existing RSS links from the theme header. The function will not work otherwise. Then, add the following to functions.php:

add_theme_support( 'automatic-feed-links' );

If your theme requires backwards compatibility with WordPress before 3.0, have a look at Jeremy Clark‘s solution.

Building a custom feed

The WordPress documentation has a list of recommended methods for creating custom RSS feeds. I chose to build my feed as a custom theme template, based on notes from Zack Katz.

Set a function to load your custom PHP template.
The name of my custom feed template is, quite originally, feed.php and located at the root of my active theme. All mentions of honeycomb are unique, required values. Change the name to something appropriate to your site. Honeycomb is in reference to the name of my theme.

function honeycomb_rss() {
	load_template( TEMPLATEPATH . '/feed.php');
}
add_action('do_feed_honeycomb', 'honeycomb_rss', 10, 1);

Katz’s tutorial also provides a function to manage custom permalinks so that links to /?feed=rss will work as well as /feed/rss/ for custom feeds.

function custom_feed_rewrite($wp_rewrite) {
	$feed_rules = array(
		'feed/(.+)' => 'index.php?feed=' . $wp_rewrite->preg_index(1),
		'(.+).xml' => 'index.php?feed='. $wp_rewrite->preg_index(1)
		);
	$wp_rewrite->rules = $feed_rules + $wp_rewrite->rules;
}
add_filter('generate_rewrite_rules', 'custom_feed_rewrite');

Resaving your existing permalink settings in WordPress->Settings->Permalinks will activate the new rules.

Create a custom feed template
In the function above, the custom feed template is located at /feed.php (eg wp-content/themes/honeycomb/feed.php). Create a new file with your chose template name at this location, and drop the entirety of /wp-includes/feed-rss2.php inside.

This is your custom feed, and will reflect any changes made to the custom template.

The default WordPress posts feed is located at http://www.withoutnations.com/writing/feed/ (alternatively, http://www.withoutnations.com/writing/?feed=rss2). The custom feed noted above is accessible at http://www.withoutnations.com/writing/feed/honeycomb/ and http://www.withoutnations.com/writing/?feed=honeycomb.

Feedburner

The next step is to update Feedburner with the custom address. Select “Edit Feed Details…” from any of the analytics tabs at Feedburner to edit the feed configuration. As we are replacing the default WordPress feed with our custom file, the source that Feedburner looks to for analysis must be changed. In the settings pane, I replaced Original feed http://www.withoutnations.com/writing/feed/ with http://www.withoutnations.com/writing/feed/honeycomb/ (the path to the custom feed).

Apache

With the custom feed defined and the Feedburner source set, the last remaining task is to tell WordPress to forward your main feed path to Feedburner, where it can be properly tracked and managed. There are a number of WordPress plugins that can help with this: FD Feedburner and Primary Feedburner are actively maintained by their developers. Google still provides an older version of Feedsmith as well.

The basic function of all of the plugins is to set an Apache rewrite rule that redirects your feed URL to Feedburner. It’s a convenient service if access to your site’s server environment is restricted or you are uncomfortable editing server-side files. However, if this isn’t a worry, I suggest setting the rewrite rule yourself in .htaccess. It’s straightforward, dependable and does not rely on third-party plugins which are prone to compatibility issues and bugs.

In a not-so-recent article, Jeff Starr at Perishable Press provides a few simple and efficient .htacess rules to achieve WordPress to Feedburner redirects. His suggestions include both post and comment feed redirects. Have a look through his article if this is something your site requires; I was only interested in creating one single custom post feed and setting it to redirect and hence left WordPress to manage the comment feeds.

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} !^.*(FeedBurner|FeedValidator) [NC] 
RewriteRule ^feed/$ http://feeds.feedburner.com/withoutnations [L,NC,R=302]
</IfModule>

Requests for /feed/ will redirect to Feedburner at http://feeds.feedburner.com/withoutnations. This rule reroutes the main feed but leaves /feed/honeycomb accessible to Feedburner.

If your site is using custom permalinks, it is essential to place the Feedburner rewrite rule above the WordPress permalink rewrites, otherwise WordPress ignores the redirect. Typically, permalink rules will look something like:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

The simplest way to test if the feed is working is to check the feed URL in a browser: /feed/ should immediately redirect to the Feedburner account address (eg http://feeds.feedburner.com/withoutnations).

Design for the changing web

Conversations

Our interaction with the web has fundamentally shifted. Online content is accessible through a ever-expanding and myriad range of devices in a nearly unlimited set of surroundings. The conversation is no longer concerned with desktop or mobile users. Consider: a person might read a news article on their smartphone while at work, with limited connectivity, as a workaround to company security policies. Someone else might view a slideshow of images, listen to audio or watch a video on a notebook or tablet while making the daily commute. It is now an incorrect and potentially disadvantageous mindset that makes assumptions based on device capability or context.

Instead, the conversation has moved from the limitations of device and technology to the adaptability afforded with design that is responsive. Pixel-perfect layout in favor of flexible structure with fluid content and media. Design in search of commonalities, not differences.

Response

A Brief History

One year ago, Ethan Marcotte published an article titled Responsive Web Design (A List Apart, 25 May 2010). It has proven hugely influential and a fundamental starting point for responsive design strategy. His central argument is that while it is often tempting to develop mobile-specific versions of a website for a client with sandboxed and curated domains, the approach can quickly become a tremendous burden. How many devices do you specialize for? Which mobile browser do you target, at what resolution and what screen size? Before long, a developer could be asked to provide completely different experiences for a dozen devices: catered solutions for an iPhone, HTC running Android or Windows 7, a Blackberry. The solution is to adapt to the one thing that is predictable and unchanging: viewing size.

Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design. Ethan Marcotte

Consistency of experience

Experience is key. Users change the way they access content frequently; numerous times daily. We expect the user interface to remain consistent, if not exact as we move from desktop to mobile, video game console to tablet. As a sort of testament to this need, Facebook has recently announced the rollout of one unified interface for all 250 million of its mobile site users.

Fluid Design & Media Queries

How does a website become responsive? HTML and CSS are the building blocks of the web: the structure to hold our rich content and the styling essential to bring it to life. Historically, CSS has supported a method for scoping presentation to devices with media types — a way of adapting stylesheets for screen, print, or handheld devices. These are, however, quite limited and ill-fitting as the definition of what is appropriate for each becomes less obvious.

As Ethan Marcotte explains, the upcoming CSS3 specification includes a very powerful method of querying device characteristics. These expressions, or Media Queries, check for the conditions of specific media features. A media query could, for example, inquire on the current width of a browser, the maximum or minimum screen size of a portable device, aspect-ratio, color, resolution or device orientation. By preparing a stylesheet to adapt to the changing conditions of a visual or tactile device, websites become truly responsive.

Continue reading

Input buttons and CSS3

CSS3 brings a wealth of new properties to the web and to modern browsers. There is a greatly reduced dependency on images in creating rich, stylized content. I’ve used a few of these new properties to render the submit buttons throughout this site. It’s a basic solution to a common request that was previously only possible with imagery.

Continue reading

The beginning of the end for Internet Explorer 6

Internet Explorer 6 is facing unprecedented, high-profile criticism. Could this be the start of a broad public movement to persuade users to finally abandon the browser? While the arguments presented by developers and designers over the last decade have largely gone unheeded, declarations from government institutions and media providers may carry more significance. Posing the browser as a security risk and an obstruction to new, feature rich web applications is a clever and completely justifiable argument.

July-August 2009: Digg considers dropping IE6 supportYouTube begins phasing it out

15 January 2010: Microsoft admits the attacks on Google’s system by Chinese hackers permitted by a flaw in Internet Explorer

16 January 2010: The German government issues a strong recommendation for users to upgrade or switch browsers

18 January 2010: A government agency in France responsible for cyber security restates Germany’s assertion

1 March 2010: Google will begin phasing out IE6 support for Docs and Sites

end of year 2010: Google will begin phasing out IE6 support for GMail and GCal

Styling Input and Anchor tags as action buttons with cross-platform support

Attempting to style inline objects consistently across multiple browsers and platforms is difficult enough with unpredictable standards support — trying to maintain that exact style across form input elements as well has been near fantasy until recently. Thankfully, with the combined knowledge of the web development community and rapid adoption of reworked web standards by modern browsers, solutions are available.

For a recent project I had the task of applying one consistent button style to form inputs, anchor tags, and a handful of paragraph tags — with varying widths and background colors. Taking a cue from the brilliant work already posted on the Filament Group (which is derivative of the ALA sliding doors method and the work of Kevin Hale at Particletree), I developed a class that is applicable across a variety of elements. The examples given were generally applied to the button element; my project called for standard inputs with type ‘submit’. The class scope is left open to allow for easier application to non-form elements. A few instances:

<a href="#" class="input-btn-link"><span>Add to Favorites</span></a>
<a href="#" class="input-btn-link small"><span>Add to Favorites</span></a>
<input class="input-btn" type="submit" value="Add to Favorites" />
<input class="input-btn small" type="submit" value="Add to Favorites" />
<input class="input-btn medium" type="submit" value="Add to Favorites" />
<input class="input-btn large" type="submit" value="Add to Favorites" />
<p class="input-btn">Add to Favorites/p>
</p>

Continue reading