Design decisions 2023
- Background colour #f4f6f8, although we may want to have white backgrounds eg in some widgets or tables
- new design, is more white space eg home page more blocky - less borders, more white space
- generally line height is a bit bigger, double borders are now 2px borders
- calendar tagging is different (one letter tags)
- calendar is now 12 hr clock (note enter as 24 hr, but display as 12 hr!)
Things to watch out for
- things ckeditor break - this includes iframe & audio controls (we need a fix) 32681, some attributes are removed (this includes older style attributes eg table widths, use style to set widths)
- tables inside tables - may need to set class outer, in the outer table, this is because padding has been added, to improve the layout of tables (and text not so close to edge)
- thumbnails still can't be transparent images
- use transparent images where you need (or if you must use background colours f4f6f8, white tables are #fefefe)
- tagging in calendar on the event name [J] for SJC, [H] Heckfield, [M] Mattingley, [R] Rotherwick and [O] for Online - suggest use colours {C} Hook, {P} HMT, {O} Children, {Y} Online, {G} Garden
- consider sizes of tables, images, iframes - maybe % or set max width (not use 724 for full width)
- images may need to have. object-fit: cover; set if the border doesn't fit the image (or try fixing the sizes)
- rows of images - describe how to do it here
- tables for layout (eg to make a row of images) are not ideal - use flex
- navigation - in testing, having too great a depth of nav seems to cause issues. Consider grouping more pages together in a folder, and reducing number of levels.
Need to plan Upgrade
When we publish a designbuilder design, there is no way back. So don't publish design until sure (yes, acknowledge hard to test).
When we upgrade, we will need to change lots of pages - so may need an order. Will also need to change calendar tagging.
Suggest, we upgrade at start of week, and aim to fix forward. Can copy pretty much from demo site. Remember, Save doesn't always save, and are changing values one by one in the GUI. We'll need to be mindful of some things that have changed (and are not in DB, but we did previously).
Home Page
Responsive design, with rows of containers. Not as flexible as we'd like - select S, M, L - the sliding scales can't be changed. You can have a row of 1, 2, 3 widgets in a container. Each widget and container can be configured - for example background colour. Images, set to contain (so widget will resize to contain image), you can set a min size (height), and for the container you are setting a max size, so for example 1400 is the max size, and your images get scaled to fit. The link dialog is better from a text widget, but if you know what you are doing you can add downloads to an image by entering:
/content/pages/documents/filename to the link.
CSS
Because of issues with CSS changes getting reset when switching in and out of GUI/CSS mode, I have put a block of CSS in the heading. These are changes we'll need to make once the DB is working properly.
There is a class AnnaNote defined in the template, this can turn notes on and off easily, and has the ability to show us where our changes are located within the page (to make it easier to debug the CSS via a browser).
Google Analytics
Google Analytics are changing - the old design tools only support the old tagging - our code is UA-164154776-1 (this is being turned off on 1st Jul 2023)
From March onwards, Google analytics has been upgraded to Google Analytics 4, and our tag is G-11RD5FTG8Y
Google Analytics URL: https://analytics.google.com/analytics/web/#/report-home/a164154776w229692601p216283222
In Global Office, click on settings, and then options - there is a google analytics field.
You will probably want to clear browser cache, and try and load a few pages. As there is the ability to look at realtime data, you may see whether your connections are successful within a few minutes (although it may take a while for the changes to come into effect).
