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

Website Strategies

SE District TrainingWright Frazier

Web Team Lead

Purdue Agricultural Communication

Southeast District’sWeb PresenceWhere you stand now

3

Who am I?SE District sites in 2011

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

Why am I here?SE District sites in 2011

Why?1. I believe deeply in Extension.2. Talking to educators is helpful,

but…3. You’re the ones who actually do

the work.4. I want Extension to be better.5. I want to make your jobs easier.6. I want to help you advance your

career.7. This is the future.

5

How much traffic?SE District sites in 2011

South East District For 2011

• 117,595 visitors from 137 countries, or 321 per 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?

Web Pages PDFsBartholomew 32 45Clark 31 63Crawford 66 59Brown 33 70Dearborn 37 84Decatur 65 145Floyd 61 187Harrison 31 8Jackson 60 67Jefferson 28 19Jennings 60 71Lawrence 33 44Ohio 46 33Orange 41 123Ripley 33 44Scott 68 120Switzerland 26 37Washington 103 125

Total for SED: 854 1344Average per SED Site: 47.4 74.7

For all of the SE District

7

Not all content is created equal.Good news & Bad news

PDFs1,344 published55,365 read in 2011151 read every day.47 read on each visitEach PDF read 41 times.

Webpages854 published382,250 read in 20111,044 read every day3.25 read on each visitEach 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.

Do’s and Do Not’sof a successful siteWeb Design 101

10

The 6 BasicsOverview

I. Have good ContentII. Know your AudienceIII. EditIV. Be ConsistentV. Look ProfessionalVI. 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 - ContentFrom the Visitor’s Point of View:

1. They are slow to download.2. They require extra software to view.3. They are incredibly rough on mobile

devices.4. They are difficult to read on a computer.

From your Point of View:5. They get read FAR less than web pages.6. They are difficult to update. (impossible

without the original file)7. They are very difficult to turn into web

pages.8. They hurt the traffic to your site by

isolating it from the rest.

PDFs

13

#1 - ContentWhen are PDFs okay to use?

1. When something is only for print distribution.

2. When you want to also have a “Print Friendly Version”.

3. When something just isn’t appropriate as a web page such as sign up forms.

4. When you don’t have anything else.

PDFs

14

#1 - ContentFrom the Visitor’s Point of View:

1. Easy to read in general, if laid out well.2. Easy to read from a mobile device.3. Easy to access the rest of the site.4. They are MUCH faster to load.5. No additional software required.

From your Point of View:6. They are MUCH easier to maintain in the

long run.7. You do not have compatibility issues.8. Your content will be read 11 times as

much.NOTE: It’s 18 times as much

Extension wide

9. 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?

Webpages

15

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

16

#1 - ContentWebpages

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 Resources1. http://www.w3schools.com

2. http://www.cactusflower.org/the-web-is-not-print/

3. http://webdesign.about.com/od/webdesignbasics/a/aa061807.htm

4. http://webdesign.about.com/od/webdesignbasics/a/aa021003a.htm

17

Know them.#2 Audience

When creating content, keep your audience in mind. Remember…

1. 98% of them are Americans.

2. ¾ of them are Hoosiers.

3. ~50% of them will be from your region of Indiana.

18

Further remember…#2 Audience

1. The average reading level is 8th to 9th grade.

• 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.

2. 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

How to measure readability?#2 Audience

Readability Checker:1. http://www.readability-score.com/

Things that are measured:2. Total characters3. Total syllables4. Total words5. Total Sentences6. Syllables per Word7. Words per Sentence

What to watch:8. Flesch-Kincaid Score9. 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

That which must not be overlooked.#3 Editing

We want to be understandable to a 9th grader, but we don’t want to

write like a 3rd grader.

21

Check your spelling#3 Editing

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

Being different isn’t always better#4 Consistency

Be consistent with:1. Colors2. Fonts3. Formatting4. Image Placements5. Layouts

Maintain that consistency throughout your entire site.

24

Which is it?#4 Consistency

Why?1. It will make the difference stand out when you need to provide impact.2. It will look more professional.3. It will be easier for you.

25

What makes or breaks a site#5 Look Professional

Do’s and Don’ts of a successful website:

1. Colors2. Fonts3. Images4. Layouts5. Links

Key things to remember:6. You are working on a professional

website.7. 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

Color – the first thing you noticed.#5 Look Professional

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

Color – Warm v. Cool#5 Look Professional

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

Fonts – The Good#5 Look Professional

Good Font Choices1. San Serif

1. Arial

2. Tahoma3. Trebuchet MS4. Verdana

2. Serif1. Georgia2. Times New Roman

Which is better?San Serifs always trumps Serifs. They are much easier to read.

29

Fonts – The bad and the ugly#5 Look Professional

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

Images – Not just for making it pretty

#5 Look ProfessionalGood image choices & usage1. Make a boring webpage interesting2. Convey more information than can be

explained in text3. Can help your site get a lot more traffic

