Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Oh The Tangled Web We Weave...SOLID Presentation


Published on

Presentation for SOLID UM-Dearborn Student Clubs & Organizations

Published in: Business, Technology, Design
  • Be the first to comment

  • Be the first to like this

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 /><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 /><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 -<br />
  10. 10. Hosting OFF CAMPUS - Domain<br />Want you your own domain name? (<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:”)<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:<br />Twitter: @tacordon<br />