Case study presented by DevCollaborative and Pixels & Pulp on building a responsive website on a tight budget.

1. RWD on a Budget WTF
A Conversation with Pixels & Pulp and DevCollaborative

2. Re-do of
PEERSnet.org
THE PROJECT:

3. BEFORE

4. AFTERwww.peersnet.org

5. PROJECT MANAGEMENT:
Establish roles,
align priorities,
and get on the same page. Photo credit: Fouquier

6. Make sure everyone shares
the vision and goals.
Photo credit: ryancr

7. Photo credit: Jeff Hester

8. Trust each other.
Photo credit: Arielle Nadel

9. DESIGN PHASE:
How I learned
to let go
of perfection
and lived.
Photo Credit: Topyti

11. Find your
happy place.

12. FRONT-END DEVELOPMENT:
Compromising
like it’s my job.
Photo credit: Gábor Hojtsy

15. Photo credit: Melissa Hincha-Ownby
Have a
backup plan.
Or several.

16. LESSON:
Communicate
like
crazy.

17. Stay
clear on
priorities.
LESSON:
Photo credit: John Schultz

18. LESSON:
Be flexible!
Even when
it’s hard.

19. Photo credit Leo Reynolds
LESSON:
Don’t let perfect be
the enemy of good.

20. RWD resources we love:
http://bradfrostweb.com/blog/web/responsive-nav-patterns/#top
http://www.lukew.com/ff/entry.asp?1514
http://bradfrost.github.io/this-is-responsive/patterns.html
http://responsivedesignweekly.com/
THE END.
@hanabel @pixelsandpulp@nptech_erin

21. AS DESIGNERS, how do we let go of full
control and effectively guide the creative
process when RWD designs are not pixel
perfect? How do we get comfortable with
letting the development team and/or clients
make design decisions for you?
AS CONSULTANTS and project managers,
how do we convey the importance of
RWD to clients who may not
understand importance of RWD?
AS DRUPAL DEVELOPERS, what are
some of the other strategies we
can use to create RWD sites on a
budget?
If a project doesn’t have a dedicated RWD
budget, how do you balance the desire
to be responsible and provide a
modern website with the fact that the
client has no budget for this?
How can designers and developers collaborate together
to make this process easier and more cost-effective?

22. Discussion
Tools
● Responsive Web Design Tester
● Responsive Inspector
● Window Resizer
● What Font chrome extension
● http://re-view.emmet.io/
● Testing: Browserstack, browserling
● http://foundation.zurb.com/
Put together your own base theme. Have a core set of
modules and a checklist.

23. Contact Information
DevCollaborative (Erin Fogel and Johanna Bates)
www.devcollaborative.com
drupalistas@devcollaborative.com
Pixels & Pulp (Elise Weeks and Megan Keogh)
www.pixelsandpulp.com
creative@pixelsandpulp.com