Experience of Lt on Different Devices

Lt makes it easy to design beautiful and balanced lessons that will look and work great on any device.

Author once

There is no need to redesign your lessons a bunch of times for different devices. Author on your desktop and let Lt respond behind the scenes to automatically optimize your lesson to fit any size screen. Lt automatically creates a mobile version of any content. This should “just work” most of the time, but it pays to periodically check out how your content looks in the mobile view to make sure it’s readable and makes sense on a small device.

To check out the mobile view simply resize your browser as skinny as it will go. Editing controls and columns will disappear and your page content will be presented in one long column. This is the “mobile flow” and is a very good approximation of how it will look on mobile devices.

How mobile flow is generated

Mobile flow is produced “top to bottom, left to right”. Most simply, if you have no columns, the mobile flow is the same as the desktop. Top-to-bottom.

If your page has a section with two or more columns (known as a row), those columns will be placed one after the other, left-to-right. If any of those columns contain multiple panels, they’ll just be inserted as-is in the mobile flow.

Desktop to Mobile Layout

Here’s an example desktop layout which has several rows with different column layouts. The blue arrows indicate where a new row starts, and the numbers indicate the order in the mobile flow.

Notice that panels 4, 6 and 9 don’t appear sequentially in the mobile flow, even if they happen to be the same height.

Whitespace panels

All Whitespace panels are ignored when producing the mobile flow. Adding or removing a Whitespace panel will have no effect whatsoever on the appearance of your page on small devices.

“Same-but-different” layouts

It’s very possible to create two layouts that look identical on desktop, but which have a different mobile flow. This is because, even though they look the same, the two layouts have a different structure.

Notice that in the example on the left, the contents of the two rows appear in the mobile flow one after another. On the right, the two columns are simply stacked left-to-right to produce the mobile flow.