Website Strategies

1. Purdue Agricultural Communication SE District Training Website Strategies Wright Frazier Web Team Lead

2. Southeast District’s Web Presence Where you stand now

3. SE District sites in 2011 Who am I? I am… • Wright Frazier • wsfrazier@purdue.edu • Web Team Lead • Agricultural Communication • A Historian • (hard to get less technical than that) • Entirely self taught on anything to do with the Web.

4. SE District sites in 2011 Why am I here? Why? • I believe deeply in Extension. • Talking to educators is helpful, but… • You’re the ones who actually do the work. • I want Extension to be better. • I want to make your jobs easier. • I want to help you advance your career. • This is the future.

5. SE District sites in 2011 How much traffic? South East District For 2011 • 117,595visitorsfrom 137 countries, or 321per day. • ~10.6% of all County site traffic • Demographics • 98% were Americans • 73%were Hoosiers • Less than 2%were County staff. • 89.5% were using a computer • 10.5% were using a mobile device • On average, each visitor • Read 3.25 webpages • Stayed 3.5 minutes • Returned 4 times

6. How much content is out there? For all of the SE District

7. Good news & Bad news Not all content is created equal. PDFs 1,344 published 55,365 read in 2011 151 read every day .47 read on each visit Each PDF read 41 times. Webpages 854 published 382,250 read in 2011 1,044 read every day 3.25 read on each visit Each page read 447 times. Your visitors a web page 11 times more than a PDF.

8. Questions so far? Let’s take a short break.

9. Do’s and Do Not’s of a successful site Web Design 101

10. Overview The 6 Basics • Have good Content • Know your Audience • Edit • Be Consistent • Look Professional • Update the site

11. #1 - Content Web Content: Web content is the textual, visual or aural content that is encountered as part of the user experience on websites. Without content, there cannot be a site.

12. #1 - Content PDFs From the Visitor’s Point of View: • They are slow to download. • They require extra software to view. • They are incredibly rough on mobile devices. • They are difficult to read on a computer. From your Point of View: • They get read FAR less than web pages. • They are difficult to update. (impossible without the original file) • They are very difficult to turn into web pages. • They hurt the traffic to your site by isolating it from the rest.

13. #1 - Content PDFs When are PDFs okay to use? • When something is only for print distribution. • When you want to also have a “Print Friendly Version”. • When something just isn’t appropriate as a web page such as sign up forms. • When you don’t have anything else.

14. #1 - Content Webpages From the Visitor’s Point of View: • Easy to read in general, if laid out well. • Easy to read from a mobile device. • Easy to access the rest of the site. • They are MUCH faster to load. • No additional software required. From your Point of View: • They are MUCH easier to maintain in the long run. • You do not have compatibility issues. • Your content will be read 11 times as much. NOTE: It’s 18 times as much Extension wide • They won’t be as pretty a layout as a PDF, but does it matter how pretty your content is if no one is reading it?

15. Questions so far? Let’s take a short break.

16. #1 - Content Webpages • Always remember: • The Web is not Print. • They are similar and require similar skills, but they are not the same. • Usability ALWAYS trumps pretty. • It doesn’t matter how pretty your content is if no one is reading it. • Make sure you distribute your content in a medium that people will read. • Additional Resources • http://www.w3schools.com • http://www.cactusflower.org/the-web-is-not-print/ • http://webdesign.about.com/od/webdesignbasics/a/aa061807.htm • http://webdesign.about.com/od/webdesignbasics/a/aa021003a.htm

17. #2 Audience Know them. When creating content, keep your audience in mind. Remember… • 98% of them are Americans. • ¾ of them are Hoosiers. • ~50% of them will be from your region of Indiana.

18. #2 Audience Further remember… • The average reading level is 8th to 9thgrade. • Reading skills naturally atrophy over time. • This does not mean people are “stupid”. • Difficult material will not be readily consumed AND will deter users from returning. • You are speaking to the public. • They do not understand terms like “Community of Practice” or “Issue Based Action team”. • Avoid using “inside baseball” terms that only someone in the Extension service would know. • If you are using an Acronym, always spell it out on it’s first usage on every webpage. • Doing this will also help you with Search Engine Optimization.

