Join James Williamson for an in-depth discussion in this video Preventing conflicts, part of Applied Responsive Design.
If users would only use our menu on one device and at one screen size, we would be all set.…Unfortunately, there are times when conflicts could occur between our menus, especially…if screens are resized or orientation changes, things like that. [00:00:17.0 1] Take our existing menu on an iPhone5.…When I show the menu on portrait size and just kind of interact with it, it works the…way you expect it to work.…Submenus open and close. They animate.…
It depends upon which one you clicked. You can collapse the menu down again, and that's great.…But now if I go into landscape mode, that's actually going to trigger the tablet styles,…and you'll notice that the tablets styles aren't designed to have the menu and the indicators.…Although the dropdown menu does work, you'll notice that click and touch events firing at the same time.…So that's why we are getting the sort of weird effect of the submenus opening up and then…closing immediately again.…And even worse than these is if somebody were to use this and go, "Oh, that's horrible. I…
- 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.