Placing multiple images with text below on page

[dramage]

I am wondering about best design practice for an instructor to place multiple images with text below each image on a page. Here is a demo Canvas resources page that does just that: 

https://resources.instructure.com/courses/11/pages/course-home-page

Unfortunately, I don't have any way to look under the hood as to how this was done. 

I can certainly do this with tables with grid lines hidden, but I know that web designer folks hate tables used for anything except tabular data. But maybe tables are still the best way to do this on the instructor level on a Canvas course page? 

Thanks!

[chriscas · Accepted solution]

Hi @dramage,

To start off, I want to make sure you know you can actually look 'under the hood" a couple different ways with most browsers on a desktop/laptop.  You can usually right click anywhere on the page and select "view source" to get a html version of the page (depending on how the page was created it may be the whole page, part of the page, or a somewhat incomplete version of the page without dynamic data).  You can also right click on an element (text, image, etc) and choose the "inspect" option, which will open the browser developer console with an html view as well.

In this case, I did the inspect method, and found the example you linked is using a table.  I do find myself using tables every now and then since I find them easy and they are integrated right into the RCE, but as you mentioned they are not preferred for content layout anymore.  The next easiest thing I have found is to use a flexbox, which allows for a more responsive design and seems to be more in line with current html best practices.  Unfortunately, you will need to use html mode in Canvas for this, but it's not too hard.  I found this archived post which discusses flexbox and has what I consider to be a pretty good overview if you read the replies:  Solved: [ARCHIVED] Flexbox Grid tips and guides - Instructure Community - 100047 .

Hope this info helps!

-Chris

[NoahBoswell]

Greetings @dramage ,

Thank you for posting on the Instructure Community!

Based off of my experience, I am 99% sure that this page in the demo course was created with hidden grid lines, as you mentioned above. I think that would be the best design practice to achieve the outcome of having a similar page such as the demo course.

All the best,
Noah

[chriscas · Accepted solution]

Hi @dramage,

To start off, I want to make sure you know you can actually look 'under the hood" a couple different ways with most browsers on a desktop/laptop.  You can usually right click anywhere on the page and select "view source" to get a html version of the page (depending on how the page was created it may be the whole page, part of the page, or a somewhat incomplete version of the page without dynamic data).  You can also right click on an element (text, image, etc) and choose the "inspect" option, which will open the browser developer console with an html view as well.

In this case, I did the inspect method, and found the example you linked is using a table.  I do find myself using tables every now and then since I find them easy and they are integrated right into the RCE, but as you mentioned they are not preferred for content layout anymore.  The next easiest thing I have found is to use a flexbox, which allows for a more responsive design and seems to be more in line with current html best practices.  Unfortunately, you will need to use html mode in Canvas for this, but it's not too hard.  I found this archived post which discusses flexbox and has what I consider to be a pretty good overview if you read the replies:  Solved: [ARCHIVED] Flexbox Grid tips and guides - Instructure Community - 100047 .

Hope this info helps!

-Chris

[NoahBoswell]

@chriscas I also wanted to add on something I thought was cool - I was actually able to copy and paste all the content from the demo page into my own sandbox course, and I was able to also see how it was set-up through both the HTML Code and with the tables.

Maybe that could also work in some scenarios?

[kirsten_naughto · Accepted solution]

I agree with @chriscas regarding flexbox. Tables are not very responsive and are also hard on those who use screen readers. As you mentioned, they are best for tabular data. For visual layouts that include built in responsiveness for screen sizes, using flexbox and its grid system are the best way to go. The link Chris included is a great tutorial to use.