Join James Williamson for an in-depth discussion in this video Refining desktop layouts, part of Applied Responsive Design.
- View Offline
- Exercise Files
- Code Practice
In our first series of exercises targeted towards styling the different layouts for…desktop, tablet, and mobile, we concentrated on styling the sort of basic content regions.…So in the next series of exercises, I want to talk about refining those layouts, adding…a little bit of styling for the interior content.…And of course, we don't have time to do the entire layout, so I want to focus instead…on three very specific areas.…Now currently, I have the index.htm file open from the 02_08 directory.…I've also got the main.css opened from the _css.…
Again, since I'm working in Dreamweaver,…I'm going to kind of toggle back and forth between the two of them.…Now if I were to preview this in my browser right now, I can see that this is kind of…right where we left off before, where we have our basic content region styled.…So I want to focus on three very specific regions, one would be the header up top.…This is where our branding is going to go, in terms of the logo and the company name…and taglines, things like that. And then this mission area right down here where the mission statement,…
- 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.