By Jonathan Rodriguez
Are you finding it hard to provide your users with a touch-friendly option on 2-in-1 devices? This is a common problem related to Web-based UIs, because most browsers do not easily reveal the current state of the OS, between desktop and tablet mode. So you are left with the agonizing questions: How do I find out? And after I find out, what do I do to make my UI touch-friendly? Read on for some suggestions.
One of the things you will encounter while making your Web-based UI touch-friendly, is how hard this can be to execute once you take into account the many Web browsers through which your UI may be rendered (I apologize for the irony, there – it was intended.) But why is it so hard to implement what should be such a simple option? And if it is so hard, what is the simplest option?
One of the reasons why you may be struggling to deploy a Web-based, touch-friendly option has its roots in the past. If you are familiar with the original Nintendo* gaming console and Michael Jackson’s Billie Jean song, you are probably old enough to remember how chaotic technology was in the mid-'90's. Back then, Web browsers allowed many questionable things to happen, “…thereby, making the world a [worse] place.” (a reference to the opposite of that statement, which many startups claim to be doing. I watch Silicon Valley. L.O.L.)
But seriously, the Internet was a dangerous place back then. Computer systems could get hacked due to the most illogical Web browser technicalities.
But we learned and evolved. And as a result of that dark past, these days, for security purposes, Web browsers are much more limiting. Additionally, some codes are simply not supported by some of the rendering engines (which execute the actual rendering of the pages within Web browsers), also with security in mind. Have you ever tried a piece of code that worked perfectly fine in one browser, but not in another? Now you get the gist.
Now, here comes the good stuff...
Due to the aforementioned Web browser limitations, when it comes to Web-based, touch-friendly development, almost every developer tends to resort to an approach that I call “Mode-Whispering.” Mode-Whispering refers to any method used to "fool" certain Web browsers into giving away the current state (Desktop or Tablet mode) of the OS, indirectly.
While the browser is not technically “whispering” anything to anybody, the code does the “whispering” to another section within itself. Most of these Mode-Whispering codes involve placing JavaScript* codes that are able to count the available pixels (within the screen) in order to determine whether a scroll bar is present within the Web browser. If it is, the code then uses an algorithm to determine the size of that scroll bar. This approach gracefully determines the OS state between the Desktop and Tablet modes (because Desktop and Tablet modes generate different sizes of scroll bars.)
While Mode-Whispering can work (mostly in Microsoft Edge*), I strongly recommend against using this approach. First, Mode-Whispering will not work unless your page is long enough to require a scroll bar from the Web browser (Web browsers will only show a scroll-bar if it is necessary.) But the main issue with Mode-Whispering is that your UI will have a piece of code (and icon/link) that will work in some browsers, but not in many others. Which could make your UI and user experience seem sub-par.
Since choosing the experience for your users, automatically, is not currently a viable or reliable option from a Web-based UI, why not tap into the human element and use it as your best ally? Simply let your users decide whether they want a touch-friendly experience in the first place. I call this approach “Manual-Moding.”
If you think about it, Manual-Moding makes sense. Unlike Mode-Whispering (which is done secretly in the background—deceitfully, at least from the Web browser’s perspective), Manual-Moding consists of a simple (straightforward) user-friendly option, preferably a button that your users can click, based on their preferences. This is the way the BitMar* premium TV platform deploys its touch-friendly option. Visit http://BitMar.com to see the Web-based app in action. (Full disclosure: I am the designer and developer behind BitMar.)
In order to deploy a Manual-Moding option, you will need to frame the top portion of your UI (using either an iFrame or Frameset) and have two, distinct top-section pages: A Desktop and a Touch version—each with different-size images and/or links. Obviously, the larger image/font version is recommended for Touch mode. And the smaller-size version is for Desktop mode. Both pages will have to inter-link (link to each other) within the same frame, preferably using the same or similar icon/s (just as you can see happening on http://BitMar.com.)
Are there any disadvantages to implementing Manual-Moding? You bet—it’s not a perfect world. Although supported by every major Web browser (including mobile devices), Framesets are officially not part of the HTML5 standard (which is, arguably, the future of websites and Web-based apps.) However, unlike Framesets, iFrames are included in the standard. But HTML5-friendly iFrames may disable scripts and other page functionality. Therefore, it is recommended that you use Manual-Moding only within the top and side portions of your UI (that is, for the navigation menu and/or any other static menus and options). Otherwise, you risk having a UI that may not work properly in some Web browsers (because in the HTML5 standard, most Web browsers do not allow scripts to execute from any page that is rendered through an iFrame.) In the case of BitMar, the execution consists of two PHP pages, inter-linking, within the same frame. But you can do this with any type of page (.htm, .html, .asp, .php, and so on).
So, just make the "correct" choice (based on your situation), or be open to updating your UI, should the Frameset officially die out. But, whatever the case, at least now you have two options. And one of them provides your users a universal touch-switch option that will work in any environment.
Acknowledgements
About the Author and Company
Jonathan Rodriguez is the founder and CEO of BitMar Networks (the firm behind the BitMar premium TV platform.) BitMar is an Internet TV portal that provides access to millions of free, premium TV shows and movies (mostly in HD), over 200,000 channels, live radio and millions of songs (all in one single place, from safe, legal sources.) BitMar could be your free and legal alternative to expensive TV service, Netflix, Hulu, and so on. You may learn more at: http://BitMar.com
The BitMar name is a combination of "bit" (the basic unit of information in computing and digital communications) and "mar" (a synonym for "break", "impair" and "disfigure"). The adaptation of "mar" in the BitMar context reflects disruption.