Skip to main content

Touchscreen Support for Websites

Check touchscreen support details for McGraw Hill websites.

Tags

Overview

Early touchscreen devices – such as Apple iPads and Android tablets - were designed to mirror or complement familiar input from a mouse or touchpad.  On these devices, touch is tightly integrated with the hardware, system, and apps, including browsers.

Newer touch interfaces were developed for:

  • Interactive Whiteboards – Large displays either with an embedded device or connected to a host computer, allowing direct interaction with a finger or pen.  Gesture support can vary by hardware and software generations within the same product line.  Early education-focused brands included SMART Tech and Promethean.
  • Hybrid Devices – Laptops with a touchscreen and the ability to convert to a tablet (separate screen, or flip/rotate).  Common devices include Chromebook Touch and Windows Surface.

Because newer devices add touch interactivity to multiple environments, they have greater dependence on intermediate layers:

  • The Hardware must send identifiable signals to the system.
  • The Host System must accept input through various drivers and display modes.
  • The Browser must group and standardize input from different sources.
  • The Website must define a meaningful response for each type of input.

At any layer, input can be intercepted, redefined or ignored, preventing a website from receiving all input and responding as the user might expect.1  For example, hardware may have a pre-defined gesture to start calibration, or be paired with software to display custom controls, interpret multitouch, or receive remote input (“clickers”).

Over time, manufacturers will likely increase standardization, allowing software and websites to deliver more predictable and intuitive response.  In the short term, the settings and practices on the following pages may improve responsiveness sooner.

Suggestions for Most Devices

If supported, a touchpad or external mouse may provide an immediate workaround and can help identify which interactions a website supports.
When touch input is recognized everywhere but, in the browser, or on certain websites, response can likely be improved through browser settings.  In late 2018, browsers began adopting common standards to classify and respond to touch input, with additional refinements over time.  However, since these are relatively new, they may also provide options to change interpretation, or to return to a mode that is better supported by certain hardware and websites.  Settings are often associated to keywords like “touch” and “pointer”, and are found in similar areas for browsers with the same “engine”:

 



Suggestions for Interactive Whiteboards

Here are some manufacturer “best practices” that seem to apply across the industry:

  1. Use approved and preferred cabling. (e.g. Certified by manufacturer or industry, prefer digital over analog.)
  2. Keep the driver and software up to date.
  3. When redundant or irrelevant to an application or website’s functions, disable:
    • Multi-touch.
    • Remote input.  (e.g. Clickers, complex remotes, mobile apps.)
    • Manufacturer tools.  (e.g. Overlay markup controls, software integrations.)
  4. Use the whiteboard’s native resolution.
  5. When calibration is required, use the finest option available.

Websites are increasingly designed to adapt to the user’s screen size and orientation.  When a touchscreen mirrors a built-in screen, the browser may only recognize the built-in screen, and not pass the touchscreen’s resolution and independent controls to the website.  To focus website response on the touchscreen, use the steps for your chosen display mode:
 

  • In Extended mode, move the desired browser window to the interactive whiteboard.  This also allows non-presentation items (such as a gradebook) to be kept on other screens.
  • In Mirror mode, set the primary display to the interactive whiteboard, instead of to the standard screen.  This will bias scaling and response to the whiteboard, rather than to the host and its other attached input devices.

After switching display settings, you may also need to:

  • Restart the browser so it can recognize the new configuration.
  • Tell the system to prioritize the whiteboard for touch input.


Chrome frequently updates flag options, but the following may be useful in some environments or through command-line:

  • chrome://flags/#touch-events – AUTOMATIC (the default) lets Chrome adapt to external hardware, but only if attached before launching the Chrome application.  Other options make response more predictable through hardware changes.  You should find the best fit for your environment, but anecdotally, ENABLED is most common, while DISABLED helps with some older devices.
  • chrome://flags/#enable-touch-drag-drop – ENABLED may allow drag gestures that were otherwise misinterpreted or ignored.
  • chrome://flags/#disable-touch-adjustment – DISABLED may increase sensitivity to smaller gestures.
 

Suggestions for Hybrid Devices

Hybrid manufacturers emphasize certain practices in their documentation, and suggestions from one manufacturer often apply to others:

 
  1. Keep the driver and software up to date.
  2. Use a “native” resolution.  Avoid zooming or scaling, and display as an extended monitor instead of mirroring.
  3. Apply the finest calibration.
  4. When redundant or irrelevant to an application or website’s functions, disable:

                    o Multi-touch.
                    o Manufacturer tools. (e.g. Overlay markup controls, software integrations.)

After switching display settings, you may also need to:

  • Restart the browser so it can recognize the new configuration.
  • Tell the system to prioritize the right screen for touch input.
 

Many hybrids convert to a tablet or other touch-focused mode through a physical reconfiguration - e.g. when the keyboard detaches or flips under screen.  The system may also include controls, as Microsoft explains here for Windows 10:

With multiple displays, the system can misidentify which should receive touch, as discussed for Windows 10 on this Microsoft forum:

 

On particular hybrid devices, the Chrome browser will provide special flags, such as:

  • chrome://flags/#force-tablet-mode – If Chrome offers this, the TABLET option may improve touch recognition while in laptop mode.
  • chrome://flags/#show-touch-hud – If Chrome offers this, drawing motions may just open a contextual menu.  This is part of the hardware and cannot be changed, but the ENABLED option will bring up an overlay for temporary drawings.  Pressing the Ctrl-Opt-i keys will cycle between “drawing mode”, “location mode”, and neither.

 

Help us improve!

Let us know how we can improve our support information by providing feedback in this short survey.

Top