Selective use of Pixel in Pega UI - Is it allowed as per Pega 7 UI Best Practices?
Hi All,
Pega 7 UI Best Practices recommends not to use Fixed width layouts for best responsive UI Approach. Adhearing to Pega 7 UI Best Practices standard, I would like to know your expert opinion and recommendations - whether
- Specifying padding/ margin spaces in Pixels is okay and complies with the responsive UI Aprroach
- Similarly specifying Text sizes in pixel is against teh Best Practice norms? Shall we use em or % or Pixel is also just okay for displaying the Texts in UI in perfect ratio on differnt devices
- Specifying button styles in Pixel width and pixel height - to get a more consistent look?
- Will a container Header height specified in pixel, say 30px, show in similar size ratio to a desktop screen resolution, Tablet or a Mobile screen? In Pega Skin rule for Container, I believe, there is no option to select anything else other than Pixel
**Updated by Moderator: Vidyaranjan. Removed user added #helpme, FAQ, Srcreated, Srexists, Ask the Expert tags. Apologies for confusion, shouldn't have been an end-user option***
Accepted Solution
Pegasystems Inc.
IN
Cognizant Technology Solutions
IN
I meant Container Header - in the last point
Pegasystems Inc.
IN
From my understanding:
Pixels is a fixed value. For example, the header on this site is fixed to 980px.
Percentage, well, it is a part of a parent measure where the browser is the outermost parent.
For UI Readiness for Mobile Application: Setting widths in Percent (%) - Avoid using pixels on layout formats, using percentages enables the layout to automatically adjust for different screen resolutions. Using a fixed width has the risk of injecting a horizontal scrollbars on a smaller device.
For other controls like button/textinput, settings should be in pixels.
Hope it helps.
Cognizant Technology Solutions
IN
Thanks shret.
So do you suggest that padding or margin should also be in % or they can be in Pixel. Because calculating padding/ margin in % would be quite a difficult task
Cognizant Technology Solutions
IN
Still looking for the anser: that whether padding or margin should also be in % or they can be in Pixel. Because calculating padding/ margin in % would be quite a difficult task - in order to exactly follow a UI prototype design
Accepted Solution
Pegasystems Inc.
IN
Layouts/Containers should not use pixel-based width/height. Content inside layouts should freely flow based on device size.
Components(controls) size on the other hand would be best specified in pixels rather than % because you'll have better control deciding text size based on hierarchy (heading, content, etc). Same with margin/padding. If you want text size/spacing to change based on device size, 'Responsive breakpoints' is an absolute must.
Application header height usually remains same whether on desktop/mobile so specifying that in pixels should not be an issue. However, you need to make it cozy on all form factors. One way you can do that is having text on desktops and only icons in mobile. Have a look at OOTB portals with UIKit both on mobile and desktop, that should give you some pointers on good UI design.
I would also recommend you go through http://design.pega.com to get the maximum out of Pega7 UI capabilities.
Cognizant Technology Solutions
IN
Thanks a lot Raidv for the way you explained it.
Layouts/Containers should not use pixel-based width/height. Content inside layouts should freely flow based on device size.
Components(controls) size on the other hand would be best specified in pixels rather than % because you'll have better control deciding text size based on hierarchy (heading, content, etc). Same with margin/padding. If you want text size/spacing to change based on device size, 'Responsive breakpoints' is an absolute must.
Application header height usually remains same whether on desktop/mobile so specifying that in pixels should not be an issue. However, you need to make it cozy on all form factors. One way you can do that is having text on desktops and only icons in mobile. Have a look at OOTB portals with UIKit both on mobile and desktop, that should give you some pointers on good UI design.
I would also recommend you go through http://design.pega.com to get the maximum out of Pega7 UI capabilities.