Responsive Page Design

[sbridge]

I've gone to a lot of effort to design visually appealing homepages for my students that help link them out to different areas in the modules. 

Unfortunately when they view them on their chromebooks the resolution or screen size must be different because items such as buttons don't fit right and things overflow.

I'm frustrated because once again, it seems I need to know html to code a page that is visually appealing AND responsive in size for a variety of devices.

Has anyone run into this and what did you do to help the issue?

[kmeeusen · Accepted solution]

Hi  @sbridge  Welcome to the Canvas Community!

Everybody runs into this, and since so much variety exists in the types of devices that students (and all other users) use to access Canvas, we must consider responsiveness and scaling when designing our online course; or at least, we must do so if we wish to enhance content beyond simply textual content.

As for HTML, I built a course that is also available through this Community to help non-coders learn some simple HTML hacks without having to learn coding. Check out CanvasHacks Classroom .

Also, you might be interested in the following goodies...

• Lessons learned about designing mobile-friendly pages  
• https://community.canvaslms.com/groups/designers/blog/2015/04/16/creating-an-inviting-course-home-pa... 

Now go forth and have fun!

Kelley

[sbridge]

I understand I need to think about these things...how do I make it responsive?  I'll check out your links.  Thanks!

[kmeeusen]

 @sbridge 

So you don't have to search too hard, the trick is to size horizontal content as a percentage rather than in pixels. Then the element will take up a specified percentage of the screen width.

Does that make sense?

Kelley

[slynch3]

If you were to show us HOW to set horizontal text as a percentage rather than as pixels (or include a link to instructions), it would be even more useful for us non-coders.

[pesmith]

@slynch3 To code width into your canvas page, you have to use the "style" attribute (also known as inline CSS) for any given tag (piece of content) in your html editor. For example, if you wanted to edit how wide the text on your page appears:

<p style="width: 80%;">This is my content</p>

This can really come in handy with using images in tables--sometimes those can get wonky in Canvas. Try this after you have inserted an image into a cell:

<table>
<tbody>
<tr>
<td><img id="500347" style="display: block; margin-left: auto; margin-right: auto; width: 100%;" src="https://nwic.instructure.com/courses/4493/files/500347/preview" alt="teddy bear" data-api-endpoint="https://nwic.instructure.com/api/v1/courses/4493/files/500347" data-api-returntype="File" /></td>
</tr>
</tbody>
</table>

Obviously you have to read in between the lines if there is already a lot of coding, but it is doable. Additionally, make sure to always put a semi-colon at the end of your width percentage, as with all descriptors within an attribute.

[pesmith]

@kmeeusen This is only only half true... if you are using a table for your layout and set the width of the content in a cell at 100%, along with the appropriate width percentages for the full table and individual cells, the content will can become real small if a phone is being used. Normally responsive layouts stack elements instead of maintaining a percentage of width across devices. Additionally, text size doesn't adjust to width percentage in Canvas-- it seems font size take precedent over table width percentage. I don't have a solution in Canvas rn-- I'm currently searching for answers to the same question.

[chrisream]

Hi @pesmith .

There definitely is a learning curve, but there is a CSS solution that has been around awhile, flex. You'll want to look into max-width and wrapping to help with it, and try to remember that nesting elements is important. Yes, it requires coding but, if you master this, you can do this all over the place and create all kinds of page layouts that respond to different viewport widths. I hope it helps.

https://www.w3schools.com/css/css3_flexbox_container.asp

https://css-tricks.com/snippets/css/a-guide-to-flexbox/