Site Studio and Server Side IdocScript Browser Detection

By: Rick Katka - Application Consultant

Browser Detection for SiteStudio Sites

Have you ever wanted to switch subtemplates or control content based on your user’s browser?  How about lightening the load for mobile users?  Browser detection isn't new but with more and more users moving towards viewing websites on mobile devices, web developers really need to think more about making concessions for this growing demographic.  One thing we wanted to do for a recent client was swap out the navigation and scripts for mobile users for a large site.  To do so we decided to start with an open source mobile phone detection site called:  http://detectmobilebrowsers.com/ and modified the code to work with IdocScript. Most of the complicated regex is handled for you from the scripts provided by http://detectmobilebrowsers.com/.  There are a few places we considered modifying, mostly around the iPhone, iPod and iPad logic.  I've bolded it in the code below.  At one point we removed iPad’s from being considered a mobile device, since they can display desktop versions of sites without really any changes required.

Our resulting subtemplate code ended up looking something like this:
<!--$ua = strLower(HTTP_USER_AGENT) -->

<!--$isMobile = "false"-->

<!--$if regexMatches(ua, ".*(android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino).*")

or

regexMatches(strSubstring(ua,0,4),("1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-"))-->

<!--$isMobile = "true"-->

<!--$endif-->

We then call this subtemplate pretty early in the page template so that we can use the isMobile logic flag later on in the code. This will dynamically switch other subtemplates in the page to avoid loading things (such as: JS libraries, desktop navigation, content not available on mobile devices) we didn't need for an optimized mobile experience.

As far as performance goes, it’s still up in the air in a blank test.  In Chrome, the page loaded 11.4ms faster with the browser detection subtemplate and in Firefox it loaded 67.4ms faster.  In IE 10 it actually slowed the response time by 71ms.  I ran a fairly small test of 10 pages against a vanilla WebCenter Content installation.   The real benefits come in to play when you can avoid loading extra resources that your mobile users don’t need, especially when they are connecting on some of the slower networks available.

For more information or questions, please reach out to us.