It’s a roman­tic idea: a web­site capa­ble of detect­ing the exact device it’s being ren­dered upon and bring­ing forth a page per­fectly tai­lored to its envi­ron­ment and net­work char­ac­ter­is­tics. Every pixel (or em) of avail­able view­port real estate is accounted for. Sta­ples of the indi­vid­ual device user inter­faces — such as leather­bound skeuo­mor­phism on the iFam­ily or clean, grid based UI on Win­dows — are included to give your page that native feel. Device fea­tures includ­ing touch ges­tures and geolo­ca­tion are included for those device groups which sup­port it. Each piece of hard­ware your client wishes to sup­port is accounted for.

How­ever, the device man­u­fac­tur­ers have other agen­das. They want to make them smaller, then larger, up the pixel den­sity, and make them wear­able. TVs can now browse the Inter­net. Game con­soles, too. New web enabled devices are enter­ing the mar­ket faster than ever and their users expect your web­site to be usable. How can you keep up?

Enter respon­sive web design. In 2010, Ethan Mar­cotte wrote an arti­cle on A List Apart [0] that would launch RWD into the spot­light. In this arti­cle he out­lined what it meant to be respon­sive and detailed the “three tech­ni­cal ingre­di­ents” nec­es­sary for RWD:

  • fluid grids
  • flex­i­ble images
  • media queries

With the momen­tum behind RWD pick­ing up steam, we at Adobe began field­ing ques­tions on the best prac­tices for imple­ment­ing a mobile first site with Adobe CQ, now part of Adobe Expe­ri­ence Man­ager (AEM).

I hope that you will join me @CQCON 2013 where I will present pat­terns for respon­sive design in Adobe Expe­ri­ence Man­ager and explain how to pro­vide a media-rich HTML5 expe­ri­ence that is per­for­mant on low band­width con­nec­tions. AEM’s Geometrixx Media ref­er­ence appli­ca­tion, deliv­ered in full source code with the prod­uct, demon­strates these tech­niques. I’ll dive into how we used mobile first design prin­ci­ples, adap­tive images and pro­gres­sive enhance­ment to cre­ate it, and dis­cuss the pit­falls that we encoun­tered along the way.

[0] http://​alistapart​.com/​a​r​t​i​c​l​e​/​r​e​s​p​o​n​s​i​v​e​-​w​e​b​-​d​e​s​ign