Join Anastasia McCune for an in-depth discussion in this video Publishing a responsive project, part of Captivate Projects: Publishing for Mobile and the Web.
If you've followed along so far, we've published a nonresponsive project from Captivate. Now, we're going to publish a project with the same content as before, but one that's laid out as a responsive project. Responsive projects are new in Captivate 8. You can tell right away that this is a responsive project because of this bar across the top, this green bar. What we have is one project that can customize three different views of each slide. The first view is called primary view, it's what your project would look like on desktop, and on iPad in landscape orientation.
Now I'm going to click here to tablet view, and this would be something for how it would look like on an iPad held in portrait orientation. Now, I'll click to device, and this is what it would look like on a phone like an iPhone also held in portrait orientation. So you can see they look different. We can really see this working if we go to slide 9. This has some content featuring a hotel in Vienna. For the primary and tablet views you can see that they're really pretty similar.
Just some of the text sizes are a little bit different, some of the screen elements are moved around. On the device view, though, it looks really different. Here, let me turn off this text right here. So, there's not really room for both of those images, so one is just left out here on the side it's not viewable, and then the text that talks about the hotel doesn't appear to the side anymore. It's just invisible until somebody touches this, and then it appears over the whole slide instead of just down the side like it did on the bigger views.
So this entire project has been developed to accommodate those three different views. Now in terms of our Publish settings and everything else, we are pretty much ready to go to publish. So, to publish, you can go to the File menu and then Publish, or you could go to the Publish menu and choose Publish for Devices. They both go to the same place. Right off, you'll notice here that HTML5 is the only choice in terms of the output format. Responsive projects do not offer the option to publish out to Swift like the non responsive projects.
That's appropriate because mobile devices don't really support SWF format anyway. So the first thing to do is to make sure that we've got a good project title here so Landon hotel responsive is good. I'm just going to take out the spaces in between those different words and I want to make sure that the location we're appointing our output to is correct. So I'm going to go to my exercise files, and we're in Unit 2.2. The end folder. So for this check box for zip files, you don't really have to worry about it.
I'm going to leave it unchecked. If you want Captivate to zip up your zip files for you, I guess you could check it, but usually people don't use this unless they are packaging their files to upload into a learning management system. We're just going to view our project right now on the web so we don't need that. So you can see down here some more different information about the project. If you click any of these blue links you're basically taken to places within the Captivate preferences. For instance, if I click display score. We go to the Quiz Preferences and it's talking about, should I show this user their score at the end of the quiz? And you can update your quiz settings from here.
So, we have pretty much been through those earlier in the course. Notice that you do have mobile gestures available and they are turned on. So for any mobile device that this project is viewed on the user can use any of these gestures to control the project. Geo-location is something that you can use to control how Captivate behaves based on where the user is physically located while they're watching your project.
It basically takes. Advantage of the GPS settings in the mobile device. Our project doesn't utilize that so it's going to stay off. So, everything looks good, and I'm going to click Publish. Now I'm not going to view the output right now. I'm just going to go to the File Explorer. Here's our LandonHotelResponsive folder, and inside are all the different files that captivate created to make our project. So if you want to deploy this to be web you basically have to take all the files within the folder here and put them up on your web server in the same directory.
Then the file that you want to point your user to as the entry point for the project is the index.html file. So, I've uploaded this project to a web server, and we can view it here on the computer, and depending on the size of the screen that you're using. You'll be served up the appropriate view of the project based on those break points that we saw earlier. So here's how the project looks from my computer. >> Hi. I'm Vanessa welcome to the Landon Hotel. I'm so excited you'll be joining us as the newest member of our staff.
Today you'll get to know your way around. Here at the Landon we also like to start off all our new employees with story time. Basically the story of how The Landon began and what we're all about. Each Landon hotel is unique. Here are some featured hotels. >> So here's some of the hotels, and here's the one in Vienna, that we saw before. And it looks pretty much like it did, in the Captivate project. Now let's go and look at this on an iPad.
So it starts. So that's almost it for publish options out of Captivate. You can also publish out to Adobe Connect if you are using Connect. You just go to the publish button and then Adobe Connect. Basically you have to tell Captivate the name and URL of your Connect server and then select what output formats you want. Then log into Connect and you follow the prompts to publish your course and upload it, and you can be part of a Connect course, an existing one or a new one. You'll only caveat with Adobe Connect is that as of the making of this movie, the tablet and mobile views have responsive projects won't work in Adobe Connect and that is kind of a bummer.
So you can see that the responsive projects work really beautifully. I think the hard part about a responsive project is building it since you have to think about three potential layouts for every screen. Publishing a responsive project is easy. It's just a matter of hitting Publish, turning on your mobile gestures and geolocation if you need it and publishing. The files that we worked with here will be the basis of packaging your project up for an LMS. Or as an app and we'll explore that in another movie.