• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
An Introduction to Responsive Web Design
 

An Introduction to Responsive Web Design

on

  • 631 views

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.

Statistics

Views

Total Views
631
Views on SlideShare
631
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

An Introduction to Responsive Web Design An Introduction to Responsive Web Design Presentation Transcript

  • Responsive Web Design Presented by Shanna Kurpe
  • DISCLAIMER:I am not a designer or developer.
  • MY GOAL:Introduce you to new industry techniques so you can study them on your own.
  • AgendaIntroduction to Responsive Web Design Definition Pros and Cons Examples Resources
  • 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
  • IN OTHER WORDS: One Website for all Devices
  • How is it done?W3C CSS3 Media QueriesFluid Proportion Based GridsAdaptive Content
  • Media QueriesWriting CSS that detects theCapability of a device anddisplays the best layoutbased on: Browser width and height Device width and height Orientation Resolution
  • Fluid Proportion Based Grids Mock-Up Preferred Fix- Width Layout Convert them into Percentages
  • Fluid Proportion Based Grids Mock-Up Preferred Fix- Width Layout Convert them into Percentages
  • 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
  • FOR EXAMPLE
  • RESOURCES
  • 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
  • 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.