Web Design with HTML and CSS

The need for mobile-optimized websites

Lesson 11, Mobile Design 251

Setting the fl oat property to none and the width to auto turns your navigation into a
vertical list. The text-align:left property places them on the left side of the menu.
The auto width will work only after you have converted the rest of your page to a single
column. You will continue to do that in the following steps.

Note that all the original properties for the appearance of the navigation list are still
present, including the background color and the height. This is a benefi t of the cascading
nature of CSS. A single property, such as the 35-pixel height of the list items, can work in
the desktop design and the mobile design, but you only need to specify it once.

Mobile Navigation Tips

Navigation that is easy to use is key to the success of your website. There are certain navigation

guidelines you should remember for mobile devices, particularly touchscreen mobile devices.

• Navigation should be at or near the top of the screen so the user can easily access it.
  Consider repeating your navigation at the bottom of all your pages so the user does
  not have to scroll back up when she is done reading a page.


• For touchscreen devices, use a large target size for navigation links. This will prevent
  accidental clicking by your users.


• Touchscreen devices do not have a hover capability, which is triggered on the desk-
  top by the cursor, so plan your styles accordingly.


• Refrain from using image-based navigation and use list-based navigation that is
  styled with CSS.

8 You will now add more styles in you media query for the sidebar and the main
content. First, locate the rule for the masthead ID and then add the following selector
(highlighted in red):
#masthead, #sidebar {
display:none;
}

This removes the sidebar on the left side from the mobile page. Floats in a desktop layout
can be useful, but not in a single-column layouts, so you will now remove the fl oated
properties of your main content div. Remember that for mobile devices, simpler layouts
work better.