Successfully reported this slideshow.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Responsive Web Design

  1. 1. Responsive Design Brian P. Hogan twitter: @bphogan www.napcs.com
  2. 2. Who’s Our Audience? Brian P. Hogan twitter: @bphogan www.napcs.com
  3. 3. This is funnier than it should be. Brian P. Hogan twitter: @bphogan www.napcs.com
  4. 4. The Basics of Responsive Design Brian P. Hogan twitter: @bphogan www.napcs.com
  5. 5. Brian P. Hogan twitter: @bphogan www.napcs.com
  6. 6. Responsive Design Antipatterns Brian P. Hogan twitter: @bphogan www.napcs.com
  7. 7. #1: Designing Big-Screen First Brian P. Hogan twitter: @bphogan www.napcs.com
  8. 8. #2. Sending Too Much Data Brian P. Hogan twitter: @bphogan www.napcs.com
  9. 9. #3. Doing Too Much Client-Side Brian P. Hogan twitter: @bphogan www.napcs.com
  10. 10. #4. Shortchanging Users on Content Brian P. Hogan twitter: @bphogan www.napcs.com
  11. 11. Handling content Brian P. Hogan twitter: @bphogan www.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. Hogan twitter: @bphogan www.napcs.com
  13. 13. Dig deeper Identify Content elements Identify Media elements Identify a hierarchy of the content! Brian P. Hogan twitter: @bphogan www.napcs.com
  14. 14. Mobile-First! Brian P. Hogan twitter: @bphogan www.napcs.com
  15. 15. http://uxdesign.smashingmagazine.com/2012/05/30/ design-process-responsive-age/ Brian P. Hogan twitter: @bphogan www.napcs.com
  16. 16. Handling Images Brian P. Hogan twitter: @bphogan www.napcs.com
  17. 17. Load up small images in the markup Brian P. Hogan twitter: @bphogan www.napcs.com
  18. 18. Image replacement $('img').each(function() { $(this).attr('src', $(this).attr('src').replace("_small.","_big.")); }); Brian P. Hogan twitter: @bphogan www.napcs.com
  19. 19. Handling navigation Brian P. Hogan twitter: @bphogan www.napcs.com
  20. 20. Collapse The Navigation Brian P. Hogan twitter: @bphogan www.napcs.com
  21. 21. http://bradfrostweb.com/blog/web/responsive-nav- patterns/ Brian P. Hogan twitter: @bphogan www.napcs.com
  22. 22. Tools Of The Trade Brian P. Hogan twitter: @bphogan www.napcs.com
  23. 23. A Grid Framework http://getskeleton.com/ Brian P. Hogan twitter: @bphogan www.napcs.com
  24. 24. Sass Brian P. Hogan twitter: @bphogan www.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. Hogan twitter: @bphogan www.napcs.com
  26. 26. CoffeeScript Brian P. Hogan twitter: @bphogan www.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. Hogan twitter: @bphogan www.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. Hogan twitter: @bphogan www.napcs.com
  29. 29. Jasmine http://pivotal.github.com/jasmine/ Brian P. Hogan twitter: @bphogan www.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. Hogan twitter: @bphogan www.napcs.com
  31. 31. Successful Responsive Design Organized Content Mobile-first design Structured and reusable code Brian P. Hogan twitter: @bphogan www.napcs.com
  32. 32. Responsive Designs http://www.uww.edu http://bostonglobe.com http://www.barackobama.com http://www.smashingmagazine.com/ http://bphogan.com Brian P. Hogan twitter: @bphogan www.napcs.com

