Belfast

The room is either too hot or too cold. Stale, empty freeze devoid of moisture, on stifled wings of a dead grey sky. A raging blast of warm air from the radiator, a slow hog roast.

The cardboard bed with its one, thin white sheet. Duvet the thickness of a starving lamb in winter. Flat, hard pillows.

A hotel room as a colorless, perfectly inoffensive cell. A strange sort of purgatory.

Tepid Earl Grey Tea, shade three seconds unreasonably dark. The ceramic mug black on a white, frilly doily.

Being awake is the same as being asleep. Time is lost, linear transgression escapes.

Tell a story

This year, amidst the talk of a new dawn of opportunities in technology and innovation — the singular power of individual makers, the relentless possibility of a touch-enabled mobile global canvas — is nestled one subtle but important reminder.

Do the work you love. Work with the clients and partners you respect and admire. Tell a story about something you know, tell your story. Tell a story that interests you.

A Standard of Quality (iterate, iterate, iterate)

Last month, I wrote a bit (well, quite a bit) on the challenge of preserving a certain standard of design and code quality during product development amidst a shifting, agile workflow. I considered the article a draft of sorts and following some very valuable feedback from friends and colleagues, took the opportunity to rewrite the piece for publishing at Sidekick Studios.

The revised piece is split into three separate, easier-to-digest posts: A Standard of Quality (Part #1/3), A Standard of Quality (Part #2/3), A Standard of Quality (Part #3/3)

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.

The Busy Trap, Tim Kreider

Almost everyone I know is busy. They feel anxious and guilty when they aren’t either working or doing something to promote their work. They schedule in time with friends the way students with 4.0 G.P.A.’s make sure to sign up for community service because it looks good on their college applications.

This is my station

Written 24 April, 2012 whilst waiting for approval of a visa extension.

Over the past decade, I drifted from place to place, changing jobs and residence frequently without so much a purpose as a list of departures. In retrospect, it makes for an interesting narrative: years of seemingly irrational decisions tucked neatly under the guise of personal growth.

Fitting then, that my first serious attempt to keep things as they are is left to someone else to decide.

In limbo

In one week, the visa that grants me the right to live and work in the United Kingdom will expire. I applied for an extension two months ago, delayed a decision following unprecedented backlogs. Suffice to say, the coalition government’s heavy-handed measures to diminish immigration, coupled with the Border Agency’s fundamental inability to secure the border and manage immigration policy has left the system in complete disarray.

Fortunately, an expiring visa remains valid indefinitely until a decision is made. That comfort aside, the decision to approve or reject the application rests entirely with the Border Agency. The application process is a black box. On the outcome of rejection, I would be forced to leave the country immediately. With this knowledge, every decision I make is laden with meaning. Day by day, I plan to stay — and plan to leave.

I commit to a wonderful new job, new friends and a world of continued opportunity in London; I purchase tickets for conferences, festivals, gigs and holidays.

I review contractual obligations, delay new commitments, prepare a backlog of contacts and necessary tasks. I estimate asset losses, consolidate personal belongings for moving, research methods of shipping and money transfer.

It is a terrible state to be in, and a difficult one for others to empathize with.

In this, I am forced to consider a backup plan. And the answer is always the same.

Have _, will travel

This time, North America. To see a country I’ve barely known.

Nice idea. It begs the question: why is the fallback always travel?

At times, travel is a limited love affair with the romance of the unknown. At others, an endless ramble in search of purpose. For some, of course, it is simply running away.

In 2009, four months after I moved to London, the bottom fell out. As freelance work (and my bank account) dried up and full-time work proved elusive, I lost the room I was renting. I had already booked a flight to New York for end-of-year holidays, and decided the best course of action would be to use my remaining funds to travel until I was due to fly back in December. Things got better, the idea abandoned.

Travel seems like the lost dream of middle age, usually afforded to the very young and the retired. A means of living untethered, prior to or following stability. To some, it is a course for rebellion against the status quo, against marriage and parenthood. In the United States, world travel is often met with skepticism and condescension, even derision. A shame, as for others it offers so much unconsidered possibility.

I visited London as a tourist on the tail end of a holiday, an afterthought. I left one week later, the notion of moving to the city firmly planted in my mind.

If things do come apart this time, it would be easy to move back to New York. Perhaps a bit of travel first can offer a bit of unexpected insight.

Design and social responsibility

I read the First Things First manifesto in 2002, near the end of my third year in college as a student of Graphic Design. Aesthetics, visual organization, typography, design theory, the principles of modernism and gestalt, conceptualization, message and symbolism — the fundamentals locked in. The discipline is broad: editorial, advertising, corporate, exhibition, publishing, packaging, educational, web design. The field seemed to offer so much possibility. A great deal of choice and a binding sense of determination.

The design community outside the university walls, however, debated. Questioned and reassessed our profession — a discussion spurred at the end of the last century on a designer’s responsibility as a citizen.

I read the manifesto. I read Adbusters, Emigre and No Logo. Society of the Spectacle found its way onto my bookshelf. I minored in Sociology and studied the results of globalization on developing nations under the authority of the West.

It had its effect.

Under this (clearly liberal) sphere of influence, I pushed through my final year of study with a growing skepticism and unease. Often this appeared as cynicism or apathy; in design as satire. In better moments, it let everything unhinge, resulting in truly spectacular design experiments. Saddled with a reckless anti-consumerism and the lofty ideals of youth, I graduated with a mission to do something good — something responsible — with my career.

Pragmatism

Someone remarked to me then, on my intent: “Oh, to be twenty-three again”. I found it incredibly patronizing then, as now. In truth it points to a glimmer of insight that innocence and naive idealism are lost in age, traits often envied when imagination or innovation appears stifled.

The work was corporate telecom, then consumer electronics. The idealism faded swiftly with each rejected interview, with each weekly, insufficient paycheck.

Working later with art galleries and artists, while not doing much to save the world, felt like a worthwhile endeavour and supported the arts, in its own way. Chasing good design has always been its own reward, and good design often comes from deep-pocketed clients.

Headshift initially piqued my interest with their media, educational and third sector work. They initially did work that aimed to incorporate a social good while using technology to connect people and businesses together. Open communication, collaboration and knowledge sharing; generally making day-to-day lives better.

Often, doing interesting work is enough. Doing interesting work with incredibly talented and clever people is even better.

Except.

Every so often the lion resting quietly in the recesses wakes up and makes some noise. And lions want to be heard.

Responsibility

The thing is, it is very difficult to define what it means to practice design in a socially responsible way. The challenge is bound to the environment, politics, labor markets, and education. It requires an acknowledgement of the sociological and psychological impact of consumerism and advertising on people and culture.

For all the debate, the hand-wringing and the manifestos: there is no consensus. Do you work exclusively for non-profits? Dedicate yourself to multinationals by day, work a soup kitchen on the weekend and send the annual Christmas season pro-bono donation? Offer freelance to the occasional cause that piques your interest? Turn down pitches for tobacco, alcohol, oil?

Voluntary effort isn’t always worth the effort. At times, a charity exposes itself to the same hypocrisy, cronyism and corruption as any large corporation. Ill-informed or poorly trained employees in the third sector can dilute their organization’s message and cripple efficiency.

Weigh these challenges against a bigger contradiction: the free market is right. Competition and innovation are vital for an individual to create and distribute amazing things without much interference from others.

I admire people like the late Tibor Kalman who seemed to find a balance between contradictions. It’s curious to think the most effective approach is often the most uncomfortable; e.g. social awareness coupled with product advertising for Benetton.

What altruistic role can design have in a global, corporate-driven, branded consumer culture?

Raising awareness, to start. We can encourage organizations to research clients, find common values. Avoid designing for products without perceivable value. Be subversive. Question motives. Try to do something that matters. Educate.

Beyond that? I don’t have an answer yet. The notion of design with social impact is unique to every individual. How effective design is for creating good is subject to question, often beholden to cynicism.

Aspiration

I believe it’s important to hold onto motivation and instinct, however muddled.

It is more practical to suggest that we stay pragmatic and pursue socially responsible work as and when possible. Say: inherent flaws aside, each new project will be worthwhile in its own right. Chase profit on corporates to subsidize a discount on non-profit. In small ways, attempt to help people connect and solve social problems, drive digital innovation and foster sustainability. In time, the culmination of effort will stand as a step closer to facilitating a positive impact.

I would rather say: only chase work that matters. Let projects fail. Demand a movement of transformation and create change. Use design as protest and enabler. Couple design with strategy and technology to make an impact. Do good things. Effect change.

Chicago

The seeds are planted here
But they won’t grow
We won’t have to say goodbye
If we all go

Maybe things will be better in Chicago
To leave all we’ve ever known
For a place we’ve never seen
Maybe things will be better in Chicago

Well it’s brave for us to stay
Even braver to go
Wherever she goes I go
Maybe things will be better in Chicago

Tom Waits, Chicago

Responsive Web Design & WordPress

On 19 January, I spoke at the WordPress London meetup. The talk was a primer on Responsive Web Design, a topic I have a strong interest in (some might say an evangelical curiosity). The presentation briefly explains the basic philosophy of responsive design, demonstrates how Automattic has applied it to WordPress and offers suggestions to WordPress bloggers and developers ways of making their site responsive.

Video of the event is found on the website of Skills Matter, the organisation gracious enough to host the event.

The slide deck as shown, followed by an ordered list of my specific notes:

Slide 2
The state of the web today.
Designers and developers have spent the last decade fighting for the desktop.
We reach a consensus. 1024×768 was a safe resolution.
Mobile web is born, not much happens, and we continue to follow the same patterns.

Slide 3
We continue to create pixel-perfect layouts for a fixed canvas.
Individual layouts for every device.
We have widescreen television, desktop, tablet, mobile.
If mobile is acknowledged, it is commonly sand-boxed and dependent on user agent.

Slide 4
Designs are cut and cropped.
Performance issues.
No content hierarchy.

Slide 7
If you do have a mobile solution:
How many devices do you cater a service or product to?
How many experiences will a user have?
What assumptions and compromises are made to this end?

Slide 8
The idea is instead:
Accept “the ebb and flow of things”.
Websites cannot be pixel-perfect.
Presentation must change from desktop to tablet, tablet to smartphone.
It is context that plays an essential role in the user experience.

Slide 9
Ethan Marcotte.
Responsive web design is: Flexible grid, flexible images, media queries.
Consistent and focused experience.

Slide 10
Use percentages, not pixels.
Create a fluid layout from a modular grid.
Set minimum and maximum widths.
The grid must resize as the browser changes.

Slide 15
Scalable images and video.

Slide 16
Scale to the design, but never above original size.

Slide 17
We’ve had media types (screen, projector, print, handheld)
CSS3 provides better ways of testing.
Media queries look at physical characteristics.
Browser viewport, device screen size, device orientation.

Slide 19
The foundation of responsive design.
Create a single site and single experience that targets the browser, not the device.
Scales to fit all device sizes and orientations.

Slide 25
Responsive web design is not the first and last solution.
There are valid reasons to create tailored mobile sites and native applications.
Bespoke experience, advanced device features, hardware access, distribution, curated content.
Responsive design fills in the gaps.

Slide 32
Beyond presentation. Impact on site performance and user experience.

Slide 35
What can you do to make your site responsive?

Slide 36
Start new. Making a site responsive retroactively is difficult.
Focus on content. Mobile first.

Slide 37
Start small.

Slide 38
Use media queries to enhance and expand the design as screen real estate grows.
Perfect example of progressive enhancement.
Set queries at common smartphone sizes, tablet, desktop.

Slide 39
Javascript for conditional loading: sidebar content, social media share buttons.
Avoids overloading mobile users with supplementary material.
This is important. Forces you to focus on necessary content.
What do your site visitors really need?

Slide 40
matchMedia.
Set breakpoint in a variable.
Add a listener to the variable.
Set functions on load or resize.

Slide 42
No shortage of good themes.
Find themes that focus on mobile first.