Join James Williamson for an in-depth discussion in this video Structuring a responsive image gallery, part of Applied Responsive Design.
One of the goals of any responsive image gallery is to make sure that regardless of where the…gallery is being viewed, that users have access to the images, and they fit seamlessly into…the responsive layout that you've crafted.…So in order to do that, we're going to have to start our gallery with a really nice lean…well-structured gallery of images.…So, we are going to start of with the philadelphia.htm file, and you find in the 04_5 directory.…I have already scrolled down to about line 31 in the HTML.…
There's a little HTML comment right there that says gallery goes here. I am going to go…and get rid of that, and that is indeed where our gallery is going to go.…Now the first thing I want to do is create a div tag to hold my gallery.…I am just going to call it div class=photos.…What I'm doing right now--and again this is one of the things that I love about the photo…swap gallery that we are using--none of what I'm doing here structurally is being driven…by the gallery itself.…I can create the structure of this. The only thing I have to have our certain attributes…
- 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?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
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.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.