Design for the Ebb and Flow

09 Jun 2014

WebDesign 0.Overview :: The state of the web design craft – and what's next for me

---

When he put a name to it, this is what Ethan Marcotte called the fluid breakpoint web design techniques he popularised. It’s my objective as I work on a new (for me) approach to the web based on five attributes:

1. Defined
2. Workable
3. Adaptive
4. Stimulating
5. Simple.

Folks often call Ethan’s approach ‘Responsive design’. As Mark Boulton notes, we’ve hardly begun to get responsive. Adaptive design, for now, which is steps forward. And toward where we want to be, designing for the ebb and flow of things.

I’m beginning to put some of these ideas to the test. Before I get to far, here is a summary of my initial approach and my journey so far. For other coding novices exploring adaptive design, my map might help. If you are considering having me make you a site, this discussion where I’m coming from.

0.1.Defined

If you can’t maintain or update a design or content files, your site doesn’t work. New designers, editors and coders must be able to come into a project and take up where the old crew left off.

Clearly organised specifications define design logic and maintain clarity through correction and revision cycles. Sketching and wysiwyg layout tools work to rough in a design, but when it comes to tightening up details, one needs the precision of proportion, mathematics and relationship sequences – a set of written specs.

Annotations in both design and content files organise and describe code, data and information structures and include tips on how to change content and presentation. In the raw css and html files, annotations help any designer or coder to understand, update, correct, revise or expand the site.

0.2.Workable

Content and design files do little good when trapped in cul-de-sac, proprietary formats. It helps if everything needful is available in a self-sufficient, cross-platform, editable context. App development frameworks like Bootstrap help in starting, but I’m coming to the idea that final coding and fleshing out of details has to be a custom job every time – made accessible by the use of programs and tools that any designer, editor or programmer can run on any common machine using any OS.

I’m experimenting with Bower to construct portable contexts, or passepartout packages, for css and html development, refinement and processing. I'm making a bid to break free of frameworks and deliver easily understood, easily modified code.

0.3.Adaptive

A site is no good if users can’t load it. Several design techniques collaborate to keep sites useful on a range of display, communications and computation devices – including legacy devices common in less technologically sophisticated communities. - Fluid grids and breakpoints help layouts adapt to changing screen size. When refined using max|min values, grids can also control important readability functions such as line length.

• Selective inclusion provides each device the content it can productively handle, keeping the focus on important data, information and functionality and off-loading extras from core screens.
• Ground-up operability keeps key functions available on the lowest-level technology and adds bells and whistles as a device permits.
• Neutral iconography, paired with compulsive labelling, keeps functionality from getting trapped in proprietary corners, or confusing those outside the pale.

0.4.Stimulating

To begin with, a site must work. The next step is that the user is engaged by its content and activity. The user community must find the site readable, legible and operable. Adaptability of design helps, but clear access, activity, information and interaction requires further attention to details of colour, size, contrast, spacing, cultural context.

Engagement also comes from discussion and other forms of communication, which create active user communities, ignite a self-refining process and keep work relevant, simple and productive. Communities of knowledge, built through comments, links, credits and x-refs, are a parallel key to a productive and rewarding user experience – every site needs to have a system to keep data, information and knowledge connections current and authoritative.

0.5.Simple

A simple design with simple content has two primary characteristics: Lean and clean. It loads faster, works more smoothly and is beautiful to behold.

• At its most simple, lean means minimisation, cleaning up code, taking out the detritus so pages load fast.
• At its most basic, clean means logical, mathematical, coherent. Human intelligence demands pattern and sequence, but exceptions or broken sequences have their own logic – which enhances understanding.
• Polishing is a necessary, productive final step in site design, bringing to life the contributions of all stake-holders to produce a dynamic, accessible, engaging UX.

Your next step

For too long, I’ve felt a distance between design values and customary web process and habits. Since meeting others who share my values and vocabulary, I’ve realised it’s possible to design with integrity, to achieve a productive user experience, clear specs and the integration of visuals, content and functionality.

Working together, we can change common practice; working on my own with intention and integrity, I can be more productive, have more fun and produce a better product. My work is increasingly responsive – getting better at giving both site owner and visitor what they ask, well organised and elegantly produced.

I’m learning to live with a semi-Agile credo: Don’t wait on perfection – earn it. I’m adapting to the idea of progressive enhancement – not the coder’s kluge but the idea of floating a workable first now, with more as it comes, because surely the world changes as we work and what started out best often ends obsolete. I make sure anyone can take over the follow-on, though working with me may become addictive.

I’m working on a web production passepartout, introduced in these articles. If you're interested in being part of this web design experience, get in touch with me. I offer planning, design and execution services, including full engagement with content, look, art, interactivity and branding – for a special, test-case price.

Notes

This article introduces a five-part series beginning a design/coding/universe-of-the-internet conversation I hope to have with you and you and you as we all work on, use and consider the web and its apps. Share your comments, email me if you want, hire me if you’ve got a job that needs doing that I can use to move my ideas forward. Now we get down to work. Thanks for your help.

Thanks to friends and colleagues in the designer/producer community who have helped me get into the ebb and flow of site design, including Robert Nealan, Darcy Clarke, Craig Buckler and Richard Clark. Also, and always, thanks to my fellow information specialists, including Donna Kelley, Susan Catalano, John Zussman, Marta Sánchez-Vásquez and Janet Bensu.

I’m moving on up the learning curve, looking for real-world challenges to expand my strategies and technique. Take an opportunity to get with the ebb and flow of things. Call me.