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.

Introduction to Responsive Web Design


Published on

In this presentation, Shanna Kurpe introduces the technique of responsive web design, explains why it's important and offers examples and resources for learning how to develop responsive websites.

Published in: Career, Technology, Business
  • Be the first to comment

  • Be the first to like this

Introduction to Responsive Web Design

  1. 1. Responsive Web Design Presented by Shanna Kurpe
  2. 2. DISCLAIMER:I am not a designer or developer.
  3. 3. MY GOAL:Introduce you to new industry techniques so you can study them on your own.
  4. 4. AgendaIntroduction to Responsive Web Design Definition Pros and Cons Examples Resources
  5. 5. What is Responsive Web Design? The technique used to design a website that adapts to different layout environments Personal Computer eReaders and Tablets Mobile Phones
  6. 6. IN OTHER WORDS: One Website for all Devices
  7. 7. How is it done?W3C CSS3 Media QueriesFluid Proportion Based GridsAdaptive Content
  8. 8. Media QueriesWriting CSS that detects theCapability of a device anddisplays the best layoutbased on: Browser width and height Device width and height Orientation Resolution
  9. 9. Fluid Proportion Based Grids Mock-Up Preferred Fix- Width Layout Convert them into Percentages
  10. 10. Fluid Proportion Based Grids Mock-Up Preferred Fix- Width Layout Convert them into Percentages
  11. 11. Adaptive ContentCustom Layout Adjustments 1024 x 1280 800 x 1024 600 x 800 640 x 800 320 x 640 240 x 320 240 and belowHiding and Revealing Portion of ImagesForeground Images that Scale with layoutCreating Sliding Composite Images
  12. 12. FOR EXAMPLE
  13. 13. RESOURCES
  14. 14. ResourcesA List Apart Magazine at www.alistapart.comTree House at www.teamtreehouse.comFlexible Web Design: Creating Liquid and Elastic Layoutswith CSS by Zoe Mickley Gillenwater
  15. 15. Photo CreditsChapman, Cameron. Choosing the Best CSS Framework: A Complete Guide.DevSnippets. Web. Accessed 11 April Responsive Web Design, Most Complete Guide. 13September 2011. Web. Accessed 10 April 2012.@johnpolacek. What the Heck is Responsive Web Design. Web. Accessed 10April 2012.Knight, Kayla. Adaptive CSS-Layouts: New Era in Fluid Layouts?Smashing.Magazine. Web. 9 July 2009. Accessed 11 April 2012.Knight, Kayla. Responsive Web Design: What it is and How to Use it/Smashing.Magazine. Web. 12 January 2011. Accessed 11 April 2012.