ebook-responsive-elearning-with-links-us
You also want an ePaper? Increase the reach of your titles
YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.
2<br />
Understanding<br />
Responsive eLearning Design<br />
2.5: What Does a Responsive eLearning Design Look Like?<br />
The easiest way is to look at some examples. These are from sample courses that have been created<br />
<strong>us</strong>ing our in-ho<strong>us</strong>e HTML-based Framework for Responsive eLearning Development (FRED).<br />
Simple Presentation<br />
Desktops: The graphic and or image and text combination is laid out horizontally on desktop<br />
monitors.<br />
Tablets: On tablets, the layout changes to vertical from horizontal. This is to avoid a horizontal<br />
scrollbar from appearing on screen. Vertical scrolling (<strong>with</strong> a swipe action) may be introduced based<br />
on the length of the content.<br />
Smartphones: The functionality and layout<br />
both change to suit the reduced screen size<br />
when the course loads on a smartphone. A<br />
layer of interactivity gets introduced. Single<br />
pieces of content will appear at a time <strong>with</strong> their<br />
relevant images and or graphics. Learners can<br />
view the next piece of content by tapping<br />
internal navigation elements, like an internal<br />
'next' and 'back' or by swiping as you would in<br />
an 'image gallery' interactivity.<br />
23
Change language