Design Manager - Mobile layout manager (Stacking order)

Sometimes a web page simply does not look good when modules are stacked on top of each other in mobile view, a bank of icons like this page on our website is a good example http://info.hawktraining.com/programmes (Still in development so ignore the bugs and big images!). Imagine scrolling for several miles to get to the last icons on the page if they were stacked? A quick way to bounce visitors from this page.

 

With this page specifically, my current workaround is to create 2 module groups containing the same content, the second group is a custom HTML table which forces the icons into rows. I can then apply media queries to the group to hide each from desktop or mobile respectively.

 

@media (min-width: 768px) {
.custom_hidden-dt {display: none !important;}
}

@media (max-width: 767px) {
.custom_hidden-xs {display: none !important;}
}

 

There are obviously some problems with doing this as you are repeating content on a page, forcing content into tables which can have its own issues, increasing page loading times and possibly upsetting Google.

 

So my suggestion is to add a mobile layout editor to the design manager, allowing you to create a mobile layout if the natural stacking does not fit the page.

2 Replies
DonnaR
Occasional Contributor

Yes! Need to be able to customize mobie layout.

 

lbritt
Occasional Contributor

Yes! I have so much trouble with the layouts looking great on desktop and then the order of images, text, and CTA completely changes on mobile and it looks terrible.