Someone writing a checklist in a notebook

So you think you've finished...

Image of author

Aaron Russell

Web Systems Developer

A checklist of items we check, in order for you to better improve your web pages.

So you think you've finished your webpage, but hold your horses! Let's talk about some of the basic checks we have in place, alongside some of the more advanced.

Images

The first thing we check is images. A big part of our site is the Page Load Speed (PLS) and we have made lots of changes to the global templates in order to optimise this. Part of this is using the correct image sizes wherever possible. As Wayne explained in his Size Matters post. Image sizes make a lot of difference to the PLS and we want to make sure that our pages are fast. We are ahead of our competitors for PLS and we want to keep it that way, however images slow us down as they can easily be large files. Keeping images to a minimum size (Ideally under 150kb's which will keep the PLS down, especially as mostly there is no visible difference betweem a 1.5mb image and a 200kb image.

An easy rule of thumb for the images is as follows:

As big as possible (width and height) while being as small as possible (file size)

Webteam

Tools you can use

Here are some tools that may help you check images on your pages:

Broken links

We have all experienced it... You're browsing a site, and think "Ohh, I may be interested in that" and suddenly a wild 404 appears.

A screenshot of a browser showing a 404
We all hate 404's

This makes the experience of using the website frustrating and often leads to users leaving early and not going further into a subject. These are easily fixed and the impact to the end users is high so it's worth fixing them.

Tips and tricks

Tools you can use

Here are some tools you can use:

Styles

Inline styles

We check to make sure that no inline styles have been used on the page, as these are often badly optimised, don't work for mobile very well but the killer is that they don't work with our accessibility stylesheet among other reasons. We have a stylesheet which changes the colours and makes things better for users who are colourblind, partial sighted etc. Inline styles will overwrite these styles and make the experience a lot more difficult for users who require the use of the stylesheet. 

Using HTML to style elements

Another big reason for not using inline styles is validation. A lot of styles now have to be CSS rather than a HTML property to be valid. An example of this bad practice:

Code

The next check we do is check for any code that shouldn't be there. This is due to the abundance of code that is either, really old, insecure or uses languages which we don't support, this can include PHP and other languages. The reason for this is we are trying to keep the website as platform agnostic as possible. No PHP is used on the site and most of the functional elements on the website are done via JavaScript, this means that the site can easily be hosted on any web server. 

This is a departure from previous versions of the website where we were reliant on PHP, instead, all the server side code is kept in a separate folder from the T4 output and usually contains a JSON feed or similar for the JavaScript to process. (For instance the news stories)

Old content types

Another check is looking for content types that were not designed for the 2017 template. All the content types for the new template are prepended with the prefix 2017 - the reason for this is that the 2017 template was designed to be completely modular. This means that every content type can work independently and there is no need to include other content types or have wrapping code. This is true of the HTML, CSS and JS of each content type there where these separate bits of code or kept outside T4 and can be added and removed without affecting other content types.

However, this means that most of the old content types are expecting code to be on the template which is no longer there. A good example of this is content only. Previously the content only content type didn't have any wrapping code below are 2 example HTML segments, 1 the output from the old content only and 1 from the new:

Of the above examples, the first would go all the way to the left edge of the screen and wont have styling such as the University colours or fonts. The second example will be within the standard container and will have the Universities styles applied such as the colours and fonts.

The benefit of this is that when you add content types that span full width such as the 2017 - Full width video content type, they actually span full width of the website. This is because each content type has it's wrapping code built in. 

Another reason why we don't support them is that they don't meet the standards of the new template. The new template has however brought a lot of improvements which old content types can't benefit from.

However, if you feel that there is a content type that you're missing or that you can't replicate in the new template, please don't hesitate to contact the Web team to discuss it further.

Metadata

This is a big one, our internal search, Google, Bing and other search engines need to know what's on the page. To do this however it needs meta information, the minimum being: a meta description and meta keywords.

Every page should have this information, so here are the general requirements for those fields:

Both of these fields needs to be relevant to the page.

Google understands the topic of your page, so for instance if your page was trying to sell cheese and you go into detail about various cheeses on your page. You then think that this may also appeal to wine lovers and your keywords contain "wine tasting". Google will not rank for the keyword "wine tasting" as it's not relevant to the content on the page and anyone searching for wine tasting may be confused if a page about cheese showed on the results page.

Google ranks pages based on what it thinks the user wants to know, not what the page is trying to rank for

Webteam

So making your description and keywords relevant to the content on the page will increase visibility among search engines. 

A note for T4, however, is that these fields should be filled out in both the DC and regular version as this is used in different places. They can be the same however. 

Good Reads

Tools you can use

Here are some tools you can use:

Formatting from Microsoft

Copy and pasting into T4... That's a dangerous game you're playing right there!

I won't go into too much detail on this as this can be found on Wayne's post Copy and Paste.

When copying from any source external to T4 but mainly Microsoft Word (and other office products) formatting is sometimes copied, this can often cause code to appear on the page that shouldn't be there, colours of the copy changing or even copy not appearing at all. 

When copying into T4 you need use the Paste as text button which will paste it as plain text and remove any formatting added to the document. 

Copy from Word
Fig 1: Paste from Word button

For more information please read Wayne's post which goes into much more detail.

Guidelines

Not much more to go now, promise. 

One of the final checks to make sure that the page meets the site standards and guidelines. This includes things that are best practice such as:

We also check some more website specific things such as:

Things that should be checked that we currently don't:

This is not a definitive list as some of the items are a judgement call which leads me on nicely to...

The final check - A visual check

Sometimes the best check is looking at the content and realising that things can be done in a different way, whether it's a more visually appealing way or to make the page shorter.

Here's a couple of bad examples during a visual check:

TL;DR:

We've been through a lot together, but I think it's time we go our separate ways now, however here are a few takeaway points: