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?

info@charitydynamics.com

Questions from an NPO perspective? JBalfour@easterseals.com

Interested to learn more?

Thank you!