Responsive Design

[KickingApps]

My goal with this template app is to make responsive design a little easier.  I have spent an extensive amount of time designing responsive apps and have found the process to be time consuming and tedious. Specifically, there are 3 challenges I face repeatedly and wished to simplify when I built this template.

The primary challenges include:

1. Need to navigate out of the app to view changes
2. Dynamic X,Y property for break points - (based on percentage of screen size)
3. Determining dynamic height of controls for each screen layout, e.g. large vertical, small vertical, large horizontal, small horizontal

I addressed the above by integrating the following in the attached template:

• Component to mimic the various screen sizes I am designing for - primarily used as a reference for design. 
  • I have found the most effective method for utilizing this template is to have the template open in one screen and the app I am designing open in another screen. I use the template to create my layout. Once I am satisfied with the layout of controls,, I 1)'code' the property values into my actual app (for the selected screen size),  2) change the size of my template, 3) re-order the controls so they fit the new screen size, 4) update the code in my app, and repeat....

(*Note - the template is simply used to create the layout for each respective screen size. I do not update the properties for each control within the template.)

2a. X property for each control

I created a Grid, comprised of gutters and columns. The width of the gutters and columns calculate as the screen size changes. The 'X' property of each control is based on the X property of the columns and gutters in this grid.

Referring to the example above, the X property for the image control is set to the below formula:

Switch(
    lblLayout.Text, 
    "lgVer",
       gtr3.X,
    "smlVer",
       col2.X
)

2b. Y property

To determine the Y property based on the layout, I have a label, (shown in screen shot below), in the template with the text set to Round(lblDynamicY.Y/cmptLayoutView.Height, 2)

The result of this calculation is I what I use to set the Y properties of the controls.

Again, referring to the example above, the Y property for the image control would be: 

Switch(
    lblLayout.Text, 
    "lgVer",
       App.Height * .15, // This is the based on the result of the text label in the template
    "smlVer",
       App.Height * .10
)

3. Height Property

Similar to the Y Property reference, I have a height reference label to determine and calculate the dynamic height of each control. Set the value of the control in the app to the result of the height reference control in the template * App.Height. Referring again to the image control, set Height to: 

App.Height * .19

Additional notes:

In this post, I do not go into detail about the following but wanted to mention:

cmptLayoutView - To hide the grid in the layout template (cmptLayoutView), change the 'hidegrid' property of the component to = true.

cmptPrimaryMenu - In addition to the cmptLayoutView I opted to leave in the cmptPrimaryMenu  component as a reference. I have included the same grid in this component and added a few output reference properties that are utilized for responsive design. 

scrnTemplate -

A grid is also included the scrnTemplate. Adding a grid to a screen template is helpful for the occasions where I was not able to access the X property values from the component. 

And, finally, I left in a Gallery on the scrnTemplate as a reference.  For reference, check out the lblTime X property. Its X property is relative to the App.Width.

Contact me: 

If you have questions related to this template, please feel free to reach out via Twitter  - @tianaranjo (a.k.a. kickingapps) or tianaranjo@kickingapps.onmicrosoft.com

ResponsiveTemplate_Shared (1).msapp