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
Nice
goed artikel, gaan we binnenkort zeker uitproberen!
Liked, bookmarked & rated.
Hello
Thanks alot
Is there a possibility to get in designstudio the Information, on with Device the app is running (PC, iPad, iPhone, etc)?
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
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
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
Hi,
Yes I confirm it was related to cache of the browser.
Thanks
Marcin
very helpful, thanks!
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
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
Very useful. Thanks for posting.
Agata