Responsive Design is still hard/easy — Dan Mall

During the 2014 Beyond Tellerand Conference Dan Mall shared his tips and tricks on how to work smarter in todays responsive world.

Henry Ford: 1907 : A motor car for the great multitude. He had a dream that everyone should have access to a motor car. He created an auto line assembly.

Moving line assembly reduces price, lower the skill level (make it easier to build things so the barrier to entry for people is very low), Brings workers to the work (they stand on the line, there’s no wandering around to find the work), well paid workers would stay even though the work was boring.

We still build our agencies around this exact model. Why?

Frameworks (not processes)

We need Frameworks in our workflow, not processes.

Newtons cradle is a process. We pick up a ball and we know what will happen.

Football is a framework. There are rules, constraints, a controlled environment but what happens on the pitch is a surprise. The aim is to put the ball into the net, but how we go about that is up to us, it’s up to our opponents (or clients). We need agencies to be like this.

As an industry we work in a traditional waterfall methodology. UX->Design->Development

Tracks in a waterfall project are like running tracks. It’s a race to finish, and you do it without knowing what is happening in the other lanes (nor do you care).

Waterfall to Agile in 6 easy payments

1. Extend the previous track slightly past the normal finishing time to create an overlap with the next step. Like a relay race — there’s a period of hand off.
2. Exntend that time a little longer. Get the the next phase to start slightly earlier to make it a longer collaboration.
3. Extent to maximum involvement. throughout the entire process.
4. Create appropriate tapering. Scatter the touch points so people aren’t on full time all the time.
5. Focal Points. Start at the same place, finish at the same place.
6. Rinse and repeat this approach.

A modern web design process – 4 easy payments

1. Plan

Research (check out jennifer brook): ask people how they use the current site.
Hypothesize: Go off and think how the best approach to the website will look, how the design will work. Guess the best approach and validate that with some research on the web to back that up.

2. Inventory

Content Inventory /content Strategy: Add / Edit / Remove (content strategy approach)
Performance Inventory: Karel Knop (RWD Images article), Tim Kadlec performance article. Check the blog on this.
If you want to be perceived as faster than your competitors you need to be 20% faster.
Pattern Inventory: Pattern Lab. Use a spreadsheet to develop all of these elements.
What you’re shooting for in any project is the highest level of fidelity in the shortest amount of time.

Visual Inventory:

All deliverables are designed to start conversations.

3. Sketching

Linear design, list out the things that should be on the page. Add boxes to the page and block out elements. It’s really easy to make a bunch of boxes responsive. Great way to sketch in code.
Bearded do this in the browser. Sparkbox do this.
Grantland:
Good example, try and find the link to this

Element Collage Sketching

RIF examples – check Dan’s site. These are small elements that were designed in photoshop that were outside the rif.superfriend.ly making element collages extend over width rather than height makes it easier for the client to understand that it’s not a website.

Prototype Sketching

Each sketch has one problem to solve and one solution.

once you have all the pieces sketched in code you can start adding the together. How does it scale with more divs, more css, more js.

4. Assemble

Using the term presets over templates is great. Templates sounds like things can not be changed, but presets give you the feel that you get a template that you can updated and change to suite your needs.

When we switched from table based layouts to CSS we had all the same conversations we’re having today about RWD. The premise of RWD in the terms of flexible grids, flexible media and media queries that’s easy, it’s the stuff that goes with it, the workflow, the way we work clients, that’s the hard part.