Presentation for SOLID UM-Dearborn Student Clubs & Organizations

1. Oh The Tangled Web We Weave… Getting started on the web

2. Oh The Tangled Web We Weave… Hosting On & Off Campus Getting your site up and running Maintaining your site Best practices for the Web Go Social

3. Hosting Your Site Host on campus Pros & Cons Host off campus Pros & Cons Policies Options Services Policies

4. Hosting ON CAMPUS – Pros & Cons Pros Free Easier to transfer to new management Use HTML & CSS More control over design Cons HTML/CSS & simple forms only Limited help

5. Hosting OFF CAMPUS – Pros & Cons Pros Lots of free options A ton of low cost options Creative freedom Bells and Whistles Cons Campus help not available Transferring owners can get a little messy

6. Hosting Your Site- Policies All students (including groups and organizations) must comply with the University Computing Policy http://cio.umich.edu/policy/

7. Hosting OFF CAMPUS Options – Blogging Vs. Website Blogging Usually quick setup Easy to update Limited issues keeping it current Can have several people update the site (this can be a pro and a con) Widgets Dynamic Website More control over design Add unique feature Helpful to know some coding and have at least a WYSIWYG Mostly static pages

8. Hosting Off Campus – Blogging Tools Wordpress.com Free (there is a paid version also) Several templates to choose from Good widget options Blogger Free Google Product Can customize TypePad Free & Paid Paid is very customizable Tumblr Free Very Easy

9. Hosting Off Campus – Website Hosting Several hosting options are available Do a web search Search trusted sources Mashable is a great resource for web information - http://mashable.com/2007/09/13/web-hosting-toolbox

