Program Publishing Approach

Organizations that want to persuade people in their 20s and early 30s to give and volunteer don’t have much of a chance if they’re not updating their Web sites frequently and including compelling details about their causes and the people they serve, a new survey "nds. Three out of four donors born from 1979 to 1994—a generation often referred to as “millennials”—said they were turned o# when a nonpro"t’s Web site had not been updated recently. Read more

Big Challenge 2: How do you create a website that looks fresh and lively even if no one on sta# has time to update it after it’s "rst set up?

Big Challenge 3: How do you keep information on your website in synch with information on the Special Olympics main site?

Big Challenge 1: How do you create a website that follows the new Special Olympics branding guidelines?

The plan, simply put: 1.  Special Olympics will provide design

assets and HTML to allow creation of a Program-branded website that can be set up once and maintained infrequently.

2.  Special Olympics will provide the means for Programs to embed content elements needed to keep their websites dynamic and up to date

3.  If funding allows, Special Olympics will provide templates for WordPress or provide a content management system that provides all the elements described in this presentation

What a Program Needs in a Website

•  Domain (URL)

•  Overall branded design •  Homepage

•  Donation ability

•  Sponsor promos

•  Basic info on Program

–  Sports o#ered –  Contacts

–  History

•  Privacy policy, etc

•  Volunteers page

–  Sign-up info –  Opportunities

•  News, stories •  Slideshows, videos

•  Public Event Listing •  Social Media

•  Sport results

What a Program Needs in a Website

•  Domain (URL)

•  Overall branded design •  Homepage

•  Donation ability

•  Sponsor promos

•  Basic info on Program

–  Sports o#ered –  Contacts

–  History

•  Privacy policy, etc

•  Volunteers page

–  Sign-up info –  Opportunities

•  News, stories •  Slideshows, videos

•  Public Event Listing •  Social Media

•  Sport results

Static or low-maintenance Dynamic, needing frequent updates

compared with

SOI SITE Worldwide focus, dedicated sta#, fueled by submissions worldwide, driving tra$c to get donations, involvement and understanding

PROGRAM SITE State or country focus,

possibly sta#ed, fueled by submissions from

Program and from SOI, driving tra$c to get

donations, involvement and understanding

SOI Program

Program  Home  Page  

These  sec.ons  reflect  the  feeds  from  SOI  for  stories,  events  and  GMS  results.  

These  sec.ons  reflect  a  Program’s  Facebook  and  

TwiDer    ac.vity  

These  areas  are  informa.on  that  is  mostly  

sta.c  or  requires  infrequent  updates  

These  areas  are  informa.on  that  is  mostly  

sta.c  or  requires  infrequent  updates  

Programs  can  choose  overall  color  paleDes  to  dis.nguish  their  

sites  from  the  SOI  site  

Simpli"ed publishing Anyone (at all) can submit a story or an event. Every submission is reviewed for appropriateness, Special Olympics style and positivity. Only stories that re%ect well on Special Olympics are published. Only events with su$cient information to allow someone to actually attend are approved.

Social  Media  

Contact  info  

News  and  Stories  

Events  

THE PROGRAM LOCATOR IS A PREVIEW OF THIS APPROACH In this model, Programs share dynamic info with SOI which approves and publishes the information.

Social  Media  

Contact  info  

News  and  Stories  

Events  

PROGRAM SITE In this model, Programs receive the same information published on the SOI main site using “i-frames”.

What’s an i-frame?

It’s like a little window on one website that shows content from another website.

News  and  Stories  i-­‐frame  

The  Virginia  page  in  the  Program  Locator  links  to  the  Special  Olympics  Virginia  website.    The  Virginia  site  has  its  stories  feed  embedded  in  a  page  it  hosts  using  an  i-­‐frame.  All  Virginia-­‐related  stories  are  there.    

News  and  Stories  on  WWW  

<iframe  src="hDp://www.specialolympics.org/StoryList.aspx?feedid=563"  width="400px"  height="500px"  frameborder="1"></iframe>  

Sample  Embed  Code  

hDp://www.specialolympicsva.com/View/Page/success_stories_page    

