Blog

Responsive Web Design and Ignite UI

Abhishek / Friday, August 23, 2013

image       image


Challenge:

We have all faced a common problem of bad User Experience while browsing the web on a mobile device. Remember the experience while browsing you had to scroll left/right to see different areas on the page from a touch based device! It is because as web developers we hardly cared of catering to different screen sizes, touch and end User Experience. Using static layout/table sizes doesn't really help.

Solution:

Responsive Web Design is a concept that can solve the above mentioned issue.

To summarize on what RWD is all about:

  • Fluid Grids – use relative units like percentages, rather than absolute units like pixels or points
  • Flexible Images – use relative units, or use media queries and render appropriate size images based on need, or use SVG’s
  • Media queries – You can set different style rules(CSS) for different device widths/size

You can achieve this completely via client side using responsive frameworks(twitter bootstrap, unsemantic, etc.) and media queries. If you are new with the media queries then you can go through my previous blog on media query here. You can use RESS (Responsive Design + Server Side Components). Here is a nice article on getting started with RESS by Anders M Anderson. RESS can be helpful if the mobile browser isn't that latest to work well with heavy client side logic! In this talk we will stick to handling RWD right on the client side!

RWD is not only about enhancing a users experience on mobile, but also for Desktop/PC based browsing.

Are your enterprise UI controls Responsive?

While developing Enterprise websites/portals, the common requirement might be the Data Grids and Charts. So the problem reappears. Will 3rd party Charts and Grids support Responsive Frameworks? How can I make the Grid responsive?

The Solution is pretty simple. Infragistics Grid control is responsive. The igGrid control supports the following design modes:

  • Standard(default) – In this mode the Grid does not adhere to RWD principles. It targets web sites/apps designed to be used on desktops.
  • Responsive Web Design(RWD) – In this mode the grid adapts to the device’s screens size. This mode is specially designed for web sites/apps specifically designed to be used on multiple devices with different form factors. In RWD mode, the Grid can be configured:
    • Auto-hiding of columns – This is configured using the RWD node feature’s column hiding functionality
    • Using grid template – the RWD mode feature supports a set of pre-defined grid templates which replace the igGrid template once RWD mode sets in. Using templates allows a wide scope of adaptations, including row hiding, using different fonts and font sizes, merging several rows/columns in one row/column, and many others.

The igGrid control comes with pre-defined RWD mode profiles based on device screen width!

  • Phone – up to 767 pixels. By default, the following CSS classes are available in this profile: ui-visible-phone and ui-hidden-phone.
  • Tablet – between 768 pixels and 979 pixels. By default, the following CSS classes are available in this profile: ui-visible-tablet and ui-hidden-tablet.
  • Desktop – larger than 980 pixels. By default, the following CSS classes are available in this profile: ui-visible-desktop and ui-hidden-desktop.

By default the igGrid uses the $.ig.InfragisticsMode class and you can use the above mentioned CSS classes to hide or show a particular column in the Grid. If you are using Twitter Bootstrap framework for building Responsive web pages then you can use the $.ig.BootstrapMode class of the igGrid. This uses classes defined in the CSS of the Twitter Bootstrap framework (You need to include Twitter bootstrap CSS file in order to use the CSS class names).

The below code will hide the Product ID column on a Phone Screen size:

  1. $(function () {
  2.     $("#gridResponsive").igGrid({
  3.         columns: [
  4.             { headerText: "Product ID", key: "ProductID", dataType: "number" },
  5.             { headerText: "Product Name", key: "Name", dataType: "string" },
  6.             { headerText: "Product Number", key: "ProductNumber", dataType: "string" }
  7.         ],
  8.         features: [
  9.             {
  10.                 name: "Responsive",
  11.                 columnSettings: [
  12.                     {
  13.                         columnKey: "ProductID",
  14.                         classes: "ui-hidden-phone"
  15.                     }
  16.                 ]
  17.             }
  18.         ],
  19.         width: "100%",
  20.         dataSource: products
  21.     });
  22. });

 

If you are looking for working samples on RWD using igGrid, please check these out:

 

If you use Charts in your applications, then you can make our igDataChart responsive as well, in a little different manner as it gets rendered as Canvas. Place the chart inside a container element and set this container’s dimensions in percent (and not pixels). The Chart’s width and height options should also be set in percent. Hee is a live demo of this approach by Graham Murray.

Summary

Responsive Web Design is the way to go forward looking at the diverse devices and screen sizes that we have to cater to. With BYOD concept, enterprise apps would also need to follow RWD to bring in the best UX!

 

Cheers
Abhishek
@narainabhishek 
Microsoft MVP – Internet Explorer