The New Mobile Web
How to Achieve Responsive Mobile Web Design
Designing and building separate experiences, content, and functionality isn’t sustainable at scale. To cope, marketers are turning to responsive Mobile Web design as the solution. Responsive design uses one set of assets in conjunction with several style sheets to format content appropriately for different screen sizes. Responsive Mobile Web Design recognizes the post-PC nature of digital-content consumption today and ensures that experiences are well integrated and coherent regardless of the screen on which they are consumed. Dedicated mobile sites and occasionally even tablet experiences use separate code, content and assets than their desktop equivalents. This requires development for each screen and means customers will almost invariably experience disjointed brand and communication moments. In order to create responsive mobile design, marketers must know the three tenets of responsive Mobile Web design and the three development keys to achieve success.

Three Tenets of Responsive Mobile Web Design
1. Each screen size to be designated and designed for simultaneously 2. Fluid, grid-based designs 3. Modern browsers

Three Development Keys For Responsive Mobile Web Design
1. Media Queries Media queries allow the presentation layer to collect data about the user’s screen size and utilize it to apply the appropriate CSS for their device. 2. Flexible Layouts A flexible grid ensures that all elements in a layout are resized in relation to one another when stretched or contracted. 3. Flexible Images Images are resized according to the detected screen size and image resolution is reduced when displayed in mobile devices, which results in an optimization of load times.

Contact for more information
Chia Chen, SVP, Mobile Practice Lead, Digitas Email: chia.chen@digitas.com Twitter: @talk2chia

July 2012   


Sign up to vote on this title
UsefulNot useful