Responsive design is a catalyst, a reminder. Dan Mall talks in his presentation “Responsive Design is Still Hard/Easy! Be Afraid/Don’t Worry!” at Beyond Tellerrand (Düsseldorf 2014) about the benefits of bringing all the team members a bit closer together and to combine performance, accessibility, design and content for successful project management.
Henry Ford had a vision: He wanted to bring the motorized car to the great multitude. Everyone should have an automobile. To make this happen, he:
- invented the first moving line assembly, which reduced the prices of the cars,
- replaced expensive experience people with low skilled laborers,
- brought the work to the workers to gain more efficiencies, so they spend less time moving,
- figured out that well-paid workers would put up with dull work and still be loyal.
Agencies are still build around this model. But why should a system that was designed to produce affordable and pre-designed cars be used, to work together in a creative profession? This is the question Dan Mall tries to answer during his session and he shows some insights into agile project management.
Frameworks and the waterfall model
A process is a predictable controlled system. It performs a task and the rest goes as planned. Frameworks on the other side function like a football field. There are also rules and restraints, but it’s always a surprise what will happen during the 90 minutes. As this football field example shows, effective projects should use the framework principle instead of strictly defined processes. The starting point and the aim are the same, but with frameworks you are much more flexible.
Nearly every project uses the traditional waterfall model as basis. One thing has to finish before another task starts. To visualize the mile stones you use so called “swim lanes”. But swim lanes are designed for races. The waterfall “collaboration tool” is actually designed to race alone to the finish. But in projects we should collaborate and parties should work together as a team. How does this work when you start a project on a metaphor for an individual competition? The magic word you are searching for is: Agile.
Extend each individual project phase just a bit, that they overlap. So the people have the possibility to spend more time working together. Everyone (client, idea giver, developer, information architect, builder, etc.) should be involved from the beginning of a project. Get everyone on the same table. Then you’ve to move toward things and set focal points. But always be sure that everybody starts and ends in the same place. So how does the agile-framework-teamwork-projectmanagement work in reality?
Step One: Start with a plan
We don’t spend enough time on planning. Start with research. Ask your target group what they want. What they actually expect from a website and how they use your website, app or products. And then “Hypothesize”. Create a hypothesis and find research results that approve or disapprove your hypotheses.
Step Two: Inventory is king
Start with an inventory. There are several types of inventory, such as content inventory, performance budget, pattern inventory and visual inventory.
A content inventory consists mainly of an extremely detailed sitemap and contains all the content that’s on the website. Then you’ve to decide what to do with the content: add, edit or remove it.
This is another form of an inventory. For example, it measures the connection speeds and access time from mobile phones. Take all these things that need to be on the page and say how quickly they should load. Bear in mind to beat your competition, you’ve to be at least 20% faster than your competitor.
For the pattern inventory you’ve to break down a site into individual elements. This kind of inventory also uses a spreadsheet where all the patterns are listed.
Asking a question gets you more information than making a statement. Visual inventory is a new deliverable to give to your client. Every deliverable is designed to start a conversation. Your client doesn’t get the final mock-ups or screen designs from you, he or she just gets a scribble to get a sense of what you want to go with.
Step Three: Sketch it without pencil and paper
With linear design you can list out the things that are on your page. Afterwards block out sections into Grey. So you get a sense of what’s important. An it is easy to make this kind of boxes responsive.
Element collages: Let the client talk about their mission and project. If there are (key)words they use a lot more often, try as designer to put them together. Start to sketch them.
Turning powerful phrases into visual hooks. Dan Mall
Another different way of sketching is Prototyping. Each sketch has one problem to solve and one solution. The first sketch should be something anybody can do. This kind of prototyping can also help new developers to catch up fast and easily.
Step four: Assemble
If you do all the mentioned things above, it’s now easy to assemble them, to put them together. There is one saying from the French cuisine “Mise en place”. This means to get all the ingredients ready before you need them. So, don’t chop the tomatoes as soon as you need them. Chop them ahead of time.
Forget templates and pages, use presets
The terms “templates” and “pages” usually come with a lot of baggage. Therefore, it is better to use the terminology “presets”. Because presents can be changed easily. Start with one template and add further content elements to it.
To put all these considerations into mind, responsive design isn’t really that hard. It is even a catalyst. Look at performance, accessibility, design, content, etc. combine them and put them together. Et voilá!
Step five: My personal learnings of this speech
What Dan Mall describes so vividly during his speech is project management. The used tools in project management are designed for the individual and to race against each other. But projects are always about teamwork and people working together. If the developer doesn’t know what the designers’ intentions are, you’ll never have them on the same page. But if you involve everyone from the beginning into the project, everyone knows what should come out in the end. It is like with a car. Each assembly line worker knows how the end product should look like in the end. He or she also knows to be ahead of time and have the part right on time as soon as you need it. Mise en place will provide you from getting stressed out in the end of a project.
Even the client could benefit from the process. Be honest, it happened to you before. Your account manager or designer comes with a cool idea. The client loves it – BUT it is not feasible.
In theory it’s great, but it wouldn’t work in reality.
So next time, start to talk to each other. Yes, it is that simple.
One note at the end: As my experiences from the last months studying content strategy showed me and this talk confirmed it, the most important and powerful tool of a content strategy is a spreadsheet. Because everyone – if you are a content strategist or not – can handle it. Even your clients, customers or other stakeholders can read and interpret them.
Watch the session Dan Mall – Responsive Design ist Still Hard/Easy! Be Afraid/Don’t Worry!