The development of a new design/template

This is going on quite well. The key is to make things accessible and look reasonable on a mobile phone.

There are two versions of this new design, the index page will have multiple dropdown/expandable top bar menus. The subpages only have the one expandable section but this can be added to as needed.

I want to have the menu on the left (the overlay) all with links to pages with the new template. That way I can undate the index on the "live" site. I don't want to convert too many pages until I get the templates all singing on the same songsheet.

Page file names

In general, the filenames will have a _3.html suffix. These files will be based on the old exisitng files with the suffix ammended.

Google tracking code

While I am not using this facility that much these days I think that I may have got the tracking code "mangled" of bit. As I was adding tracking to my Parish Council pages I started to look at Google Analytics 4 tracking. I was using the older version before and I think that the tracking code snippet is different. The tracking ID (UA-936952-6) was used on my original pages and the PC ones use a different ID (G-5TCLGX6SSS).

The proof will be in the pudding when I actually start trying to use GA again.

SEO adding to new pages

Now that I have a new design I need to create pages for tbose pages that are being found in searches (impressions).

I have had some success with this, perhaps too successful!

The SEO that needs to be added in most cases is an appropriate TITLE tag and the submission of the page (URL) to Google. I addition I want to add the "Your name/company is found in a search result" to the new page template.

Behaviour on iPad

As the iPad and iOS does not have the same mouse event capturing the response of the expandable menu is different.

This behaviour should be seen on this page as it relates to the clicking of the page field when an expandable menu is expanded. On a computer screen the expandable menu (a modal) collapses when the focus (cursor) is moved off the menu. On the iPad the menu stays displayed unless the selction from that menu moves the focus off the menu.

This anomoly is particuarly noticable on the Listed Buildings page as the expandable menu is only linking to sections of the page and not new pages.

Actually, this is probably a feature of the w3-dropdown and w3-panel classes. I am using these classes in the fixed top/expandable menu but I have not really analysed it.

General Responsive behaviour

I have now worked out how to display menus and headers for the three modes, Mobile (Phone), Tablet and Computer (large).

For example, the main (index) page has mulitiple expandable dropdown menus on a large screen. These menus are hidden on medium screens and the mobile screen has none. The sidebar (overlay) menu can now be opened from the medium (tablet) display and the majoritity pages have a limited number of expandable dropdown.