RESPONSIVE MOBILE DESIGN And Using Adobe Captivate 8 Justin Student M.A. – Faculty of Medicine, Educational Technology Unit
WHY DESIGN FOR MOBILE? Should we design with mobile in mind? How do you incorporate mobile into your learning solutions? Do any of you make learning artifacts for mobile use?
DESIGN CONSIDERATIONS What types of devices? PC/laptop Tablet Phablet Smart Phone Screen Resolution – lowest common denominator Screen Resolution laptop: 1024x768 Landscape vs.Portrait Tablet: 1024x768 vs.768x1024 Phone: 480x320 vs.320x480 Browsers Chrome Safari Firefox Internet Explorer Etc.
WHAT IS RESPONSIVE DESIGN? The same content optimized for display on different devices. How can we achieve this? Create a separate artifact from scratch for each device = Labour Intensive! Custom HTML5 Stack coding: Controlling the style of your design at the global level (using CSS to identify device) = Do we have the expertise? Use authoring tools to do the coding for us = examples Adobe Captivate 8, Articulate Storyline, Trivantis Lectora, TechSmith Camtasia, Harbinger Raptivity etc.
ADOBE CAPTIVATE 8 What it can do: Takes advantage of mobile affordances: geolocation, swipe, tap, zoom etc. Responsive design – create 3 versions from 1 content dump (PC, tablet, phone). Publishes in HTML5 (using CSS and javascript) – NO FLASH (if you don’t want it) !
RESPONSIVE EXAMPLE Take out devices – click on this link:
RESPONSIVE WORKFLOW Using Adobe Captivate 8: Master slides – 3 views – PC/Tablet/Phone Make a page with image – show customizing the 3 views. Publish View Output
UBC MOBILE DESIGN TASK FORCE? As you can see, there are a lot of testing, bugs, work flows, platform questions to address! Is there any interest in setting up a group of people from this CoP to meet monthly/bi-monthly to take part in testing out mobile design features and pave the way for UBC moving forward? Contact:
QUESTIONS? Discussion points: How do we choose which devices to support? How do we use these tools with Blackboard?