Question

I have a site that is mostly designed for viewing on Android and iPhone devices. However, it is, of course, possible that people can view it on the web from a desktop or laptop.

The site is currently built to be a skinny width, 320 pixels wide, to accomodate most handheld devices. And actually, I like the layout so I don’t mind that people on desktops see the same interface as handhelds. I like the consistency of the interface across devices.

What I’d ideally like to do is have additional information display for people viewing the site on larger monitors. Like so:

The key point that I’m stuck on is how to prevent Interface B from being downloaded or offered to the mobile devices. I know how to create an extra DIV and hide it using CSS based on browser identification. However, for a variety of reasons, it is important that Interface B not simply be hidden from some devices, but the data not even be transferred.

Is this possible?

An ideal solution should include the following considerations:

• The default is to assume a device is mobile and only offer Interface
  A. Only if the “browser sniffing” comes back with a high certainty
  (well, as certain as it can get) that the device is a certain white
  list of known desktop browsers, then show interface B.

• A solution that works on the server side. Again, no data from
  Interface B should be transferred if the visitor is suspected to be
  on a mobile.

• Interface A and B can be separated by frames, DIVs, iFrames… I’m
  agnostic about that, but I’m more familiar with CSS, so having them
  in two different DIVs might be easier for me to grasp.

Answer 1

I wouldn’t use browser sniffing at all, but CSS 3 Media Queries to find out if “Interface B” fits and load it’s content with AJAX only if it’s displayed.

Something like this:

<style type="text/css">
  @media only screen and (max-width: 320px) { 
     #interface-b {
       display: none;
     }
  }
</style>

<script type="text/javascript">
   // Using jQuery for convience here
   // Let #interface-b be empty originally, 
   // and load it's content with AJAX only if needed.
   jQuery(function() {
      if (jQuery("#interface-b").is(":visible")) {
        jQuery("#interface-b").load(...);
      }
   });
</script>

(EDIT: Added only keyword for better backwards compatibility)