10. Hosting OFF CAMPUS - Domain Want you your own domain name? (http://www.myStudentGroup.com) Domain’s can be purchased alone or with a hosting package from various companies. Domain’s need to be renewed and will need to be in an active members name. To host the domain, most blogging platforms and web hosts, will charge a monthly or yearly fee. If you have a tight budget, a domain name isn’t a necessity.

11. Getting Your Site Up & Running The Basics Layout & Navigation Styles Bling!

12. Getting Your Site Up & Running – The Basics Determine your web needs Where to host What to use Who are your site creators and editors? Determine your Audience Find your voice Gather your information

13. Getting Your Site Up & Running – The Basics Who is your creator and who is your editor When the creator is the editor When the editor is not the creator Use tools geared to the editor’s skill level 2 years from now Use tools that will grow with your site, but will also be easily transferrable.

14. Getting Your Site Up & Running – The Basics Determine your audience Who are you talking too? Internal/External (Campus Audience) Current Members or Recruiting Prospective Students Parents What message do you want to convey What information are they looking for? Find your Voice Is it all about business or is it more casual

15. Getting Your Site Up & Running – The Basics Gather the following: every piece of paper you have information on Forms & Brochures Pictures Calendars Websites Member lists Logos

16. Getting your Site Up & Running – Layout & Navigation Layout (Page Design) Navigation (Flow of your pages)

17. Getting Your Site Up & Running - Navigation

18. Getting your Site Up & Running - Navigation Card sorting Easiest Wireframing Most professional, but can get overwhelming Other Find what options works best for you

19. Getting your Site Up & Running - Navigation Card Sorting Go through all of your gathered resources and create an index card for each resource you have. Create piles for resources that go together Calendars - >Events Flyers - > Events Brochures - > Recruiting Build your navigation categories from these piles So far, you have 3 sections of your site identified - Home (given), Events, & Recruiting.

20. Getting your Site Up & Running - Navigation Wireframing is usually done after a card sort but can also be used instead of a sort.

21. Getting your Site Up & Running - Navigation Wireframing Gliffy is a free tool for small projects (Up to 5 projects)

22. Getting your Site Up & Running - Layout Layout Get Creative Let your navigation help determine your layout.

23. Getting your Site Up & Running - Layout Popular Layouts 3 columns 2 columns New layouts

24. Getting your Site Up & Running - Layout 3 Columns

25. Getting your Site Up & Running - Layout 2 Column Design

26. Getting your Site Up & Running - Layout New Layouts

27. Getting Your Site Up & Running – Layout What will I use to create my site? If you’re using Wordpress or other blogging platforms, you will customize pre-built templates. If you’re using a traditional website environment free or low cost templates that you can customize design it from scratch The best software to edit templates or to design from scratch is Adobe Dreamweaver.

28. Getting your Site Up & Running – What every page needs Every page needs: A title A header and footer Meta tags (keywords & description) Pictures and graphics with Alt tags Great content (that match the keywords and description) Analytic code

29. Getting Your Site Up & Running - Analytics I recommend Google Analytics

30. Getting your Site Up & Running - Staying Consistent Keep your navigation in the same location throughout your site Links should all look alike (ex: “View the student roster” or “View our student roster: http://www.studentroster.edu”) Fonts and colors should stay the same throughout your site. Is your message conveyed throughout the site?

31. Getting Your Site Up & Running – Bling for a Reason Bells and whistles are cool, but… Do they serve a purpose? Do they clutter your site? Do they enhance your user’s experience.

32. Getting Your Site Up & Running – Bling for a Reason A good Bell/Whistle

33. Getting Your Site Up & Running – Bling for a Reason A bad Bell/Whistle

34. Going Live You have a fabulous new website, now what? Make sure it really is fabulous Run through a checklist Test, test, and test again. Go Live! Don’t forget to notify the SAO when page is live.

35. Going Live - Checklist Check you have meta tags Spell check & proof read content Logo linked to homepage Lorem Ipsum text removed Template stock images removed (when applicable) Site navigation organized & tested External media files tested (embed codes) Social icons linked Images tagged with ALT text Each page has a header Each page as a footer Contact form active & tested Analytics installed Search engine friendly URLs (clean and short) Cross-browser testing and evaluation Mobile browser experience testing W3 HTML & CSS Validation and fix any critical errors Website Optimization Test (loading size / time test)

36. Going Live - Testing Do an initial run through of your site yourself. Ask members of your group to go through it (on their own computers) Ask non-member to view it View it on a computer in the Computer lab Test in different browsers Test everything! Links, navigation, forms, everything.

37. Maintaining Your Site Live in the Now! Easy ways to maintain your content Create a schedule Use what is already out there

38. Maintaining Your Site Create a Schedule Make a schedule that all members of the group will follow. EX: All web updates are done every Wednesday. If your new content is not submitted by Tuesday at 11:59, it will not be on the site until the following week. Be accountable! Have non-editors on a schedule to check the site to ensure it is current.

39. Maintaining Your Site Easy was to keep your site up to date: Embed your Facebook page stream (Fan page) Add a Flickr Widget Bring in your Tweets Use a Google Calendar to display your events on your site Aggregate news from other relevant sites (some coding may be required)

40. Maintaining Your Site

41. Best Practices Untangle the Web and put your best foot forward Think of the Web First. Photos, Graphics & Video “Click Here” and other pet peeves Edit your text in half, Yes I said HALF

42. Best Practices

43. Best Practices You best foot forward: White space is your friend! Use bulleted lists whenever possible Choose text colors that are easy on the eye Link to items in your text Keep your navigation choices to 6 or less

44. Best Practices THINK OF THE WEB FIRST FOR YOUR NEXT EVENT: Create an awesome page or section of your site, dedicated to your event! Then focus on your handouts!

45. Best Practices Photos, Graphics & Video Don’t steal photos or graphics Give credit where credit is due Try to avoid stock images Video’s over 4 minutes are too long for the web.

46. Best Practices “Click Here” and other Pet Peeves of mine When referencing a link: Don’t say “to view our catalog click here for more information”. Instead, “View our detailed catalog for further details”

47. Best Practices Pet Peeves Don’t over bold information When everything is bold, nothing is important. Ex: Don’t forget tomorrow (9/10/11) is free bagel day at 9:00 a.m. in the University Center. Ex: Don’t forget tomorrow (9/10/11) is free bagel day at 9:00 a.m. in the University Center.

48. Best Practices Know your Audience Are they super users or novices? How are they accessing your site? Does your audience know what SAO, EMSL or UC stand for? Know when your site can come down for maintenance

49. Best Practices Edit your text People scan the web, they don’t read it. Cut your text in half and then cut it in half again (YIKES)

50. Best Practices – Edit your Text

51. Best Practices – Edit your Text

52. Best Practice – Edit your Text

53. GO SOCIAL Use Social Media It doesn’t replace your website, it should compliment it Attend Facebook, Twitter, and University Logo’s…OH MY at 2:00 for more social information

54. Questions? Contact me for more information: Phone: 313-593-5095 E-mail: tacordon@umd.umich.edu Twitter: @tacordon