[Plone-UI] Report from Providence RI Designers Meetup

[Ed Manlove]

Tuesday night I attend a meet-up of designers with a talk given by Jen 
Robbins [1].  It was well attended by a good mix of both designers and 
developers. I wanted to listen to Jen and the other designers from the 
perspective of a Plone developer understanding how Plone might be more 
designer friendly; also seeing how designers work.

Jen's talk focused on the upheavel web designers are experiencing due to 
the mobile web. Designers are trying to deal with their changing 
workflow moving from several static designs for a few "screen sizes" to 
the next new thing in order to design for many many more screen sizes. 
The next new design workflow Jen sees that designers are converging on 
is called "Responsize Workflow".  Responsive Workflow, no surprise, is 
focused on and around responsive design. Responsive workflow she 
outlines goes through the steps of

Plan -> Sketch -> Prototype -> Increase Fidelity -> Iterate/Talk

and she presented a great graphic showing that last step Iterate/Talk is 
really occurring at every step between designer/coder/customer, 
following very closely with a description of agile development workflow. 
Getting into some highlights of her talk...

- Jen urged designers to move quickly from planning and sketching into 
prototying ***within the broswer***. She clearly noted that this 
prototype does not need to be much more then a simple prototype (style 
tiles, wireframe) but it should come earlier in the design workflow than 
has occurred in the past.   This appears to be a significant change 
within designer's workflow.

- Further expanding on the prototype phase, Jen used the term "style 
tiles" to describe the end product designers are producing.  These, of 
course, are not our deco tiles but my ears really perked up at the word 
'tiles'. Jen referenced these sites when talking about style tiles: 
http://styletil.es/ and http://sparkbox.github.com/style-prototype/. 
http://styletil.es/ gives a great overview of style tiles and the 
sparkbox sample prototype is responsive so you should resize your 
browser to see how it reacts.

- There was a discussion amoung the designers as to what tools to use 
for responsive workflow and there was no one tool that people had 
settled on and mostly tools were just starting to emerge.  One mention 
was Adobe Edge Reflow, http://html.adobe.com/edge/reflow/, which hasn't 
been released yet.

- Instead of thinking in pixels designers should think in terms of 
columns, which is what most the responsive frameworks are doing. Jen 
also suggested the designers should ***start*** with one column design, 
i.e. the mobile device and then move up to the full screen multi-column 
design.

- Finally a discussion amoungst designers occurred concerning getting 
buy-in from customers with specific concerns about the change in 
workflow increasing billable hours and concern about switching to 
responsive design. There was a great response, and ***if you get only 
one thing out of the report*** it should be ***this***, "If your 
customer does not have a responsive website then they are creating a 
'barrier to consumption' between themselves and potential customers".  
That is. they are not reaching all their potential customers and losing 
money.

One reference Jen shared was Andy Clark's slidedeck from his 
presentation entitled "Fashionable Flexible Web Design" [2] which is a 
long slideshow but covers a lot of material. Jen also passed out a 
handout filled with links and reference which I've asked that she post 
an electric copy. Will share it when its posted.

So what should we within the Plone community be doing? Let me make some 
bold suggestions ...

Plone's Responsive Design Roadmap
------------------------------------------------

***Plone 4 should be responsive out-of-box.*** - I've seen various Plone 
responsive themes and Jen listed seven responsive frameworks in her talk 
[3]. These should be evaluated, compared and one chosen for Plone 4.

***Deco should be responsive.*** - This is probably some line you'd hear 
from a clueless manager but deco should have some concepts of responsive 
design.  Like "How to tiles move when a screen size is changed?" or "Can 
we create a menu bar tile than transitions from horizontal to vertical?".

***Plone.org should be responsive*** - Plone.org should be responsive to 
show that we are serious about responsive design.

***We should track designer's tools*** - We should keep a close watch on 
tools used by designers to see how we can tightly tie together designer 
workflows with developer processes. Jen, an O'Reilly editor and author, 
is tracking these trends and would be a good resource to follow [1].

***Incorporate various screen size snapshoots into CI tests***  - This 
is more of a side project that doesn't need to be for out-of-the-box 
Plone 4 but having a procedure or test code to run a plone site through 
various screenshots would be nice.

Any other bullet points for a Plone Responsive Design Roadmap? Any thoughts?

Ed

[1] https://twitter.com/jenville
[2] 
https://speakerdeck.com/malarkey/fashionably-flexible-responsive-web-design-full-day-workshop-1
[3] Responsive Frameworks:
    Gridpack - http://gridpack.com/
    Gridset - https://gridsetapp.com/
    Bootstrap - http://twitter.github.com/bootstrap/
    Foundation 3 - http://foundation.zurb.com
    Skeleton - http://getskeleton.com
    1140 CSS Grid - http://cssgrid.net
    320 and up - http://stuffandnonsense.co.uk/projects/320andup/