An Introduction to Responsive Web Design

443
-1

Published on

In this presentation, Shanna Kurpe introduces students to the basics of responsive web design, and provides them with a list of resources for learning more.

Published in: Design, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
443
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • An 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 2012.DesignShock.com. 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.

    ×