CSU EXTENSION WEBPAGE TEMPLATE SESSION 5 MARCH 2010 Creating an Engaging Home Page

“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 ◦ ◦ 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 ◦ ◦ Register and upload ◦ Share button, Publish/Embed ◦ Use embed code to embed slideshow on website ◦ Choice of sizes!

Using Youtube to add video 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 -  Free, converts.avi to.swf (Flash) Squared  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   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