19. #2 Audience How to measure readability? Readability Checker: • http://www.readability-score.com/ Things that are measured: • Total characters • Total syllables • Total words • Total Sentences • Syllables per Word • Words per Sentence What to watch: • Flesch-Kincaid Score • Average Grade Level Is this really a problem? • It is a huge one, but it varies depending on who is producing the content. • The most glaring example was a posting for Police, Fire, and EMS training that had a grade 18.5 reading level.

20. #3 Editing That which must not be overlooked. We want to be understandable to a 9th grader, but we don’t want to write like a 3rd grader.

21. #3 Editing Check your spelling Check your spelling • Always use a spell checker. • But don’t count on them. Check your Grammar • Grammar checkers are getting better, but they are not perfect. • Always read your content out loud. You never no watt is going to be mist.

22. Questions so far? Let’s take a short break.

23. #4 Consistency Being different isn’t always better Be consistent with: • Colors • Fonts • Formatting • Image Placements • Layouts Maintain that consistency throughout your entire site.

24. #4 Consistency Which is it? Why? • It will make the difference stand out when you need to provide impact. • It will look more professional. • It will be easier for you.

25. #5 Look Professional What makes or breaks a site Do’s and Don’ts of a successful website: • Colors • Fonts • Images • Layouts • Links Key things to remember: • You are working on a professional website. • On a professional website: Cute = Cheesy = Not Taken Seriously Save the cute for Power Point presentations where you are going for a cheap laugh.

26. #5 Look Professional Color – the first thing you noticed. Text color • Black text on white is the easiest to read. • Use other colors only for emphasis and to draw the eye. • Never use more than 3 total colors (not counting images) on a page, with the black text and white background as 2. Why? • Used correctly, colors convey a sense of professionalism, neatness, and organization. • Used incorrectly, it shows immaturity, disinterest, and is turns people off.

27. #5 Look Professional Color – Warm v. Cool What to use? Warm colors • Reds, yellows, and oranges. • More aggressive and distracting. • Use very sparingly to draw the eye. Cool colors • Blues, greens, violets, and black. • More soothing, calming, and convey a sense of professionalism.

28. #5 Look Professional Fonts – The Good Good Font Choices • San Serif • Arial • Tahoma • Trebuchet MS • Verdana • Serif • Georgia • Times New Roman Which is better? San Serifs always trumps Serifs. They are much easier to read.

29. #5 Look Professional Fonts – The bad and the ugly Which to use sparingly? • Impact What font to never use? • Bradley Hand ITC • Brush Script • Comic Sans MS • Courier • Curlz MT • Mistral • Papyrus • Anything cute, hip, or “stylish”.

30. Questions so far? Let’s take a short break.

31. #5 Look Professional Images – Not just for making it pretty Good image choices & usage • Make a boring webpage interesting • Convey more information than can be explained in text • Can help your site get a lot more traffic Bad image choices & usage • Detract from your site • Make your site look unprofessional • Can get you into serious trouble

32. #5 Look Professional Images – What to do Keys to good image use • Alignment • Always Left or right align • Alt Tags • Always use “Alt Tags” or “Alternate Text” when inserting an image. • A good alt tag is 1-2 sentences describing the image. • If the image is purely a “fluff” image, then insert an empty alt tag. • Captions • Always include a caption with the image to describe the scene. • This should be different than the Alt Tag if possible, and it can be more verbose. • Use good Images • Don’t use grip &grins. • Don’t use bad lighting. • Don’t use contextless images. • Don’t be afraid to take some of your own!

33. #5 Look Professional Images – What not to do Keys to bad image use • Clip art & Cartoony Images • Utterly unprofessional. • Never ever use them. • Animations • Don’t use animated images. • If you require something animated, embed a video. • Images in the middle • Never leave an image on it’s own in the middle, unless it’s a banner image. • Always align it. • Other people’s images • Don’t use them without permission. • Never use them without credit.

34. #5 Look Professional Images – How to take some better ones Resources: • Simple tips for taking better photos • http://www.hp.com/united-states/consumer/digital_photography/tours/beginners/index.html • 10 Tips for Great Pictures • http://www.kodak.com/ek/US/en/Home_Main/Tips_Projects_Exchange/Learn/Photo_Tips_Techniques/Top_10_Tips.htm • 10 Ways to Take Stunning Portraits • http://digital-photography-school.com/10-ways-to-take-stunning-portraits • 11 Tips for Better Candid Photography • http://digital-photography-school.com/11-tips-for-better-candid-photography

