Responsive Web Design Other RWD Considerations

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

[00:00:05]
>> Ben Callahan: So fluid foundation, flexible content, media queries, these three things alone all happening really in CSS let us do a ton of adjustment to a site, okay? If you just use these three things, you can actually get a layout to work pretty well if you're kind of smart about it, you can get it to work pretty well across devices.

[00:00:26] Now let's talk about some other considerations though. Because it's a lot more than just the guy writing the CSS that probably needs to be involved in this. We're gonna cover quickly, touch target area, hover states, contrast and readability. So not always, but most of the time, as the viewport width shifts down, okay, the smaller I get the more likely it probably is that I'm actually on a device with a different interaction model, okay?

[00:00:56] I'm no longer using on my phone a mouse and a pointer, which is incredibly accurate. /You know, we get we've gotten really good at using those things to be very accurate with our clicks and our interaction, but I've got a big fat finger that I've got to try and touch stuff with now, okay?

[00:01:11] How many of you guys have been on a site that's maybe it's a really cool responsive site, but the nav is so tight I can hardly, yeah, I can hardly touch the lid. I mean that's so frustrating. You know ,and it's not that hard to it to figure out.

[00:01:23] We can just add a little padding to those links, put a little space between them. All that can be done in CSS. It's really not that hard. Apple recommends in their native iOS guidelines, they talk about 44 by 44 pixels being the smallest target area touch size that somebody can reliably hit with a finger.

[00:01:43] That's kinda big if you think about it in terms of what a link generally is on the web. So we're talking about adding some significant space around around links to give people the ability to actually use them effectively. A lot of times I see this too. I see people using margin on their anchors to separate stuff, and if all they would do is switch that to padding instead, it's gonna increase the touch area.

[00:02:07] Padding is gonna add to the height or to the width of that link, as opposed to margin, which would put space around it. So it's something as simple as using padding instead of margin can actually be incredibly helpful for usability. There's lots of other guidelines too on those kinds of touch target areas from different hardware manufacturers.

[00:02:26] But that's kinda what Apple says. Hover states, I mean, good grief. I've seen this a lot where I'm playing around with a site on a touch device, and there's content hidden behind hovers. Drives me nuts. The devices, to be honest, are getting a little bit better at showing that content and registering the first touch as a hover.

[00:02:45] But man, it's still frustrating at times. And we could use some feature detection actually to really simplify this. Modernizr, who's using Modernizr? Really cool feature detection library, JavaScript based. You can build your own little production bundle that only tech tests for the features you need. And what it'll do is add this.

[00:03:05] It'll add a series of classes to the HTML element. And what they do is indicate whether a feature is supported or not. So now in CSS, I could do something like this. Apply standard styles to an anchor. And then in cases where no touch, in cases were to the user agent is not a touch agent, generally we could sort of expect that we're using a mouse and a pointer or some other interaction model.

[00:03:30] Then we could allow hovers. So just simply hiding our hovers behind a no touch class, you know, really simple to do, and could actually be very beneficial. I'm gonna show you guys one quick example of what I think is gonna be happening a lot more in the future.

[00:03:48] You guys saw the, who saw the new microsoft.com that launched not too long ago? Some giggles in the audience, what's that mean? You guys don't go to microsoft.com on a daily basis? [COUGH] Well, believe it or not, they actually did an incredible job. Perivale and Austin did this.

[00:04:06] Trent Walton and his crew, Dave I mean this is amazing. It's responsive.
>> Ben Callahan: It's actually a really nice site. What's interesting about this and I had just literally three weeks before this or maybe a month before they launched, I had said to one of our clients that we are working on a big, a big kind of complex nav and a responsive sys scenario.

[00:04:31] I said I don't think we should use hovers on your primary nav. They were the previous version of the site had a big, you know, horizontal nav you could hover over these things to get these mega drop downs. I said I thought why don't we even on the even on the desktop with them with a click of a mouse interaction, why don't we just make the user click products download security, why don't we do that?

[00:04:51] And so we did that. And then Microsoft launched and I was looking at the site and I just noticed this. I love it. They still got a little hover right, it's hard to see, but the color of the link changes when you hover, but I have to click to get the Mega Drop Down here.

[00:05:04] Okay, I think we're going to start to see this a lot more, shifting away from hiding that content behind a hover. I mean, a click versus a hover here, come on, like let's be real about how much time we're talking about. So I think this is great, and I think we're gonna start to see a lot more of this kinda thing.

[00:05:32]
>> Ben Callahan: [COUGH] There's lots of other things we could consider with feature detection as well here but that's just one example. Contrast. I don't see a lot of people walking down the sidewalk with a laptop kind of like this, right? You will see that a lot. Generally with a laptop, you're sitting someplace.

[00:05:50] It's kind of hard to use them standing or maybe you're a standing desk, but you're a bit more stationary. Occasionally maybe you're on a train or a subway or a bus or something. So there are use cases but especially in, you know, the more mobile context of a phone, I see people walking down the street all the time like this.

[00:06:06] You know, I think you know that the sun is bright and it's shining on that display. It's not a controlled environment. We need to be thinking about things like contrast, you know? And I see some of the coolest designs out there are the ones where they really are playing with just these minute differences in contrast and it looks great.

[00:06:28] When I'm looking at it on my cinema display in the office, but man I can't even see it sometimes on a phone, especially if I'm outside. You need to try this stuff. Take it outside, take your site outside on a device. Try it in bed when it's dark.

[00:06:41] Let's be honest, how many of you guys play with your phones at night when you're laying in bed, right? Who woke up with their alarm clock on their phone this morning? Okay, right next to you, right? I mean, these things are always with us. People are gonna try it and take it with you.

[00:06:55] Get out and experiment a little bit with it. Try it in other places. And then readability, a lot of times this drives me crazy. Small screens does not mean small type. [LAUGH] Okay, have you seen people doing this with their phones too, right? Crammed it right up to their face because they can't read the text, because somebody thought as the screen gets smaller, the type should get smaller too, but we actually use them much comfortable a comfortable place to use them is here.

[00:07:24] You know, it's a different distance than what we work with than what we might use a laptop. So when you think about those things, just try it, you know? It's not as easy to increase the font size on a phone as it is on a browser. I have to sort of pinch and zoom, you know?

[00:07:39] And then I've, if I've created a nice responsive of site and I zoom in, I have to like, I have to typewriter it, you know, to be able to read it. So try to create type sizes that are readable. Those are just a handful of things. There's a ton more that we could talk about and will talk about.

[00:07:53] But this is a quick overview, responsive, just to kind of bring everybody up to speed. I think we should take a quick five minute break. I'm gonna grab a little bit more water, and then we'll come back and talk a little bit about process, all right? Excellent.