CMS 120Introduction to Building a Website

Website Construction in the CMS

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”

1. PRIORITIZE YOUR SITE’S NEEDS

What is most important?

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.

2. IDENTIFY YOUR AUDIENCE

Who will visit your website?

Audience = Visitors = Users

Interchangeable terms

Users are our #1 priority

Who is your audience?

• Donors

• Faculty/staff

• Current students

• Prospective students

What does your audience want?

• Program descriptions

• Course schedules

• Applications

• Data for download

• What else?

Who is your audience

+What do they want

=User Personas

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.

3. ORGANIZE YOUR CURRENT CONTENT

Get your sheet together.

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

4. BUILD YOUR SITE!

Implement your ideas within the CMS.

Login!

• Navigate to http://ou.montana.edu/cms-training

• Enter your work email below and click “Let’s go!”

4.1 CREATE YOUR SECTIONS AND PAGES

It’s time to create site sections and pages.

Create a new site section

• Choose

• Select [ New Section w/Index File ].

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

Breadcrumbs

Show the site section structure.

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)

4.2 NAVIGATION AKA THE “SIDENAV”

Get the viewers where they need to go, fast.

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?

Editing the _sidenav.inc file

How the _sidenav.inc file works

Dropdowns? Can I have?

Dropdowns? You can!

1. 2.

3.

Double dropdowns do not work.

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?

4.3 ORGANIZE AND DESIGN YOUR PAGES

Implement your ideas within the CMS.

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

Content Cards

Card: Content

Card: Header with Content

Cards with Images

Card: Image

Card: Image with Label

More Cards with Images

Card: Image with Label (Translucent)

Card: Image with Content

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

Questions?

LAB

Let’s continue working on our site!

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.

ADDITIONAL INFORMATION

Get help, design tricks, and other classes

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

UNIVERSAL DESIGN CHEATSHEET

Universal design = design for everyone

Why Universal Design?

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!

The End/Beginning