Tuesday, October 16, 2018

Think Mobile Upwards Design Desktop Downwards

If I was to sum up my approach to designing responsive courses in a single phrase it would be “think mobile upwards - design desktop downwards”.

It does sound a bit clumsy but what i mean by this is that you need to firstly think about the constraints of the mobile screen in terms of content. On a mobile screen your textual content will be best displayed in short, easily digestible paragraphs of no more than 4 or 5 lines long. Therefore, when creating your learning materials, starting on a desktop slide with long blocks of text is a bad idea (large blocks of text are not a good idea for reading on screens anyway). Remember it's a responsive e-learning course, so the same content is used for all modes of learner.

Your desktop view of the content will therefore also have short paragraphs of text. This, however, is where you need to design downwards, making the best of your content by using space and clean lines to best present it, and then gracefully reworking your design downwards for smaller screens. As you have first set the correct amount of content to display this will be a much simpler process.

Below is an example from my e-learning of the same slide displayed on a desktop and a smart phone. The text and animation fit perfectly on the mobile phone screen. This also dictates the amount of content on that slide for the desktop. Now some might think it looks a bit sparse but you can get creative with extra imagery or design elements if you wish but you must never be afraid of empty space. It helps the content breathe.