Thursday, September 28, 2023

Simulate and test D365 Commerce email layouts for multiple mobile devices with only Chrome and no need for installing addins

 I had a customer that needed to preview a Dynamics 365 email receipt and see what their HTML receipt will look like in multiple browsers, mobile devices, etc. 

Here is my suggestion on how to test it without buying a ton of different devices. I noticed there really wasn't any documentation on this associated with D365 so I'm doing this so I can just refer to this URL when teaching this to others. 

I recommend Chrome for this, but not saying another can't be used. Its just what I use. And I'm using Gmail as its what I had an example receipt for. 

Its important to note that no addins are needed and just Chrome, so most everyone can use this even when security locks down the Chrome store. 

  1. Open Chrome
  2. You'll want to see the webpage in mobile mode, not desktop mode, so navigate to m.gmail.com, not just gmail.com so you'll see the mobile layout. 
  3. Select the email example you want to test against
  4. Open the developer tools in Chrome (Figure 1) 
  5. Click on the 'toggle device toolbar' (Figure 2)
  6. Select the device to emulate (Figure 3)
  7. Test the website in portrait and landscape mode (Figure 4)
  8. If you dont see the device to emulate, you can select many more or create your own (Figure 5)

Figure 1 - Developer Tools in chrome


Figure 2 - Toggle Device Toolbar

Figure 3 - select what device to simulate

Figure 4 - View the website on the target device emulation in portrait or landscape mode

Figure 5 - Simulate all sorts of devices