Presentation is loading. Please wait.

Presentation is loading. Please wait.

RESPONSIVE MOBILE DESIGN And Using Adobe Captivate 8 Justin Student M.A. – Faculty of Medicine, Educational Technology Unit.

Similar presentations


Presentation on theme: "RESPONSIVE MOBILE DESIGN And Using Adobe Captivate 8 Justin Student M.A. – Faculty of Medicine, Educational Technology Unit."— Presentation transcript:

1 RESPONSIVE MOBILE DESIGN And Using Adobe Captivate 8 Justin Student M.A. – Faculty of Medicine, Educational Technology Unit

2 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?

3 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.

4 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.

5 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) !

6 RESPONSIVE EXAMPLE  Take out devices – click on this link:  http://bit.ly/1w5Lsxm http://bit.ly/1w5Lsxm

7 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

8 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: justin.student@ubc.ca

9 QUESTIONS?  Discussion points:  How do we choose which devices to support?  How do we use these tools with Blackboard?


Download ppt "RESPONSIVE MOBILE DESIGN And Using Adobe Captivate 8 Justin Student M.A. – Faculty of Medicine, Educational Technology Unit."

Similar presentations


Ads by Google