150608 m learncon_tracy
•Download as PPTX, PDF•
0 likes•281 views
This document summarizes a presentation about designing instruction for multiple screen sizes. It discusses that today, eight different screen sizes account for 77% of web usage, with no single size having over 20% market share. This requires instructional designers to create responsive designs that can adapt to different devices. The presentation covers considerations for different device types and screen sizes, as well as rapid prototyping techniques. It provides examples of how content can reorganize and layouts can change depending on screen size. The goal is to design a single learning solution that can effectively be delivered across multiple devices.
Recommended
Recommended
More Related Content
Viewers also liked
Similar to 150608 m learncon_tracy
Similar to 150608 m learncon_tracy (20)
Recently uploaded
Recently uploaded (20)
150608 m learncon_tracy
- 1. MULTIPLE SCREEN SIZES ONE INSTRUCTIONAL DESIGN Tracy Bissette, Weejee, @tlbissette 6.11.2015
- 2. “IN 2006, JUST TWO SCREEN SIZES ACCOUNTED FOR 77% OF ALL WEB USAGE. TODAY, EIGHT SCREEN SIZES—VARIOUS LAPTOPS, SMARTPHONES, TABLETS, MONITORS, WEB-ENABLED TVS, AND NETBOOKS—ACCOUNT FOR 77% OF WEB USAGE. NO ONE SCREEN SIZE HAS MORE THAN 20% OF THE MARKET SHARE.” http://www.mobify.com/blog/global-screen-size-diversity/
- 3. How to plan and design one learning solution that is instructionally optimized for multiple devices and screen sizes. Considerations for each device type and screen size How to communicate your ”convertible” design to team members, clients, and SMEs Rapid prototyping techniques SESSION DISCUSSION Objectives
- 4. WHAT IS RESPONSIVE DESIGN? Design will “fluidly change and respond to fit any device.”
- 5. WHAT IS RESPONSIVE DESIGN? Design will “fluidly change and respond to fit any device.”
- 6. WHAT IS ADAPTIVE DESIGN? Design uses a “predesigned set of layout sizes.” “It detects the device and calls up the properly sized layout to view.” -Captivate 8 website http://www.liquidapsive.com/
- 7. WHAT IS ADAPTIVE DESIGN? -Captivate 8 website
- 8. WHY DO WE NEED RESPONSIVE E-LEARNING? › To be learner centric, we want to reach learners wherever they are. › There is research showing that sitting in a chair reduces concentration and increases fatigue. › It’s not cost effective to have different versions for different devices. › Device sizes change frequently. › Users expect responsive design because websites are already mobile-friendly. › Using responsive design logic, we can provide a single solution for in-depth course or performance aid, depending on screen size.
- 9. How might our approach to ID change for a responsive learning solution?
- 10. Think about the learner’s context while using the device. Leverage the grid concept in responsive design. Apply responsive web design and mobile-first best practices to e- learning. Think about the desired behavior change to determine what takes priority. SO, HOW DO WE DESIGN FOR RESPONSIVE OR ADAPTIVE E-LEARNING?
- 11. CONTEXT CONSIDERATIONS FOR DIFFERENT SCREEN SIZES › On a phone, the user is likely standing or walking, possibly about to perform the task— ”on-the-go experience” › On a tablet, the user is likely sitting but may be standing—”lean back experience” › On a desktop, the user is likely sitting at a desk › Consider whether you are using landscape, portrait or both
- 12. HOW DOES A FLUID GRID WORK? “ALLOWS LAYOUTS TO ADAPT TO DIFFERENT DEVICES, WITH THEIR MANY VARIED SCREEN SIZES.” http://www.coffeecup.com/help/ articles/grids-for-bullet-proof-responsive-design/
- 14. USE THE GRID www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop A B C D E F A B C D E F
- 15. USE THE GRID www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop A B D GF C E A D B C E F G
- 16. LET’S LOOK AT AN EXAMPLE A B C D E A B C D E
- 17. LET’S LOOK AT AN EXAMPLE A B F C D E A F B C D E
- 18. LET’S LOOK AT AN EXAMPLE A B C D E A B C D E
- 19. LET’S LOOK AT AN EXAMPLE A B F C D E G A B C D E F H H G Pop-up overlay Tap to reveal H
- 20. RESPONSIVE DESIGN NOMENCLATURE A B C D… Menu, Instructions, Key concept Choices, items to explore Items may fall out or change
- 21. LARGE SCREEN TO PERFORMANCE SUPPORT AID Immersive simulation Performance Inspecting Investigational Product Storage area conditions Authorized personnel Last patient, last dose Last patient, last dose
- 22. MORE EXAMPLES
- 23. MORE EXAMPLES
- 24. MORE EXAMPLES
- 25. ANOTHER LAYER--PARALLAX http://www.nytimes.com/newsgraphics/2014/sochi- olympics/ski-jumping.html http://nasaprospect.com/ MOVE ELEMENTS ON A PAGE AT DIFFERENT RATES Great for telling a story.
- 27. THOUGHT PROCESS FOR A RESPONSIVE DESIGN SOLUTION › Think about the context and performance objectives › Sort your content into As, Bs, Cs, Ds… › Establish guidelines for content types in your organization › Which elements of the grid drop out in smaller screen sizes? › Which elements of the grid change in smaller screen sizes? › Wireframe on the grid
- 28. ACTIVITY Design a 1-2 screen module on making the sandwich of your choice. › I’ll pass out grid worksheets. › Identify the key elements in your module. › Sketch them out on a grid of your choice or create your own for both larger screen and smaller screen. › Volunteers to share? Design a responsive sandwich making module with a partner.
- 29. ACTIVITY Objective: Be able to make a peanut butter and jelly sandwich. Elements: › Supplies needed › Steps › Visuals or videos of the steps Nice to haves: › Nutritional information › Prep time Design a responsive sandwich making module.
- 30. ONE APPROACH A--Title B- Step Recipe title Supplies Nutritional info (scroll) Ste p 1 Ste p 2 Ste p 4 Ste p 5 Ste p 3 Ste p 7 Ste p 8 Ste p 6 B--Supplies C- Step D- Step E- Step F- Step G- Step H- Step I- Step
- 31. How do we “storyboard” for a responsive learning solution?
- 32. HOW DO YOU STORYBOARD NOW?
- 33. VISUAL PROTOTYPING Module Name, Navigation MEET THE TEAM Christina, David, Anita and Wesley are meeting as a Senior Leadership Team to discuss positioning, new business opportunities and strategic relationship development with businesses. The team has been developing relationships with national and regional companies in the food processing, mobile phone technology and banking industries over the last year. Christina is a country representative A B C D E F A B C D E F
- 37. Mobile-first design best practices— http://www.uvu.edu/web/training/tips/adaptive.ht ml Responsive design device sketches— Interfacesketch.com Grid templates-- http://www.printablepaper.net/preview/storyboar d-letter-16to9-3x3 If you’re interested in receiving this PPT presentation, please leave your card at the front. RESOURCES
- 38. CONTACT US TRACY BISSETTE, M. ED. Chief Learning Officer tracy@weejee.com m 919.768.2512 o 844.4.weejee CHRIS MANARO VP of Sales chris@weejee.com m 919.741.3249 o 844.4.weejee IAN HUCKABEE CEO ian@weejee.com m 919.619.6119 o 844.4.weejee FOLLOW US facebook.com/weejeelearning twitter.com/weejeelearning linkedin.com/company/weejeelearning
Editor's Notes
- My name is Tracy Bissette. I’m one of the co-founders of Weejee Learning, a custom content design and development company. My background is as an Instructional Designer. I haven’t done any web design since 1998. We’ll be talking about some web design principles today but through the context of instructional design.
- Let’s take a look back at this evolution of screen sizes. Back in 2006 (Flash era for e-learning), just 2 screen sizes accounted for 77% of all web usage. Reveal other 2 facts. What happens in the web world eventually makes its way over to e-learning and now the need for responsive e-learning is here. What’s most important is that no one screen size has the majority of the market share. Otherwise, we could target 1 or 2 devices or device sizes. http://www.mobify.com/blog/global-screen-size-diversity/
- So, with that in mind, in today’s session, we’ll talk through these four items.
- You’ve probably heard a lot about responsive design and adaptive design. What’s the difference? http://www.techrepublic.com/blog/web-designer/what-is-the-difference-between-responsive-vs-adaptive-web-design/ https://blogs.oracle.com/marketingcloud/difference-responsive-adaptive-web-design True responsive design is fluid, using CSS3 media queries to respond to any screen sizes.
- Here’s another example of a truly responsive site.
- “adaptive files don’t respond once they are loaded. It detects the device and calls up the properly sized layout to view.” One of the nice things about adaptive design is that since it is recognizing the device, it could bring up the camera feature just on the devices with cameras. http://www.techrepublic.com/blog/web-designer/what-is-the-difference-between-responsive-vs-adaptive-web-design/ Captivate 8 is adaptive https://blogs.oracle.com/marketingcloud/difference-responsive-adaptive-web-design http://www.sitepoint.com/moving-beyond-responsive-web-adaptive-web/ Context-aware modules – So you can send the “Call Us” module only to call-capable devices, the “Camera” module only to devices with cameras, etc. Server speed for rendering – Servers are typically still quite a bit faster than any front-end device, so why not let the server do the hard work, and simply deliver the render-ready content to the device. Caching modules on server – And once that hard work is done on the server, cache it there so it doesn’t need to be re-processed for each page load? Faster page loads - By building and caching these modules on the server and delivering them with the rest of the page, you avoid the delay and additional HTTP Request that would be required if JavaScript had to determine what is needed and then request it via Ajax. Choice of programming language – If it’s in the browser, it’s JavaScript. Your server, however, can use anything, as long as it outputs something the browser can render.
- Captivate 8 is adaptive, not truly responsive. http://www.sitepoint.com/moving-beyond-responsive-web-adaptive-web/ Context-aware modules – So you can send the “Call Us” module only to call-capable devices, the “Camera” module only to devices with cameras, etc. Server speed for rendering – Servers are typically still quite a bit faster than any front-end device, so why not let the server do the hard work, and simply deliver the render-ready content to the device. Caching modules on server – And once that hard work is done on the server, cache it there so it doesn’t need to be re-processed for each page load? Faster page loads - By building and caching these modules on the server and delivering them with the rest of the page, you avoid the delay and additional HTTP Request that would be required if JavaScript had to determine what is needed and then request it via Ajax. Choice of programming language – If it’s in the browser, it’s JavaScript. Your server, however, can use anything, as long as it outputs something the browser can render.
- For the purposes of today’s session, we’ll focus primarily on responsive design since it is truly convertible learning that enables a single, device-agnostic solution. So, we know that the world of website design has moved to responsive design, but why do we need responsive e-learning? http://elearningindustry.com/responsive-elearning-design-ready-yet
- OK, so how might our approach to instructional design change for a responsive learning solution?
- This conference theme is “learning in context”. Why does the context matter? It truly determines what you serve up to the user and how you display it. http://elearningindustry.com/responsive-elearning-design-ready-yet considerations-for-designing-e-learning-for-tablets-vs-smartphones
- One of the key ways to design responsive e-learning is to design using a fluid grid layout. How does a fluid grid work?
- http://www.1stwebdesigner.com/fluid-grids-in-responsive-design/ There are fixed grids and fluid grids. Fixed grids are based on numbers of pixels. Fluid grids are based on percentages. Here, we’ll focus on fluid grids. In fluid grids we define a maximum layout size for the design. The grid is divided into a specific number of columns to keep the layout clean and easy to handle. Then we design each element with proportional widths and heights instead of pixel based dimensions. So whenever the device or screen size is changed, elements will adjust their widths and heights by the specified proportions to its parent container.
- http://elearningindustry.com/responsive-elearning-design-ready-yet
- http://elearningindustry.com/responsive-elearning-design-ready-yet
- http://elearningindustry.com/responsive-elearning-design-ready-yet In this example, the images changed from bodies to just heads using CSS.
- http://elearningindustry.com/responsive-elearning-design-ready-yet
- http://elearningindustry.com/responsive-elearning-design-ready-yet
- http://elearningindustry.com/responsive-elearning-design-ready-yet
- You may find it easier to layout the mobile version first
- Might be easiest to start on the mobile first
- The responsive design frameworks can automate what gets moved around or dropped off but make sure that it is also the design you intended on each device.
- https://weejeelearning.mybalsamiq.com/projects
- Many custom companies have created their own responsive frameworks. Weejee has as well. Are there others that you are familiar with?