Skip to main content

New Courses Designs- 2015


Demo is the available at Marjon > Home > Courses (New Design) Branch.

New 'Course Content 2015' content type

Course Content 2015 is the main content type which has the text/new content layout, holds the main html for the Course Content page. 



The Graduate and Student Profiles are taken from the Content type Student/Graduate Profile. T4 have created two sections. One for adding Graduate profiles and another section for Students Profiles. The the Course Content 2015 uses two Navigation objects - Keyword Seach for each of the different profiles sections. Uses the Course List as the keyword to match.

Icon Bar - T4 didn’t implement all three variations for this due to time constraint. Either Image or Percentage should be used for the first two icons. I’ve left the 3rd icon an optional field so only two can may be displayed.

Related Courses - This uses the “Related Course” and “Current Course” elements to pull in related courses, they both use the Courses list. The Courses Content 2015 has an alternative layout called text/course-related. 

Personal Development Profile (already existing content type), created a new page layout: course-content, used in the Course Leaders section (Nav Object: #411)


New 'Course Slide' content type


Used for adding images and embedding videos to the carousel on top of the course page


New 'Student/Graduate Profile' content type

Two content layouts for student and graduate profiles.


Sample Pages for reference - set up by T4 Developer






Navigation Objects
●     Course Sliders (#408) Related Content Advanced
●     Course - Alumni Profile (#410) Keyword search
●     Course - Student Profile (#409) Keyword search
●     Course Leaders Profiles (#411) Keyword Search

Lists
●     Courses CSS Departments 2015 - Used in Course Content to change the css theme.
●     Course Departments 2015
●     Courses List - Used in Related Courses in the Course Content content Type

Media Library
All “Course Details” Page media has been put into “Course Details” category in the media Library.

This includes CSS, JavaScript, Fonts, Images. 

Other bits (jQuery in footer)
●     Page Title element is added as an attribute to the main page h1 (h1). jQuery then is used to check if this attribute is populated and replaces the page “title” tag with this new value.
●     Page Themes - there are multiple options for changing the page theme in the css. This can be changed by selecting a different theme in the “Course Style Theme” Element. This element is added as an attribute to the main page h1 (h1). jQuery then checks this and adds the value to the body tag as a class.
Page Layouts
●     Course Details 2015

When development branch is moved, may need to update the navigation objects to point to the updated branch.


Meta Tags output:




Google Analytic Code has been added to all interactions:


APPLY - onClick="ga('send', 'event', 'Course Details Page','<t4 type='title' />', 'Apply Button') 

APPLY VIA CLEARING - onClick="ga('send', 'event', 'Course Details Page','<t4 type='title' />', 'Apply Via Clearing Button')

Shared Module 1 - onClick="ga('send', 'event', 'Course Details Page','<t4 type='title' />', 'Shared Module - &Value')

Shared Module 2 - onClick="ga('send', 'event', 'Course Details Page','<t4 type='title' />', 'Shared Module - &Value')

Shared Module 3 - onClick="ga('send', 'event', 'Course Details Page','<t4 type='title' />', 'Shared Module - &Value')

Shared Module 4 - onClick="ga('send', 'event', 'Course Details Page','<t4 type='title' />', 'Shared Module - &Value')

Course Leader 1 - onClick="ga('send', 'event', 'Course Details Page','<t4 type='title' />', 'Course Leader - &Value')

Course Leader 2 - onClick="ga('send', 'event', 'Course Details Page','<t4 type='title' />', 'Course Leader - &Value')

Course Leader 3 - onClick="ga('send', 'event', 'Course Details Page','<t4 type='title' />', 'Course Leader - &Value')

Course Leader 4 - onClick="ga('send', 'event', 'Course Details Page','<t4 type='title' />', 'Course Leader - &Value')

Funding Section Link - onClick="ga('send', 'event', 'Course Details Page','<t4 type='title' />', 'Funding Link')

Related Course - onClick="ga('send', 'event', 'Course Details Page','<t4 type='title' />', 'Related Course -&Value')

Order a Prospectus - onClick="ga('send', 'event', 'Course Details Page','<t4 type='title' />', 'Order a Prospectus')

Book an open day - onClick="ga('send', 'event', 'Course Details Page','<t4 type='title' />', 'Book an Open Day')

Newletter Sign Up - onClick="ga('send', 'event', 'Course Details Page','<t4 type='title' />', 'Newletter Sign Up')

Twitter  - onClick="ga('send', 'event', 'Course Details Page','<t4 type='title' />', 'Twitter')

Facebook - - onClick="ga('send', 'event', 'Course Details Page','<t4 type='title' />', 'Facebook')

Instagram - - onClick="ga('send', 'event', 'Course Details Page','<t4 type='title' />', 'Instagram')

Links Used


Apply - http://www.marjon.ac.uk/courses/applying/
Apply Via Clearing - http://www.marjon.ac.uk/clearing/
Funding Section Link - http://www.marjon.ac.uk/courses/fees-and-funding/
Order a Prospectus - http://www.marjon.ac.uk/prospectus-request/
Book an open day - http://www.marjon.ac.uk/courses/open-days/
Newletter Sign Up - ?
Twitter - https://twitter.com/marjonuni
Facebook - https://www.facebook.com/MarjonUni
Instagram - https://instagram.com/marjonplymouth










Comments

Post a Comment

Popular posts from this blog

December 2018 Subject Area Page - how its built in SiteManager

Model Page https://t4.net.marjon.ac.uk/webdev/dec-2018-new-designs/subject-area-page/ Page Layout The Subject area page uses the '2018 Subject Area' page layout Content  There are 14 pieces of content that make up the Subject Area Page as follows: 1.    2018 Dual Header Block - content type. Adds an information block and an image to the top of the page. Select 'Show the Social Media Icons on this slider' to show social media icons on page.  Images are 1000 x 600. 2.    2018 Who What Why Block - content type. Adds 3 columns of information to page.  3.    2018 CTA Block - content type. Adds a single call to action block to page.  4.    Output courses by level and subject - content type. Displayed courses content by both level and the subject as they are tagged as in the course content 2015 content type (x2 to display both undergrad an...
Post a Comment
Read more

2016 Website Designs - General Page - how its built

Model Page http://beta/webdev/2016-content/general/ Page Layout The General page uses the '2016 Inner Page' layout Content  There are 5 pieces of content that make up the General page as follows: 1, 2 & 3 (must be in sequence to appear in Media Slider but can appear anywhere on a page) -  Media Slider content type Example Image (must be height of 578px) Example Embedded Video 4.  Content -  ' Two Column General Content'  content type 5.  collapsible text - ' Two Column Collapsible General Content'  content type
Post a Comment
Read more

2016 Website Designs - Student Life - how its built

Model Page http://beta/webdev/2016-content/studentlife/ Page Layout The Student Life page uses the '2016 Landing Page' layout Content  There are 5 pieces of content that make up the Student Life page as follows: 1. Static Image -  ' Static Image'  content type -    the images from the media library (need to be 1440px x 900px) 2. text title -  - ' Textual Section Title ' content type 3.  Two Column General Content -  ' Two Column General Content'  content type 4. 3 signpost -  Three Signpost Box  content type -    the images are used are from the media library (need to be 480px x 480px) 5. 2 box signpost -  Two Signpost Box  content type    -  the images from the media library (need to be 1440px x 900px)
Post a Comment
Read more