PAGEANT - "Education is the future"
A Responsive Website
Our website is changing ... but not too much!
We have made a start on making our website easier to use on smartphones by converting over 20 of our top level and most used pages to a responsive format. These have been uploaded today (19 October 2015). You can spot our responsive pages because they have a fixed menu across the top of the page, which stays put as you scroll down. our responsive pages so far are:
The test versions of above pages have been deleted from the /rwd folder and will now placed in the root folder..
What are the changes?
As there are lots of older pages which won't be converted. we wanted the responsive pages to match the look and style of the older ones. We don't want too much of a visual shock when moving between old and new pages. The main features of the responsive pages are:
- A fixed menu bar across the top of the window, which stays put as you scroll down. This contains the same links as the main menu and the 'float down' menu in original pages.
- On smartphones, this menu bar is hidden, but is displayed as a vertical drop down when the Menu link is clicked.
- Menu 2 replaces the second float down menu which some pages have, and also tables of links at the top of some pages. Menu 2 is normally hidden and appears as a drop down when Menu 2 is clicked.
- Both menus will be available no matter how far you have scrolled down the page, so there is no longer any need for float down menus.
- Back to top We have eliminated all 'back to top' links which are scattered down the length of long pages. Instead there is either a Top link at the top left corner, or this link is at the top of Menu 2.
- Searching There is no longer a search box as part of the main menu. Searching isn't done that often, and there just isn't room on a smartphone screen. Instead clicking the search link takes you to a search page, with the search box waiting for your input. Sorry, but if you want to search the website, there is now one extra click!
- Text size Smartphones don't just have smaller screens, these screens also have a higher pixel density. So when viewed on small screens, our text gets (pixel) bigger to make it more readable.
- Photos In our old pages, we often arrange photos two or three abreast. On our responsive pages, we stick to a similar arrangement for wide screens, but with decreasing screen width, this changes to pairs or single photos which fit into the reduced page width. There are also a few larger images on the website. These now shrink to fit smaller screens.
Why are we doing this?
In May 2015, mobile access to the web crossed the 50% boundary, and now more people access the web on mobile devices than on desktops or laptops. Google is now promoting mobile web access, by giving extra prominence in search results to sites which are mobile friendly. We are told that this will only affect searches done from mobile devices, but we know that the current Pageant website is not mobile friendly, and we have already seen a lower position in search results.
Smartphone users panel
We have used a panel of smartphone users to provide feedback during the development of our responsive web pages. Thanks to everyone who gave us their feedback, and particularly to Daniel Mannion.