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: tacordon@umd.umich.edu

Twitter: @tacordon