![Page 1: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/1.jpg)
Oh The Tangled Web We Weave…
Getting started on the web
![Page 2: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/2.jpg)
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
![Page 3: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/3.jpg)
Hosting Your Site
Host on campus Pros & Cons
Host off campus Pros & Cons Policies Options Services
Policies
![Page 4: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/4.jpg)
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
![Page 5: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/5.jpg)
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
![Page 6: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/6.jpg)
Hosting Your Site- Policies
All students (including groups and organizations) must comply with the University Computing Policy
http://cio.umich.edu/policy/
![Page 7: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/7.jpg)
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
![Page 8: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/8.jpg)
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
![Page 9: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/9.jpg)
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
![Page 10: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/10.jpg)
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.
![Page 11: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/11.jpg)
Getting Your Site Up & Running
The Basics
Layout & Navigation
Styles
Bling!
![Page 12: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/12.jpg)
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
![Page 13: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/13.jpg)
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.
![Page 14: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/14.jpg)
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
![Page 15: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/15.jpg)
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
![Page 16: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/16.jpg)
Getting your Site Up & Running – Layout & Navigation
Layout (Page Design)
Navigation (Flow of your pages)
![Page 17: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/17.jpg)
Getting Your Site Up & Running - Navigation
![Page 18: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/18.jpg)
Getting your Site Up & Running - Navigation
Card sorting Easiest
Wireframing Most professional, but can get
overwhelming
Other Find what options works best for you
![Page 19: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/19.jpg)
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.
![Page 20: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/20.jpg)
Getting your Site Up & Running - Navigation
Wireframing is usually done after a card sort but can also be used instead of a sort.
![Page 21: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/21.jpg)
Getting your Site Up & Running - Navigation
Wireframing Gliffy is a free tool for small projects (Up to 5
projects)
![Page 22: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/22.jpg)
Getting your Site Up & Running - Layout
Layout
Get Creative
Let your navigation help determine your layout.
![Page 23: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/23.jpg)
Getting your Site Up & Running - Layout
Popular Layouts
3 columns
2 columns
New layouts
![Page 24: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/24.jpg)
Getting your Site Up & Running - Layout
3 Columns
![Page 25: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/25.jpg)
Getting your Site Up & Running - Layout
2 Column Design
![Page 26: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/26.jpg)
Getting your Site Up & Running - Layout
New Layouts
![Page 27: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/27.jpg)
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.
![Page 28: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/28.jpg)
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
![Page 29: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/29.jpg)
Getting Your Site Up & Running - Analytics
I recommend Google Analytics
![Page 30: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/30.jpg)
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?
![Page 31: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/31.jpg)
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.
![Page 32: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/32.jpg)
Getting Your Site Up & Running – Bling for a Reason
A good Bell/Whistle
![Page 33: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/33.jpg)
Getting Your Site Up & Running – Bling for a Reason
A bad Bell/Whistle
![Page 34: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/34.jpg)
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.
![Page 35: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/35.jpg)
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)
![Page 36: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/36.jpg)
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.
![Page 37: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/37.jpg)
Maintaining Your Site
Live in the Now!
Easy ways to maintain your content Create a schedule Use what is already out there
![Page 38: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/38.jpg)
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.
![Page 39: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/39.jpg)
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)
![Page 40: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/40.jpg)
Maintaining Your Site
![Page 41: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/41.jpg)
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
![Page 43: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/43.jpg)
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
![Page 44: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/44.jpg)
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!
![Page 45: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/45.jpg)
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.
![Page 46: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/46.jpg)
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”
![Page 47: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/47.jpg)
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.
![Page 48: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/48.jpg)
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
![Page 49: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/49.jpg)
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)
![Page 50: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/50.jpg)
Best Practices – Edit your Text
![Page 51: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/51.jpg)
Best Practices – Edit your Text
![Page 52: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/52.jpg)
Best Practice – Edit your Text
![Page 53: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/53.jpg)
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
![Page 54: Oh The Tangled Web We Weave...SOLID Presentation](https://reader037.vdocuments.mx/reader037/viewer/2022110114/5461f3a3af7959d8588b529b/html5/thumbnails/54.jpg)
Questions?
Contact me for more information:
Phone: 313-593-5095
E-mail: [email protected]
Twitter: @tacordon