Rearranging portlets in a single-column Respondr mobile view
- James Wennmacher (Deactivated)
When rearranging portlets (using Drag and Drop) in a single-column responsive design view (e.g. often considered the 'mobile view'), you are still moving portlets between columns, even though the columns are actually stacked on top of each other. Â This can have potentially unexpected impacts on the desktop experience if you are not thinking in context of multiple columns being vertically stacked on your mobile device.
In uPortal, a user has the ability to set tab content in a single or multi-column layout. Portlets can then be dragged and dropped into different locations, whether it is reordering portlets in a single column or rearranging portlets in multiple columns. When viewing this content in mobile view, the responsive UI design collapses multiple-column content into one single column. These portlets are stacked, in order, from top to bottom, left column to right column.
Below are the default views for desktop and mobile. Desktop is using a 2-column layout. Notice how the portlet stack in mobile view, from top to bottom then left column to right column:
 |  |
|---|
A user can drag and drop portlets around on tab content, providing a user-defined experience. If a user is in mobile view and drags portlet 2 above portlet one, the portlets maintain the same column stack when the user logs back into desktop view:
 |  |
|---|
However, this behavior can affect the desktop column layout in unexpected ways. For example, if a user were to log into mobile view and drag portlet 3 above portlet 2, the action would be similar to if the user, in desktop view, had dragged portlet 3 below portlet two. Now in desktop view, three portlets appear in column 1, where as only one portlet (portlet 4) remains in column 2. This behavior will occur anytime a user drags a portlet above the last portlet in the left-most column:
 |  |
|---|
Now if the user logs back into mobile view and decide to drag portlet 4 to the top. In desktop view, portlet 4 is now at the top of column 1, with column 2 empty:
 |  |
|---|
In desktop view, the user can rearrange the portlets by dragging them back into column 2. In order to find a balance between the mobile view and desktop view, it is recommended that portlets arranged in multiple columns on the desktop should be stacked in a way that is easy to navigate as collapsed content in mobile view.