• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Responsive Web Design
 

Responsive Web Design

on

  • 13,772 views

How to create a responsive web design

How to create a responsive web design

Statistics

Views

Total Views
13,772
Views on SlideShare
4,398
Embed Views
9,374

Actions

Likes
22
Downloads
233
Comments
5

27 Embeds 9,374

http://arquiteturadeinformacao.com 6674
http://arquiteturadainformacaodigital.blogspot.com.br 862
http://itweb.com.br 574
http://thegoodarticle.com 506
http://criarestilosnet.com 187
http://arquiteturadainformacaodigital.blogspot.com 186
http://blogs.teste.bireme.org 147
http://mcafigueiredo.blogspot.com 59
http://paper.li 51
http://arquiteturadainformacaodigital.blogspot.pt 50
http://arquiteturadainformacaodigital.blogspot.ru 28
http://mcafigueiredo.blogspot.ca 12
http://julianaconstantino.wordpress.com 7
https://twitter.com 6
http://translate.googleusercontent.com 5
http://us-w1.rockmelt.com 4
http://mcafigueiredo.blogspot.com.br 3
http://a0.twimg.com 3
http://localhost 2
http://mcafigueiredo.blogspot.pt 1
http://127.0.0.1 1
http://arquiteturadainformacaodigital.blogspot.nl 1
http://www.arquiteturadainformacaodigital.blogspot.com 1
https://si0.twimg.com 1
http://arquiteturadainformacaodigital.blogspot.de 1
http://arquiteturadainformacaodigital.blogspot.se 1
https://www.facebook.com 1
More...

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

15 of 5 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • open examples sites & flickr.com in safari, \nopen codes in github (chrome), working site & fittextjs.com\nopen totalterminal for cal, \nopen codes in textmate, \n
  • \n
  • ask who is using which device\n
  • ask who is using which device\n
  • ask who is using which device\n
  • ask who is using which device\n
  • ask who is using which device\n
  • ask who is using which device\n
  • ask who is using which device\n
  • ask who is using which device\n
  • ask who is using which device\n
  • ask who is using which device\n
  • open them in safari\n
  • ask which text editor they use\nask who knows html/css/javascript - ask them to stop me!\n
  • ask which text editor they use\nask who knows html/css/javascript - ask them to stop me!\n
  • ask which text editor they use\nask who knows html/css/javascript - ask them to stop me!\n
  • ask which text editor they use\nask who knows html/css/javascript - ask them to stop me!\n
  • ask which text editor they use\nask who knows html/css/javascript - ask them to stop me!\n
  • ask which text editor they use\nask who knows html/css/javascript - ask them to stop me!\n
  • ask which text editor they use\nask who knows html/css/javascript - ask them to stop me!\n
  • ask which text editor they use\nask who knows html/css/javascript - ask them to stop me!\n
  • ask which text editor they use\nask who knows html/css/javascript - ask them to stop me!\n
  • ask which text editor they use\nask who knows html/css/javascript - ask them to stop me!\n
  • ask which text editor they use\nask who knows html/css/javascript - ask them to stop me!\n
  • ask which text editor they use\nask who knows html/css/javascript - ask them to stop me!\n
  • ask which text editor they use\nask who knows html/css/javascript - ask them to stop me!\n
  • ask which text editor they use\nask who knows html/css/javascript - ask them to stop me!\n
  • ask which text editor they use\nask who knows html/css/javascript - ask them to stop me!\n
  • ask which text editor they use\nask who knows html/css/javascript - ask them to stop me!\n
  • ask which text editor they use\nask who knows html/css/javascript - ask them to stop me!\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • go on to edit the css\n
  • revise the percentage number\n
  • revise the percentage number\n
  • revise the percentage number\n
  • revise the percentage number\n
  • revise the percentage number\n
  • \n
  • go on to edit the css FIRST\n\ngo on to edit the html FIRST\n
  • go on to edit the css FIRST\n\ngo on to edit the html FIRST\n
  • go on to edit the css FIRST\n\ngo on to edit the html FIRST\n
  • go on to edit the css FIRST\n\ngo on to edit the html FIRST\n
  • go on to edit the css FIRST\n\ngo on to edit the html FIRST\n
  • go on to edit the css FIRST\n\ngo on to edit the html FIRST\n
  • go on to edit the css FIRST\n\ngo on to edit the html FIRST\n
  • \n
  • \n
  • open Ethan Marcotte’s book\n
  • \n
  • \n

Responsive Web Design Responsive Web Design Presentation Transcript

  • @sayanee_
  • RESPONSIVE WEB DESIGN codes + slides
  • RESPONSIVE WEB DESIGN
  • RESPONSIVE WEB DESIGNadaptive fluid flexible flowing
  • RESPONSIVE WEB DESIGNadaptive fluid flexible flowing device-agnostic optimised-viewing
  • EXAMPLESSimple Bits Happy CognitionResponsive 2010 Duster ThemeShelf Foundry Theme TileablesMr. Simon Colly Media Queries
  • TOOLS
  • TOOLSBrowser
  • TOOLSBrowserText Editor
  • TOOLSBrowserText EditorSimulator
  • TOOLSBrowserText EditorSimulator
  • TOOLSBrowserText EditorSimulatorCoding
  • #1 fluid layout#2 media queries#3 flexible media
  • #1 fluid layout
  • 1280px #1 fluid layout
  • 1280px #1 fluid layout 960px Hola! Travel with me devices footer
  • 1280px #1 fluid layout 960px Hola! Travel with me devices 600px main footer
  • 1280px #1 fluid layout 960px Hola! Travel with me devices 600px 300px main sidebar footer
  • #1 fluid layoutthink in pixels percentages target / context = result
  • 1280px #1 fluid layout 960px Hola! Travel with me devices 600px 300px main sidebar footer
  • 1280px #1 fluid layout 960px /1280px = 75% Hola! Travel with me 960px / 960px = 100% devices 600px / 960px= 62.5% 300px /960px = 31.25% main sidebar 960px / 960px = 100% footer
  • #2 media queriesmin-width 1280px landscape landscape 1024px 960px portrait portrait 768px 640px four 1200px 1024px 600px layouts 768px
  • #2 media queries 1200px 1024px 768px 600px
  • #2 media queriesin style.css :@media screen and (max-width: 1200px ){} /* desktop */@media screen and (max-width: 1024px ){} /* iPad landscape */@media screen and (max-width: 768px ){} /* iPad portrait */@media screen and (max-width: 600px ){} /* iPhone */
  • #2 media queries in style.css :@media screen and (max-width: 1200px ){} /* desktop */@media screen and (max-width: 1024px ){} /* iPad landscape */@media screen and (max-width: 768px ){} /* iPad portrait */@media screen and (max-width: 600px ){} /* iPhone */in index.html, inside <head> :<meta name="viewport" content="width = device-width" />
  • #3 flexible mediaimg, embed, object, video { max-width:100%}
  • #3 flexible mediaflexible heading using fittext.js
  • OTHER RESOURCESBlog posts: Books:1. Think Vitamin 1. by Ethan Marcotte2. A-List Apart3. Smashing Magazine Videos:4. Fluid Images5. Web Designer Wall 1. Nettuts6. CSS Tricks7. Six Revisions8. fittext.js
  • codes + slides
  • @sayanee_