pseweb: pre-conference web & social media 101/crash course
DESCRIPTION
TRANSCRIPT
SOCIAL MEDIA & WEB 101
Pre-Conference WorkshopPSEWEB 2011
ABOUT ME
• First website in ‘97• Hons BA, Media & Public Interest
‘06University of Western Ontario
• Academica Group• Richard Ivey School of Business• PSEWEB & Lunch Break Media
Ltd.
AGENDA
1. Web−Fundamentals, Technologies
2. Search−Organic, Paid
3. Social Media−Email, Blogs, Social Networks
4. MultiMedia−Video, Images, YouTube, Flickr
5. Mobile− Apps, Websites, Geo-Location
“In the era of social media, people use technologies to get what they need from each other, not traditional institutions.”
Charlene Li & Josh BernoffGroundswell: Winning in a World Transformed by Social
Technologies
Photo by Oldonliner
WEBSITES
− Just one of many platforms
− Authoritative answers to specific questions
− Support & guidance The Internet
website
websitewebsite
WEBSITES
− Just one of many platforms
− Authoritative answers to specific questions
− Support & guidance
The Internet
websites facebook
youtube
flickr
WEB PROCESS
−Strategy−Architecture−Content−User Experience−Functionality
−Design−Development−Testing−Maintenance−Approvals
STRATEGY
• Business Objectives
• Brand Positioning• Audiences (&
Audience Objectives)
• Goals (Metrics Planning)
• Content, Media
Assets• Budget• Timeline• Technologies• Stakeholders• Approvers• Editors
ARCHITECTURE
INFORMATION ARCHITECTURE 3.0?
ARCHITECTURE
• Elements• Character Counts• Functional Notes• Navigation• Location
ARCHITECTURE
• Elements• Character Counts• Functional Notes• Navigation• Location
Tools• Microsoft Visio
• Google Docs
www.pseweb.ca/google-wfkit
• iMockups
• OmniGraffe
• Paperbrowser
CONTENT
• Copy• Images• Video• Animation
• Downloads• Metadata• Links
USER EXPERIENCE
• Navigation• Accessibility• Performance• Testing
– Interviews– Groups– Click tracking
AKA CONVERSIONS?
• Navigation• Accessibility• Performance• Testing
– Interviews– Groups– Click tracking
CONTENT VS DESIGN
CSS, XHTML & Javascript
CONTENT VS DESIGN
CSS, XHTML & Javascript
webpage.ht
ml<html>
<head>
<title>Melissa’s Website</title>
</head>
<body>
<h1>Melissa’s Website</h1>
<p>Here is some regular text. And now: <b>some
bold text.</b></p>
<p><font size=“5” face=“arial” color=“red”>
This paragraph is in Arial, size 5 and in red.
</font>
</p><a href=“http://www.pseweb.ca”><img
src=“logo.jpg”></a>
</body>
</html>
CONTENT VS DESIGN
CSS, XHTML & Javascript
webpage.ht
ml<html>
<head>
<title>Melissa’s Website</title>
</head>
<body>
<h1>Melissa’s Website</h1>
<p>Here is some regular text. And now: <b>some
bold text.</b></p>
<p><font size=“5” face=“arial” color=“red”>
This paragraph is in Arial, size 5 and in red.
</font>
</p><a href=“http://www.pseweb.ca”><img
src=“logo.jpg”></a>
</body>
</html>
ORGANIC SEARCH
CONTENT VS DESIGN
CSS, XHTML & Javascript
webpage.ht
ml<html>
<head>
<title>Melissa’s Website</title>
</head>
<body>
<h1>Melissa’s Website</h1>
<p>Here is some regular text. And now: <b>some
bold text.</b></p>
<p><font size=“5” face=“arial” color=“red”>
This paragraph is in Arial, size 5 and in red.
</font>
</p><a href=“http://www.pseweb.ca”><img
src=“logo.jpg”></a>
</body>
</html>
CONTENT VS DESIGN
CSS, XHTML & Javascript
webpage.ht
ml<html>
<head>
<title>Melissa’s Website</title>
</head>
<body>
<h1>Melissa’s Website</h1>
<p>Here is some regular text. And now: <b>some
bold text.</b></p>
<p><font size=“5” face=“arial” color=“red”>
This paragraph is in Arial, size 5 and in red.
</font>
</p><a href=“http://www.pseweb.ca”><img
src=“logo.jpg”></a>
</body>
</html>
CONTENT VS DESIGN
CSS, XHTML & Javascript
webpage.ht
ml<html>
<head>
<title>Melissa’s Website</title>
</head>
<body>
<h1>Melissa’s Website</h1>
<p>Here is some regular text. And now: <b>some
bold text.</b></p>
<p><font size=“5” face=“arial” color=“red”>
<div class=“emphasized”>
This paragraph is in Arial, size 5 and in red.
</font></div>
</p><a href=“http://www.pseweb.ca”><img
src=“logo.jpg”></a>
</body>
</html>
CONTENT VS DESIGN
CSS, XHTML & Javascript
webpage.ht
ml<html>
<head>
<title>Melissa’s Website</title>
</head>
<body>
<h1>Melissa’s Website</h1>
<p>Here is some regular text. And now: <b>some
bold text.</b></p>
<p><font size=“5” face=“arial” color=“red”>
<div class=“emphasized”>
This paragraph is in Arial, size 5 and in red.
</font></div>
</p><a href=“http://www.pseweb.ca”><img
src=“logo.jpg”></a>
</body>
</html>
styles.cssbody{background-color:#ffffff;}H1{color:orange;text-align:center;}
.emphasized{font: 30px Arial, sans-serif;}
webpage.ht
ml<html>
<head>
<title>Melissa’s Website</title>
</head>
<body>
<h1>Melissa’s Website</h1>
<p>Here is some regular text. And now: <b>some
bold text.</b></p>
<p><font size=“5” face=“arial” color=“red”>
<div class=“emphasized”>
This paragraph is in Arial, size 5 and in red.
</font></div>
</p><a href=“http://www.pseweb.ca”><img
src=“logo.jpg”></a>
</body>
</html>
webpage.ht
ml<html>
<head>
<title>Melissa’s Website</title>
</head>
<body>
<h1>Melissa’s Website</h1>
<p>Here is some regular text. And now: <b>some
bold text.</b></p>
<p><font size=“5” face=“arial” color=“red”>
<div class=“emphasized”>
This paragraph is in Arial, size 5 and in red.
</font></div>
</p><a href=“http://www.pseweb.ca”><img
src=“logo.jpg”></a>
</body>
</html>
CONTENT VS DESIGN
CSS, XHTML & Javascript
webpage.ht
ml<html>
<head>
<title>Melissa’s Website</title>
</head>
<body>
<h1>Melissa’s Website</h1>
<p>Here is some regular text. And now: <b>some
bold text.</b></p>
<p><font size=“5” face=“arial” color=“red”>
<div class=“emphasized”>
This paragraph is in Arial, size 5 and in red.
</font></div>
</p><a href=“http://www.pseweb.ca”><img
src=“logo.jpg”></a>
</body>
</html>
styles.cssbody{background-color:#ffffff;}H1{color:orange;text-align:center;}
.emphasized{font: 30px Arial, sans-serif;}
EDITING SOFTWARE
For CSS, XHTML & Javascript• Microsoft Frontpage (Sharepoint
Designer)• Adobe Dreamweaver• Notepad++
CONTENT MANAGEMENT SYSTEMS
Design, Content & Structure are separated.Consistent look & feel.
User types, permissions & workflow.Often database driven.
page.php<html>
<head>
<title>Melissa’s Website</title>
</head>
<body>
<h1>Melissa’s Website</h1>
<p>Here is some regular text. And now: <b>some
bold text.</b></p>
<p><font size=“5” face=“arial” color=“red”>
<div class=“emphasized”>
This paragraph is in Arial, size 5 and in red.
</font></div>
</p><a href=“http://www.pseweb.ca”><img
src=“logo.jpg”></a>
</body>
</html>
page.php<html>
<head>
<title>
Melissa’s Website <?php the_title(); ?>
</title>
</head>
<body>
<h1>Melissa’s Website<?php the_title(); ?>
</h1>
<p><?php the_content(); ?>
</p></body>
</html>
page.php<html>
<head>
<title>
Melissa’s Website <?php the_title(); ?>
</title>
</head>
<body>
<h1>Melissa’s Website<?php the_title(); ?>
</h1>
<p><?php the_content(); ?>
</p></body>
</html>
styles.cssbody{background-color:#ffffff;}H1{color:orange;text-align:center;}
.emphasized{font: 30px Arial, sans-serif;}
CONTENT MANAGEMENT SYSTEMS
Custom/InternalProprietary
Open Source
.NETPHPJavaXSLT
CONTENT MANAGEMENT SYSTEMS
Proprietary• Hannon Hill
Cascade Server• TERMINALFOUR• OmniUpdate• SiteCore• Expression Engine• Ektron
Open Source• Drupal• Joomla• Wordpress• Umbraco
CONTENT MANAGEMENT SYSTEMS
Proprietary• $250 to $100,000• Can be “blackbox”• Customer Support• Partners• Accountable
Open Source• Free• Flexible• Community• Unregulated?
LANGUAGES
• PHP• .NET• HTML/XHTML• XML
• Java• Javascript
(jQuery)• Flash
WEB PROCESS
−Strategy−Architecture−Content−User Experience−Functionality
−Designwww.edustyle.net
−Development−Testing−Maintenance−Approvals
MEDIA
Hosting, Accessibility, Opportunities
ALT/TITLE ATTRIBUTES
Required by Ontario Disabilities ActCommunicate the image
Correct spelling, punctuation, capitalization
PHOTO SOFTWARE REQUIRED
Images must be sized to the actual display size before they are
uploaded to prevent distortion & to improve performance.
PHOTO SOFTWARE REQUIRED
Adobe Photoshopwww.pixlr.com/express
IMAGE STYLING
FLICKR
• RSS > Webpages, Blogs, Microsites
• Push to Twitter• Email photo submission
VIDEO
HostingAccessibility
YOUTUBE
• Free for Educational Institutions– Including EDU channel with branding
• iPhone/Mobile Friendly• Embed on any website• Supports HD• Play Metrics• Supports auto-publishing to
Twitter, Facebook
SEARCH
Organic vs SponsoredTricks & Tips
ORGANIC SEARCH
ORGANIC SEARCH
• Metadata – Keywords, Description, Title
• Social Media & RSS• Links from sites with authority• Content
– Headings, Links, Images, Copy
• XML Sitemaps• Media Relations/Brand Positioning
PAID SEARCH
PAID SEARCH
• Pay-per-click• Auction Environment• Unlimited copy/creative
variations• Target by region, language,
keyword• Social referral
TIPS & TRICKS
RSS: REALLY SIMPLE SYNDICATION
One desk, five hundred sites, minimal migraines.
1
22
3
3 • Ivey in the News• Upcoming Events• Faculty/Research Blogs• Recruitment Blogs• Student Blogs• Ivey Business Journal• Alumni Newsletter• One-Off
Announcements• Twitter Feeds• Flickr Feeds
MAKE YOUR OWN RSS
• Delicious.com or Google Reader Account
• Browser Bookmark (IE/Firefox)• Connect resulting RSS to
website, facebook, twitter, etc.
TRACK YOUR RSS
ALLOW EMAIL SUBSCRIPTION
15 MINUTES TO MOBILE
THE SOCIAL WEB
The Internet is by definition “social” and always has been.
THE SOCIAL WEB
Online social networks are technology’s response to a network-based society,
providing tools for creating and maintaining connections.
33% OF 2010 APPLICANTS SEARCHED FOR SCHOOLS ON SOCIAL NETWORKING SITES
74% THOUGHT SCHOOLS SHOULD HAVE A PRESENCE ON SOCIAL MEDIA SITES2 0 1 0 E - E X P E C T A T I O N S S U R V E Y , N O E L L E V I T Z
HOW DO WE USE IT?
Photo by zizzy
LOOK, LISTEN, JOIN, SPEAK
Photo by zizzy
HOW DO THEY USE IT?
Photo by zizzy
Create:Blog Posts
VideosAnimation
PhotographyNews
Photo by wonderfullycomplex
CONNECTConnect: FriendsFamily
ClassmatesEmployers
Peers
Photo by erica_marshall
COLLABORATECollaborate: Research
SchoolworkPlanning
KnowledgeGroundswell
Photo by markop
REACTComment/Critique: Restaurants
PoliticsCelebrities
MoviesEach Other
Photo by altemark
ORGANIZEOrganize: Bookmarks
EventsTasks
ProjectsEach Other
Photo by counteract
CONSUMPTIONAccelerate Consumption:
NewsMusic
ConversationVideo
Photo by pss
CONNECTNow we will discuss:
-Blogs-Social Networks
-Rich Media-Mobile
Photo by erica_marshall
BLOGS
– Syndicated Content– Presented in Reverse Chronological
– Powered by RSS– Comments
WITHOUT COMMENTS, YOU DO NOT HAVE A BLOG.
2 guys who like video games, sarcasm and drawing
FunInteractiveEngagingUsable
Today Penny Arcade runs a massive annual game expo and sponsors a charity that has donated (as of this writing) $4.9
million worth of electronics and video games to children's hospitals
Bring the crisis home
Shape the message
• Strong Creative
• Consistent Architecture & Template
Redesigned to WordpressMU
Strong Creative Consistent
Architecture & Template
BLOGGING BEST PRACTICES:
– Enthusiastic Content Providers
– Engaged Readers– Syndicate Your Content– Comment Policy– Invest in Design
BLOG OPPORTUNITIES
– Engage– Inform– Brand– Soapbox
SOCIAL NETWORKS
– Online Community– Individual Profiles– Autobiographical– Interaction
ELEMENTS OF A SOCIAL NETWORK PROFILE
ELEMENTS OF A SOCIAL NETWORK PROFILE
Display Picture
Name
Communication
Share Content
Personal Information
ConnectionsInteraction
Social networking use among internet users ages 50 and older
nearly doubled—from 22% in April 2009 to 42% in May 2010.
infographic by digitalbuzzblog.com
SO WHAT IS FACEBOOK?
• Founded in higher education• Very Canadian• Based on the real-world• Mobile• Affordable and targeted
FACEBOOK IS SOCIAL
melissacheater.com © 2009
GLOSSARY• Profile• Friend• Wall• Status• Applications• Like• Fan
• Poke• Newsfeed• Groups/Pages
FACEBOOK GROUPS
Bring people together within the larger network.
Strong Creative Regular, relevant
communication from admissions
FACEBOOK PAGES
Your Facebook page is your homepage on Facebook.
melissacheater.com © 2009
melissacheater.com © 2009
melissacheater.com © 2009
melissacheater.com © 2009
melissacheater.com © 2009
FOR FANS ONLY CONTENT
FACEBOOK PAGE REDESIGN 2011
• Tabs are now a Left Menu• Photo strip• Admins are displayed• Featured Likes• Notifications• “Use Facebook as Page”• Wall is ordered by
popularity• Smaller display image
FACEBOOK PAGE REDESIGN 2011
FACEBOOK BEST PRACTICES
- Invest in creative- Consider a work in progress
- Respond within 24 hours- Link to syndicated content- Set & Publish Content Guidelines
OPPORTUNITIES
- Fan Photos/Videos- Users can contribute
- Mobile Updates- Users receive status updates on their phone
- Group Messages- Fan Updates
- Segment- Facebook Connect
- Anywhere with a login is now a viral opportunity
uOttawa: Seek to Know App
uOttawa brand on my profile
uOttawa in my newsfeed (seen by all connections
microblog
140 characters
many to many public conversations
web, desktop & mobile
CHARACTERISTICS OF TWITTER
- Anything you would tell anyone- Real-time or schedule- Manual or automatic- Person or brand- Information or insight- Real or Fake
casualpublicresponsivereal time
GLOSSARY
• Retweet (RT)• Mention (@)• Hashtag (#)• Trend (#)
HOW I USE TWITTER
@mmbc
@billyadams
@robin2go
@nikkimk @karlynm
photo by opacity on flickr
professional/support/social network
@epublishmedia
the privacy myth
PLACEHOLDER ACCOUNTS
• Create the account• Set as Private Account
–Find under Settings once you are logged in
• Allow no followers• Only post direct messages
*
TIPS FOR TWITTER SUCCESS
• Be conversational• Follow people back• Be a person
– With a face and a name
• Be retweetable• Leverage lists as CRM
CHARACTER COUNTER
• http://bit.ly/140counter–Use to keep your tweets under 140 characters
SHORTEN URL’S
• http://bit.ly/–Use to create short, trackable versions of URL’s
1 – 2 "best in class" college/higher education examples
Custom Background
Icon-Friendly
Frequent
Short URLbit.ly
Retweet
Rich
Usable
FriendFeed / Ping.FM
#followfriday
Event Tag
Responsive
OPPORTUNITIES• Mobile• Free SMS broadcast system• Link offline events to web• Real-Time• Appropriate Engagement• Monitoring
• Profiles are positioned as resumes• Users do not post back and forth on
each others profiles• Users can post “references” of each
other – one per relationship.• Tone throughout the network is
professional• Not relevant for direct from HS market• Closed to most external sites
SOCIAL NETWORK BP: BE PRESENT
• Where your stakeholders want you–Facebook Page/Public Profile–2013 Groups–Twitter Account
BEST PRACTICES
• Observe and adapt• Provide Relevant Content• Be Responsive• Stay Dynamic (Repurpose) • Use Commercial Channels
when available• Integrate with www homepage
RICH MEDIA
• Photos– Flickr– Photobucket– Facebook
• Video– YouTube– uStream– Longtail/Brightcove
Ivey’s Flickr profile
Post here and push to Twitter & Facebook, or
Post to Facebook and push nowhere
uVic’s Flickr Group
NEW: Flickr Galleries (Show photos of others)
• Stanford’s Branded .EDU YouTube channel
• Worth the effort
UWO’s Web 2.0 directory
Fantastic
Mobile
Better Phones
Faster Networks
Richer Content
Mobile (7 slides)
• Opportunities & Current Statistics
Opt-in Only
Direct
Immediate
One on One or Many to Many
Always accessible
Easy (for them)
Photo by zizzy
MOBILE FRIENDLY HOMEPAGE
SEPARATE MOBILE SITE
1. iPad2. iPhone
3. Blackberry4. iPod
5. Android
LISTEN
• Google Alerts– Web– Blog– News– Site Specific
• SocialOomph• CoTweet• Notifications (Email, RSS, SMS)• Daily Checks
PLAY WITH SOCIAL MEDIA
• Build a Facebook profile• Watch most-watched YouTube
videos• Share pics with Flickr or
PhotoBucket• Tag with Del.icio.us• Find some blogs that interest
you (why?)
RECOMMENDATIONS
• Facebook Page• Twitter Account• Sharing widgets• Adapt for Mobile• Do nothing just because it’s always
been done• Communicate across all relevant
channels• Watch …
THANK YOU
[email protected]/mmbcwww.linkedin.com/in/melissacheaterwww.facebook.com/melissacheater
www.melissacheater.com