0
Oh The Tangled Web We Weave…<br />Getting started <br />on the web<br />
Oh The Tangled Web We Weave…<br />Hosting On & Off Campus<br />Getting your site up and running<br />Maintaining your site...
Hosting Your Site<br />Host on campus<br />Pros & Cons<br />Host off campus<br />Pros & Cons<br />Policies<br />Options<br...
Hosting ON CAMPUS – Pros & Cons<br />Pros<br />Free<br />Easier to transfer to new management<br />Use HTML & CSS<br />Mor...
Hosting OFF CAMPUS – Pros & Cons<br />Pros<br />Lots of free options<br />A ton of low cost options<br />Creative freedom<...
Hosting Your Site- Policies<br />All students (including groups and organizations) must comply with the University Computi...
Hosting OFF CAMPUS Options – Blogging Vs. Website<br />Blogging<br />Usually quick setup<br />Easy to update<br />Limited ...
Hosting Off Campus – Blogging Tools<br />Wordpress.com<br />Free (there is a paid version also)<br />Several templates to ...
Hosting Off Campus – Website Hosting<br />Several hosting options are available<br />Do a web search<br />Search trusted s...
Hosting OFF CAMPUS - Domain<br />Want you your own domain name?  (http://www.myStudentGroup.com)<br />Domain’s can be purc...
Getting Your Site Up & Running<br />The Basics<br />Layout & Navigation<br />Styles<br />Bling!<br />
Getting Your Site Up & Running – The Basics<br />Determine your web needs<br />Where to host<br />What to use<br />Who are...
Getting Your Site Up & Running – The Basics<br />Who is your creator and who is your editor<br />When the creator is the e...
Getting Your Site Up & Running – The Basics<br />Determine your audience<br />Who are you talking too?  <br />Internal/Ext...
Getting Your Site Up & Running – The Basics<br />Gather the following:<br />every piece of paper you have information on<b...
Getting your Site Up & Running – Layout & Navigation<br />Layout (Page Design)<br />Navigation (Flow of your pages)<br />
Getting Your Site Up & Running - Navigation<br />
Getting your Site Up & Running - Navigation<br />Card sorting<br />Easiest<br />Wireframing<br />Most professional, but ca...
Getting your Site Up & Running - Navigation<br />Card Sorting<br />Go through all of your gathered resources and create an...
Getting your Site Up & Running - Navigation<br />Wireframing is usually done after a card sort but can also be used instea...
Getting your Site Up & Running - Navigation<br />Wireframing<br />Gliffy is  a free tool for small projects (Up to 5 proje...
Getting your Site Up & Running - Layout<br />Layout<br />Get Creative<br />Let your navigation help determine your layout....
Getting your Site Up & Running - Layout<br />Popular Layouts<br />3 columns<br />2 columns<br />New layouts<br />
Getting your Site Up & Running - Layout<br />3 Columns<br />
Getting your Site Up & Running - Layout<br />2 Column Design<br />
Getting your Site Up & Running - Layout<br />New Layouts<br />
Getting Your Site Up & Running – Layout<br />What will I use to create my site?<br />If you’re using Wordpress or other bl...
Getting your Site Up & Running – What every page needs<br />Every page needs:<br />A title<br />A header and footer<br />M...
Getting Your Site Up & Running - Analytics<br />I recommend Google Analytics<br />
Getting your Site Up & Running - Staying Consistent<br />Keep your navigation in the same location throughout your site<br...
Getting Your Site Up & Running – Bling for a Reason<br />Bells and whistles are cool, but…<br />Do they serve a purpose?  ...
Getting Your Site Up & Running – Bling for a Reason<br />A good Bell/Whistle<br />
Getting Your Site Up & Running – Bling for a Reason<br />A bad Bell/Whistle<br />
Going Live<br />You have a fabulous new website, now what?<br />Make sure it really is fabulous<br />Run through a checkli...
Going Live - Checklist<br />Check you have meta tags<br />Spell check & proof read content<br />Logo linked to homepage<br...
Going Live - Testing<br />Do an initial run through of your site yourself.<br />Ask members of your group to go through it...
Maintaining Your Site	<br />Live in the Now!<br />Easy ways to maintain your content<br />Create a schedule<br />Use what ...
Maintaining Your Site<br />Create a Schedule<br />Make a schedule that all members of the group will follow.<br />EX:  All...
Maintaining Your Site<br />Easy was to keep your site up to date:<br />Embed your Facebook page stream (Fan page)<br />Add...
Maintaining Your Site<br />
Best Practices<br />Untangle the Web and put your best foot forward<br />Think of the Web First.<br />Photos, Graphics & V...
Best Practices<br />
Best Practices<br />You best foot forward:<br />White space is your friend!<br />Use bulleted lists whenever possible<br /...
Best Practices<br />THINK OF THE WEB FIRST FOR YOUR NEXT EVENT:<br />Create an awesome page or section of your site, dedic...
Best Practices<br />Photos, Graphics & Video<br />Don’t steal photos or graphics<br />Give credit where credit is due<br /...
Best Practices<br />“Click Here” and other Pet Peeves of mine<br />When referencing a link: <br />Don’t say  <br />“to vie...
Best Practices<br />Pet Peeves<br />Don’t over bold information<br />When everything is bold, nothing is important.<br />E...
Best Practices<br />Know your Audience<br />Are they super users or novices?<br />How are they accessing your site?<br />D...
Best Practices<br />Edit your text<br />People scan the web, they don’t read it.<br />Cut your text in half and then cut i...
Best Practices – Edit your Text<br />
Best Practices – Edit your Text<br />
Best Practice – Edit your Text<br />
GO SOCIAL<br />Use Social Media<br />It doesn’t replace your website, it should compliment it<br />Attend Facebook, Twitte...
Questions?<br />Contact me for more information:<br />Phone:  313-593-5095<br />E-mail: tacordon@umd.umich.edu<br />Twitte...
Upcoming SlideShare
Loading in...5
×

Oh The Tangled Web We Weave...SOLID Presentation

1,805

Published on

Presentation for SOLID UM-Dearborn Student Clubs & Organizations

Published in: Business, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,805
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Blogging Platform vs. a regular Website Platform
  • These are platforms I’m familiar with, there are plenty more out there that are free or very inexpensive. I am only familiar with the paid version of TypePad
  • When the creator is the editor – You don’t have to worry too much of the type of tools you’ll be usingWhen the creator is not the editor – be sure the tools you choose to create the site can easily be used by a non-technical content editorYou should keep that in mind when looking at your site design as a whole and who will be taking it over in 2 years.
  • Put yourself in your web viewers shoes. What information are they looking for and is it easily found on your site?
  • Both are important but from a users standpoint, Navigation is critical
  • If using a blogging platform you may not be able to add Meta tags
  • Transcript of "Oh The Tangled Web We Weave...SOLID Presentation"

    1. 1. Oh The Tangled Web We Weave…<br />Getting started <br />on the web<br />
    2. 2. Oh The Tangled Web We Weave…<br />Hosting On & Off Campus<br />Getting your site up and running<br />Maintaining your site<br />Best practices for the Web<br />Go Social<br />
    3. 3. Hosting Your Site<br />Host on campus<br />Pros & Cons<br />Host off campus<br />Pros & Cons<br />Policies<br />Options<br />Services<br />Policies<br />
    4. 4. Hosting ON CAMPUS – Pros & Cons<br />Pros<br />Free<br />Easier to transfer to new management<br />Use HTML & CSS<br />More control over design<br />Cons<br />HTML/CSS & simple forms only<br />Limited help<br />
    5. 5. Hosting OFF CAMPUS – Pros & Cons<br />Pros<br />Lots of free options<br />A ton of low cost options<br />Creative freedom<br />Bells and Whistles<br />Cons<br />Campus help not available<br />Transferring owners can get a little messy<br />
    6. 6. Hosting Your Site- Policies<br />All students (including groups and organizations) must comply with the University Computing Policy<br />http://cio.umich.edu/policy/<br />
    7. 7. Hosting OFF CAMPUS Options – Blogging Vs. Website<br />Blogging<br />Usually quick setup<br />Easy to update<br />Limited issues keeping it current<br />Can have several people update the site (this can be a pro and a con)<br />Widgets<br />Dynamic<br />Website<br />More control over design<br />Add unique feature<br />Helpful to know some coding and have at least a WYSIWYG<br />Mostly static pages<br />
    8. 8. Hosting Off Campus – Blogging Tools<br />Wordpress.com<br />Free (there is a paid version also)<br />Several templates to choose from<br />Good widget options<br />Blogger<br />Free<br />Google Product<br />Can customize<br />TypePad<br />Free & Paid<br />Paid is very customizable<br />Tumblr<br />Free<br />Very Easy<br />
    9. 9. Hosting Off Campus – Website Hosting<br />Several hosting options are available<br />Do a web search<br />Search trusted sources<br />Mashable is a great resource for web information - http://mashable.com/2007/09/13/web-hosting-toolbox<br />
    10. 10. Hosting OFF CAMPUS - Domain<br />Want you your own domain name? (http://www.myStudentGroup.com)<br />Domain’s can be purchased alone or with a hosting package from various companies.<br />Domain’s need to be renewed and will need to be in an active members name.<br />To host the domain, most blogging platforms and web hosts, will charge a monthly or yearly fee.<br />If you have a tight budget, a domain name isn’t a necessity.<br />
    11. 11. Getting Your Site Up & Running<br />The Basics<br />Layout & Navigation<br />Styles<br />Bling!<br />
    12. 12. Getting Your Site Up & Running – The Basics<br />Determine your web needs<br />Where to host<br />What to use<br />Who are your site creators and editors?<br />Determine your Audience<br />Find your voice<br />Gather your information<br />
    13. 13. Getting Your Site Up & Running – The Basics<br />Who is your creator and who is your editor<br />When the creator is the editor<br />When the editor is not the creator<br />Use tools geared to the editor’s skill level<br />2 years from now<br />Use tools that will grow with your site, but will also be easily transferrable.<br />
    14. 14. Getting Your Site Up & Running – The Basics<br />Determine your audience<br />Who are you talking too? <br />Internal/External (Campus Audience)<br />Current Members or Recruiting<br />Prospective Students<br />Parents<br />What message do you want to convey<br />What information are they looking for?<br />Find your Voice<br />Is it all about business or is it more casual<br />
    15. 15. Getting Your Site Up & Running – The Basics<br />Gather the following:<br />every piece of paper you have information on<br />Forms & Brochures<br />Pictures<br />Calendars<br />Websites <br />Member lists<br />Logos<br />
    16. 16. Getting your Site Up & Running – Layout & Navigation<br />Layout (Page Design)<br />Navigation (Flow of your pages)<br />
    17. 17. Getting Your Site Up & Running - Navigation<br />
    18. 18. Getting your Site Up & Running - Navigation<br />Card sorting<br />Easiest<br />Wireframing<br />Most professional, but can get overwhelming<br />Other<br />Find what options works best for you<br />
    19. 19. Getting your Site Up & Running - Navigation<br />Card Sorting<br />Go through all of your gathered resources and create an index card for each resource you have.<br />Create piles for resources that go together<br />Calendars - >Events<br />Flyers - > Events<br />Brochures - > Recruiting<br />Build your navigation categories from these piles<br />So far, you have 3 sections of your site identified - Home (given), Events, & Recruiting.<br />
    20. 20. Getting your Site Up & Running - Navigation<br />Wireframing is usually done after a card sort but can also be used instead of a sort.<br />
    21. 21. Getting your Site Up & Running - Navigation<br />Wireframing<br />Gliffy is a free tool for small projects (Up to 5 projects)<br />
    22. 22. Getting your Site Up & Running - Layout<br />Layout<br />Get Creative<br />Let your navigation help determine your layout.<br />
    23. 23. Getting your Site Up & Running - Layout<br />Popular Layouts<br />3 columns<br />2 columns<br />New layouts<br />
    24. 24. Getting your Site Up & Running - Layout<br />3 Columns<br />
    25. 25. Getting your Site Up & Running - Layout<br />2 Column Design<br />
    26. 26. Getting your Site Up & Running - Layout<br />New Layouts<br />
    27. 27. Getting Your Site Up & Running – Layout<br />What will I use to create my site?<br />If you’re using Wordpress or other blogging platforms, you will customize pre-built templates.<br />If you’re using a traditional website environment <br />free or low cost templates that you can customize<br />design it from scratch <br />The best software to edit templates or to design from scratch is Adobe Dreamweaver.<br />
    28. 28. Getting your Site Up & Running – What every page needs<br />Every page needs:<br />A title<br />A header and footer<br />Meta tags (keywords & description)<br />Pictures and graphics with Alt tags<br />Great content (that match the keywords and description)<br />Analytic code<br />
    29. 29. Getting Your Site Up & Running - Analytics<br />I recommend Google Analytics<br />
    30. 30. Getting your Site Up & Running - Staying Consistent<br />Keep your navigation in the same location throughout your site<br />Links should all look alike (ex: “View the student roster” or “View our student roster: http://www.studentroster.edu”)<br />Fonts and colors should stay the same throughout your site.<br />Is your message conveyed throughout the site?<br />
    31. 31. Getting Your Site Up & Running – Bling for a Reason<br />Bells and whistles are cool, but…<br />Do they serve a purpose? <br />Do they clutter your site? <br />Do they enhance your user’s experience.<br />
    32. 32. Getting Your Site Up & Running – Bling for a Reason<br />A good Bell/Whistle<br />
    33. 33. Getting Your Site Up & Running – Bling for a Reason<br />A bad Bell/Whistle<br />
    34. 34. Going Live<br />You have a fabulous new website, now what?<br />Make sure it really is fabulous<br />Run through a checklist <br />Test, test, and test again.<br />Go Live!<br />Don’t forget to notify the SAO when page is live.<br />
    35. 35. Going Live - Checklist<br />Check you have meta tags<br />Spell check & proof read content<br />Logo linked to homepage<br />Lorem Ipsum text removed<br />Template stock images removed (when applicable)<br />Site navigation organized & tested<br />External media files tested (embed codes)<br />Social icons linked<br />Images tagged with ALT text<br />Each page has a header <br />Each page as a footer <br />Contact form active & tested<br />Analytics installed<br />Search engine friendly URLs (clean and short)<br />Cross-browser testing and evaluation<br />Mobile browser experience testing<br />W3 HTML & CSS Validation and fix any critical errors<br />Website Optimization Test (loading size / time test)<br />
    36. 36. Going Live - Testing<br />Do an initial run through of your site yourself.<br />Ask members of your group to go through it (on their own computers)<br />Ask non-member to view it<br />View it on a computer in the Computer lab<br />Test in different browsers<br />Test everything! Links, navigation, forms, everything.<br />
    37. 37. Maintaining Your Site <br />Live in the Now!<br />Easy ways to maintain your content<br />Create a schedule<br />Use what is already out there<br />
    38. 38. Maintaining Your Site<br />Create a Schedule<br />Make a schedule that all members of the group will follow.<br />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.<br />Be accountable! Have non-editors on a schedule to check the site to ensure it is current.<br />
    39. 39. Maintaining Your Site<br />Easy was to keep your site up to date:<br />Embed your Facebook page stream (Fan page)<br />Add a Flickr Widget<br />Bring in your Tweets<br />Use a Google Calendar to display your events on your site<br />Aggregate news from other relevant sites (some coding may be required)<br />
    40. 40. Maintaining Your Site<br />
    41. 41. Best Practices<br />Untangle the Web and put your best foot forward<br />Think of the Web First.<br />Photos, Graphics & Video<br />“Click Here” and other pet peeves<br />Edit your text in half, Yes I said HALF<br />
    42. 42. Best Practices<br />
    43. 43. Best Practices<br />You best foot forward:<br />White space is your friend!<br />Use bulleted lists whenever possible<br />Choose text colors that are easy on the eye<br />Link to items in your text<br />Keep your navigation choices to 6 or less<br />
    44. 44. Best Practices<br />THINK OF THE WEB FIRST FOR YOUR NEXT EVENT:<br />Create an awesome page or section of your site, dedicated to your event! Then focus on your handouts!<br />
    45. 45. Best Practices<br />Photos, Graphics & Video<br />Don’t steal photos or graphics<br />Give credit where credit is due<br />Try to avoid stock images<br />Video’s over 4 minutes are too long for the web.<br />
    46. 46. Best Practices<br />“Click Here” and other Pet Peeves of mine<br />When referencing a link: <br />Don’t say <br />“to view our catalog click here for more information”. <br />Instead, <br />“View our detailed catalog for further details”<br />
    47. 47. Best Practices<br />Pet Peeves<br />Don’t over bold information<br />When everything is bold, nothing is important.<br />Ex: Don’t forget tomorrow (9/10/11) is free bagel day at 9:00 a.m. in the University Center.<br />Ex: Don’t forget tomorrow (9/10/11) is free bagel day at 9:00 a.m. in the University Center.<br />
    48. 48. Best Practices<br />Know your Audience<br />Are they super users or novices?<br />How are they accessing your site?<br />Does your audience know what SAO, EMSL or UC stand for? <br />Know when your site can come down for maintenance<br />
    49. 49. Best Practices<br />Edit your text<br />People scan the web, they don’t read it.<br />Cut your text in half and then cut it in half again (YIKES)<br />
    50. 50. Best Practices – Edit your Text<br />
    51. 51. Best Practices – Edit your Text<br />
    52. 52. Best Practice – Edit your Text<br />
    53. 53. GO SOCIAL<br />Use Social Media<br />It doesn’t replace your website, it should compliment it<br />Attend Facebook, Twitter, and University Logo’s…OH MY at 2:00 for more social information<br />
    54. 54. Questions?<br />Contact me for more information:<br />Phone: 313-593-5095<br />E-mail: tacordon@umd.umich.edu<br />Twitter: @tacordon<br />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×