Join James Williamson for an in-depth discussion in this video Refining tablet layouts, part of Applied Responsive Design.
After styling our desktop regions, we have an established look and feel for our site.…As screen sizes get smaller, we need to try to retain that look and feel while optimizing…the layout for less screen real estate.…Let's go ahead and explore that concept as we refine our tablet layout, and for continuity's…sake, we'll focus on the exact same three page regions.…So I have the index.htm file open from 02_09 folder, and right know I am focusing on the…main.css file, which is found in the _css directory as well.…I've jumped down to the tablet styles, which you can find at about line 489 or so.…
Previewing the index page in the browser--let me just switch over to that.…You can see again, those areas really aren't that fleshed out. There is a little bit of…styling going on in the top region. We've got the size of it and the color, but the typography…and the logo are all wrong.…The mission statement area is sort of a mess, and we really just have the bare bones of…the structure of those detailed regions.…
- 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.