Responsive Web Design RWD Patterns: Tables and Images

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

[00:00:05]
>> Ben: Let's talk about tables. So there's a bunch of people who've been trying to solve this problem, and there's probably half a dozen solutions that I think are pretty valid. But I think It's really gonna be highly dependent on the data that you're trying to represent, okay. Not every table solution is gonna work because there's lots of different kinds of tables.

[00:00:28] So let's take a look at how some of these guys are handling it. So this is Zurb, they've got a whole bunch of really nice tools for doing this kind of work. And you'll see what happens, kind of a basic table, headers, and rows. And at some point here what happens is, they determine that for their data that first column is critical, and so they give you the ability to kinda scroll the remaining table underneath that, okay.

[00:00:56] So if you're in a case where you need to have access to that first one. Maybe that's a a column of labels or headers or something and you wanna be able to kind just to slide different columns over left and right and compare, see the label with the data.

[00:01:10] This would be a really good solution for you. Chris Coyier, out on his site CSS-Tricks has this version. He's actually doing this with just CSS. [COUGH] It's kind of a cool technique. What he's done is literally flipping this table kind of on its side. So watch what happens here as I get to a certain point.

[00:01:34] What you'll see now is that I have the same content in this left column, so the first name, last name, job title, and then the data alongside it. So he had to know quite a bit about the structure of this table to be able to do this in CSS.

[00:01:49] He's using generated content and CSS and all befores and afters and all kinds of things like that. But depending on your use case, again, you might know that information and it may be very static. But if it's very dynamic, something like this probably wouldn't work for you. So you can kinda get a feel for what he's doing, really cool.

[00:02:12] I'm gonna walk us through another example a little later. This is a code pen that I built to kind of demonstrate it but, I'll show you quickly what I've done here, and then we'll walk through the code to do this. But this is the same kind of thing, but I've opted to kind of create, again, this is a very standard table structure, I haven't touched the markup.

[00:02:30] All I've done is a little bit of style, display block on some table cells and get them floated, set their widths. And you can really build what is actually fairly usable, blocks of data with a label. So we'll walk through that one in much more detail after lunch.

[00:02:49] So here's an example of one that I don't think is necessarily a very good idea. Well you'll see, what you'll see here is they've made some decisions about what you do and do not need at small resolutions, okay. So watch what happens as I get a little bit smaller.

[00:03:04] We don't need that column, let's just hide it. Didn't need those either, they're gone. So this kind of is, this is a little bit frustrating to me but I wanted to show you this in comparison to another similar solution that I think is much better. This was put together by the guys at Filament.

[00:03:21] And check out what happens here. So as I adjust my width, again, we see some height, all right, go way down and we've hidden some, they also give me this. I can choose which columns I really want to see. Really nice. A little bit of JavaScript is really all this takes and you've got to have the right class names and those sorts of things.

[00:03:46] But, man, this could really be, I think this has the most promise in my mind to work with more table structures than these others. So again, it kind of depends on the specific use case for your data, but when you get into building a site like this and you've got all kinds of different craziness going on in some table, you've got to start to figure out, how do we address these really wide tables of data?

[00:04:12] So lots of good solutions starting to emerge there. Let's talk quickly about images.
>> Ben: So there's been a lot of conversation about images,
>> Ben: [COUGH] Over the past few months, in particular. There's a working group that's been established to try to figure out, how do we provide images in a responsible manner?

[00:04:50] Somebody asked earlier about retina images, and how do we serve those? But really, if you think about, it there's a couple different problems that we need to solve with images. Obviously, the size of the image is something we need to think about. If I'm, say I'm in a photo gallery and I'm looking at this nice big beautiful image that's 800 pixels wide, if I open that same page up on my phone, which is gonna report 300ish, 320, whatever.

[00:05:20] I've got to be careful that I'm not serving this massive image down the pipe, to that small device, right. It doesn't necessarily need that much resolution in the image. So there's been all kinds of attempts to try and solve that problem. So the sort of responsibleness of it but there's another problem, too.

[00:05:38] The example that I think I've heard most frequently used is, say you've got a photo of the president. He's doing a speech, maybe at an inauguration or something, and he's got a nice wide shot. You can see some of the crowd in the foreground and you can see the White House in the background.

