Why Mobile-Optimized Works (pt 2)

Yesterday I wrote a post showing how companies’ mobile-optimized websites are generally better than their desktop websites when viewed from a desktop browser.  It’s a somewhat dramatic conclusion to make given that companies usually have a comparatively rag-tag team focused on mobile-optimized design (all the mobile efforts typically get aimed towards App design instead of mobile-optimized design) in comparison to the richer and more established desktop design efforts.  Why would the output of an afterthought team be better for a desktop than the hard-earned, constantly-A-B-tested, decade-long-work-of-love from the desktop web design team? I think there’s a few reasons:

  1. Constraints are good.  When you’re designing for less screen real-estate, you are forced to make tough choices.  For example, you can’t decorate the right rail of a webpage with 20 junk-drawer menu links on mobile because there isn’t enough screen real estate for a right rail at all.  When you’re forced to for 25% of the space, you are forced to decide what *really* matters.
  2. The mobile mindset is get in and get out. It’s not assumed that a mobile web session is going to be the start of a 30-minute rabbit hole of discovery.  Instead, people landing on a mobile-optimized site are likely coming from Google and just need what’s on the permalink being called.  A good mobile-optimized site serves this relevant information and very little else.
  3. Less ads. You can’t put 15 different banners interlaced in a poorly executed game of tetris above the fold when you’re designing for mobile because no one will ever trust your domain when they’re browsing from a mobile phone again.  Less screen real estate corresponds to less intrusive ads.
  4. Whitespace.  When you take a mobile-optimized site and you view it on a desktop, the various elements of the page scale up proportionally, including the whitespace.  Whitespace is an absolutely essential design tool; the more of it you use, the more you can focus your user’s attention on what matters.  If you want a button to grab your user’s attention, surrounding it with ample whitespace is your best tool.  So, not only are their less competing design elements on the page in a mobile-optimized site, but the ones that did make the cut get a healthy dose of whitespace to amplify them when rendered on a desktop.

That’s my hit list.  Add what I missed in the comments.