Responsive Web Design Retrofitting Tables

Transcript from the "Retrofitting Tables" Lesson

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

[00:00:04]
>> Ben Callahan: I got a call one day from a company. I'm not allowed to, technically, I'm not allowed to talk about them. So, I got a call from this company, you would probably know them if I gave you their name. And they showed me this thing, this kind of process that I had to kind of walk through with them on the phone.

[00:00:21] This was one of those cases where they said this has to work with, you can't touch the markup, you get one link in the head of the document. And they let me put the meta tags in for the view port with, but basically, this is where this whole process I answered a bunch of questions through this web app that they had.

[00:00:36] And at the end of the app, it presented me with this in a modal popup. And I'm on my, I'm in, like, Chrome or something, and I'm looking at this with them. And what's going on here is, this is sort of a, each of these rows represents a payment schedule that you can choose, okay?

[00:00:54] And then the dates go across the top. So, if you choose 11 payments, you're gonna pay 18 bucks a month for 11 months. If you choose four, you're gonna make one, today, one in October, one in December, and one in February. So you could choose, the user got a choice, and the prices were different for them.

[00:01:11] The total price paid is a little different, if you make that payment right upfront. Paid in full, 152 bucks, so I got to this point in the in this explanation and I said, there's, I don't think we can do anything with this, this is a table. It's in a modal, it's like, there's just too many things that I thought to over to try and overcome.

[00:01:31] But I had at least learned enough to think, maybe I should just try to experiment a little bit. So again, in that repository, there's a /tables folder, but I'm just gonna show you a little bit about kind of how that worked out for us. So, I've kinda taken that and kinda mocked it up as a demo here.

[00:01:51] [SOUND] So I mean, this is a pretty standard table, table with a header, th is inside. Width's being specified right here. This kind of stuff was in there, some inline styles, some of those kinds of things, whatever. And there was some styles to kind of make it look the way it looked.

[00:02:15] And what I did, basically was write a single HTML, CSS file that got applied to this. Let me just, kinda.
>> Ben Callahan: So here's that table, before any of my styles are applied except one rule. So I had one media query that was applied at like below 500 pixels or something, and I've got as you can see one rule right here, background color red on the body.

[00:02:41] So that I could tell that it was firing. Everything else is commented out in there. So when I get below a certain point, you can see that, that mediocrity is being applied. That those styles are being loaded. So, as I kinda just walk through this. So here's the style we just talked about box sizing, right?

[00:02:58] I wanna head and applied that by default. And then I gave the table itself a width and a border. And you'll see that at this point, it doesn't really take much effect. But as I start to get through some of these other elements, you'll see. So now I'm just giving the table cells themselves, table headers and TDs are getting a display block, they're floating left, text aligning, a little bit of a border.

[00:03:26] Those kinds of things. And now, we start to get it so that it actually fits right on on a screen. Still, obviously not perfect and we have all this stuff now which is kind of lost a bit of its meaning. Because the table's no longer really working in columns like it was.

[00:03:47] [COUGH] So if I just, I decided I would take the headers which was that left column. I'm sorry, the top column. And you kind of see the top on the left are both th. So we've got this nine payments, right here, right? Is now being represented in a full width, 100% wide cell.

[00:04:10] Okay, so I've just taken that cell. I gave a display block already above and I just set its width to 100%. Now, it also means that all of these are 100% which is kind of ugly. I'm actually just gonna hide those a little later, I'll show you. But the TDs where all the actual data is, width of 25%, give them a minimum height of 3ms, and now all the sudden, they kinda fit in a nice little grid.

[00:04:38] Just literally, just I mean, we've used tables for years to do crazy stuff with our layouts. All we're doing is just kind of, okay well, we know we can do some crazy stuff with tables. Let's let's style it a little bit. That top row up there, I'm just gonna hide it.

[00:04:54] I mean at this point, I'm not allowed to touch the markup. We're talking about a dozen text attributes, essentially. So now I've got something that's actually pretty readable, but I just hid all the dates, right? The dates across the top, so it's very unclear to me as a user when I'm gonna make these payments.

