Join James Williamson for an in-depth discussion in this video Structuring basic menus, part of Applied Responsive Design.
- View Offline
- Exercise Files
- Code Practice
If your site features minimal navigation, making the navigation function across all…screen sizes is a fairly straightforward operation.…Take the finished desolve.org basic menu that you're seeing here, for example.…Now, this menu only features four links, so it's fairly easy to make sure that all menu…items are being displayed effectively across all of the different screen sizes that we're targeting.…However, even simple menus like this one can still have complex requirements.…Now, notice that at the desktop, or larger screen size you're seeing here, our nice helpful…tagline appears under each of the menu items.…
However, as we begin to lose space, we start losing the amount of space that's necessary to…show those taglines.…So, we kind of have to figure out a way to hide those taglines, and do we need to have…enough space for icons as well?…As we get down to even less space within the mobile environment, we need to start thinking…about things like target areas for touch events and making sure that there's enough space…
- 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.