If you are going to the trouble of designing mobile sites for different devices and screen sizes, then you should be taking into account that many smartphones have the abilitiy to change orientation from portrait to landscape, giving a much wider screen width.

You can use Javascript to register the change in orientation, but how can you deliver a different user experience when the user flips the phone?

With bemokoLive, it’s very easy to use the context rules to change the behaviour of your site when the user flips the device.

Context rules allow you to change the behaviour of the bemoko rendering engine with parameters on the URL.  In this case we can use some javascript to note the change in orientation and call a URL with the relevant parameters set.  The javascript looks like this:

<script type="text/javascript">
 var landscape = isLandscape();
 function updateOrientation(){  
   var landscapeToUpdate = isLandscape();
 [#--
 Only redirect if landscape flag has changed
 --]
   if (landscape != landscapeToUpdate) {
     landscape = landscapeToUpdate;
   if (landscape) {
     window.location = "${intent.serverRelativeSiteEndPoint}/landscape/${intent.name}"
   } else {
     window.location = "${intent.serverRelativeSiteEndPoint}/${intent.name}"
   }            
  }
 }

 function isLandscape() {
   switch(window.orientation) {  
   case -90:  
   case 90:  
      return true;  
      break;  
   default:
      return false;  
  }
 }
</script>

The important piece in this script are the lines where the window.location is changed.  Note the addition of the landscape parameter.  As this parameter is before the intent in the URL it acts as a context rule.

To get bemokoLive to recognise the context rule, it has to be registered in the site-config.xml

<context>
 <rules>
     <rule name="landscape">
         <param action="add" name="type">l</param>
     </rule>
 </rules>  
 </context>

This makes bemoko add a parameter called “type” to the context if the landscape context rule is present.  We can use this parameter to change the device category recognition for the device, again in the site-config.xml

<uigroup>
    <ui name="landscape" expr="intent.get('type') == 'l'" fallback="ajax" />
</uigroup>

This change has the effect of overidding the standard device identification, adding the landscape category into the fallback chain.  This means that any files or fragments in the landscape category will be delivered to the device, allowing you do do anything from simply delivering wider images to changing the whole look and feel of the page.

You can find more on context rules at http://bemoko.com/wiki/Context_Rules

For a live demo showing one use of context rules, take a look at http://bemoko.com/addons/imagetranscoder/test/i – the alternative rendering links at the bottom of the page use context rules to change the way the device is recognised.