fbpx

Why Does My Website Look Different On a Kiosk?

So you’ve decided to put your gorgeous website on a kiosk to make it available to the public. It looks so touch friendly and easy to use in your web browser and then you load it on your kiosk and it looks like BLAH!   What happened to your once immaculate website? It still looks fine when you view it from the web browser on your computer but it looks like a big mess on your kiosk.

If you’ve found that your website looks different on a kiosk than in your web browser it probably has to do with web browser compatibility and can easily be fixed. Before I get into the fix I’m going to explain the reason for the issue. As newer versions of web browsers are released you may find that your website looks different on the latest web browsers. This is not so much an issue when switching between “contemporary” web browsers because they adhere to stricter standards but if you’re used to seeing your website in say Internet Explorer 8 and you suddenly decide to upgrade to Internet Explorer 11 your website will likely look very different and not for the better. This is because standards for rendering websites evolves and becomes more uniform between web browsers which is why your once beautiful website will now look less than beautiful.

Let’s assume you’re kiosk is running the latest version of your web browser and it’s not practical or possible to downgrade the web browser on your kiosk to an older version. Not a problem, the good news is that many newer web browsers give you the ability to emulate older web browsers because they realize that your website may have been coded to an older standard. If you happen to be using our kiosk software then it’s simply a matter of changing one easy setting otherwise it’s a little more involved.  First I’ll show you how to make the change in KioskSimple.

Option 1: Configuring the web browser emulation mode from KioskSimple

  1. Run the KioskSimple Configuration Application
  2. Navigate to Browser -> Browser Settings
  3. Try changing the Emulation Mode setting to an older web browser
  4. Save your settings and launch KioskSimple in Test ModeKS Browser Emulation

If you’re site looks perfect again then you’re all done.  If not then repeat the steps above and try an even older web browser until it looks perfect.  That’s it you’re done!

Option 2 (if you’re not using KioskSimple): Configuring the web browser emulation mode from Internet Explorer 11

Follow these easy steps based on a simple tutorial from Microsoft to emulate older browsers

  1. Run Internet Explorer
  2. Press F12
  3. Scroll down on the left until you’re at the “Emulation” menu
  4. Try changing the Document mode and User agent strings to an older web browserIE11 Browser Emulation

If you attempt to emulate an older web browser and your site looks perfect again then you know you’re on the right track. You’ll find that if you restart your web browser your settings have not been saved because Microsoft didn’t see fit to support that. Short of actually fixing your website to adhere to the current standards you can alternatively take the shortcut of modifying your website to define the document compatibility mode.

Conclusion 

As you can see, by using KioskSimple to emulate an older web browser it eliminates the need to make your website adhere to the latest standards.  While we encourage everyone to keep their websites up to date on the latest HTML and CSS standards it’s not always practical so we wanted to provide you with an easy alternative.  Our goal with KioskSimple is to make it as simple as possible to put your website on a kiosk.

Andrew Savala
Follow me

Author: Andrew Savala

Andrew Savala is the CEO of RedSwimmer, with a background in designing and deploying complex payment kiosk systems. Andrew offers high-value, strategic consulting services to companies looking to develop their payment kiosks.

WordPress PopUp Plugin