
Aaron Russell
Web Systems Developer
We have tried to simplify the release cycle, due to this, this is a maintenance release of the site to help make the major releases of coursefinder line up with the January course creations. However, it doesn't mean it's a small release, though. There's plenty of changes to go at, so let's get to them!
I know what you're thinking... Didn't Snow White happen twice already? Shouldn't this be Jasmine? Well, no, we have changed the way the release cycles work to better line up the Coursefinder releases. So we have had 2 maintenance releases on the Recruitment site. That doesn't mean that we haven't been busy! I think this is the biggest change to the template since the release, and yet nothing has changed visually. You should feel that the site is generally quicker, especially when you initially load the page (First Contentful Paint). A lot of work has gone into the Critical CSS and upgrading the assets for HTTP/2 (I go into more detail later).
Students domain changes
Ready for the new student's domain to go live, there's a few new content types to be used by this domain and some general template changes.
Large Search Box
There is now a large search box that can be used to search the website from the homepage. This enables a user an easy way of searching for what they want as usually, users have a specific need when going to the student's domain.
New Nav and Footer for Students Domain
Due to current students not needing recruitment navigation, the links have changed when on the student's domain.
New Students Colour Scheme
To make the student's domain stand out, the template has changed colour from the usual blues and bright colours to grey and red.
Changes across all domains
New 2017 - Blogs Feed content type
This content type allows you to pull in a blog feed (the University blogs only). It's similar to the 2017 - News Feed content type in appearance. We will add documentation to the demo pages soon.
New 2017 - Issuu content type
A new content type was requested that allows you to embed an Issuu document into a page. All you need is the ID of the document in Issuu. We will add documentation to the demo pages soon.
2017 - News Archive now has images
Suggested by PR, the 2017 - News Archive content type now has an image for each story to add more context to the story and make it more visually appealing.
2017 - News Archive now has a search ability
Another suggestion by PR was to have the ability to search through old news stories on the 2017- News Archive content type.
Added sources to forms if they didn't come from a UTM
The forms should now report more data if they came from search, direct or by referral. This means we will have better-detailed data on who is converting (Remember view-through conversions, however).
Content types should have a bigger clickable area now
An excellent example of this would be 2017 - Primary Group Blocks where now you can click anywhere on the 2017 - Primary Group Block to get to the destination. We have also added a subtle hover effect to make it easier to understand that the whole block is a link.
When you hover over the Super Nav, it should now fade the page out
Hopefully, this will make using the Super Nav easier and makes it stand out when it's open. It should also help with a bug some users were experiencing where the menu was blocking the content they wanted to see as it's clearer that the Super Nav is open.
Order a Prospectus form should now show links to Subject Area pages rather than SAB embeds
Due to the SAB's been discontinued the Order a Prospectus form should now show an image and title related to the subjects the user has picked and a link to take them to the subject area page.
Removed our dependency on jQuery
We no longer need jQuery on our web pages! AngularJS (the main library we use) has jQlite built in which has some basic jQuery in (enough for our template to work). Any libraries that had dependencies on jQuery have either been depreciated or replaced. This includes Masonry which has been replaced with Macy.js and Bootstrap's JS library has been completely removed, to replace this a lot of the components we were using have been built in AngularJS such as the Modals*.
* Modal ID's can no longer contain any form of special character (including hyphens and underscores). Modal id's that start with a number also will NOT work.
Updated our code base to be better on HTTP/2
This means that the site should be faster as we have now split our JS and CSS up into separate files. To see why HTTP/2 will benefit us the Search Engine Land have a great article. The biggest reason this will help us is Multiplexing because you can now download multiple files at once we can spread out our CSS and JS files. An added benefit to this is that we can only serve the CSS and JS you need to render a page.
As an example, if you have a page with the following:
- 2017 - Content page title
- 2017 - Primary Group Block x3
- 2017 - Full-width video
You will only receive 6 CSS files:
- index.css (This is the main stylesheet for the site which has common styles used on every page such as the look of tables and headings)
- content-title.css (The styles for 2017 - Content page title)
- primary-group.css (The styles for 2017 - Primary group Block)
- content-video.css (The styles for 2017 - Full-width video)
- navbar.css (The styles for the navigation)
- footer.css (The styles for the footer)
T4 has played a big part in this, so it only uses the files needed to generate a page, this includes any external libraries needed to render the page. An example would be you only get the YouTube player CSS and JS when there's a YouTube embed on the page.
Critical CSS Improvements
Previously we have used a title and some content for the Critical CSS (If you don't know what Critical CSS is, check out this article which goes into more detail). We now generate a Critical CSS Stylesheet for every content type, then T4 outputs the CSS of the top 2 content types used on a page as Critical CSS. This means that the page should look as it should the moment the content loads in, and should stay that was as the regular Stylesheets load in. We have also changed the way the alternative stylesheets work, so when loading, you shouldn't see the alternative colours either.
General Code Improvements
Finally, we have just optimised and made improvements through the site to make it faster and better for the end user.
Questions and Problems
If you have any questions about the above or want to know more, email me a.russell@hud.ac.uk.
If you have any suggestions for new content types use out feature request tool.