An Introduction to Responsive Web Design

  • 376 views
Uploaded 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.

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.

More in: Design , Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
376
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 1. Responsive Web Design Presented by Shanna Kurpe
  • 2. DISCLAIMER:I am not a designer or developer.
  • 3. MY GOAL:Introduce you to new industry techniques so you can study them on your own.
  • 4. AgendaIntroduction to Responsive Web Design Definition Pros and Cons Examples Resources
  • 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. IN OTHER WORDS: One Website for all Devices
  • 7. How is it done?W3C CSS3 Media QueriesFluid Proportion Based GridsAdaptive Content
  • 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. Fluid Proportion Based Grids Mock-Up Preferred Fix- Width Layout Convert them into Percentages
  • 10. Fluid Proportion Based Grids Mock-Up Preferred Fix- Width Layout Convert them into Percentages
  • 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. FOR EXAMPLE
  • 13. RESOURCES
  • 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. 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.