[00:05:16] I can tell that I have four payments of 40, 30, 30, 30 but I don't know when those are gonna happen. And you'll notice that this on the server was being generated dynamically, so they were looking at the current date today and calculating a month from that day and writing that in on the server.

[00:05:34] There's no way I can do that in CSS, right? I can't, I mean, we're talking about getting crazy, [LAUGH] if I try to solve that in CSS. So, I started to think a little bit about what we could do and I started experimenting a bit. What I ended up doing is using some generated content here.

[00:05:57] And what I've done is actually, you can see I added in the word, today using CSS with a content, a generated content in CSS. So now in this case, I have to know about my table, right? I have to understand that the second td, td:nth-child(2) is today, right?

[00:06:19] Cuz the first one was the column on the left that had the payment information, the number of payments. So now I can do the exact same exact same thing with each of these using nth-child, okay? So I'm just going down the row and I'm adding in month two, month three, month four.

[00:06:39] So a more a generic version of what they had previously at larger resolutions. And you'll see that quickly that, that at least makes the content understandable to my user, right? So now it's clear that if I choose nine payments. I gotta pay 32 bucks today. The second month, I'll owe 20, third month I'll owe 20, fourth month, etcetera, right?

[00:07:01] Same thing with sixth. I can see that I don't make a payment on the third month. So again this is, if you're building this from scratch, do not do it this way. Right? You don't want your content that like actually important content to be generated by CSS, that's not really what the intent is.

[00:07:18] But in a scenario where you're trying to build a better experience on a small screen. If my choice is to do something like this or to give them unmanageable table, I'm gonna choose this. So, just a couple more styles that kind of hide some of those empty cells.

[00:07:34] So you can see over here that some of these aren't quite working and I've got some empty stuff, and I need to get rid of some of those. So I can just do display non on a handful of those, to get some of those gone. And then finally, that paid in full, that last one is just a single element always, so I'm just gonna set that one to 100% and, ta-dah.

[00:07:58] Pretty cool right? I mean, that's just, it's 100 lines of CSS to do that, and this actually ended up working for them. So we took that project and we built with a single CSS file, we were able to build a much, much better experience for them. Again, kind of with the understanding that this is a step in the right direction.

[00:08:21] And if you're gonna use these techniques on older sites, you need to be planning that next phase, which is coming back in and rethinking the usability at smaller resolutions. Questions on this? Yeah.
>> Speaker 2: This is super awesome, but what gives you the thought or inspiration to actually think to do something like this?

[00:08:42] Where, what's the process look like to thinking, well, I need this to be nicer. I guess, a creative infusion kind of happens there, and I'm not sure where I get that.
>> Ben Callahan: It's experimentation, is really all it is. I mean, literally, in 30 minutes of me just playing around in the inspector, like I showed with Twitter.

[00:09:03]
>> Speaker 2: Right.
>> Ben Callahan: That's exactly all I did. I just started floating things. I said, I don't know. I've never tried to set a TD as a display block and float it left, and set the width. I never tried that before, what if I do it? Let's see if it works.

[00:09:17] And after a little bit of experimentation quickly realizing that I could actually do that, that just opens up a whole world of possibilities of ways that you could adjust the table. So, I think it's, I don't know, it's just, I guess it's kind of just, again my instinct was to say there's no way we can do this.

[00:09:36]
>> Speaker 2: Right.
>> Ben Callahan: This is the point where I'm saying, stop talking to me on the phone, you're wasting my time. But I was just willing to kinda try it. I guess that's it, an experiment.
>> Speaker 2: Cool.
>> Ben Callahan: Yeah?
>> Speaker 3: This is a similar question. You showed the example of the Twitter site, where you're making them stretch.

