HTML and CSS Reference
In-Depth Information
When you look at the same page on a mobile device, the space taken up on the let where the
vertical menu has been placed pushes the content downward. Users have to scroll more. Also
notice that the horizontal menu along the top is pushed in so that it now takes up two roles.
Figure 8-8 shows the results on a mobile browser.
For mobile devices, two-tier horizontal navigation bars — that do not push content below the
viewing area — may better serve you. As you can see in comparing Figures 8-7 and 8-8, the
horizontal navigation bar breaks into two tiers in the mobile device without taking up much
room. However, the vertical navigation bar pushes into the content area and forces more
content (including the navigation bar itself ) below the viewing area.
165
Figure 8-8: Vertical and horizontal menus on a mobile device.
USING GRAPHIC ICONS IN NAVIGATION
In addition to using text to link to other pages, you also can use graphic i les — JPEG, PNG,
or GIF. Using graphic images for linking can help users quickly i nd what they're looking for.
For example, a right or let arrow quickly can be identii ed as linking to the next or last page.
