Creating Mobile Layouts for iOS by Dan Nguyen
In this blog, we’ll focus on the how-to’s, best practices, and breaking down an example for designing mobile layout. At springML, we are passionate about design that transcend UI elements and provide a compelling insight for end users.
Here is a step by step details on the design process:
Let’s assume all widgets and steps are already created in the dashboard. If we go to the JSON editor (Command + E in Mac) we can begin adding in the widgets for mobile under layouts.
“rows”:{ } Represent each page on mobile. To ensure a positive user experience we highly recommend segmenting your widgets onto multiple pages. Typically the first page should display a bird’s eye view of the data or the summary while the other pages dissect the data in deeper details.
Code
Few things to consider when developing the layout:
- Colspan: Creating column length
- Hpad: This represents the horizontal spacing X-axis (left and right) between multiple widgets on the same row
- Vpad: Similar to Hpad this focuses on vertical spacing on the Y-Axis.
- “row: {height =15}”: We generally use this to provide a cushion between two rows.
- RowSpan: How many rows below should the widget take
- Row: {height=x}: Represents the height of the row
Note: Each line represents a row in mobile.
Layout Design
If we take a look at the image below we notice gridlines. This grid line enables the UX Developer to visually see where to strategically place certain widgets. To enable the grids go to Settings and enable developer mode. For instance the text “Productivity” has a colspan of 4 on Row 1. It’s simply a ruler stick
Multiple Widgets on the same row:
Looking at line 1683 we see dimfilter_2 & dimfilter_3 represented as ‘Date Range’ & ‘Owner’. The ‘|’ symbol allows multiple widgets on a single row. Note the Colspan is equally split from 6.
Tips
- Adding in line bars to separate computational components.
2. Using Row: {height=x} to to provide spacing between widgets.
3. To indent use ‘|’
4. Laying over boxes
5. Enable developer mode in Mobile to enable the grids
As always, please feel free to reach out to us with any questions at [email protected]