Responsive Web DesignAllan TanCEO, Ideyatech Inc.
Overview of Contents • Market Growth • Brief History • What is Responsive Web Design ( RWD)? • Why use Responsive Web Design? • Elements of Responsive Web Design • Best Practices • Demo
Market Growth in the past 3 yrs. Tablet PC 300,000 apps market exceeded downloaded Laptop sales* 10.9 billion times according to data from mobile subscribers NPD DisplaySearch* 6 billion (worldwide) mobile browsing 1.2 billion users *All data are based on Mobile Growth Statistics of 2012 http://www.digitalbuzzblog.com/infographic-2012-mobile-growth-statistics/ http://www.smartinsights.com/mobile-marketing/
Brief History Ethan Marcotte2012 Top Web Design Trends Image courtesy: www.abookapart.com/products/responsive-web-design
What is Responsive Web Design (RWD)?is the concept of a website which should adapt to fit anydevice that chooses to display it. User’s Behavior & = design + Environment development
Why use Responsive Web Design? 1. Smoother user experience 2. Less maintenance 3. Better analysis on statistics 4. It is the ‘wave of the future’
Elements of RWD • Fluid Grid / Flexible Layout - sizing in proportions - % rather than px • Flexible Media - images and videos - also sized in relative units (up to 100%) • CSS3 Media Queries - conditional styling - allows you to target specific viewport & device sizes
Best Practices 1. Content choreography - the art of maintaining order and context 2. Surrender control - hide/reveal content 3. Embrace fluidity - think and develop a flexible system 4. Think proportionally - how elements in the design relate to each other and how those relationships can change. http://www.netmagazine.com/features/five-steps-gettin-flexy-responsive-web-design