Join James Williamson for an in-depth discussion in this video Image gallery overview, part of Applied Responsive Design.
The more that users access content across multiple devices, the more they expect that…content to function in a way that's consistent with the device's capabilities.…Take photo galleries for example. Not only to users expect them to display in some sort…of modal window. On phones or tablets, they expect them to also be able to swipe through…the images as well.…Creating a responsive image gallery that takes the capabilities of multiple devices into…consideration is a daunting task.…In the next series of exercises, I'm going to show you how to integrate one such gallery into your site.…
I have opened up the finished version of the gallery that we're going to creating in a browser right now.…I'm just going to scroll down a little bit to show you a few images of the city of Philadelphia.…And what I like about this type of gallery is it's nice and fluid and flexible. You can…scan the images really quickly and easily.…It's very easy for somebody to see all the images, but if they want a closer look at…
- Creating mockups
- Structuring page regions
- Defining default styles and media queries
- Building desktop, tablet, and mobile layouts
- Structuring and styling menus
- Dynamically replacing menus
- Creating a responsive image gallery
- Adding phone functionality
- Testing responsive sites
Skill Level Intermediate
1. Planning Responsive Designs
2. Building Responsive Layouts
3. Responsive Navigation
4. Creating Responsive Media
5. Enhancing Sites for Mobile
6. Managing Resources
Additional resources4m 10s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.