Mobile websites’ homepages beat the pants off regular websites’ homepage designs at achieving a homepage’s goal: driving the visitor deeper into the site.
Q: Why are the homepage designs of mobile sites so much more effective than the design of ordinary homepages?
A: The reduced space on mobile screens forces choices in what to display, and this is especially true on the homepage.
Look at Amazon’s regular design:
Look at how the gaze plot and heatmap from Feng-Gui (that’s predictive eye-tracking; check out my friends at MiraMetrix.com for actual eye-tracking equipment) shows the human eye having too many focus spots on the regular home page … and this is Amazon we’re talking about, the retailer everyone looks to for leadership in usability and conversion rate optimization.
Compare that to their much easier-on-the-eyes mobile homepage:
The difference isn’t always as dramatic, as when the layout has already been well designed with a main focal point and the remainder of the page in secondary focus. Observe the change from eBay’s regular homepage to their mobile site:
Q: Based on the above example, couldn’t you argue against designing a homepage by starting with the mobile site? Where would you place the product spotlight?
A: It’s far more likely you’ll succumb to the temptation to clutter your homepage if you first create a full-size design, rather than designing the mobile homepage first.
Besides, look at the focused, effective job Amazon did with their mobile homepage, which spotlights the Kindle. If you must have a spotlighted item, you can do that on mobile and translate that later to your regular home. Note also that the valuable upper-left hand screen real estate on eBay’s full size homepage is dedicated to the main navigation, just as the mobile site design emphasizes it.
So if you’re designing a new site for a client, here’s a best practice tip:
Build the mobile homepage design first. Then port that to the non-mobile version of the homepage. You’ll find a lighter, more usable design.
Even better, by starting with the mobile design, you have less to do quality assurance testing on before going live. That means you can get a design out faster.