35. Questions so far? Let’s take a short break.

36. #5 Look Professional Content Layout – The big difference between web & print Design philosophies • Print • Fixed height & fixed width. • Complete presentation given in initial view. • Web • Infinite height & variable width. • Variable amount presented in initial view and determined by the visitor.

37. #5 Look Professional Content Layout – Laying it out for the Web What to do: • Keep your primary content in a single column. • Insert images into the content so that the content wraps around them. • If your content will also be used in a print piece, start off designing for the web first. • It’s easier to go from 1 column to 2 than 2 columns to 1. • Keep the widths and heights of your content area variable. People run with different resolutions. • TIP TO REMEMBER • Not everyone sees things as you do. • Laying things out “precisely” does not work. • Operating System, Screen Resolution, browser, and the versions of all these effect what a visitor sees on a web page.

38. Questions so far? Let’s take a short break.

39. #6 Updating Updated Content – Why people come back Content needs to be updated regularly. Why? • A badly maintained site leaves a VERY bad impression. • People find you first on the web before they ever call, write, or especially walk in your door. • Last year, on average, each County in the SE District had 6,533 visitors come to them for information JUST on the web. • That’s an extra 18 people each and every day.

40. #6 Updating Updated Content – Why people come back Why? • Who remembers when your front pages got changed and the rotating banner got added in Winter 2010/2011? • Budget Crisis • State Legislators were going to Extension websites to check out the service. • They weren’t finding good things.

41. #6 Updating Updated Content – But I’m busy! Some tips to help with it. • Set a weekly reminder in Outlook. • Block out 1 hour per week to update something on the website. • I have several such reminders for the various sites I manage. • Keep Notes. • During the week, as you come across items that would be good on the site, keep notes on them. • I modify the upcoming event in outlook with notes for items to post. • Go after people • You probably won’t know everything going on, so ask others, but do not depend on them. • I have a weekly reminder to chase people down for new content on the sites.

42. #6 Updating Updated Content – What can I update? Some general suggestions • Office Locations • Everything 4-H • Calendars • Extension employees • State fair information & schedules • County fair information & schedules • Farmers Markets • Conferences • Small Farm Information • Homemaker Lessons • Master Gardeners • Ag Centers • Nutrition programs • Livestock shows • EDEN • County Pictures But to really know, you need access to the Google Analytics on your county sites.

43. Questions so far? Let’s take a short break.

44. Q&A Things people already asked…

45. Questions Images – Event photos Question: What are the guidelines for using images from an event? Particularly those that include a youth? Answer: • Images of Adults: Verbal consent is usually sufficient, but a signed photo release is much preferred. • Images of Children: A photo release signed by a parent/guardian is absolutely required. You can download the photo release form at: http://extension.purdue.edu/photorelease/Photo_Release.pdf

46. Questions Images – Event photos Question: • How do put images we’ve taken on our website? • How to resize them? • What format? Answer: • You upload them. • You use Microsoft Paint • Always use JPEG. Now the instructions on how…

47. Questions Images – Resizing & Uploading photos Resizing: • Browse to the image • Right click on the image • Mouse over “Open with” • Click on “Paint”

48. Questions Images – Resizing & uploading photos Question: How do put images we’ve taken on our website? How to resize them? What format? Resizing: • Click “Resize” • Select “Pixels” • Input the dimensions you want then hit “Ok” NOTE: pixels here are ~72 pixels per inch. • Click the File Icon • Click “Save As” • Click “Jpeg” NOTE: Always select jpeg. It’s the friendliest version for the web. • Select where to save it at. NOTE: I recommend giving it a simple, easy to remember name.

49. Questions Images – Resizing & uploading photos Question: How do put images we’ve taken on our website? How to resize them? What format? Uploading: • Open your county’s website. • Sign in. • Select “Site Actions” • Select “View All Site Content” • Click “Images” under Document Libraries • Click “Upload” • Click “Upload Document” • Click “Browse” and find the image on your hard drive. • Select it and click “OK” • Find the image you just uploaded on the list. • Right click on it and select “Open in New Tab” • Switch to the new tab. • Copy the URL out.

50. Questions Images – Fixing the Red X. Question: When I put an image on the website, a “Red X” appears, Why? Answer: Because you have a broken link to an image. Now the instructions on how to fix it.