Responsive Web Design

1,246 views
1,162 views

Published on

Published in: Business, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,246
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
20
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \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
  • 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

    ×