Bad image choices & usage4. Detract from your site5. Make your site look unprofessional6. Can get you into serious trouble

32

Images – What to do#5 Look Professional

Keys to good image use1. Alignment

– Always Left or right align

2. Alt Tags1. Always use “Alt Tags” or “Alternate Text” when

inserting an image.2. A good alt tag is 1-2 sentences describing the image.3. If the image is purely a “fluff” image, then insert an

empty alt tag.

3. Captions1. Always include a caption with the image to describe

the scene.2. This should be different than the Alt Tag if possible,

and it can be more verbose.

4. Use good Images1. Don’t use grip &grins.2. Don’t use bad lighting.3. Don’t use contextless images.4. Don’t be afraid to take some of your own!

33

Images – What not to do#5 Look Professional

Keys to bad image use1. Clip art & Cartoony Images

1. Utterly unprofessional.2. Never ever use them.

2. Animations1. Don’t use animated images.2. If you require something animated, embed

a video.

3. Images in the middle1. Never leave an image on it’s own in the

middle, unless it’s a banner image.2. Always align it.

4. Other people’s images1. Don’t use them without permission.2. Never use them without credit.

34

Images – How to take some better ones

#5 Look ProfessionalResources:1. Simple tips for taking better photos

– http://www.hp.com/united-states/consumer/digital_photography/tours/beginners/index.html

2. 10 Tips for Great Pictures– http://www.kodak.com/ek/US/en/Home_Main/Ti

ps_Projects_Exchange/Learn/Photo_Tips_Techniques/Top_10_Tips.htm

3. 10 Ways to Take Stunning Portraits– http://digital-photography-school.com/10-ways-t

o-take-stunning-portraits

4. 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

Content Layout – The big difference between web & print

#5 Look ProfessionalDesign philosophies

1. Print1. Fixed height & fixed width.2. Complete presentation given in initial view.

2. Web1. Infinite height & variable width.2. Variable amount presented in initial view

and determined by the visitor.

37

Content Layout – Laying it out for the Web#5 Look Professional

What to do:1. Keep your primary content in a

single column.2. Insert images into the content

so that the content wraps around them.

3. 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.

4. 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

Updated Content – Why people come back#6 Updating

Content needs to be updated regularly.

Why?

1. A badly maintained site leaves a VERY bad impression.

2. People find you first on the web before they ever call, write, or especially walk in your door.

3. Last year, on average, each County in the SE District had 6,533 visitors come to them for information JUST on the web.

4. That’s an extra 18 people each and every day.

40

Updated Content – Why people come back#6 Updating

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

Updated Content – But I’m busy!#6 Updating

Some tips to help with it.

1. 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.

2. 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.

3. 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

Updated Content – What can I update?#6 Updating

Some general suggestions

1. Office Locations2. Everything 4-H3. Calendars4. Extension employees5. State fair information & schedules6. County fair information & schedules7. Farmers Markets8. Conferences9. Small Farm Information10. Homemaker Lessons11. Master Gardeners12. Ag Centers13. Nutrition programs14. Livestock shows15. EDEN16. 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.

Q&A

Things people already asked…

45

Images – Event photosQuestions

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

Images – Event photosQuestions

Question: 1. How do put images we’ve taken on our

website? 2. How to resize them? 3. What format?

Answer: 4. You upload them.5. You use Microsoft Paint6. Always use JPEG.

Now the instructions on how…

47

Images – Resizing & Uploading photos

Questions

Resizing:1. Browse to the image2. Right click on the image3. Mouse over “Open with”4. Click on “Paint”

48

Images – Resizing & uploading photos

QuestionsQuestion: How do put images we’ve taken on our website? How to resize them? What format? Resizing:5. Click “Resize”6. Select “Pixels”7. Input the dimensions you

want then hit “Ok”NOTE: pixels here are ~72 pixels per inch.

8. Click the File Icon9. Click “Save As”10. Click “Jpeg”

NOTE: Always select jpeg. It’s the friendliest version for the web.

11. Select where to save it at.NOTE: I recommend giving it a simple, easy to remember name.

49

Images – Resizing & uploading photos

QuestionsQuestion: How do put images we’ve taken on our website? How to resize them? What format? Uploading:12. Open your county’s website.13. Sign in.14. Select “Site Actions”15. Select “View All Site Content”16. Click “Images” under Document

Libraries17. Click “Upload”18. Click “Upload Document”19. Click “Browse” and find the image

on your hard drive.20. Select it and click “OK”21. Find the image you just uploaded

on the list.22. Right click on it and select “Open

in New Tab”23. Switch to the new tab.24. Copy the URL out.

50

Images – Fixing the Red X.Questions

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.

51

Images – Fixing the Red X.Questions

Fix:Option 1: Use the browse button and reselect the image.

Option 2: Copy in the Image’s URL per the instructions on the last question that you got via the “View All Site Content”.

NOTE: Make sure you _ALWAYS_ have Alternate text there.

