Placing multiple images with text below on page

Question

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!

Chris · Accepted Answer

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

kirsten_naughto · Accepted Answer

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.