Created

May 21, 2013

Best Practice Mobile First & Responsive Design Session at CQCON 2013

Posted by Bruce Lefebvre

It's a romantic idea: a website capable of detecting the exact device it's being rendered upon and bringing forth a page perfectly tailored to its environment and network characteristics. Every pixel (or em) of available viewport real estate is accounted for. Staples of the individual device user interfaces - such as leatherbound skeuomorphism on the iFamily or clean, grid based UI on Windows - are included to give your page that native feel. Device features including touch gestures and geolocation are included for those device groups which support it. Each piece of hardware your client wishes to support is accounted for. 

However, the device manufacturers have other agendas. They want to make them smaller, then larger, up the pixel density, and make them wearable. TVs can now browse the Internet. Game consoles, too. New web enabled devices are entering the market faster than ever and their users expect your website to be usable. How can you keep up?

Enter responsive web design. In 2010, Ethan Marcotte wrote an article on A List Apart [0] that would launch RWD into the spotlight. In this article he outlined what it meant to be responsive and detailed the "three technical ingredients" necessary for RWD:

  • fluid grids
  • flexible images
  • media queries

With the momentum behind RWD picking up steam, we at Adobe began fielding questions on the best practices for implementing a mobile first site with Adobe CQ, now part of Adobe Experience Manager (AEM). 

I hope that you will join me @CQCON 2013 where I will present patterns for responsive design in Adobe Experience Manager and explain how to provide a media-rich HTML5 experience that is performant on low bandwidth connections. AEM's Geometrixx Media reference application, delivered in full source code with the product, demonstrates these techniques. I'll dive into how we used mobile first design principles, adaptive images and progressive enhancement to create it, and discuss the pitfalls that we encountered along the way.

[0] http://alistapart.com/article/responsive-web-design

file