I am presenting a short vocabulary builder. You are presented with an English food word, and you can then use buttons to display the word in Portuguese and separately play a sound file speaking the Portuguese word. You can freely move within the module.
I built this course using a fluid box design.
I recorded and edited the sound files entirely within Captivate.
The Portuguese words are contained in simple smart shapes which are initially invisible. Clicking on the ‘eye’ button will show the hidden shape. To enable users to revisit the slides I used an on-enter action that hides the shape with the Portuguese word.
Clicking on the ‘play’ button will play the audio file. For this button to work as intended (the user should be able to replay it as often as they want), it’s important to untick the box ‘Continue movie at the end of audio’.
The fluid box design took some experimenting. The first version of this course performed well on desktop and on medium sized portable devices (certainly an iPad mini), but on smart phones the buttons started to appear in random locations for no apparent reason. I wasn’t able to find out why, because when previewing the course in a browser it performed as intended.
A lesson I learnt was to publish a prototype containing just a few slides early on before building out a course.
The current version should work well even on smart phones.
The screenshot below shows the fluid box anatomy of this project.
This reminds me, I HAVE TO start making all of my projects RESPONSIVE (its the way of the future).
Thanks for sharing!
Fluid boxes are a bow towards “mobile first” design. Soon we won’t have any other option 🙂
Very creative way of using fluid boxes, good job!
This is great for languages. Maybe if you could also write the pronunciation for those who are hard of hearing. I was one who had a hard time hearing and would have appreciated reading how to pronounce the new word.
Nice job Jorg,I like the way you used the fluid boxes in the design.
One content for all devices! Thanks for sharing this showcase.
Experience is great on mobile tried on chrome browser! Minor UI feedback – Play & Eye button positions keep moving between slides. can we remove this distraction?
Minor? I’d say major distraction. Thanks for pointing that out, Shambu. Shows that you can never test enough.
I will have to trouble shoot and go back to the drawing board I think.
Hi there. I’ve revised this course so now it should render well on smart phones as well. Thanks again for pointing this out to me.
You must be logged in to post a comment.
