By Giles McGrath | Creative Director
Editor’s note: Below are rules Nos. 6-10 for designing a high-converting mobile landing page. Earlier this week, we published rules Nos. 1-5. You can see all 10 steps now on MediaWhiz’s SlideShare account here.
Rule #6: Simple UX/UI
Simplicity is paramount for a successful mobile site. Not only in terms of design but also the code behind the scenes. Best practice dictates designing sites using CSS to organize content in lew of HTML tables which will work better on a desktop site. In terms of design, lean towards a light colored background to help call out specific navigation and content points. Use white space where possible and design in a single column to best follow the shape of the mobile device.
Rule #7: Reduce Size
Every second of mobile site load time results in 20% of users dropping off and ultimately not converting. As a mobile connection is inherently slower than a wired connection, mobile pages must contain lighter content compared to their desktop counterparts. Should video or large imagery be a necessity, then the site should be built in HTML5. All images should go through a picture cruncher and videos should be hosted on a 3rd party server like You Tube. Of course the site should focus on conversions and it is still highly recommended to avoid placing large images or videos on the site.
Rule #8: Use a mobile URL
It has become not only best, but standard practice that ISPs, operation system developers and mobile handset developers recognize a mobile sub-domain. As such when a mobile site is available as an “m.”or “.mobile” URL the device will automatically redirect. This insures a better user experience and a site focused on their device. Significantly more programming will be required if a completely unique URL and an automatic redirect is desired.
Rule #9: Don’t force Mobile
Don’t lock users solely into the mobile experience. While having a mobile site for mobile users is best practice, mobile users may choose to access content and features not available on the scaled down mobile site or may simply be more familiar with the layout of the full site. Whatever the reason might be, it is always important to allow a simple way to go straight to the full site. This is best accomplished by a link at the bottom of the mobile page saying “visit full site” or similar language. Not implementing this critical feature on your mobile site may lead to a poor user experience of your site and ultimately translate to less conversions.
Rule #10: Testing
Testing is a critical and often overlooked step in mobile site creation. As new mobile devices, features, screen sizes, operating systems and resolution are constantly coming to the market. It is of paramount importance to test across as many devices and browsers as possible. While your site might appear to work on most devices, the one it does not work on may prove to be a significant source of traffic. So test, test and re-rest.
Now that you have all 10 rules are you ready to redesign your mobile website? If you want to see all 10 rules now visit our SlideShare account here.