Layout

Overview

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

Tips for beautiful layouts

Follow these simple tips to create simply beautiful lessons.

  • Less is more, and simple is better.
  • Common proportions are good. Lay out your page by halves, thirds, and quarters (or two, three and four columns respectively).
  • Be consistent with your layout. Pages with similar function should be laid out similarly.
  • Where possible, make images fill the entire image panel by dragging the bottom handle down as far as it will go. This will ensure that the content in all panels will line up correctly.
  • Readability and usability are important. Avoid text panels that are wider than 8 columns, as this is more difficult to read.

Snap to attention

Positioning panels on the page is as simple as dragging and dropping with the added help of guidelines and column snapping. kuraCloud lets you lay out your content in columns. To create a column just drag a panel to the side until you see a blue line. This will re-flow the content into two columns.


 

When you want to add to an existing column, drag the panel directly to the column where you wish to add it. A blue line will then appear below one column. If the blue line takes up the whole width then the panel will be across both columns. Drag it until the blue line is only under the column you want.



 

Columns can have different heights. New content will have to go either into an existing column or as a page wide panel after all the columns.

You can resize a column width using the orange rectangles when a panel is selected. Text will try and fill all the available space. Images will have blank space beside them if the height of the panel is too small.


 

 


 

Author once

There is no need to redesign your lessons a bunch of times for different devices. Author on your desktop and let kuraCloud respond behind the scenes to automatically optimize your lesson to fit any size screen. kuraCloud 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 left example, 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.