Join Justin Putney for an in-depth discussion in this video Deciding how elements will respond, part of HTML5 Projects: Creating a Responsive Presentation.
- View Offline
Now that we've got our functionality in place, let's take an inventory and see…what kind of other display items we need to change and how the presentation might…change as the screen size gets smaller. So here's the Title slide.…It doesn't really function much like a title slide right now.…So let's think about what we can do to this.…One thing that I think of when I think of title slide, as a text generally sitting…more in the middle area. Another thing would be, nice and is often…used is to have a graphic here, so, we're going to pull the graphic from the…conference site here, the Cityscape background we're going to take advantage…of that. And we're going to have that image be…somewhat responsive so, I'm just going to go to the next screen.…
Let's take a look at how this scales. This is probably OK but, notice that…because we have that overflow sent to hidden, that we can't see the rest of this content.…Also, at a certain point we do want this text to get smaller and so I'll go to the…next screen, there's some issues with this image obviously, and we do have some text…
Discover how to structure the HTML and slide content; design the navigation to react to clicks, keyboard input, and swipe gestures; and use CSS to customize the slide display for different screens and animated transitions. Justin also includes a series of challenge-and-solution pairs to test your skills.
Then, when you're ready, watch the HTML5 Projects: Creating an Advanced Responsive Presentation follow-up course to enhance your web presentation slides with audio, video, and an automatic playback feature.
- Structuring an HTML5 slideshow
- Creating the default slide appearance
- Using jQuery to display the current page
- Adding swipe gestures for mobile
- Creating a pause screen
- Translating your ideas into CSS
- Using media queries to adjust the layout