Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Responsive Web Design

1 716 vues

Publié le

Publié dans : Business, Technologie
  • Identifiez-vous pour voir les commentaires

Responsive Web Design

  1. 1. Responsive DesignBrian P. Hogantwitter: @bphoganwww.napcs.com
  2. 2. Who’s Our Audience?Brian P. Hogantwitter: @bphoganwww.napcs.com
  3. 3. This is funnier than it should be.Brian P. Hogantwitter: @bphoganwww.napcs.com
  4. 4. The Basics of Responsive DesignBrian P. Hogantwitter: @bphoganwww.napcs.com
  5. 5. Brian P. Hogantwitter: @bphoganwww.napcs.com
  6. 6. Responsive Design AntipatternsBrian P. Hogantwitter: @bphoganwww.napcs.com
  7. 7. #1: Designing Big-Screen FirstBrian P. Hogantwitter: @bphoganwww.napcs.com
  8. 8. #2. Sending Too Much DataBrian P. Hogantwitter: @bphoganwww.napcs.com
  9. 9. #3. Doing Too Much Client-SideBrian P. Hogantwitter: @bphoganwww.napcs.com
  10. 10. #4. Shortchanging Users on ContentBrian P. Hogantwitter: @bphoganwww.napcs.com
  11. 11. Handling contentBrian P. Hogantwitter: @bphoganwww.napcs.com
  12. 12. Identify Important Regions Header / Branding area Primary Navigation Content blocks Footer Secondary Navigation Don’t think about a “sidebar”Brian P. Hogantwitter: @bphoganwww.napcs.com
  13. 13. Dig deeper Identify Content elements Identify Media elements Identify a hierarchy of the content!Brian P. Hogantwitter: @bphoganwww.napcs.com
  14. 14. Mobile-First!Brian P. Hogantwitter: @bphoganwww.napcs.com
  15. 15. http://uxdesign.smashingmagazine.com/2012/05/30/ design-process-responsive-age/Brian P. Hogantwitter: @bphoganwww.napcs.com
  16. 16. Handling ImagesBrian P. Hogantwitter: @bphoganwww.napcs.com
  17. 17. Load up small images in the markupBrian P. Hogantwitter: @bphoganwww.napcs.com
  18. 18. Image replacement $(img).each(function() { $(this).attr(src, $(this).attr(src).replace("_small.","_big.")); });Brian P. Hogantwitter: @bphoganwww.napcs.com
  19. 19. Handling navigationBrian P. Hogantwitter: @bphoganwww.napcs.com
  20. 20. Collapse The NavigationBrian P. Hogantwitter: @bphoganwww.napcs.com
  21. 21. http://bradfrostweb.com/blog/web/responsive-nav- patterns/Brian P. Hogantwitter: @bphoganwww.napcs.com
  22. 22. Tools Of The TradeBrian P. Hogantwitter: @bphoganwww.napcs.com
  23. 23. A Grid Framework http://getskeleton.com/Brian P. Hogantwitter: @bphoganwww.napcs.com
  24. 24. SassBrian P. Hogantwitter: @bphoganwww.napcs.com
  25. 25. blockquote { @mixin rounded($radius){ width: 225px; border-radius: $radius; padding: 15px 30px; -moz-border-radius: $radius; margin: 0; -webkit-border-radius: $radius; position: relative; } background: #faa; @include rounded(20px); } .button { cursor: pointer; color: #000; text-decoration: none; @include rounded(12px); }Brian P. Hogantwitter: @bphoganwww.napcs.com
  26. 26. CoffeeScriptBrian P. Hogantwitter: @bphoganwww.napcs.com
  27. 27. var Person, p; Person = (function() { function Person(options) { this.firstname = options.firstname; this.lastname = options.lastname; this.age = options.age; } Person.prototype.fullname = function() { return "" + this.firstname + " " + this.lastname; }; return Person; })(); p = new Person({ firstname: "Brian", lastname: "Hogan" }); alert(p.fullname());Brian P. Hogantwitter: @bphoganwww.napcs.com
  28. 28. var Person, p; Person = (function() { function Person(options) { this.firstname = options.firstname; this.lastname = options.lastname; class Person this.age = options.age; } constructor: (options) -> @firstname = options.firstname Person.prototype.fullname = function() { return "" @lastname = options.lastname + this.firstname + " " + this.lastname; }; @age = options.age return Person; })(); fullname: -> "#{@firstname} #{@lastname}" p = new Person({ firstname: "Brian", lastname: "Hogan" }); alert(p.fullname());Brian P. Hogantwitter: @bphoganwww.napcs.com
  29. 29. Jasmine http://pivotal.github.com/jasmine/Brian P. Hogantwitter: @bphoganwww.napcs.com
  30. 30. describe("Person", function() { it("has a full name", function() { var person; person = new Person({ firstname: "Brian", lastname: "Hogan" }); expect(person.fullname()).toBe("Brian Hogan"); }); });Brian P. Hogantwitter: @bphoganwww.napcs.com
  31. 31. Successful Responsive Design Organized Content Mobile-first design Structured and reusable codeBrian P. Hogantwitter: @bphoganwww.napcs.com
  32. 32. Responsive Designs http://www.uww.edu http://bostonglobe.com http://www.barackobama.com http://www.smashingmagazine.com/ http://bphogan.comBrian P. Hogantwitter: @bphoganwww.napcs.com

×