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.

Switching Modes

In TNG V10, you can switch between mobile mode. On desktop or laptop the switch link is not displayed. If you want to see how the mobile view displays on a desktop or laptop for testing, you can switch to the Mobile Mode by adding to the URL parameter: &sitever=mobile if parameters already exist for the URL ?sitever=mobile in no parameters currently exist for the URL standard mode 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. From the Mobile mode, you can switch back to the Standard Mode. If you are on a tablet device, the switch will set the cookie correctly for tablet mode, even though the display is standard mode.

Templates

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.

• Mobile Mode Menus
• 

  Hamburger Menu

• 

  Find Menu

• 

  Info Menu

• 

  Language Menu

• 

  Custom Menu

Tablet 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.

Overriding colors

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

#mast {
        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

.mhead li a {
    background-color: #D0E0F0;
    text-shadow: #bcbcbc 1px 1px 1px;
    color: #000099;
}

Screen Sizes

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

Related Links

Mobile Mode Display

Tuning for Mobile Display

Life Dates Mobile - adjusts the date displays for smart phones and tablets as an alternative to Life Dates Mod which always puts the birth and death dates on separate lines

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