Skip to Content
Author's profile photo Jeroen van der A

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

/wp-content/uploads/2014/03/positioning_406918.jpg

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”.

Div structure Design Studio.PNG

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

Assigned Tags

      12 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Laurens Geraedts
      Laurens Geraedts

      Nice

      Author's profile photo Dwain Chang
      Dwain Chang

      goed artikel, gaan we binnenkort zeker uitproberen!

      Author's profile photo Former Member
      Former Member

      Liked, bookmarked & rated.

      Author's profile photo Beat Andreas Honegger
      Beat Andreas Honegger

      Hello

      Thanks alot

      Is there a possibility to get in designstudio the Information, on with Device the app is running (PC, iPad, iPhone, etc)?

      Author's profile photo Jeroen van der A
      Jeroen van der A
      Blog Post Author

      hi Beat,

      it is possible to do that

      here is a blog where it is explained : http://davidwalsh.name/device-state-detection-css-media-queries-javascript

      you see that in this example a css class has a state. But you can set up anything. So you can create a CSS class that has different sets of instructions based on the screen dimensions.

      best regards,

      Jeroen

      Author's profile photo Former Member
      Former Member

      Hello,

      Thanks for sharing that.

      I have applied function @media in CSS to dynamically resize font and color in text component when the windows browser is getting smaller.

      @media all and (min-width:100px) and (max-width:1300px) {

      .myTileSubtitle {

      font-family: Arial, Helvetica, sans-serif;

      font-weight: bold;

      color: #DC143C;

      font-size: 10px;

      }

      }

      @media all and (min-width:1300px) {

      .myTileSubtitle {

      font-family: Arial, Helvetica, sans-serif;

      font-weight: bold;

      color: #333333;

      font-size: 14px;

      }

      }

      All is works as expected when I execute it locally and via document link, when I have opened it through BI LunchPad it doesn't work.

      Do you have some hints why it works in such a way or it is matter of configuration.

      Thanks

      Marcin

      Author's profile photo Jeroen van der A
      Jeroen van der A
      Blog Post Author

      Hi Marcin, I am not sure. I think it has something to do with the internal browser in the app that renders the application. But i am not sure.

      Jereon

      Author's profile photo Former Member
      Former Member

      Hi,

      Yes I confirm it was related to cache of the browser.

      Thanks

      Marcin

      Author's profile photo Thomas Heinrich
      Thomas Heinrich

      very helpful, thanks!

      Author's profile photo Shlomi Weiss
      Shlomi Weiss

      Hi Jeroen

      Very useful blog,

      Is it possible to get the actual min-width values and place them in a textbox?

      I'm looking for a way to get the actual screen resolution in order to place objects within the canvas

      Thanks

      Shlomi

      Author's profile photo Former Member
      Former Member

      Hi,
      in my case the container value is changing again and again and once its changed then the CSS code doesnt work any more, any way to do it dnamically ?

      Thanks,

      Jawad

      Author's profile photo Former Member
      Former Member

      Very useful. Thanks for posting.
      Agata