The  line  of  code  shown  at  the  top  of  the  page  allows  stories  specific  to  a  Program  to  be  shown  on  the  Program’s  website.    The  Program  sets  up  the  code  once,  and  the  SOI  story  sharing  and  ve`ng  process  takes  care  of  it  aaer  that.  

This  is  an  i-­‐frame,  also  called  an  inline  frame.  

Story  feed  563  is  the  Virginia  feed  

Parent  

Parent  

Staff  

Staff  

Team  USA  

Fan  

Sibling  

Fan  

Athlete  

Youth  

Sibling  

Staff  

Staff  

Athlete  

Sibling  

Staff  

Staff  

Staff  

Staff  

Plus  five  more  stories,  not  by  staff  

24  stories  total    8  submiDed  by  Special  Olympics  Virginia  staff    ~10  submiDed  by  family  members    2  submiDed  by  athletes    3  submiDed  by  youth  or  other  fans    1  submiDed  by  SONA  staff  

Using centralized elements that can be embedded on your site means two things: 1.  Content on your website does not

need to be updated by your sta# in order to maintain an atmosphere of immediacy and freshness

2.  Your Program’s constituents get a visible way to share their stories and news, and that same content appears on the Special Olympics website

Stories  specific  to  Program  

Events  specific  to  Program  (may  be  extended  to  subprogram  level)  

Official  sport  info,  news  and  events  pages  (new)  

Sport  and  topic  quizzes  (new)  

Story  input  form  (new)  

Content  .les  with  Program-­‐specific  .les  (new)  

GMS  results  lis.ngs  

Embeddable  Content  Elements  

Program  Pages  Subprogram  “Home”  Page  

Sta.c  informa.on  updated  manually  

Sta.c  list  with  links  to  Program  pages  with  embedded  Sports  info  

Subprogram-­‐specific  event  informa.on  embed  

Program  Pages  Events  Calendar  

Program-­‐specific  event  informa.on  embed  

Should  say  Program  name  

Sta.c  informa.on  updated  manually,  maybe  monthly  

Program  Pages  Videos,  Slideshows  

Uses  YouTube  embed  codes  to  show  video  on  

this  page  

Program  Pages  Ar.cle  Page  

Uses  YouTube  embed  codes  to  show  video  on  

this  page  Flexible  ar.cle  page  design  

Stories  

Ways  to  Donate  page  for  IDMP  Programs  (possible)  

Embeddable  Content  Elements  Events  

Ways  to  Donate  

For  each  of  these  pages,  all  that  is  needed  is  for  the  

page  to  exist  and  to  have  a  headline.  

 The  embedded  content  is  filled  in  remotely  and  without  Program  ac.on  

For  each  of  these  pages,  all  that  is  needed  is  for  the  

page  to  exist  and  to  have  a  headline.  

 The  embedded  content  is  filled  in  remotely  and  without  Program  ac.on  

For  each  of  these  pages,  all  that  is  needed  is  for  the  

page  to  exist  and  to  have  a  headline.  

 The  embedded  content  is  filled  in  remotely  and  without  Program  ac.on  

For  each  of  these  pages,  all  that  is  needed  is  for  the  

page  to  exist  and  to  have  a  headline.  

 The  embedded  content  is  filled  in  remotely  and  without  Program  ac.on  

Big Challenge 2: How do you create a website that looks fresh and lively even if no one on sta# has time to update it after it’s "rst set up? Use the power of social media, the story-sharing system and the events system to let others contribute. No cost to Programs. Big Challenge 3:

How do you keep information on your website in synch with information on the Special Olympics main site? Use embed code to incorporate o$cial content that is updated and maintained by SOI. No cost to Programs

Big Challenge 1: How do you create a website that follows the new Special Olympics branding guidelines? SOI will provide designs and sample code at no cost to Programs.

What Programs Need 1.  Basic ability to host HTML pages through an

internet service provider 2.  Basic HTML skills to create new pages and link

them 3.  Basic HTML skills to update static areas of the

site and to create the pages for embedded content

4.  Social media accounts 5.  Awareness of and interest in promoting the

Share Story system. 6.  Awareness of and interest in using the Event

Sharing system.

The plan, simply put: 1.  Special Olympics will provide design

assets and HTML to allow creation of a Program-branded website that can be set up once and maintained infrequently. No cost

2.  Special Olympics will provide the means for Programs to embed content elements needed to keep their websites dynamic and up to date. No cost

3.  If funding allows, Special Olympics will provide templates for WordPress or provide a content management system that provides all the elements described on previous slides, plus more. Low cost if implemented.

Direction for PSD

Page Designs Needed •  Homepage (see slides below) –  Headlines, events, contacts, tiles, sponsors

•  Sub-program page (see slides below) –  Contacts, sports, schedules

•  Flexible Article Page (see slides below) –  For short and long pieces, incorporating links and

media •  Slideshow/Video Page (looking for ideas) –  Show slideshow and video with links to others

•  Right Rail (see slides below) –  Social media, sponsor promos

•  Top Navigation bar (simple) •  Footer (very simple)

HTML Pages •  We hope that several Programs will adopt the

use of these HTML pages to make up pilot sites or, perhaps, to guide their own site development.

•  Clear commenting on the HTML pages would help Program personnel understand the intent of the pages.

•  It would be great to have examples of each kind of page described as using the “workhorse” article page.

•  If it is possible to achieve, repeated elements across pages should be drawn from include "les or some other means to reduce repetitive editing of standard elements.

Program Interior Page The interior page needs to serve many purposes. It can contain an article with photos, it can contain a contact list, it can contain privacy policy… Whatever typical uses we "nd for basic pages should be possible with this page. This page will also be the enclosure for many embeds. We need a version of this page that has a right rail modeled on what you see here and also one without a right rail, for such wide embeds as the Content Tiles feature. This will also be the home of a subprogram page that will look very much like the SOI Program Locator page. Di#erence is that contacts will be in the body of the page.

Program Media Management •  Website CMS •  You Tube

•  Facebook •  Twitter •  Flickr •  SOI entry forms •  Google Analytics