Last Update: Sept 08, 2022

Platform: Web & Mobile

Designer: Junjie Piao

Intro

Flexible Column Layout allows content to adapt to varied sizes and number of columns to utilize available real estate efficiently

Usage

As viewport grows, we need to account for how content changes.

If a user is looking at a larger screen, we have the ability to show them more content, or ‘enlarge’ our elements for added readability.

Responsive elements allow for balanced negative space and a less static-feeling experience.

• We are tailoring the Fiori flexible grid system to the contents of the Homepage. But, the grid system framework must remain flexible for other applications to consume.
• Detection of device should be in place in order to automatically switch components to Cozy/Compact modes
• Hybrid devices default to Cozy mode

Structure & Components

• Homepage
• Dynamic Teams
• Opportunity Market Place
• Goals
• Feedback

Behavior & Interaction

We use the same numbers as standard Fiori defined for all screen width variations

It is developed based on minimum width a card should support. Min-width of a card(288px) is deducted based on minimum screen width 320px (iPhone SE) minus margins on both sides, which is 16px.

Logic used to define break points is, card width should adapt to screen width while respecting Fiori defined margin and gutter. As screen width grows, an additional column of card is added when there is enough space(288px, min card width)

Full spec is in Figma for now due to Embed function not working:

https://www.figma.com/file/Hqh91BI6D43Ie4pVBBvrHN/?node-id=9587%3A76424

Video recording of walk through

Responsiveness & Adaptiveness

• As the cards increase in width (up to a certain point, see behavior below for 6 columns), the number of texts increases and truncates
• As the cards decrease in width (up to a certain point, see behavior below for 1 column), the number of texts decreases and truncates
• As the cards increase in width (up to a certain point, see behavior below for 6 columns), the image maintains required aspect ratio by ‘zooming out’ and cropping
• As the cards decrease in width (up to a certain point, see behavior below for 1 column), the image maintains required aspect ratio by ‘zooming in’ and cropping

Application specific examples

We used the Flexible Column Layout on the SF homepage

Code Components

https://github.wdf.sap.corp/pages/xweb/common-react/?path=/story/components-cardgrid--card-grid

Specs

Full spec is in Figma for now due to Embed function not working:

https://www.figma.com/file/Hqh91BI6D43Ie4pVBBvrHN/?node-id=9587%3A76424

ENG Spec b2211 Homepage

https://www.figma.com/file/olxugsVZaGi2GAqdCO2Ehu/b2211-Homepage?node-id=5707%3A375305

https://github.wdf.sap.corp/pages/xweb/common-react/?path=/story/components-cardgrid--card-grid