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 Web Design

1,570 views

Published on

Published in: Business, Technology
  • Be the first to comment

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

×