Desktop Rendering

Phone Rendering

Tablet Rendering

When analysing my page on Expandable Drop-down Menus I noticed that the page header did not make sense when viewed on a mobile phone.

My reference to "page header" in this case is to the H3 tag in the main content of the page. The actual text appearing at the top of a page is determined by the template design.

For some reason the H3 tag is used in the template that I have adapted for use on this website. Normally the higher level header tag H1 would be used to create a structure Header Level Outline.

The template used for the Parish Council webpages uses the conventional H1 as the Page Header. The main reason for this is that I have too many pages on this website to make the change. In addition, the relvance of whether a screen-reader could interpret the content of a page is less important here as the screen-reader would not be able to read the Expandable Drop-downs (not that these are fully understood by the casual visitor).

Issues with Accessibility may also arise when the header tag is used inappropriately.

This also extended this to completely responsive content

This technique can also be exended to change the content on the page completely depending on the screen resolution.

I have played around on a few pages in hiding content in certain circumstances. For example, the Home page now suppresses ALL links when viewed on a phone (I may want to review this). In general external links are not really necessary on "mobile" renderings, see Lovejoy pages etc..