program publishing approach - special olympicsmedia.specialolympics.org/soi/files/resources... ·...
TRANSCRIPT
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