Juniper Research estimates that the number of mobile web users will grow from 1.2 billion this year to more than 2.4 billion in 2014. While many of these users will be able to surf the mobile web just as they do on their desktop and laptop computers, hundreds of millions of others will still be using smart phones with tiny screens and limited bandwidth and navigation.
This makes it imperative for your company's web designers to acquire tools and techniques for optimal mobile web design. On the mobile web, minimalism is essential because screen size is small, users may pay for bandwidth by the megabyte, and navigation is likely to be more difficult.
To simplify your mobile design, take the following steps:
- Streamline the menu system.
- Reduce or eliminate graphics, especially those used in navigation.
- Scale back text and break it over multiple pages.
- Eliminate Flash and JavaScript--design exclusively in plain HTML and XHTML using CSS (cascading style sheets).
- Avoid pop-ups, which can be unpredictable on mobile platforms.
- Think small. Mobile phone screen sizes and dimensions vary from 320 x 480 down to 128 x 160 pixels.
Use a mobile theme. In your content management system (CMS), use one set of CSSes for your main website and a separate set for your mobile website. Plug-ins are available for most open-source CMSes, including WordPress and Joomla, that can help mobilize your site with a separate mobile theme. Theseplug-ins can detect when a mobile browser is accessing the site and choose the minimalist CSS to display the site.
|
Test Your Mobility
To evaluate your website's mobile readiness, test it online using various validators and emulators: • ready.mobi page/site check • W3C mobileOK Checker • Mowser • Nokia N70 / Sony K750 emulator • Opera Mini |
Design to scroll only vertically. Limit page width so that users do not need to scroll horizontally to view content. Users should be able to view everything on a page by scrolling up and down.
Facilitate touchscreen navigation. Make options larger and increase the "clickable" space around them to facilitate touchscreen navigation. This makes the options easier to select on non-touchscreen mobile devices, as well.
Maintain consistency with your main website. Design your mobile site with a familiar appearance and navigation so that users of your main website can transition more smoothly between the main and mobile site. Make sure users can access their favorite information and features using recognizable links.
This article was originally published in the September 2010 print edition of Entrepreneur with the headline: Websites in Motion.
Life insurance as low as $14/mo for $250,000 or $21/mo for $500,000 of coverage. Contact MetLife®
Comments:
But people who read this may be wondering if they need to setup 2 different stores; one mobile and one for desktop users. The answer is "not necessarily". There are some good options out there that will detect the users browsing platform and will display either the mobile or desktop version. THAT'S AWESOME! -Daniel O. www.ShoppingCartsForWebsites.com/category/mobile-ecommerce
Some good points, however there is no reason to go without javascript. It's just a matter tweakng your UI behaviour and interaction with mobile in mind. So there may be some rewriting to reduce bloat and inefficiency. For a lightwieght JS toolkit try XUI. www.mobisenz.com
Some good tips, but there's no reason to ditch javascript totally. Check out XUI for a lightweight JS library. www.mobisenz.com
Some good points, but you don't need to eliminate javascript entirely. It depends on what capability you want to bring across, but it does take some care. mobisenz.com
All very good tips! Another good tip is to create an iPhone webpage. So basically, whenever someone comes to your website from an iPhone or iPad or iTouch or any Apple product, it'll be automatically directed to that specific webpage designed, specifically for the iPhone. This is especially helpful if you have any videos, so that people using an Apple product can still view the video on their device with ease.