Responsive Web Design Testing, Consistency, and Experimentation

Transcript from the "Testing, Consistency, and Experimentation" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Ben Callahan: Little bit about testing. The big, the best advice I can give you want testing is that you've got to use real devices. There's all kinds of stuff I mean all day. We've been looking at sites like Tate changing the width of our browser, but that's not enough.

[00:00:21] All you can really test there is layout. You know, you can't test things like contrast. You can't test things like performance. I mean, there's so many other things that are factors here and we really need to start testing on actual devices. I would recommend, this is just my personal thinking, but I'd recommend that you use Web Kit for your browser during development.

[00:00:40] The reason I would recommend that is because IOS and Android are all sort of, the default browsers are all webkit based browsers. You're going to get a good portion of the market share of a lot of those smaller screens, just by using the same rendering engine on your local box.

[00:00:56] So you should consider this at least. And then we talked a little bit. Marc was mentioning patterns. You know build patterns build libraries of the patterns the components that you're designing. This is going to help you in testing so much because if you would rather sit and kind of flip through every page of a website or every page of your app, you can do that, but you can also get 80% of your testing done if you just have a single page that has all those components on it.

[00:01:26] Get them loaded in, get them into the same kinds of layouts, but let people have a single page, or maybe a half a dozen pages that have unique layouts but have those elements living kind of outside of the functionality of your app but just visually let them live in a single page.

[00:01:42] And we do a lot of work where we do, we're basically a front end consultancy occasionally. We work with the backend development shop and we have to deliver the HTML, CSS JavaScript components to them. And when we do that we do it in a pattern library so that we can test somebody goes and makes a change to something in the Cascade, in CSS is affecting all kinds of other things I can go back to that one page see all those components and make sure I didn't screw something up.

[00:02:07] So this will save you a ton of time and testing If you don't have real devices go buy some. They're really not that expensive. You can find them used on Craigslist, on eBay. Used bookstores tend to carry a lot of the used readers as well. Get them for less than 100 bucks.

[00:02:24] I mean, to be honest with you, the price on these things is being driven down. We found a couple big organizations that had a bunch of Blackberries they wanted to get rid of them, they're buying new versions, so we got old versions. That's great. Got to test on the old ones too.

[00:02:39] If you really can't afford devices go to the Verizon store, go to the AT&T store. You know there's a whole suite of devices right there you can play around with. I mean I'm guilty of doing this, I've done it myself. If you've got to test, you've got to test, right?

[00:02:53] There's also been this sort of. A lot of people sort of all over big cities are starting to kind of build labs together. So maybe this actually would be a great placemark for a device testing lab. You know? Get a handful of devices that are in one space everybody knows.

[00:03:11] In your community knows that those devices exist and then you don't all have to buy the same devices you can kind of keep them in one place. Do your testing in one place. Any other ideas on testing or, yeah?
>> Speaker 2: So there's you go against any kind of emulator or simulator?

[00:03:27]
>> Ben Callahan: I don't, I'm not saying you shouldn't use them. I'm just saying that. Testing on an emulator is different than testing on a device. You know, they're not one 100% accurate. They do their best and sometimes they're helpful, but you need to test on a real device if you wanna know what it's really like.

[00:03:45] Cool. Okay, consistency. I talked a little bit about this earlier. I really believe this is true, familiarity breeds usability. So if you can find a way to create some consistency across resolutions. That's gonna help your users understand the usability of the site. Don't do crazy stuff just because you can.

[00:04:11] Some of that off canvas stuff we looked at is really cool. I think it has a lot of potential, but I think it could also be misused in a lot of ways. So make sure it's something that actually makes sense before you try and implement it. And users do resize their browser.

[00:04:25] We talked about this already, but the idea that they're viewing your site from lots of different resolution devices on different browsers in different contexts. So, you know, make sure that you're thinking about cross resolution consistency. I've done a bit more writing about that here and we can have a beer later.

[00:04:42]
>> Speaker 3: But they don't resize after they visit.
>> Ben Callahan: Well okay. So when people say this I see all these response people say you know this is a developer behavior your users aren't resizing your browser. What they're implying is what they're saying what they really mean to say is that in a single visit they're not going to all these sites and like I do.

[00:05:01] Resizing the browser is the new increasing the font size they're not changing their browser width all the time but they view your site from lots of different devices. The same person you have an i Phone. Do you have a tablet? I mean. You go to those same sites from different resolution devices so they are resizing their browser it's just in a different way, make sense?

[00:05:25] I'm just saying if we can create some consistency in all of those experiences the usability is gonna increase familiarity breeding usability. Experimentation. We talked about this a bit previously too. You know, get into the browser as quick as you can. I can't say this enough. You know, we're trying to shift as much of the process into the browser as we can because that's where, we're building sites, you know, we should be working in our medium.

[00:05:54] And the inspector is your friend. You know we saw some of those experimentations earlier. Like, get in there and play around. Those things are so powerful. Those tools are incredibly powerful. You need to understand how those things work. Okay, if we could, I'd like to take just a really short break.

[00:06:14] And then we'll come back and wrap this all up, all right?