NOTE: Never rely on the Size options of that window to resize an image from right off of your camera. Use Paint to truly resize it first then use those options to tweak it to what you want.

NOTE: Always use Horizontal & vertical spacing to add some air around the image.

NOTE: There is the alignment option to make text wrap around it.

52

ADA ComplianceQuestions

Question: Is our website available to the sight impaired?

Answer: Overall, yes, but some things depend on you.

• Images: Always include Alt Text with an image as well as a caption.

• Videos: Always include a caption AND a link to a text transcript.

• Tables: Do not ever use them except for tabular data. They are hell on screen readers.

53

Language AccessibilityQuestions

Question: How can we make so different ethnic groups can also get the information on our website?

Answer: This is tougher. If you do not have someone fluent in the language on staff, your only option is to direct people to a translation site via a link.

Warning: Translation sites will…• Break your site from the visitors

perspective.• _NOT_ translate text embedded in

images.• Come up with some strange

translations.

54

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

55

Video EmbeddingQuestions

Question: How do you put videos on the website?

Answer: You embed them after uploading them to YouTube.

And now the instructions on how.

56

Video EmbeddingQuestions

Part I – Upload and get the Code:1. Upload the video to the Purdue

Extension channel on Youtube.1. U: PUExtension2. P: <you gotta ask!>

2. At the video click “Share”3. Click “Embed”4. Check “Use HTTPS”5. Check “Use old embed code”6. Set your dimensions7. Copy the code out

57

Video EmbeddingQuestions

Part II – File a request with AgIT1. Email: agithelp@purdue.edu2. Ask for: A custom layout page

with a Content Editor webpart.3. When it gets done: go to Part III.

NOTE: This is a relatively minor request, you just need to ask for it since this capability is not included by default.NOTE: You can fake it by using the “(Page) Web Part page for Staff Profiles” Page Layout. But it is VERY UGLY, don’t use it.

58

Video EmbeddingQuestions

Part III – Embed the video1. Back on your County Website Site

Actions > Create page2. Set the Title and URL3. For Page Layout, select the new

layout that was created for you4. Click “Add a Web Part” in the new

window.5. Scroll down to the

“Miscellaneous” category of web parts

6. check “Content Editor Web Part” then click “OK”

59

Video EmbeddingQuestions

Part III – Embed the video7. Click “Page”8. Mouse over “Modify Web Parts”9. Click “Content Editor Web part”.10. After the page reloads, Click

“Source Editor”

60

Video EmbeddingQuestions

Part III – Embed the video11. In the Text Entry – Webpage

Dialog, copy & paste in the code from YouTube.

12. Click “Save”

Your video is now embedded in the page and you can publish it to make it live.

Now the tricky part…

Making it look good.

61

Video EmbeddingQuestions

Question: How to make it look good?

Answer: You need content around it.

Option 1: Insert additional Content Editor web parts above and below to contain more content (follow the same steps as before).

Option 2: Get brave and use SharePoint Designer.

62

Getting Brave – SharePoint Designer

QuestionsWARNING: 1. Do not _EVER_ connect SP Designer to your site,

you WILL break it.2. Do not _EVER_ give it your username and password,

this means it’s trying to log in to your site.

EVERIf you do, you _WILL_ break your site on accident.

You are here to use SPD as an HTML Editor, _NOTHING_ more.

63

Getting Brave – SharePoint Designer

QuestionsSo now that you’re freaked out.1. Open SharePoint Designer2. Click “File”3. Click “New”4. Click “Page”5. Under “General”, select “HTML”.6. Click “OK”.7. In the bottom click “Split”

64

Getting Brave – SharePoint Designer

Questions8. Delete out the code already there.9. Copy & Paste in your YouTube

Code.

That leaves you with this.

10. Click in front of the box with the red X.

11. Type in any additional content you’d like in front of it.

12. Click after the box with the red X.13. Type in any additional content

you’d like after the box.

When you’re done

14. Copy out the code from the top and paste it into the Source Editor on the newly created page as outlined previously.

65

Getting Brave – SharePoint Designer

QuestionsWarnings again1. Do not _EVER_ connect SP

Designer to your site, you WILL break it.

2. Do not _EVER_ give it your username and password, this means it’s trying to log in to your site.

The Awesomeness3. This lets you embed videos.4. It lets you create MUCH cleaner

code that will respond how you want.

SharePoint Designer is an incredibly powerful tool, but you have to treat it with respect.

66

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

67

Last 2 Questions…Questions

Question: How do you put running Power Point Videos on the website?

Answer: Make it into a video, upload it to you tube, and embed it.

Question: What should classify as area information or county information on calendars?

Answer: That is up to your office. If you feel your calendar is getting cluttered, you can edit an item and remove your county from it.

68

Now that you’re overloaded…Questions

Any more questions?

My contact information:• Wright Frazier• wsfrazier@purdue.edu

You can download this presentation and see anything I’ve linked in it at:

http://www.ag.purdue.edu/pages/Training.aspx