Friday, April 1, 2016

Step 8. Use Canvas table layout.


Step 7 Step 8. Use Canvas table layout Step 9


STEP EIGHT. You can use Canvas table layout to maximize the available space, with the Twitter widget in one column and contextualizing information in the other column. If you are designing for mobile, you can find additional information here: Canvas Columns without Tables.

Canvas Pages are not really a great space in which to design, in large part because you are constrained by the Canvas system content to the left, on the top, and sometimes to the right that you cannot control. You can, however, find ways to make tables work to your advantage if you want to make the most of the limited screen space available.

To get a sense of how that works, compare these two screenshots. Here's a widget pasted into a page:



And here's what it's like to put a widget into a two-column table:


You can decide what style is best for you!

If you want to use a table, you can copy-and-paste this bit of two-column table template code to quickly create a table that works nicely with an embedded Twitter widget. Remember that you need to be in the HTML editor when you paste in this code. You can then shift back into the Rich Content View to do your actual content editing.

<table><tbody><tr valign="top">
<td><p>TEXT STUFF GOES HERE</p></td>
<td>&nbsp;&nbsp;&nbsp;</td>
<td width="450">
<p>IFRAME STUFF GOES HERE</p>
</td>
</tr></tbody></table>

Notes:
  • The valign is important; that is what makes the contents of the table align against the top.
  • The non-breaking spaces create a kind of divider column space between the left and right columns.
  • You can adjust the width value as needed; the 450 pixel width works nicely for the widgets I usually make at Twitter.
  • The iframe stuff was covered in the previous step: Add Twitter widget to Canvas Page.
Give it a try and see what you think! For an example of a two-column page in Canvas, see this Sample Page for #OklaEd Chat. You can also click and view the HTML to see just what it looks like.

No comments:

Post a Comment