#15ntc nonprofit technology conference - responsive websites: more than pretty code
TRANSCRIPT
Responsive Websites
More Than Just Pretty Code
Collaborative Notes Doc: http://po.st/3bfFfE #15ntcbeyondcode
Who We AreJess SnyderWETA.org
Johanna BatesErin FogelDevCollaborative.com
Collaborative Notes Doc: http://po.st/3bfFfE #15ntcbeyondcode
Today!1. Check-in: Who’s here?
2. Case Studies: WETA.org Redesign & ACF Retrofit
3. Discussion○ What are key ingredients of successful RWD projects?○ What are ways to keep costs down?○ What else is on your minds? We can delve into more detail here.
Collaborative Notes Doc: http://po.st/3bfFfE #15ntcbeyondcode
Why Responsive?It’s About Access
% of Cell Internet Users Who Primarily Access Web via Phone, by Group
24% Caucasian42% Hispanic43% Low-income51% African-American
http://www.pewinternet.org/2012/06/26/cell-internet-use-2012/
African-American Cell Internet Users (2012)
A Tale of Two Websites
Redesign RetrofitCredit: Flickr user Bart Everson https://www.flickr.com/photos/editor/ Credit: Flickr user 10th Life https://www.flickr.com/photos/dbmor10
WETA.org Before
Content Cleanup
WETA.org After
Credit: AdrianImpalaMata on DeviantArt
ActionAgainstHunger.orgBefore
ActionAgainstHunger.org After
Planning & Content Strategy
Why Again?● Roughly 22% ACF’s users on
mobile and tablet (last 30 days)
● Up from about 16% a year ago
● Check bounce rates on mobile
From Spreadsheets to Wireframes
Experiment and Iterate● Create a sandbox
● Experiment with combining existing content with responsive layout patterns
● Iterate! Photo Balazs Koren
Close Collaboration
Learning to Let Go
Ingredients for Success● Get everyone on board● Plan team roles● Content: take stock, clean house ● Close collaboration● Letting go of perfection● Embrace iteration● Ongoing process
Let’s Chat● RWD on a budget?● Best code practices for sustainable RWD sites?● Project strategies - retrofits, gradual adoption, mobile
sites, etc.● Anything else?
Collaborative Notes Doc: http://po.st/3bfFfE #15ntcbeyondcode
Thank You!
Evaluation: https://www.surveymonkey.com/s/15NTCSessionEval?c=1446(Link also on Sched.org and in collaborative notes doc.)
Collaborative Notes Doc: http://po.st/3bfFfE #15ntcbeyondcode
Jess Snyder@jesseves
Johanna Bates@hanabel
Erin Fogel@erinfogel
