Modern workflows in "RWD" projects

Jan Deppisch
Frontend Developer @AOE GmbH
@netzartist
Frontend RheinMain 01/2015

The old times

  • Design first (incl. client approval)

  • psd file deliverable for developers

  • expected pixelperfect layout in all browsers

  • linear workflow (concept + design, development, testing, etc.)

  • developers not involved from the beginning

  • e.g. Bootstrap as the tool to "just get responsive design done"



     

  • "go mobile" after launch of desktop-site

  • "desktop first" design

  • only support e.g. iPad, but also IE8 ... !? What about these:

  • "unforseen problems" happen during development







     

  • over-time, over-budget, performance lacks,

  • bad maintainability of code

Responsive workflow

  • complementary teams: concept + designer + dev

  • content first

  • always think mobile first & use progressive enhancement

  • no photoshop deliverable (for devs)

  • modular design elements, no full page layouts

  • build prototypes - in the browser

  • involve client

  • get client sign-off for new deliverables

Project goals

  • replace slow mobile / desktop sites

  • first focus on "mobile" experience

  • one code-base, one responsive site

Solution

  • mobile-first
  • performance first
  • markup prototypes
  • progressive enhancement

A better workflow

or what to do before development starts

0. At the beginning...

  • Stakeholders, team, expectations, contract ...

  • Get from client:

    • Documents (CI material, content, moodboard, ...)

    • List of "need-to-be" and nice to have supported browsers / devices, follow up

  • Involve dev, designer, ux expert to:

    • get client more involved with RWD topics

    • clarify performance budget

    • formulate a "responsive manifesto"

Responsive Manifest

"Before setting out on a large responsive journey, I recommend writing a very short document, agreed upon as a pact (of sorts), the content of which should be agreed upon by all the ‘chiefs of staff’.

 

Briefly define why this responsive project is being undertaken. What does each party/stakeholder hope the benefits are of completing the project (easier feature development, less development time, reduced support etc).

 

When things get fraught and ugly (they often do), this is the document to which you can all refer back to, and remember why you set off on the journey in the first place.

 

Really large responsive builds often take more than a year, and should personnel come and go in that time, this single page document will also serve as the manifesto for your project.

1. Content strategy

  • Collect, analyze & prioritize

  • Group content by type (headlines, lists, ...)

2. Content wireframe

3. Create Content +

    Content prototype

 

  • grouped content parts

  • no design

  • mobile first

  • for all major
    breakpoints

  • for each page-
    type

  • for each content-
    type

  • client sign-off!

4. Design modules

 

  • illustrate visual styles

  • typography, colors

  • images

  • look & feel of elements / moodboard

  • no pagelayout design, but:

  • designed elements

  • = deliverable for frontend instead of psd

Atomic design / Patternlab

5. Enhance clickdummy

 

  • enhance HTML content clickdummy with basic design elements from styleguide

  • no content positioning

  • focus only on mobile view

  • get a feeling for the content (length, structure)

  • test on real devices

  • repeat for all breakpoints

  • client sign-off!

6. Implement frontend

6. Production

Example from Velux project

documented element from design styleguide

frontend implementation

automatically updated frontend styleguide

New workflow examples

... means @<yourCompany>

  • DO

    • allow time for "RWD education"

    • establish an agile project workflow / Scrum

    • involve people with RWD knowhow at the very beginning of new projects

    • involve frontend devs at the beginning

    • sell RWD consulting / workshops to clients

  • DON'T

    • sell psd layouts

    • sell full layouts

    • sell RWD as an add-on afterwards
       

  • New client sign-offs

    • Content delivery / image assets

    • Moodboards + Styleguides

    • Prototypes

    • Performance budget
       

  • Client involved even more

Click!