creating a responsive design in Design Studio

With CSS you can do a lot of interesting things in design studio. But the next step is to respond to the device that is currently viewing at your carefully made application. How can you specify how to respond based on the device? What settings can you set? In this blog I will look at some possibilities, some basic, some more advanced that help you to build an application that looks good on several xdevices.

Auto settings:
The basic setting for any component in your application are the margins and the width/height setting. With the auto setting you can set which properties are allowed to shrink/grow with the size of the screen.

On the horizontal pane you can either select left margin, right margin or width for the auto setting. On the vertical pane you can choose between top, bottom and height.

If you want to have a header for example you fix the top margin to 0 and fix the height to 50. The bottom margin is auto. This will force the component to stick on the top of the screen.

Screen size and Screen orientation

You will notice however that the auto setting does not solve everything. For example you might want to have a smaller font size on an iPhone than you want on a WQHD monitor that supports a dimension of 2560×1440 pixels.

For this kind of situation you can use the @media

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
.title { font-size: 30px; }
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.title { font-size: 12px; }
}

As you can see I made a css class .title that has a property font-size. On large screens it will be much larger. Combined with the auto settings on the panels width/height the title will grow and shrink with the device used.

if you need to find the css for a particular device, have a look at http://nmsdvid.com/snippets/ . There you can find code for a lot of different screen sizes and devices.

Browsers

Another point is that not everything you want is supported by all browsers. Especially internet explorer before version 10 does not support all the CSS3 functionality : http://www.w3schools.com/cssref/css3_browsersupport.asp

So before you want to do something fancy you might want to have a backup plan for when the browser that is being used does not want to cooperate.

For example you want to check of the browser does support SVG. Without that graphs will not render on the browser. (I am looking at you IE8 !)

@support  
    ((background-clip: content-box;)
                    {      /* Your CSS rules here */  } 

If you for example specifically want to check if someone tries to look at your application with an old browser you can detect this by using the @support with a feature that is available for a longer time. The above example “background-clip” is available from IE9 onwards. 

Warning: if the browser doesn’t support @supports then you just have to assume it doesn’t support the functionality you tested either.

Positioning

Finally a word about positioning. A very nice extra feature is to be able to re-arrange your dashboard based on the way the user is holding the iPad

fig 1: blocks re-arrange themselves based on the orientation of the device.

To reset positioning we have to refer to the blocks in another way than simply assigning properties to the classes. The reason is the way the application is being build at runtime. If you look at the final code you will notice that what is one panel in the client application are actually two <DIV> blocks in the browser:

As we want to rearrange the position it doesn’t help us to assign a class to “PANEL_3”.

fig 2: the component div is embedded within another div that contains the properties for top and left.

We have to alter the div with the id __container4.

(note that this is not standard way of working. You cannot influence the id’s  and you may need to check after changes if the name __container4 is still assigned to the right div block)

/* Portrait */
@media screen and (orientation:portrait) {
      #__container4 { top:10px!important; left:10px!important }
}
/* Landscape */
@media screen and (orientation:landscape) {
      #__container4 { top:100px!important; left:100px!important }
}

Note that I added !important to the settings. This will ensure this property will override the element.style property for top and left that is standard applied. Also please refer the browser support link if it will work on your browser. For example IE 9 and 10