Editor's Notes

  • \n
  • Before we can talk about responsive design we need to think about what our users want and need. Who are the people you’re targeting? What are their needs on the mobile deivce?\n
  • We have a limited amount of space, so we need to make sure that hte stuff they want to see is presented in an efficient manner. On a blog, it’s easy. But think about your projects. It’s not a trivial matter to take a very involved web site and turn it into a mobile app.\n
  • The responsive design movement is great, but it’s not as simple as just taking a templating system that resizes content. We have to make choices about our content, our navigation, and our users.\n
  • The idea of responsive design is that we reshape the layout of the page depending on the size of the screen. But that’s only part of the story.\n
  • Let’s talk about some ways to mess up a responsive design.N\n
  • When we start with a big widescreen design, we’re forced to think about what we have to drop in order to fit it onto the small screen.\n
  • Our pages have gotten big. If we load up everything on the site, our users will have to download that information. On limited data plans and slow connections, that extra stuff can be costly.\n
  • If we do the minimum, and don’t render any content, we can use JavaScript to transform things. But that means we have to load all the JS and have it render things, show things, hide things, and that can be slow too. In some cases it can be disatrous.\n
  • More people are coming to web sites from their couches or beds and they’re surfing on mobile devices. They get upset if you don’t present htem with the same information they see on their laptops or desktops.\n
  • \n
  • Identify the regions of your page first, as these are the easiest to find. Try not to think about what things will look like, but instead think about what they are. A “sidebar” of a page might just be another form of navigation or content. Identify the content regions.\n
  • Once we know about the regions, we have to think about the content we place in those regions. Most importantly we have to be concerned with our site’s content hierarchy. We need to prioritize elements. We may have blog articles, video content, comments, asides, etc.\n
  • By designing mobile first, you’ll be forced into prioritizing the content. Small screens mean making sure the most important elements come up first. Then you can expand out from that blueprint into the full desktop experience.\n
  • This article shows one example workflow that will work quite well for designing mobile-first.\n
  • Images convey a lot to our users, but we have to use them with care on mobile devices. So how do we do it in a responsive manner?\n
  • We can load up a small image as the image source, and then use HTML5 custom data attributes to attach larger images.\n
  • Then we just use JavaScript to replace the images when we load up the desktop version of the site. We don’t even have to use custom data attributes - we could just use a naming scheme and do string replacement.\n
  • Navigation is probably the hardest part of all. We have to make sure people can get to the things they need to get to, and we can’t rely on hovers and popup menus to get it done.\n
  • By using JavaScript and CSS, we can reconstruct the site’s navigation. The Boston Globe has different navigation schemes at different screen sizes.\n
  • Responsive Navigation Patterns shows a few approaches to making navigation work well on sites.\n
  • In order to pull this off, we can use some different tools to develop our code.\n
  • First, I’d recommend using a grid framework that supports responsive design. You can certainly build your own if you are really good with CSS, but there are a few great resources out there. There’s Twitter Bootstrap which is very popular, but there’s also my favorite, Skeleton.\n
  • Sass lets us make highly-organized reusable stylesheets. We can think more modularly and we can use things like variables and functions to build CSS. Sass emits basic CSS that our browsers can read, too.\n
  • For example, we can declare a “mixin”, which is a function, and we can then apply that bit of code to other definitions. \n
  • CoffeeScript is a preparser for JavaScript and it offers some new language features for making complex JavaScript easier to write. \n
  • We can encapsulate logic in JavaScript objects. The typical way to do that is to use a function constructor in Javascript and add methods to the object’s prototype. Here’s an example of an object written using JavaScript. If you’re experienced with more object-oriented languages with actual classes, this might be foreign to you.\n
  • With CoffeeScript, that code can be much easier to write, and to read. It’s also easier to decouple libraries like jQuery meaning we can make self-contained libraries.\n
  • A lot of the techniques we’ll use to build responsive sites involve heavy amounts of JavaScript, and so we have to test that code to make sure it works. Jasmine is a library that makes testing JavaScript code pretty simple.\n
  • A Jasmine test is designed to be easy to read. We set up our objects and then we use expectations to test the results. \n
  • To summarize, while there are some nice tools we can use to make responsive design easy, we still need to do a mobile first design and we need to think about our content. \n
  • \n
  • ×