[00:09:52]
>> Ben Callahan: Yeah.
>> Speaker 3: The techniques you did were possible for a long time.
>> Ben Callahan: Yeah.
>> Speaker 3: Right.
>> Ben Callahan: Yeah.
>> Speaker 3: So why didn't they do in that? I'm just curious cuz-
>> Ben Callahan: [LAUGH] Because why didn't Twitter do it?
>> Speaker 3: Yeah
>> Ben Callahan: Because we've been building sites as fixed width, we've been thinking about the web is as if it's fixed width for a long, long time.

[00:10:15] I mean, I can remember sitting at an event apart and Eric Meyer was on stage, and he was presenting some some cool CSS thing. And somebody asked him, can we start designing our websites for 800 by 600, yet? And I mean it just shows how it entrenched in that mentality we've been, they wanted to know what they were asking is, our global analytics indicating that enough people are using monitors that are bigger than some resolution.

[00:10:51] So that we can start designing our sites at that size. And he answered, he said, well, you shouldn't be asking me about the global analytics. You should be looking at the analytics of your specific site. I mean, he was saying at the time, if you're doing a website for an old people's home, they may have much smaller displays, and their type maybe huge.

[00:11:13] And so no, you can't do that, you need to serve them where they are. But nobody was really thinking about this idea of embracing the fact that you could set your browser in a different width than your display. So, I mean there were people talking about liquid layouts and those kinds of things.

[00:11:33] I think when media queries, when Ethan connected liquid layout kind of techniques for that fluid foundation with a media query, which lets you adjust a much, make a much larger adjustment layout. That's when it was like, light bulbs, everywhere going off. You're right. We have been changing the width of our browser forever and all the sites that are fixed width.

[00:11:53] If I take Twitter and make my, view that site full width in my desktop that's like my big old cinema display. It's like, I could fit three Twitter websites on that. I mean there's massive spaces on either side. I mean, I think, we should be rewarding users with big displays.

[00:12:10] There's all kinds of techniques we could use. These exact same techniques that we could use to do some really fun stuff for people with bigger resolutions. So there's lots more to think about than just small, and I don't know why Twitter didn't do it. Twitter has a separate mobile site, I think, so if you hit their site with a small device, you actually get redirected to the mobile Twitter site.

[00:12:32] So they've chosen to do it that way, and they're actually having great success. More people are using Twitter in the mobile web than on the on apps, partly because they're killing all the apps that use them. [LAUGH] I don't know if that answered your question or not but, yeah.

[00:12:48]
>> Speaker 4: And also, looking at your own analytics, that's not always a great picture of what's possible because for instance, people that either will side on mobile, will not come back to it, if it's bad.
>> Ben Callahan: Sure.
>> Speaker 4: If you made it mobile friendly, maybe you get a lot more traffic.

[00:13:12]
>> Ben Callahan: Yeah.
>> Speaker 4: And that's like, quite a few cases when you revamp your site to make it mobile friendly, then all the sudden, your mobile traffic doubles.
>> Ben Callahan: Yeah, people aren't afraid to come there anymore.
>> Speaker 4: Right.
>> Ben Callahan: Yeah, and it's funny cuz I've used that kind of an argument with clients in the past, too, where they've said to me, hey, you know what?

[00:13:32] It's cool, all that stuff you're doing for mobile, but I also have a big population that's still using IE7. 10% of my traffic is still on IE7. So, what are we gonna do, it needs to look and function just like it does on the modern browsers. And usually, I'll say to them, okay, let's talk about analytics for a little bit, okay?

[00:13:52] So what, let's look at the growth rate of IE7, people browsing IE7. What do you think that growth rate looks like? Right? Yeah. And what do you think the growth rate for people using modern, smaller devices is like. I mean, I can spend, hours and hours, and hours, trying to make your site function picture perfect on IE7.

[00:14:13] Or we can just say, you know what, let's give them the content, that's great. But let's invest that money doing something else, like building for the future. So that's kind of an argument that you can't, like nobody's gonna say no to that. At least I haven't had them say no yet, [LAUGH] so.

[00:14:30] Now, that doesn't mean we should ignore those older browsers. We still need, the content should still be available to those to those individuals, so. Other questions on this, okay?