Helpful Tips For Designing Mobile Websites

By: Owen Barron

More people are staying connected to the internet through cell phones than ever before. PCs and laptops are still used for conducting heavy work but since the first can't be toted and the second is a nuisance to carry all day long, cell phones have begun to replace the way people stay connected.

Phones are smaller, much more so than netbooks. They're used more often and don't leave the owner's possession. Most consumers prefer smartphones which run on operating systems similar to those used in computers, have a range of apps like PDF readers, word processors, maps etc and access to the internet through WiFi and 3G/4G. With so much to offer consumers, there's a need to optimize websites for viewing on mobile phones.

How mobile sites differ

If you compare a website viewed on a computer and switch to a cell phone, you'll notice that the layout is drastically different. Placement of tabs, links and menus are aligned for easy accessibility while horizontal scroll bars are not often used. Components deemed unimportant are done away with while maintaining appearance and cohesiveness.

Simple navigation

Building these optimized websites requires a special understanding of how cell phones work, taking into consideration size and platforms and browsers. Keeping navigation simple is extremely important as space is at a premium and most phones are controlled with one hand. Vital info should be located where the thumb can reach which means corners and bottom centers. Buttons should be large enough to be clicked for all thumb sizes but not be too large that they interfere with other navigation and cause accidental clicking.

Top to bottom content

As for content, the same content that's on a normal website should be made available but in a different layout. Mobile phone users don't have the patience to scroll a page where images and headers are located way below. Headers and logos must precede all content, followed by images and content (the first few lines of text) right below. These four points must be visible without scrolling.

Text and images should be readable without zooming in. Magnification should only be used to view an image close up. Keep in mind how small cell phone displays are even if they're 4.7 in or 5 in.

Users tend to orient their phones to view websites horizontally and some phones automatically adjust text size. You can choose to allow this or prevent it by adding a special parameter in the style sheet. For images, you can export them at full resolution to fit high-end phones and 50 percent lower resolution for low-end devices. Both should be presented as alternatives.

Ditch rollovers and hover buttons

Rollovers and hover buttons should be avoided to accommodate touchscreen users. Since these activate only when a pointer hovers over them, touchscreens don't detect fingers that don't actually touch screens so it's a waste of time.

Alternative viewing modes

Mobile websites should present users with the option of viewing a site in normal mode. Since mobile sites can sometimes exclude certain elements which some users may deem important, having the option to switch will see them remaining online and on-site.

Highlight links

Put links in focus by highlighting those the user has clicked or is currently on. Cell phone users don't have the time or the patience to scroll the entire screen just to figure out which page they're on. If highlights are not used, a change of font or buttons will suffice.

Article Directory:

| More

Due to fast internet speeds many prefer to browse the web through their smartphones. This is why mobile websites need to be optimized according to different screen resolutions. Click here to find out more.

Please Rate this Article


Not yet Rated

Click the XML Icon Above to Receive SEO Articles Articles Via RSS!

Powered by Article Dashboard