responsive web design webinar - charity dynamics · what is responsive design? one url one content...
TRANSCRIPT
Responsive Web Design Webinar
Featuring Julie Balfour of Easter Seals
2
• We’ll be starting at 1:00 pm Central Time.
• ReadyTalk Dial-In Number:
• 866.740.1260
• Access Code: 2411922
Welcome!
3
• To keep noise down we will mute all phones.
• Please chat your questions in, we have a monitor who will
review and respond.
• Recording will be posted on Charity Dynamics website:
www.charitydynamics.com/home/news-events/recorded-
webinars
Housekeeping
4
Julie Balfour Assistant Vice-President Interactive Marketing Easter Seals
Meet Your Presenters
Brenda Miele Creative Director Charity Dynamics
5
• What is Responsive Web Design (RWD)?
• Easter Seals’ Journey to a Responsive
World
• Discussion / Q&A
Today’s Agenda
6
First things first:
A Quiz!
7
What is
Responsive
Web Design?
8
How Many Smart Phones are There?!
9
What is Responsive Design?
One URL
One
Content Set
One code Set
Multiple Devices
10
Why Should We Care? A few stats…
11
• Over 1.2 billion people access the web from their mobile devices.
Why Should We Care?
Source: Trinity Digital Marketing
12
• 58% of all US consumers already own a smartphone.
Why Should We Care?
Source: comScore
13
• Global mobile traffic now accounts for 15% of all Internet traffic.
Why Should We Care?
Source: Internet Trends 2013
14
• 90% of people move between devices to accomplish a goal, whether that’s on smartphones, PCs, tablets or TV.
Why Should We Care?
Source: Google
15
• Mobile devices to overtake desktop PCs as a dominant global internet platform.
Why Should We Care?
Source: TechCrunch Survey, 2012
16
Nice Stats, but Why
Should I Switch?
17
Four Reasons
$
18
The Responsive Web
Design Process
19
The Beginning – Why a Redesign?
20
• Wanted to move over to Luminate CMS
• Needed to better define audience, needs & their experience
• Site was outdated and hard to manage
The Beginning – Why a Redesign?
21
• Wanted to redesign smart
• Accessibility was super important
• Mobile wasn’t clicking on existing site; cumbersome to maintain
• Affiliates not capable of maintaining mobile site
How’d RWD Fit into the Equation?
22
Four Reasons
$
23
Getting Buy-In
from the Start
24
• Affiliates’ Feedback
• HQ wanted to make sure to include them on site redesign
• Wanted to make it a group effort and not focused on HQ needs
• Allowed them to tell their story and show how they needed their sites to evolve
Getting Buy-In from the Start
25
• Used a collaborative approach to get everyone to weigh in:
• Working Group
• Townhalls
• Interviews
• Feedback tracked and referenced
• Affiliates engaged & excited!
• Helped to defined site goals for national and affiliate sites
Getting Buy-In from the Start
26
Research to
Define Approach
27
• Technology audit
• Blackbaud reports on usage, fundraising and house file growth over the years
• Existing analysis/surveys from the past
• Google analytics
• Interviews & Surveys from staff, board, HQ, clients & site visitors
Digging Through the Details
28
Digging Through the Details
• On Mobile, performance was low:
• 10% of site traffic
• 40% fewer pages/visit
• 24% higher bounce rate
• Needed to worry about accessibility and who was using the website
iPhone 32%
iPad 26% Sony
Ericsson 6%
iPod 4%
Droid 32%
Mobile Platforms
29
• Evaluated technology to understand effort to move from PageBuilder
• Where there specific challenges for HQ?
• What about affiliates?
Saving Both Time & Sanity
30
• Hello new technology!
• Better way to manage content was through Luminate CMS
• Better infrastructure
• Easier to organize and maintain site
Saving Both Time & Sanity
31
• Performed a content audit to understand what existed
• What was a priority?
• What could be archived?
• What templates could we build to make it an easier task to manage content?
Saving Both Time & Sanity
32
Time to Prioritize and Clean House
The Team Cleaned House!
541 webpages will be migrated to new site!
Charity Dynamics Stepped In Documented all 2,000+ pages in workbook
Prior to Site Re-Design Project
Over 2,000 webpages on national site
33
Getting Specific
on the WHO
34
• Personas!
• Made the “WHO” a reality
• Revealed website needs which included…finding information ON THE GO!
• Helped us keep grounded as to what was important with redesign
Getting Specific on the WHO
35
Getting Specific on the WHO
• Daniel (Existing Client)
• Lindsay (Prospective Client)
36
Getting Specific on the WHO
• Samantha & Danielle (Family/Caregiver)
• Deb & Diane (Family/Caregiver)
37
• Paul (Engaged Supporter)
Getting Specific on the WHO
• Cynthia (Donor/Fundraiser)
38
• Janet (Information Seeker)
Getting Specific on the WHO
• Roberto (Information Seeker)
39
Existing Client: Daniel • Adult with cerebral palsy
• Who is Daniel?
• Longtime Easter Seals client
• 60-75 year old adult with cerebral palsy
• Uses Easter Seals’ assistive technology resources
• Uses accessibility tools such as iPad due to limited dexterity
• Passionate about being a member of the Easter Seals family
• Attends weekly occupational & physical therapy sessions at his affiliate’s provider facility
Getting Specific on the WHO
40
Existing Client: Daniel
• Adult with cerebral palsy
• Needs & Challenges:
• Stay up to date on cerebral palsy research
• Learn about new treatment options find local facilities that provide occupational therapies
• Read general disability news and legislation
• Be as self-sufficient as possible using assistive resources
• Learn more about becoming an Easter Seals volunteer
Getting Specific on the WHO
41
Prospective Client: Lindsay • Recently diagnosed with a disability (paraplegic)
• Who is Lindsay?
• Recently paralyzed female veteran
• Age 20-30
• Faced with a life-altering new perspective, she has to relearn how to go about daily life and regain her independence
• Had no prior connection to Easter Seals
• Is considering Easter Seals services, but also inundated with other information from organizations that provide veteran support too
• Overwhelmed by her situation and looking for support
Getting Specific on the WHO
42
Prospective Client: Lindsay • Recently diagnosed with a disability (paraplegic)
• Needs & Challenges:
• Wants to understand her options for ongoing physical therapy
• Locate nearby medical rehabilitation services
• Find assistive technologies that can help her maintain independence
• To not feel limited by her disability and find opportunities to increase her self-sufficiency
• Find a new career path given her physical limitations
Getting Specific on the WHO
43
• Used to guide us on:
• User scenarios
• Calls to action
• Developing affiliate look up
• Keeping what audience needed over what we wanted
Getting Specific on the WHO
44
Establishing
Style & Grace
45
Typography
Color Swatches
Button Styles & States
Photography
Navigation
Establishing Style & Grace
46
Establishing Style & Grace
47
• Interactive wireframes:
• Made us prioritize content
• Helped us envision breakpoints from mobile to desktop
• Pushed us to keep a simple grid – focus on need v. want!
Establishing Style & Grace
48 Desktop Tablet Mobile
49
• Key ingredients for the RWD magic!
• Understanding content priority
• Flexible grid
• Flexible images
• CSS3 Media queries
Establishing Style & Grace
50
Establishing Style & Grace
Desktop
Tablet Mobile
51
Let’s see this LIVE!
52
Easter Seals Website Preview
• Responsive web design makes it possible for your website to easily adapt to the device it’s being viewed on.
53
Already Seeing
Results!
54
Mobile usage increase
Pageview increase
Bounce decrease
Results – Just since April 2013 launch!
121%
52%
10%
55
Four Reasons
$
56
Questions?
57
Want to learn about our Responsive Web Design strategy, design and development packages?
Questions from an NPO perspective? [email protected]
Interested to learn more?
Thank you!