Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Tip #2: Reduce the Number of Elements
As implied previously, designing a mobile website isn’t just about orientation; it’s also about simplifying. Since the mobile screen is smaller than a computer screen, you need to simplify your pages; you can only fit a limited number of items on a cell phone screen and have them big enough to be visible.
To this end, you need to reduce the number of elements that appear on the screen at one time. Instead of displaying a dozen different elements, opt for a half dozen or fewer. It’s a matter of what can fit in the limited space, and choosing those elements that are most important.
Consider, as an example, Lowes’ home page. On the regular web, Lowes presents a horizontal navigation menu that stretches the full width of the browser window, a big Flash-animated promotional graphic in the middle of the page, category navigation under that, and lots more stuff if you keep scrolling down. The page is filled with small text and image links, as befits a site offering lots of different content (and things for sale).
)
Figure 3 Lowes’ home page for the traditional web.
)
Figure 4 Lowes’ mobile home page -- simplified for mobile screens.
On its mobile page, however, Lowes simplifies things immensely. The mobile site offers a top-of-page search box, big buttons for shopping by department or room, another button to find your nearest store, and another button to access your orders. Scroll down the page to see additional navigation buttons, but you won’t find any big graphics or in-your-face specials.
It’s what visitors need to find, and nothing more.