Mobile Mode Display
TNG V10 adds the capability to switch to Mobile mode
- Item 29 Mobile: Each site will now be able to detect if the user is using a mobile device. If a mobile device is detected, a different heading and menu system will be shown at the top of each page. A link at the bottom of each page will still allow each user to manually select either the mobile or standard site.
- Item 30 Mobile: A new, separate style sheet (tngmobile.css) has been added to the main css folder and to each template css folder. It will only be loaded and used when the mobile site is active.
- Item 31 Mobile: Drag/drop and some other interactions did not work with touch events (fixed).
- Item 53 Responsive Design: Several TNG pages (including Surnames, Places and Login) have been reworked to allow them to display better on smaller devices.
Mobile Mode Display is automatically detected on mobile devices. Tablets and iPads, including the mini iPad, display in standard mode but allow a switch to mobile mode.
In TNG V10, you can switch between
NOTE: The template home page, header and footer files have been updated to include mobile support. In order to experience those features on previously modified templates, you will need to incorporate the TNG V10 changes to these files in your previously modified files.
Menu Bar Options
What happened to Menu Bar option displayed in Standard Mode, when I switched to Mobile Mode?
The menu bar options from the standard mode display are available from the "hamburger" icon in the top left. You need to click the "hamburger" icon in the top left to get the menu bar options from the standard mode display.
TNG does not provide a Tablet mode, but does detect when a tablet is being used. The Tablet display is the Standard mode and provides a switch to Mobile Mode.
A switch from Mobile mode back to Standard on a tablet device will set the site version as tablet.
Extensions to TNG like the Census Plus International mod do provide a display which is used for the both the Mobile and Tablet display. The TNG look and feel for the tablet will of course be the Standard mode display.
To override the colors in the tngmobile.css, you need to code something like the following in your template mytngstyle.css
- for the Mobile Menu bar, from line 8 of the tngmobile.css file
background: linear-gradient(to bottom, #333399 0%, #222288 100%);
Change the two colours to change the starting and ending colour of the gradient on the top bar.
- for the mobile menu pull downs
text-shadow: #bcbcbc 1px 1px 1px;
The iOS Resolution Quick Reference site provides the sizes used on the Apple devices.
You can use the Web Developer Resize capability to quickly see how your site will display on mobile devices using the following sizes.
Testing for Mobile
However, it is probably better to test using mobile device emulators
iPad Peek Displays
The iPad Peek allows you to view what your site will look like on the iPad. However, it will not automatically detect that you are on a mobile device, so the screen displayed is
whereas if you can switch to mobile mode, the screen display is
mini iPad Displays
The following screens were captured on the mini iPad.
Mobile Mode screen capture.
Standard Mode screen capture.
Resized window on desktop
Likewise, versus on desktop using a resized screen
Mobile Mode Display
Mobile Media - adjusts the Image display when not using the Image Viewer, suppresses the Slide Show on Show Media for smart phones and adjusts the Slide Show on tablets
Mobile Individual Page Map - adjusts the Google Event Map on smart phones and tablets
Mobile Site Enhancements - several adjustments for smart phones and tablets
Mobile Site No Previews - eliminates Image, Person, and Family previews for smart phones
Responsive Tables - adjusts TNG table displays based on screen widths