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. Dig deeper
Identify Content elements
Identify Media elements
Identify a hierarchy of the content!
Brian P. Hogan
twitter: @bphogan
www.napcs.com
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. 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. Jasmine
http://pivotal.github.com/jasmine/
Brian P. Hogan
twitter: @bphogan
www.napcs.com
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. Successful Responsive
Design
Organized Content
Mobile-first design
Structured and reusable code
Brian P. Hogan
twitter: @bphogan
www.napcs.com
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
