Join James Williamson for an in-depth discussion in this video Structuring page regions, part of Applied Responsive Design.
- View Offline
- Exercise Files
- Code Practice
Once you've planned your page content and worked through the initial design, it's time…to turn your attention to your site's initial page structure.…Now, I always do the exact same workflow. I'll start with the basic page container elements,…and then I begin to structure the content inside of them.…Now, this allows me to focus on the semantics of the code and ensure that it's going to…work the way that I expect it to across multiple devices.…So you might be wondering, if I'm talking about structure and code, why in the world…am I still in Illustrator?…Well, I want to show you guys sort of how I plan the structure and code, and then we'll actually…go and structure it.…
So here I am in the dissolve_mockup, found in the 01_04 folder, and I've got another…layer over here now called page structure. And I'm just going to turn this on, just kind…of show you how I do this.…What I'll do is I just is use solid shapes to represent containing elements.…And I really look at the content on the page and start thinking about how that content…
- 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.