Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Responsive    Patterns
Linz   fh hagenberg   web
19 inch15 inch   1280x960800x600
http://www.alistapart.com/articles/responsive-web-design
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
http://blog.japijane.cl/1 / 7
http://mdcraftbeerfestival.com/1 / 7
http://sycamoreschool.org/ / 72
/ 73    A pixel is    not a pix              el.
/ 7 3             pixe        vs                  l-Sl ow         ate    di ng         dL oa
/ 74    73% of    web desig              n is    typograp             hy.
http://informationarchitects.net/blog/responsive-typography-the-basics/://                   stephanierieger.com/a-plea-fo...
Embraceflexibili           ”          the          ty.
http://couchdb.apache.org/ / 75
http://clearairchallenge.com/ / 76
http://builtwithmomentum.com/ / 76
/ 77    mob       ile             d esk top
/ 77
7      http://stephanierieger.com//7
RESPONSIVE patterns
Thanks                    thanks        Font: http://www.behance.net/gallery/Frontage-Typeface-freefont/3292158 Wood Textu...
Upcoming SlideShare
Loading in …5
×

Responsive Web Design Patterns

1,323 views

Published on

How can we make pages that work across all devices out there? The answer is responsive web design and these are some patterns (techniques) that are currently being used.

Published in: Technology, Business

Responsive Web Design Patterns

  1. 1. Responsive Patterns
  2. 2. Linz fh hagenberg web
  3. 3. 19 inch15 inch 1280x960800x600
  4. 4. http://www.alistapart.com/articles/responsive-web-design
  5. 5. http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
  6. 6. http://blog.japijane.cl/1 / 7
  7. 7. http://mdcraftbeerfestival.com/1 / 7
  8. 8. http://sycamoreschool.org/ / 72
  9. 9. / 73 A pixel is not a pix el.
  10. 10. / 7 3 pixe vs l-Sl ow ate di ng dL oa
  11. 11. / 74 73% of web desig n is typograp hy.
  12. 12. http://informationarchitects.net/blog/responsive-typography-the-basics/:// stephanierieger.com/a-plea-for-progressive-enhancement// 7 4
  13. 13. Embraceflexibili ” the ty.
  14. 14. http://couchdb.apache.org/ / 75
  15. 15. http://clearairchallenge.com/ / 76
  16. 16. http://builtwithmomentum.com/ / 76
  17. 17. / 77 mob ile d esk top
  18. 18. / 77
  19. 19. 7 http://stephanierieger.com//7
  20. 20. RESPONSIVE patterns
  21. 21. Thanks thanks Font: http://www.behance.net/gallery/Frontage-Typeface-freefont/3292158 Wood Texture: http://free-textures.got3d.com/architectural/free-wood-textures/pages/free-wood-texture-002.htmlPattern Texture: http://www.freegreatpicture.com/background-patterns/light-green-background-pattern-20329 Rubber Duck: http://www.flickr.com/photos/21723187@N04/2608418319/ Inspiration: http://www.lukew.com/ff/entry.asp?1514 Responsive Gallery: http://mediaqueri.es/ Responsive testing: http://responsive.is/ Original Article: http://www.alistapart.com/articles/responsive-web-design/

×