: Mobile First and RWD workflow and how to interact with client Our agency's workflow for creating a website normally consists of: discuss content-design with client we create wireframes (with optional,

@Phylliss782

Workflow

As Marius pointed out, your workflow doesn't necessarily need to change all the much, you just have to consider three primary scenarios instead of one. No big deal, right?

What changes is how you parse the data map. You have to start with every piece of data/content and then drill down to priority levels. There are four broad categories:


All devices
Some combination of the three
Desktop-only
Nowhere


Mobile first?
Mobile isn't really "first" in this approach: You're considering all things at once. With that in mind, I think the biggest workflow change is going to happen in step 1: You have to develop a content/data map (which you're already doing) plus decide what falls off when.

Responsive Design

Making the call on RWD development really depends on the project. Responsive is perfectly suited to content sites. In the ecomm world, on the other hand, device-specific sites and apps are still king. I don't think we've figured out how responsive really fits the ecomm problem. (Frankly, I don't think we've figured out ecomm on mobile in general, outside of the simplest scenarios but that's a topic for another day.)

Outside of coding, the decision to be responsive or not doesn't change things all that much anyway. You still have to wireframe and comp all three (or four ... thanks mini-tablets!).

Vote Up Vote Down

@Holmes874

The hang up is steps 3-4. They have to be taken out and the approval/review process done AFTER coding starts.

Look into Agile Development and Lean UX:
uxdesign.smashingmagazine.com/2011/03/07/lean-ux-getting-out-of-the-deliverables-business/

Vote Up Vote Down

@YK2262411

The ton of coding to make the design responsive must have an impact on the cost. Here's a suggestion of workflow addapted to the new requirements:

1.discuss content-design with client

2.we create wireframes (with optional, depending on client, approval)

2a.for desktops (classic)

2b.for tablets

2c.for phones

3.we create three pixel perfect "layouts" in Photoshop

4.client approves / with corrections

5a.return to step 3

5c.begin coding for all three widths

Vote Up Vote Down