Responsive Web Design

  • 508 views
Uploaded on

A quick introduction to Responsive Web Design given to the UWW SOWD group.

A quick introduction to Responsive Web Design given to the UWW SOWD group.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Creator Shadow is the most professional and affordable web development & design company. World's best Intuitive web site interfaces and user-friendliness are the hallmark of our company.Responsive Web Design
    Are you sure you want to
    Your message goes here
  • Creator Shadow is the most professional and affordable web development & design company. World's best Intuitive web site interfaces and user-friendliness are the hallmark of our company.Responsive Web Design
    Are you sure you want to
    Your message goes here
No Downloads

Views

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

Actions

Shares
Downloads
18
Comments
2
Likes
2

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

Transcript

  • 1. RESPONSIVE WEB DESIGN By: Dan Pastori
  • 2. WHAT IT IS? A design that displays all of your content clearly andeffectively on all devices regardless of screen sizes, while maintaining a central theme. This used to be called Fluid design. Design for all screen sizes!
  • 3. BENEFITSYour content is clearly available on ALL devicesSEOStreamlined lookIf done correctly, you can design once
  • 4. TECHNOLOGIES USED *
  • 5. PROCESS/PRACTICEDesign for mobile first, scale up!Never have 2 scroll bars..EVER!Keep a consistent look.Design for content
  • 6. METHODSCSS Media QueriesJavascript
  • 7. MEDIA QUERIES<link href="styles.css" type="text/css" media="screen" rel="stylesheet"/> It gets even more awesome! Can use separate style @media (max-width:830px) { } You can morph your design as the size changes!
  • 8. IMPLEMENTATIONSingle Stylesheet (if not many styles)@media (min-width : 320px){/* Styles */}Multiple Stylesheets<link rel="stylesheet" href="smartphone.css"media="min-width : 320px">
  • 9. MEDIA QUERY ATTRIBUTES
  • 10. BEST TOOL
  • 11. OTHER TOOLSA variety of devices.http://mattkersley.com/responsive/ ~ Allows you to typein a URL and see the result at different screen sizes.
  • 12. FRAMEWORKShttp://foundation.zurb.com/http://twitter.github.com/bootstrap/index.html
  • 13. INSPIRATIONhttp://mediaqueri.es/http://sixrevisions.com/design-showcase-inspiration/responsive-webdesign-examples/http://mobile.smashingmagazine.com/tag/responsive-design/
  • 14. IMAGE SOURCES• Front Page Image: http://johnpolacek.github.com/scrolldeck.js/decks/responsive/• CSS 3: http://people.rit.edu/rag7482/320/Project3/images/css3.png• HTML 5: http://www.w3.org/html/logo/downloads/ HTML5_Logo_512.png• JQuery Mobile: http://jquerymobile.com/wp-content/uploads/2012/09/jquery- mobile-logo_positive.png
  • 15. CONTENT SOURCES• http://www.techrepublic.com/blog/webmaster/how-to-create- media-queries-in-responsive-web-design/1789• http://www.stuffandnonsense.co.uk/blog/about/ hardboiled_css3_media_queries/• http://css-tricks.com/snippets/css/media-queries-for-standard- devices/• http://www.onextrapixel.com/2012/04/23/responsive-web- design-layouts-and-media-queries/