Constant Contact Labs Developer Blog

• Putting the Mobile Web First Posted Friday, May 28, 2010 Jim Garretson 0 Comments

  It is unfortunate, but probably not very controversial, to say that mobile web sites tend to be second-rate afterthoughts compared to “real” desktop-browser-optimized sites. A lot of popular web sites either provide no mobile-optimized version at all, provide an overly-specific one built only for the iPhone, or provide a super-generic, watered-down WAP version that admittedly presents the content, but usually so that it looks like an unstyled bulleted list. What’s worse, none of these mobile strategies really scale well to handle new devices - say, a new class of device with a screen halfway between that of a smartphone and a desktop. The iPhone-specific version usually doesn’t display properly, the WAP version is way too basic, and the full desktop site often requires Flash, Silverlight, Java, or other heavyweight plugins that aren’t always available.

  It’s kind of a mess.

  
  

  Graceful Aggradation

  Constant Contact Labs enjoys pushing the company’s mobile boundaries. We built the company’s iPhone app, we launched a mobile version of our own site - this very site - on the same day as the full desktop site, and we continue to spend considerable time and effort keeping on top of the mobile world.

  So when I began a new project, one that seemed perfectly suited to mobile devices, I decided to test out a new strategy: graceful aggradation. That’s the opposite of graceful degradation, which is a common philosophy by which web sites are often built today. Graceful degradation is the philosophy that sites should work beautifully in new, advanced browsers, but they should still work pretty well in older browsers, and should at least provide basic functionality in out-of-date (or slow, or mobile) browsers.

  I’m calling graceful aggradation of a mobile web site the idea that a site should present a first-class, A+ experience on somewhat limited touch-based smartphones and other mobile devices, but that it should also look pretty great on a bigger, higher-res, more-capable device like an iPad, and that it should remain coherent and not too ugly on a fully-featured, plugin-laden, high-res, mouse-clickin’ desktop browser.

  
  

  This Thread is Useless Without Pix

  The early solution I’ve come up with is a Javascript-free, HTML+CSS3 layout that looks nice on Mobile Webkit-based smartphones (iPhone OS, Android, webOS, and, soon, Symbian + Blackberry OS), automatically scales itself up for iPad and other impending tablet-based devices’ higher resolutions, and expands gracefully when viewed in a full 1280x1024 desktop browser window. Here’s a live demo page, with reasonably comprehensible source if you’re interested:

  Click Here to View the Demo Page

  
  
  

  You can expand and collapse that page to see how it resizes itself as the available space changes. And, here are links to screenshots of how the demo page looks on different devices:

  Smartphones:

  • * iPhone
  • * iPhone (landscape)
  • * Android 2.0
  • * Palm webOS

  Tablets:

  • * iPad
  • * iPad (landscape)

  Desktop browsers:

  • * Chrome on XP
  • * Firefox on XP
  • * Safari on OSX
  • * No Internet Explorer. Let’s go, IE9!

  You can see that, on smartphones, the white content area completely fills the screen and the menu bar buttons collapse in to mimic the iPhone’s normal menu bar layout. On iPad, everything’s given more room to breathe, the menu bar expands to a more iPad-esque layout, and the content area becomes shadow-boxed. And on desktop browsers, the content area becomes fixed-width in order to maintain its geometry. (This is actually similar to how a lot of desktop-class sites work these days anyhow.)

  
  

  Conclusion

  I’ve demonstrated a simple way to scale a mobile site’s fundamental layout smoothly all the way up to the desktop without changing the design, but with mobile resolution as the intended first-class citizen and desktop resolution as a fairly pleasant alternative. I think this approach will work well for our prototype, and it provides a way to support mobile devices as the primary way of interacting with the site without completely dropping the ball for tablets, desktop browsers, or other devices yet to be conceived.

  What do you think? Does this make sense, or is it solving the wrong problem in a dumb way? Or do you just hate my inefficient CSS? Let me know in the comments!

   

  The opinions expressed here represent those of the author and not those of Constant Contact, Inc. Read Blog Terms

  Share

  | More

  Tags

  Interface Design • Mobile • Platforms • Web Development
  Next Post Previous Post

   

Comments +comment on this post

 

Add your comment below