Embed Size (px)
Citation preview
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• [email protected]• 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: [email protected]. 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• [email protected]
You can download this presentation and see anything I’ve linked in it at:
http://www.ag.purdue.edu/pages/Training.aspx
