Kartris v2.5 and above features a responsive interface.

The numbers of users accessing the web on mobile devices is increasing all the time. Although most devices have browsers which can handle web sites designed for bigger screens, the user experience is less than ideal. Kartris incorporates support for 'responsive' design, which enables a web site to dynamically reformat pages to better fit small screens, as well as optimizations for use on touch screens.

The traditional approach to providing support for mobile devices has been to create a separate interface, and have the web site check the user-agent of the device requesting the page to decide which version of a page to send. But in the last couple of years, the improvement in the power and sophistication of mobile devices together with wider browser support for advanced CSS has allowed a new approach to be used - responsive design.

A responsive web site sends exactly the same pages to all devices - mobile, tablet, laptop and desktop. It is the device itself which decides how to display the page, based on rules and code that is embedded within the page.

The advantages of this approach are:

  • Single interface to maintain
  • Richer experience - full feature set (since not using a separate cut-down interface) and same styling and feel as the main site (because they are essentially the same site)
  • The interface can be tweaked for a variety of devices of various sizes; for example, tablets can use the chunkier touch-enabled navigation menus while still formatting pages for the larger screen space
  • Same URLs for mobile and desktop - since all clients get the same page, there are no separate URLs for the mobile site; this has search engine benefits and also benefits customers who sync bookmarks between their desktop and mobile browsers (because the same URL will work from both devices, and give an optimized experience)

IE 10 view of responsive site

Above: basket page viewed using IE10 on Windows 8 (desktop)

Android 4.2 Jelly Bean, Chrome

Above: the same page, viewed using Chrome on Android 4.2 Jelly Bean (mobile)

You can see from the above images that the mobile design is optimized for the narrower viewing port; the basket images are also hidden so the important tabular data can fit. The navigation menus reformat to touch-enabled multi-level dropdown menus.

Rather than reinvent the wheel, we've integrated the best open-source responsive framework into Kartris. Zurb's Foundation provides many useful tools, and is proven on thousands of high-profile web sites across the world.

For more information see http://foundation.zurb.com/

Because Foundation is integrated into Kartris, you can use all its built-in features in your content without needing to fiddle with any javascript. For example, you can easily create lightboxes, slideshows, hover buttons, dropdown menus, tooltips, sticky navigation in either your skins, or your site content, with just some simple HTML. And because Foundation is designed to be responsive, your content will automatically be mobile-friendly.

For an overview of the various Foundation features, see the documentation: http://foundation.zurb.com/docs/

If you are creating a skin for a new site, the best place to start is with our default skin. This has all the required mark-up in the master page, and links to the required CSS and javascript files.

This is a little more complicated. It's best to use our Template.master as a guide.

First, you will need to add in the extra CSS files; make sure they are in the right order (we tend to put the Foundation and associated files in first, and then override them where needed in custom.css):

<link href="foundation.css" rel="stylesheet" type="text/css" />
<link href="normalize.css" rel="stylesheet" type="text/css" />

Also need the custom.css, which overrides some settings in the default Foundation css file:

<link href="custom.css" rel="stylesheet" type="text/css" />

Then need this tag to tell mobile devices to size things properly:

<meta name="viewport" content="width=device-width" />

You will also notice from the responsive template that the DIV structure uses various additional classes. These mark-up the page to format the layout using Foundation's 'grid' feature. This should be quite familiar to those who were used to layout out HTML with tablets in the old days, because the principles are quite similar. There is a good overview of the Foundation grid here:

http://foundation.zurb.com/docs/components/grid.html

Foundation also changes the DOCTYPE declaration, and handles older browsers:

<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en" ><![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->

At the end of the file, we need a tag which will insert a link dynamically to either the Zepto or Jquery library. Zepto is preferably, but IE can't run it. This code therefore links in Zepto on most browsers, but Jquery on IE.

<asp:Literal runat="server" ID="litZeptoJquery"></asp:Literal>
<script>
$(function () {
     $(document).foundation();
})
</script>

Finally, the page load sub in the code-behind needs to create the content of that new tag:

'Add zepto/jquery tag at end of page,
'this is part of the responsive layout
Dim strWebShopFolder As String = CkartrisBLL.WebShopFolder()
        litZeptoJquery.Text = "<script>" & vbCrLf & _
"document.write('<script src=JavaScript/'" & vbCrLf & _
"+ ('__proto__' in {} ? 'zepto' : 'jquery')" & vbCrLf & _
"+ '.js><\/script>');" & vbCrLf & _
"</script><script src=JavaScript/foundation.js></script>"

Foundation uses newer CSS techniques and Jquery which require newer browsers to run on. Users on Chrome and Firefox are generally automatically updated by default, so these users are rarely on old versions. However, Internet Explorer 9 or above is required for Foundation.

Because there are still a number of users stuck on older versions of Internet Explorer, we have built in support to deliver a non-responsive version of the site to them.

To create a non-responsive version of your skin for users on IE8 and earlier, it should be called the same as your main skin, but with 'NonResponsive' added to the name. For example, we ship Kartris with a default skin called 'Kartris', and the non-responsive version of this is therefore called 'KartrisNonResponsive'.

If you're upgrading a site to the responsive version of Kartris, you could keep your old skin and rename it to be used as the non-responsive skin.

From January 2016, Microsoft will only support the latest version of its browser available on each platform, which effectively means IE8 is no longer supported (as Vista can run IE9). From this date, the requirement to service older browsers should cease as they are no longer supported with security fixes, and every browser vendor will be delivering regular browser updates automatically by default.

The determination of whether to serve users the Foundation-based responsive skin or the 'NonResponsive' version is done based on server-side browser-sniffing for IE8 or earlier.
Powered by tomeCMS