31 Jan Website Use on Small Devices
We have made another change to the website layout with the goal of making the site still more friendly to small screen devices. The top menu looks slightly different. The menu structure and links are the same, but in the redesign is presented using different software that adapts to small screen devices. You may have noticed of late that many websites are using the ≡ symbol to indicate that a menu is available. Our new menu software uses the same layout as the old, with slightly different styling in larger-screen devices.
Here’s the new look on a full-size screen:
NOTE: You can always click the belties logo to return to the Home Page.
Small-Screen Usage
On smaller screens the little symbol ≡ is placed in the upper right corner of the browser window. Tapping this icon causes the top menu to appear, but laid out vertically. The horizontal items with big plus signs have sub-menus available, and you can see these by touching the plus sign. These concepts are shown on the left: To open the menu, touch the ≡ symbol To close the menu, touch the × symbol To open a sub-menu, touch one of the + symbols. To get to the home page touch the beltie logo. |
Two changes were made to make the left “stack” (login/out, weather, etc.) consume less screen space on small screens:
- Hiding it except when needed, and
- Moving the Coming Events.
At left you see a small piece of the upper left corner of an Android phone screen. Outlined in red is the ≡ symbol we saw above. Just under the notice is is the highlighted warning that the visitor is not logged into the website. When you tap the ≡ symbol the login and other left stack material is revealed, and the content that had been at the top of the screen is pushed down to make room for it. You can always scroll down to see the formerly top material.
The image at right shows the revealed left stack, including the login dialog. Below the login dialog you will find the weather widget, the font-size changer and the website search box.
After you login, logout, change the font size or enter a search term, you can click the × symbol to hide the left stack again, and if you’ve logged-in, the login warning will be gone.
On mid-size screens, the left stack may not be hidden. Also note that on most pages of the website the left stack was and is never shown, so you won’t see the ≡ symbol on most website pages.
Where did the Coming Events go? We covered this in an earler article linked here on the Features page.
If you experience problems using the new features, especially the left stack’s appearance and disappearance, please try refreshing the page you are trying to view, and/or rotating your device by 90° before going into a panic. We are aware that this feature may act oddly on some devices under certain circumstances, and are working to correct these issues as fast as we can.