Introductions
1. Meet your colleagues
2. What is your skill level?o Website ACE, just getting started, still struggling…
3. What is your goal today?o What do you want to learn today?
Where do we begin?
1. Decide on your priorities
2. Identify your audience
3. Organize your content
4. Build your site
PAOB
You’re hired!
Your first website project is:
A faculty member’s personal website
“Dr. Joe Supination, Ph.D”
Sort your priorities
1. Gather all the categories and topics you wish to include in your site and put each one on its own post-it note.
2. Prioritize! What is the most important for your visitors to find? Give these a
3. Then, group them in categories. You may create more post-it-notes as category/groups. “Card sorting”
Dr. Joe’s “list of priorities”
• Projects
• Contact Information
• The Supination Lab
• Our current research
• Students
• Undergrad
• Grad
• Colleagues
• Which Classes I teach
• Class and lab schedule
• Office Hours
• Advising hours
• Publications
Task #1: Card Sorting
• You may find a group of things – give the group a name! (Yes, another card.)
• You may require more than one of the same “thing”. Make a duplicate card! (But try to avoid this if you can.)
• Once you’ve got a solution, take a photo with your phone and try another!
Grab a partner and go for it!
Card Sorting Activity Reference
• Projects
• Contact Information
• The Supination Lab
• Our current research
• Students• Undergrad
• Grad
• Colleagues
• Which Classes I teach
• Class and lab schedule
• Office Hours
• Advising hours
• Publications
Dr. Joe’s website org. My Card Sorting Result
• Card sorting = Navigation!
• Card sorting has many answers, not one is best.
• Needs may change over time
• Projects
• Lab(s)
• Research
• People
• Grad Students
• Undergrad students
• Colleagues
• Schedule
• Teaching
• Courses
• Office Hours
• Advising
• Publications
Questions?
Remember…
1. Mind mapping and card sorting are extremely useful tools.
2. Your content will grow and change over time. Regularly reorganize! It’s fun, and it’s great for your visitors.
What does your audience want?
• Program descriptions
• Course schedules
• Applications
• Data for download
• What else?
User Personas
A persona are goals and behaviors of specific groups of users who may visit your site.
Helen Mitchell (19 years old)• About: Wears contacts, plays basketball,
wants to start a business and do well in school.
• Goals: Do well in school, become a successful entrepreneur, yet maintain spare time to spend with her pets and friends.
• Tasks: Browsing the colleges websites,
• Quote: “How can I get some extra credit?”
Create multiple Personas
• Be specific
– Name, gender, age
– Goals and motivations
– Tasks they may need to complete
– Needs (sometimes subconscious)
– Quote, related to your subject area
Firstname Lastname• About:
• Tasks:
• Goals:
• Quote:
Firstname Lastname• About:
• Tasks:
• Goals:
• Quote:
A Professor’s webpage
1. What would your persona click on first?
2. What would they expect to find?
3. What could you change to cater to this group of users?
• Projects
• Lab(s)
• Research
• People
• Grad Students
• Undergrad students
• Colleagues
• Schedule
• Teaching
• Courses
• Office Hours
• Advising
• Publications
Navigate in your persona’s shoes
Multiple Persona Disorder!
• Users are #1!
1. With a “users first” mindset, how can you achieve your communication goals?
2. Yes, you have to combine the multiple personas’ needs and your own.
Collect your content
• What content do you already have?
• Text/copy
• Images
• Graphs, infographics
• Audio and video
Collect your content
• What do you need?
• MSU Creative Services
• Photos
• Graphics• montana.edu/creativeservices
• More copy/text from your colleagues?
• Start these conversations early and have them often.
• Other assets from Web and Digital (us)
• montana.edu/web
Login!
• Navigate to http://ou.montana.edu/cms-training
• Enter your work email below and click “Let’s go!”
Give your site section a name
• “Directory Name” is part of the URL• montana.edu/cms-training/jsupination
• “Page Title” should be human-readable.• CMS Training / Joseph Supination, Ph.D
Do not delete index.pcf
• It’s the control file for the directory.
• Controls what is displayed when navigating to its holding directory.
Example: Navigating to montana.edu/web displays the content within montana.edu/web/index.pcf
404 NOT FOUND
The requested slide was not found in
this presentation.
Alphabet/a.b.c (backwardsHat) Server at
this.placeon.theweb Port 41
Creating pages
Slightly different than creating site sections
• “Page Title” should be human-readable.• CMS Training / Joseph Supination, Ph.D / Projects
• “Filename” (not Directory Name) is part of the URL• montana.edu/cms-training/jsupination/projects.html
Other URL examples
• Filenames should be “human readable” and:– Brief and all lowercase– No spaces or weird characters, e.g. @#$%^&*!– If you can, remove: and, or, a, of…
• Good Examples: – /apps-services – /mr-smith-goes-washington
• Bad Examples:– /chbda.html– /banana-split-will-feed-four-small-children-for-eight-
weeks.html
Which URL?
• Page to create:
– Annual Reports for Seed Yields across Northwest Montana
• Which file name /directory name?
1) /annual-reports-for-seed-yields-across-northwest-montana.html
2) /ann-rep-seeds-nwmt.html
3) /seed-yields-reports-nw-mt.html
.html vs .pcf
.pcf is an editable version of your page
.html is a live, published version of your page
You’ve got it!
1. Creating site sections.
2. Creating pages.
3. Index.pcf is important.
4. Good URL practice
5. The difference between .pcf and .html files
6. Still thinking about your users!
Questions?
Task #2: Create your site sections and pages
1. Site sections = “parent categories”
2. Pages inside those site sections = “child topics”
(Human break time)
Navigation is not a table of contents
• You should not put each page or item in your navigation.
• Navigation needs to service your two main user types:
– Those who are there for the first time.
– Those who have been here before.
Why?
Sidenav by the 3 Bears
Make your navigation just right.• Too few links and nothing can be found
• Too many links and nothing can be found
• Every item on your site does not need a navigation item.
• Navigation pages – let your organization rule
• Documents belong as page or on pages, not navigation
How to edit your Sidenav
• Controlled via the _sidenav.inc file at the root of your website.
• Navigation constructed as bulleted links.
• Dropdowns must link to “#” only. …how?
Task #3: Build Dr. Joe’s Sidenav
1. Refer back to your card sorting organization
2. Use your “main” categories as the lowest in your sidenav and nest the subtopics when you think it’s appropriate.
3. Consider:
1. Your priorities
2. What your users will need
3. How you can best communicate
Task #4: Test your navigation
1. Bring in someone not involved in your subject area.
2. Give them a few tasks to complete– “Starting from montana.edu, find the Web Policies page.”
– “From montana.edu/hr/, download the TIAA CREF signup document.”
3. Observe and have them “think out loud”– What you can ask them while they’re performing a task:
• “What are you thinking right now?”
• “What are you trying to do right now?
Snippets
• Use snippets to style your webpage content.
• We many useful snippets for creating smart and clearly styled
– images,
– text and
– tables.
Why Snippets?
1. Mobile-friendly
– At least 50% of your visitors!
2. Accessible to all
3. They look great! Match the rest of montana.edu
Content Panels
Content Panel with Header (columns weighted 6 to 6)
Content Panel (columns weighted 9 to 3)
How to implement content panels
One More Card with Image
Card: Image with Content and Header
How to implement image content cards
Many More Snippets!
• Many of our snippets can also be used to design large portions of the page. These are Layout Snippets.
FAQ (Frequently Asked Questions)
Implement your own FAQ
Faculty/Staff Listing
Implement your own Faculty/staff listing
Multi-Column Layout
Implement your own Multi-column layout
Snippet Showcase
montana.edu/web/cms/snippets
or
Search the Help Center for “Snippet Showcase”
Task #5: Add a Faculty/Staff Listing Snippet to your page
1. Open the editor for the Main Content region of your page
2. Click on the Snippets icon (second from bottom-right)
3. Select the “Layout” category
4. Select the “Faculty/Staff Listing” Snippet
5. Click “insert” button
Lab choices
1. Continue to play and practice with your practice site
2. Move on to your own website and implement some of what you have learned.
3. Get up and dance.
Help!
• CMS Help Center
– Snippets
– Web Page Design
• Submit a Support Ticket
• Attend an Open Support session for the CMS
– Available only at the MSU-Bozeman Campus
The Universal Design Cheatsheet
1. Images - alt text (aka image description) = “what you would write if you couldn’t use an image”
2. Color - do not rely on color alone to establish meaning
3. Contrast - Color contrast > 4.5/1
4. Transcripts must at least be used on any videos or audio on your site
5. Headings are important! Don’t fake them with bold text
6. Links - use obvious links: click here = FAIL
7. Use HTML pages, not PDF as much as possible. Convert. (Never .doc/docx files.)
More? CMS 210: Web Accessibility
• One hour course with Adam Griffith
• How to achieve web design for all of your visitors
• Sign up: montana.edu/web/cms
Audience Trends for montana.edu
• Nearly 1.1 million pageviews per month from 375,000 visitors
• On site 3 minutes
• 2.7 pages average = you need good navigation menus
• Mobile / Tablet = 30%
• Students will be much higher
• 50% iPhone = good test!
• Over half (53%) is direct traffic = you need good URLs
• Just over 40% is search traffic = you need good content
Interpret this for your users!