Lessons learned about designing mobile-friendly pages

a_craik
Community Contributor
0
1634

Confession: my initial reason for writing this blog is that it's part of a quest (called "Mobilize your assignments"), or at least that's where it stems from. I do enjoy the quests - they're a great way of learning and I'm a sucker for some gamification. Anyway. I'm always scouring the community to solve one problem or another, and the more I think about it, this is a big one.

 

Moving to Canvas was pretty liberating for many of our teachers - the simple page editor offers so much functionality to create content exactly how you want it to appear to students, and with no HTML knowledge required! And there's a mobile app for students too, you say? Well great - they can see my awesome course page designs in an even nicer way on their phones, right!? If you're reading this, I suspect you already know that this is unfortunately not the case...

 

So, here are some very simple lessons learned:

 

Using tables just to structure content in a page is a no-no. It may seem an easy way to achieve the look you're after, and it may look perfect on your screen when you build it, but trust me - it won't be so in the mobile app! So now you've got a decision to make:

  1. You should simplify your design, and let go of that dream of placing content exactly where you want it to appear on the screen. Simple linear (i.e top to down) presentation of content can work just fine
  2. If that's just not acceptable then you've got some learning to do about two things - divs and flexbox classes. Accept that you're journeying into coding, but don't worry that you're 'not a coder so this is not an option'. You'll learn these things (and probably more) by copying other people's code, changing it, breaking it, fixing it, and just doing that experiential learning thing!

 

I'll point you towards one great community question to get you on your way - it features many useful responses and further links from savvy members of the community: Anchor a Div

 

I'm sure there are even more posts out there in the community at time of writing (and that will come into existence beyond) - please post links below if you know of any particularly good ones for the sake of future readers Smiley Happy

 

P.S it goes without saying that whatever device you're designing for, always make it accessible (use the accessibility checker, alt-tags for images/headers for tables where required, use format text styles and ordered lists where appropriate, check your colour contrast ratios... and I've very likely forgotten more important ones so again, add below!)

 

P.P.S shout out to  @debra_mansperge  for asking the question in that original post above and inspiring me to write this short blog on this topic