Use Ordered Lists for Navigation
Unlike on the desktop Web it isn’t the best idea to have a navigation list on every page. Given the vertical orientation of the mobile page you should only show navigation relevant to the page, reducing page weight and scrolling. Instead we will add our navigation into the content body.
<div id="content"><br /> <ol><br /> <li><a href="news.html" accesskey="1">News</a><li><br /> <li><a href="products.html" accesskey="2">Our Products</a></li><br /> <li><a href="customers.html" accesskey="3">Our Customers</a></li><br /> <li><a href="about.html" accesskey="4">About Us</a></li><br /> <li><a href="contact.html" accesskey="5">Contact Us</a></li><br /> </ol><br /></div>
For our home page, we can take certain liberties in providing a description for each link to let users know what to expect in each section. By wrapping the description into a <span>, we can use CSS to style it differently from the navigation:
<div id="content"><br /> <ol><br /> <li><br /> <a href="news.html">News</a><br /> <span class="description">Read the latest about our products.</span><br /> </li><br /> <li><br /> <a href="products.html">Our Products</a> <br /> <span class="description">Browse our product descriptions.</span><br /> </li><br /> <li><br /> <a href="customers.html">Our Customers</a><br /> <span class="description">View our customers.</span><br /> </li><br /> <li><br /> <a href="about.html">About Us</a><br /> <span class="description">What we do? How can we help you?</span></li><br /> <li><br /> <a href="contact.html">Contact Us</a><br /> <span class="description">Telephone, email and location details.</span><br /> </li><br /></ol>
Sign in or register to reply.