[00:05:55] You're looking at this at a thousand pixels wide. It's great. Soon as you take that 1,000 pixel wide image down and make it 300 pixels, that president that was pretty small even at 1,000 pixels is gonna turn into a toothpick, you're not even able to tell what it is, right.

[00:06:10] So this is more about the crop of the actual image right, I need a different image. I don't need to just scale it down, or serve a smaller version of the same thing. So there's a couple different problems at play here. The current status of this is, I mean, it's very much in flux, but people are starting to kind of settle on this idea of a new picture element in HTML.

[00:06:34] And Scott Jael has written a really nice polyfill for this, called Picturefill. And you can take a quick look here by looking at the sort of the market pattern with divs, kind of get a feel for what the intent is, [COUGH] with the picture element itself. It's kind of mimicked after video, the video element, where you can literally specify multiple sources.

[00:06:57] And the idea is that you can specify some media queries on those sources. So right inside the actual HTML, you can start to imply which images are appropriate for which viewport widths, with the same kinds of syntax you used to using in CSS media query syntax. You'll notice that there is sort of a default which is that small at the top, and you'll also notice, in his case, there's this fallback and no script.

[00:07:24] Because this is gonna use JavaScript to kind of come in and replace all this stuff and just put the right image in. In the end you need to make sure that if you don't have JavaScript you still serve something. So this is actually a very, very valid solution, you can use this today, and it works very well.

[00:07:43] So this could be something that could work, I think, and in fact, we were talking about implementing this on our new site as we build it. When we do so, we'll probably want to be smart about it. This right now, it's gonna generate divs, but in the future at some point, the idea would be once the appropriate amount of browsers are supporting this kind of thing.

[00:08:03] We'd want to replace all those divs that are maybe gonna be generated by a content management system with a picture element and actually a picture element and source elements inside. So we would build a little flag or a check box of some kind in the CMS that would kind of switch between generating divs versus generating the actual picture syntax.

[00:08:23] That way in the future, you can kind of just turn one off, and turn the other on, make sense? Okay, so other solutions to this, okay? Has this, this is kind of an experimentation more than anything but this is this idea of sort of a proxy server, okay.

[00:08:42] Where you might, in a normal way, just specify your syntax like that top image there. Whatever your file is, your URL is. They're suggesting maybe that you could experiment with it by replacing that URL actually just prepending that URL with their domain name. What's going to happen is the request gets made on their server.

[00:09:03] They parse out the image that you were gonna request originally, pull it into their server, do a little bit of user agent detection, device classification, make some adjustments to the size of the image, and return it back to you. So as I describe all of that, you can imagine that the performance of something like that is probably going to be something you're not gonna wanna put on a production site.

[00:09:22] There are some other, we've actually played with this and it actually works pretty well. I'm not one of the guys, the responsive guys who is completely against using some device classification or device detection when it's appropriate. We've been using those kinds of techniques for a long time now and there's a lot of really solid examples for how to do it.

[00:09:41] So I don't think that that's something we should ignore. ReSRC.it is something I came across a month or two ago, this is actually the same exact kind of technique, but this is a company that's trying to kinda sell you a service to do that. I'm not a huge fan of this, with one exception.

[00:10:00] I think that something like this could really catch on because it's just so easy to implement. If you had a really solid architecture behind this that made sure there were no performance concerns. All I have to do is change the URL to my image and everything just kind of works.

[00:10:17] So for less technical people, something like this might be a solution that gets them a bit more responsively serving those images. Anybody played with either of those, or, no? They're worth a little bit of experimentation. And if you want the same kind of approach, you could actually do the same kind of thing on your own server, right.

[00:10:40] I mean the detection stuff isn't really that complicated. This is a PHP based solution, but I think it's been ported to a couple other languages. The idea here is you modify your .htaccess, and you redirect any requests for JPEGs or PNGs, or any of those kinds of images Through another file which does the exact same thing that ReSRC.it and will do.

[00:11:00] A little bit of user agent stu,ff figure out what you should be serving, and then return the appropriately adjusted image. So the nice thing about this is it happens on your servers, you get to maintain it. But you also have, you own it. So if goes down and you're serving your images through you're going to in trouble.

[00:11:19] In this case, it's on your server, so you're not necessarily dependent on others.
>> Ben: And then one last pattern I'd like us to look at, are we okay on time? Finish up here, okay.