Upload
tacordon
View
1.813
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Presentation for SOLID UM-Dearborn Student Clubs & Organizations
Citation preview
Oh The Tangled Web We Weave…
Getting started on the web
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
Hosting Your Site
Host on campus Pros & Cons
Host off campus Pros & Cons Policies Options Services
Policies
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
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
Hosting Your Site- Policies
All students (including groups and organizations) must comply with the University Computing Policy
http://cio.umich.edu/policy/
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
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
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
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.
Getting Your Site Up & Running
The Basics
Layout & Navigation
Styles
Bling!
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
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.
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
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
Getting your Site Up & Running – Layout & Navigation
Layout (Page Design)
Navigation (Flow of your pages)
Getting Your Site Up & Running - Navigation
Getting your Site Up & Running - Navigation
Card sorting Easiest
Wireframing Most professional, but can get
overwhelming
Other Find what options works best for you
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.
Getting your Site Up & Running - Navigation
Wireframing is usually done after a card sort but can also be used instead of a sort.
Getting your Site Up & Running - Navigation
Wireframing Gliffy is a free tool for small projects (Up to 5
projects)
Getting your Site Up & Running - Layout
Layout
Get Creative
Let your navigation help determine your layout.
Getting your Site Up & Running - Layout
Popular Layouts
3 columns
2 columns
New layouts
Getting your Site Up & Running - Layout
3 Columns
Getting your Site Up & Running - Layout
2 Column Design
Getting your Site Up & Running - Layout
New Layouts
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.
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
Getting Your Site Up & Running - Analytics
I recommend Google Analytics
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?
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.
Getting Your Site Up & Running – Bling for a Reason
A good Bell/Whistle
Getting Your Site Up & Running – Bling for a Reason
A bad Bell/Whistle
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.
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)
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.
Maintaining Your Site
Live in the Now!
Easy ways to maintain your content Create a schedule Use what is already out there
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.
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)
Maintaining Your Site
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
Best Practices
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
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!
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.
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”
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.
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
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)
Best Practices – Edit your Text
Best Practices – Edit your Text
Best Practice – Edit your Text
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
Questions?
Contact me for more information:
Phone: 313-593-5095
E-mail: [email protected]
Twitter: @tacordon