CMS 120: Introduction to Building a Website
Download as PPTX, PDF1 like676 views
The document outlines a course on building a personal website using a content management system (CMS). It covers various aspects including audience identification, content organization, website structure, and design principles, emphasizing the importance of user personas and effective navigation. Practical tasks such as card sorting, creating site sections, and implementing design snippets are included to help participants apply learned concepts.
![Create a new site section
• Choose
• Select [ New Section w/Index File ].](https://image.slidesharecdn.com/cms120-buildingawebsitev1-170222222211/85/CMS-120-Introduction-to-Building-a-Website-32-320.jpg)
CMS 120: Introduction to Building a Website
- 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
- 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!
Editor's Notes
- #2: Welcome to CMS 120, Introduction to Building a Website. Teach you: Theory behind website design and construction Show you: Tools within the CMS which will help you realize your organization and design.
- #4: Choose your purpose Identify your audience Organize your current content Build your site PAOB (goofy pronunciation as a poor joke.)
- #5: Congratulations! You’re hired!
- #8: Information you are given when asked to build a website.
- #13: Card Sorting
- #14: What does this look like? Navigation!
- #15: Questions anyone? Mind mapping and card sorting = organizational tools.
- #17: I’m going to try to stick to the term “users” Google Analytics also calls these “sessions” now…
- #18: I’m going to try to stick to the term “users” Google Analytics also calls these “sessions” now…
- #21: Who has heard of a “persona” before? Imaginary group of users to help us decide how they’ll use our website.
- #22: You’ll want to think of more than just one type of visitor!
- #24: Audience = users = visitors. We’ve been using those interchangeably and that’s OK. You’ll want to think of more than just one type of visitor!
- #25: What does this look like? Navigation! Helen is a student, so do you think she might gravitate toward a navigation item called, “Students”? For Students - Courses I teach - Advising hours - Office hours - Past Students - Research Students have done
- #26: LAST SLIDE before “Organize” What changes could you make for a specific user? Would that help all users? With a “users first” mindset, how can you achieve your communication goals?
- #34: (Highlight boxes appear with one spacebar) Directory name should be “machine readable” and sort of “human readable” Page Title should be human readable, but short.
- #36: Deleting or changing its name causes a “page not found” message to appear instead.
- #38: (Highlight boxes appear with one spacebar) Directory name should be “machine readable” and sort of “human readable” Page Title should be human readable, but short.
- #39: URL parts = Filename & Directory Name Last bullet is an example “in the wild.”
- #40: Remember, both the file name and the directory name are those which are used in the URL. #3 wins – you might even rework the title of this page after shortening for the URL! Eliminated “annual” in the URL – if not contextual or if it’s necessary it might have to be added back.
- #41: You edit the and save the .pcf file. When you publish, the CMS creates a .pcf file.
- #43: Spend 5 minutes on this activity, 5 on break. OK if they don’t finish.
- #45: Those who have never been to the site before will use the navigation to browse your site Those who have been here before will use the navigation to quickly find what they need.
- #46: Good organization and categorization will help you make this more usable.
- #47: Dropdowns must link to # only – it’s a known bug, when linked otherwise it causes undesired behavior.
- #51: Highlight word(s) you want as the link Click the “Insert/Edit Link” button Use # as the link. (that’s it.)
- #52: These give the sidenav dropdowns an odd behavior.
- #53: Utilize dependency tags – create pages/sitesections before you add them to the sidenav
- #57: Accessible = not just those who can see, hear, walk, talk, use their limbs and ride a bike. I’m going to zip through some snippet examples, some of which are brand new as of January 2017.
- #58: You can also “weight” these out of 12 for the larger view 9 x 3
- #68: http://cms.msu.montana.edu/10/#oucampus/MSU-Bozeman/TestAdam/wysiwyg/%2Fjoseph-supination%2Fpeople.pcf/maincontent
- #75: Captions, audio descriptions if necessary
- #76: Captions, audio descriptions if necessary
- #78: Remember Helen, our test user.