Transcript Creating an Engaging Home Page

Creating an Engaging Home
Page
CSU EXTENSION WEBPAGE TEMPLATE
SESSION 5
MARCH 2010
“Sticky” web pages
 Get people to immediately begin
interacting with your site
 7 to 10 seconds to engage them before they
leave
 Get them clicking deeper into your site
Strategies
 Prominent, consistent, easy to understand
navigation in upper left
 Prominent Search capability
 Update often (at least once a month)
 Multiple options, cleanly presented
Don’t be cluttered (a fine line)
 Be “above the fold”

 Use micro-content
 Headers, lists, links
 Short paragraphs, short sentences
Strategies (con’t)
 Display popular documents, downloads, and links
prominently

Master Gardener brochures, 4H newsletters, Season-specific
fact sheets
 Prudent use of linked images and “gadgets” (Storefront,
Ask an Expert, Google Translate)
 Use multimedia
 Audio
 Video
 Slideshows
Middle column table format
 Bring up and rename the 3 column template
 Switch out thumbnail with your others, or use your own


75x75 px
Image must be recognizable at that size
 Replace text with your own
 Link image and title to brochure
 To delete rows: move cursor to left of row and click to
select it, hit delete
 To add rows: move cursor to edge of table and click to
select it, change number in Row box of Property
Inspector
Linked lists
 A bulleted list of links - great microcontent strategy
 What to offer
 News and Press Releases
 Events and Announcements
 Fact sheets
 Calendar of events
 Newsletter and brochures
 Multimedia (video, audio)
Presentations
 Slideshare
◦ http://www.slideshare.net/
◦ Register and upload
◦ Use embed code to embed slideshow on website
◦ You can also upload narration as an .mp3 and synch it to
slides
 Google docs
◦ https://www.google.com/
◦ Register and upload
◦ Share button, Publish/Embed
◦ Use embed code to embed slideshow on website
◦ Choice of sizes!
Using Youtube to add video
 http://www.youtube.com/
 Don’t have to worry about hosting or conversion!
 Register and upload existing video
 Use embed code to add it to website
 You can choose different sizes of embed
 Or
 Hold down shift key and drag a corner to resize
proportionally
Video Formats
 .swf, .flv – Flash

Small file sizes, plays well with Dreamweaver, wide support
 .mov – Quicktime

Small file size, good for video, wide support
 .wmv – Windows Media


Small file size, good for video, very wide support
Sometimes tough to match most recent player version
 .avi – Audio Video Interleave


Large file sizes, universally supported
Useful as initial format, since it easily converts
 .mpeg

DVD format, not appropriate for web, but convertible
 .rm – Real Media

Not widely supported
Converting video
 Cam Studio - http://camstudio.org/
 Free, converts .avi to .swf (Flash)
 Squared 5 - http://www.squared5.com/
 Free, converts .mpegs to .avis or .mov (Quicktime)
 Camtasia ($179)
 Screen capture software
 Excellent conversion tools
 Converts most formats
 Adobe Premiere ($218) (Elements for $48)
 Excellent editing/conversion tools
 Steep learning curve
 Converts anything to anything else
Embedding your video: Flash
 Put video in a “vid” folder
 Put your cursor where the video goes
 Media icon>Flash>Browse to file
Embedding Your video: Quicktime
 Put video in a “vid” folder
 Place cursor where you want video to go
 Media icon> Plugin>Browse to file
 In Property Inspector:
 Browse
to file
 Type in width and height of video in pixels
 If unsure, go big
 400x300px
 320x268px
actual
Audio
 Audio editing – Audacity
 Free, open source, easy to use
 http://audacity.sourceforge.net/
 .wav
 Good sound quality, doesn’t require a plug-in.
 Huge file size
 .mp3
 Very good sound quality, compressed format
 Requires QuickTime, Windows Media Player or RealPlayer.
 Link to it, as you would a document or webpage
 End user clicks the link to play it