4

Our agency's workflow for creating a website normally consists of:

  1. discuss content-design with client
  2. we create wireframes (with optional, depending on client, approval)
  3. we create one or more pixel perfect "layouts" in illustrator / photoshop
  4. client approves with corrections
  5. return to step 3
  6. begin coding.

Now, since we are slowly approaching the year 2010, and we're pondering about RWD ("Responsive Web Design") and "mobile first", it's clear that our workflow wouldn't work without adding a ton of costs for the client (considering the technical CSS overhead isn't THAT large).

What is the best workflow which works with RWD and mobile first? Also, are there any specific tools that may help?

Improve this question
4
  • 1
    @Lauren Ipsum, rolled back. That was self-deprecating humor. RWD isn't really new, and we're reacting a bit late to it...
    – Roman
    Dec 13, 2012 at 13:12
  • does RWD = Responsive-Width Design? Might be worth making that clear.
    – e100
    Dec 13, 2012 at 14:55
  • @e100 Responsive Web Design. I'll make that more clear
    – Roman
    Dec 13, 2012 at 14:57
  • @Roman I stand corrected. The humor was too subtle for me and I missed it. Sorry to step on your joke. :) I am also right in the middle of a project for a client discussing how companies are genuinely just getting started in mobile design next year (2013), so from my perspective it's not "reacting late to something new."
    – Lauren-Clear-Monica-Ipsum
    Dec 13, 2012 at 18:34

3 Answers 3

Reset to default
1

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:

http://uxdesign.smashingmagazine.com/2011/03/07/lean-ux-getting-out-of-the-deliverables-business/

Improve this answer
3
  • 1
    +1. This is what interests me the most. But I can't actually take out completely the graphic deliverables... The PMs wouldn't like that at all, (they'd have to mediate between team and client A LOT more). After some research I found out about style prototypes and style tiles. I think I'll go into that direction.
    – Roman
    Dec 14, 2012 at 8:10
  • It's definitely fine to do the visual graphic deliverables, but make sure they a) aren't considered pixel perfect and b) let the client give feedback, but don't make it a signed-off milestone.
    – DA01
    Dec 14, 2012 at 16:15
  • Dumping steps 3 & 4 sounds great in theory but I've seen a lot of dev time wasted following that format. In the end, it's still fastest to mock-up a static visual than code the interactive page. You can build your comps more like a tight wireframe than a pixel-perfect reference. You wouldn't be eliminating 3 & 4, you'd approach them with a different mindset.
    – plainclothes
    Dec 14, 2012 at 17:00
1

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

Improve this answer
4
  • So, you're essentially saying that we don't need to change our workflow?
    – Roman
    Dec 13, 2012 at 13:07
  • Not by much anyway. But you must differentiate between sites that must look good on mobiles and mobile apps, which have another workflow.
    – Marius Stuparu
    Dec 13, 2012 at 13:09
  • 1
    That just complicates the same problem...that approving static documents is a very imperfect/impractical process for web design.
    – DA01
    Dec 13, 2012 at 23:43
  • Then your wireframes should be code, not static. Make B/W wireframes with placeholders for text and images.
    – Lauren-Clear-Monica-Ipsum
    Dec 14, 2012 at 11:26
1

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:

  1. All devices
  2. Some combination of the three
  3. Desktop-only
  4. 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!).

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.