Slides from the presentation provided by Web and Digital Communications at Montana State University. Training for website organization, layout, and construction within the montana.edu content management system (CMS) called OUCampus.

1. CMS 120
Introduction to Building a Website
Website Construction in the CMS

2. 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?

3. Where do we begin?
1. Decide on your priorities
2. Identify your audience
3. Organize your content
4. Build your site
PAOB

5. You’re hired!
Your first website project is:
A faculty member’s personal website
“Dr. Joe Supination, Ph.D”

6. 1. PRIORITIZE YOUR SITE’S NEEDS
What is most important?

8. 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”

9. 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

10. 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!

11. 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

13. 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

14. 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.

15. 2. IDENTIFY YOUR AUDIENCE
Who will visit your website?

16. Audience = Visitors = Users
Interchangeable terms

17. Users are our #1 priority

18. Who is your audience?
• Donors
• Faculty/staff
• Current students
• Prospective students

19. What does your audience want?
• Program descriptions
• Course schedules
• Applications
• Data for download
• What else?

20. Who is your audience
+
What do they want
=
User Personas

21. 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?”

22. 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

23. Firstname Lastname
• About:
• Tasks:
• Goals:
• Quote:
Firstname Lastname
• About:
• Tasks:
• Goals:
• Quote:

24. 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

25. 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.

26. 3. ORGANIZE YOUR CURRENT
CONTENT
Get your sheet together.

27. Collect your content
• What content do you already have?
• Text/copy
• Images
• Graphs, infographics
• Audio and video

28. 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

29. 4. BUILD YOUR SITE!
Implement your ideas within the CMS.

30. Login!
• Navigate to http://ou.montana.edu/cms-training
• Enter your work email below and click “Let’s go!”

31. 4.1 CREATE YOUR SECTIONS AND
PAGES
It’s time to create site sections and pages.

32. Create a new site section
• Choose
• Select [ New Section w/Index File ].

33. 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

34. Breadcrumbs
Show the site section structure.

35. 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

36. 404 NOT FOUND
The requested slide was not found in
this presentation.
Alphabet/a.b.c (backwardsHat) Server at
this.placeon.theweb Port 41

37. 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

38. 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

39. 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

40. .html vs .pcf
.pcf is an editable version of your page
.html is a live, published version of your page

41. 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?

42. Task #2: Create your site sections
and pages
1. Site sections = “parent categories”
2. Pages inside those site sections = “child
topics”
(Human break time)

43. 4.2 NAVIGATION
AKA THE “SIDENAV”
Get the viewers where they need to go, fast.

44. 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?

45. 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

46. 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?

47. Editing the _sidenav.inc file

48. How the _sidenav.inc file works

49. Dropdowns? Can I have?

50. Dropdowns? You can!
1. 2.
3.

51. Double dropdowns do not work.

52. 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

53. 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?

54. 4.3 ORGANIZE AND DESIGN YOUR
PAGES
Implement your ideas within the CMS.

55. Snippets
• Use snippets to style your webpage content.
• We many useful snippets for creating smart
and clearly styled
– images,
– text and
– tables.

56. 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

57. Content Panels
Content Panel
with Header
(columns
weighted 6 to 6)
Content Panel
(columns
weighted 9 to 3)
How to implement content panels

58. Content Cards
Card: Content
Card: Header
with Content

59. Cards with Images
Card: Image
Card: Image
with Label

60. More Cards with Images
Card: Image
with Label
(Translucent)
Card: Image
with Content

61. One More Card with Image
Card: Image
with Content
and Header
How to implement image content cards

62. Many More Snippets!
• Many of our snippets can also be used to
design large portions of the page. These are
Layout Snippets.

63. FAQ (Frequently Asked Questions)
Implement your own FAQ

64. Faculty/Staff Listing
Implement your own Faculty/staff listing

65. Multi-Column Layout
Implement your own Multi-column layout

66. Snippet Showcase
montana.edu/web/cms/snippets
or
Search the Help Center for “Snippet Showcase”

67. 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

68. Questions?

69. LAB
Let’s continue working on our site!

70. 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.

71. ADDITIONAL INFORMATION
Get help, design tricks, and other classes

72. 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

73. UNIVERSAL DESIGN CHEATSHEET
Universal design = design for everyone

74. Why Universal Design?

75. 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.)

76. 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

77. 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!

78. The End/Beginning