RWD Process

June 6, 2013

Hello

Marc

github.com/zufrieden

@zufrieden

♥

Our process ...

  • Design
  • Frontend
  • Backend
  • Launch

Used to be like that

Then we added the user

People, not process!
  • UX
  • Design
  • Code
  • Launch

Content is king! right?

  • Throw the Content

At the end of the process

Better workflow

  • Content
  • UX
  • Design
  • Code
  • Launch


Think of Responsive web design ... in the code phase ?

Well... no!

RWD take part of the whole process

  • Content
  • UX
  • Design
  • Code
  • Launch

Learn to change, it's the web

How ?

Build deliverables for each phase, share with the whole team, iterate.

Content

UX

Design

well ... it depends

Styleguides

Start with designer, end with frontend.
              
                /* 
                # Types styles
                ## Responsive titles

                You can resize browser window to see how titles size change.
                ````
                <h1>Title level 1</h1>
                <h2>Title level 2</h2>
                <h3>Title level 3</h3>
                <h4>Title level 4</h4>
                <h5>Title level 5</h5>
                ````
                */
                h1{
                font-size: 2rem;
              }
              ...
Build a Frontend documentation

Backend

Ready to use modules and blocks

Launch

iterate

Conclusion

It's all about communication
User first

Sources and inspirations

Two Cats In A Sack: Designer-Developer Discord – By Cassie McDaniel

Web Design Process In a Responsive World – By Ben Callahan

A better future with KSS – By Kyle Neath

Questions ?

Thank you

http://zufrieden.github.io/slides-rwd-process

youpi