Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive web introduction

345 views

Published on

  • Be the first to comment

  • Be the first to like this

Responsive web introduction

  1. 1. Responsive Web DesignAllan TanCEO, Ideyatech Inc.
  2. 2. 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
  3. 3. 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/
  4. 4. Brief History Ethan Marcotte2012 Top Web Design Trends Image courtesy: www.abookapart.com/products/responsive-web-design
  5. 5. 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
  6. 6. 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’
  7. 7. 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
  8. 8. 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
  9. 9. Demo - http://www.ideyatech.com/demo/index.html Step 1: Navigation Step 2: Header - search Step 3: Body - columns Step 4: Body - posts, tags - footer Step 5: Responsive
  10. 10. Responsive Sites Microsoft Starbucks Sony Disney
  11. 11. References • http://en.wikipedia.org/wiki/Responsive_web_design • http://mediaqueri.es/about/ • http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive- web-design/ • http://www.mequoda.com/articles/website-design/3-important-elements-of- responsive-website-design/ • http://www.mobilecommercedaily.com/the-pros-and-cons-of-responsive-web- design • http://engagingcomms.com/s/48/Responsive-Web-Design-Pros-Cons.html • http://www.designlunatic.com/2011/11/pros-and-cons-of-responsive-web- design/

×