[music]
Sandi: Hi this is Sandi Wassmer, and you're listening to Web Axe.
Dennis: Hello, and welcome to Web Axe podcast number 97: Responsive Design and Accessibility. This is your host Dennis.
Happy new year everyone. And along with the New Year is the new Web Axe theme song for the second time. But this time, the final version with some lyrics in there. Hope you enjoyed that.
Today’s podcast is going to be with a conversation with George Zamfir about responsive design, what it is, and how it relates and helps web accessibility. So enjoy.
Dennis: So, I have George Zamfir on the line. Hello, George.
George: Hey, Dennis.
Dennis: Good to have you on this morning and get to know you a little bit.
George: Oh man, good to be here.
Dennis: Cool, cool. So I’m in the California San Francisco bay area, and you are in Toronto?
George: I’m in Toronto, just 20 minutes away to Toronto.
Dennis: Oh, okay. Good. Well thanks again for joining us. Do you want to give us a little personal introduction besides where you live?
George: Sure. Well, I may have one of those stories that not many people relate to. But anyway, here it goes.
Basically, I came to Canada as an international student in 2004. So that was my first contact with Canada, or the Western world, I should say. I have a Romanian background, Eastern European. So there. That holds everything about my background, right? All right. Let’s go talk about accessibility.
Dennis: All right.
George: No, here is one more thing. I did Computer Science when I came to Canada in Toronto with this cool university called Ryerson University, and that’s also where I started with accessibility. I was looking for a job. I was this poor student, trying to get a decent job or at least a job in his field.
So I got this development job – a developer job at this research lab, and we were building what we called at the time Learning Technologies which is basically just trying to come up with our own assistive technology. So we would build tools for people who are deaf to record, upload, and collaborate on sign language contents online. So that kind of stuff, right?
So in any case, that went from being a job to getting totally obsessed with it and became my undergrad thesis. And basically, that’s how it all developed.
Now, after my 4 years of university and having this cool job for at least a year and a half, while I liked it a lot and it was very cool, I thought I needed a real job. You know, graduating from university, I have to go out there and find a real job.
So I did it. I worked in the energy industry for 2 years, and boy it was boring.
Dennis: Doing what?
George: I worked for this data company. So it was an I.T company, basically, that managed all the consumption data – hydro data for the province of Ontario. We basically managed this hub system that would record people’s kilowatt per hour consumption and billing and all that stuff.
Dennis: So you were like an I.T guy?
George: Yes, I was in the operations team. So I was basically doing two things. One is making sure everything runs – as in servers and data, and reports – that they run properly, and the other part was trying to come up with some new product that we can sell to clients.
Dennis: Okay. So then what happened?
George: So then, I found an opportunity at Scotiabank which is one of the big 5 Canadian banks here to work exclusively on accessibility which is very rare. It was very rare back then. It’s still very rare today. Really, there are very few jobs that ask for just accessibility. They usually pack it up with something else.
Dennis: Right.
George: Like we’re looking for a–I don’t know–bank teller who also knows accessibility, something like that.
So when I saw that, I jumped on, basically. And I was happy because I worked with and I’m still working with some of the best people I know on accessibility.
Dennis: That’s great. And how long have you been there now?
George: It’s more than 2 years and a half now.
Dennis: Oh, okay.
George: So it’s not a long time, but yeah.
Dennis: Super. When we first caught up, we talked about Jennison, and many of us in the accessibility tribe (if I can use that term) know Jennison. And, so you and he have been doing the monthly meetups, right? Can you tell us about that?
George: Sure. So Jennison and I started… Actually, we just had our 6-month anniversary last month, so there you go. Jennison and I are organizing monthly accessibility meetups in Toronto. The group is called Toronto Accessibility and Inclusive Design, and we modeled it based on the other meetup groups in the US and Australia. And the group got a lot of attraction and people seem to like it, and we are just very excited about it.
One thing that we’re doing different I think from other groups is we’re alternating. We’re doing a presentation or something educational the first month, and the second month is all about networking and getting people to meet each other, talk to each other, hopefully solve their problems together, so on and so forth.
So in case you didn’t know, Jennison is calling himself a shameless networker. He wants to do networking. That’s probably not a surprise to anyone. But yeah, it’s been great so far. We’ve been actually amazed by the number of people who joined the meetup. I think we’re sitting at about 170 members right now, and our on-going problem has been finding a venue that is A, accessible; and B, a venue that can accommodate an ever increasing number of people.
Dennis: Right.
George: Last time I checked, we’re at about 40 or so.
Dennis: Well, if there’s anyone listening out there in the Toronto area that has or knows of a place, please leave a comment in the show notes.
George: There you go.
Dennis: We kind of skipped it, but let’s talk about the accessibility – let’s talk about Twitter because I love to talk about Twitter.
George: Okay.
Dennis: So is that the #A11YTO?
George: Yes, that is. Confusingly enough, that is the hashtag for the monthly meetups and also for the accessibility camp once a year. So considering it only happens once a year, we’re good with that.
Dennis: Right, and once a month for the meetups. So you had a camp recently, right?
George: We did. We had the Accessibility Camp Toronto on November 17, and that’s why I mentioned the confusion.
Dennis: Okay.
George: And to make it even more confusing, we had a meetup before the camp, so yeah, let’s just drop it.
Dennis: All right. The Twitter handle for… Well, the camp is over, but…
George: Yeah.
Dennis: I’ll put all this information to the show notes. But if you wanted more information on the meetup, go to meetup.com/a11yto.
George: Yup. And I will add that that is also the hashtag, and that is also the Twitter handle.
Dennis: Oh. Well that makes it easy.
George: Yeah, we made it easy.
Dennis: Also, the Twitter handle is @a11yto.
George: Yup, it’s the same thing.
Dennis: Oh, good good. So some further introduction. Good WALLY, is that like your freelance company?
George: Yes, it is. Like I said, for 2 years and a half, I’ve been consulting with Scotiabank on accessibility. But from time to time, I would have one opportunity to work on other projects outside the bank, right?
Dennis: Oh, okay.
George: And I noticed that people would ask me “So are you kind of like a full-time employee of the bank who’s also doing something on the side, or what are you?”, right? So basically, I made this entity for myself – Good WALLY, which is the company through which I’m providing my accessibility services to people.
Dennis: Okay, great.
George: Yup.
Dennis: And that’s GoodWally.ca.
George: Yup.
Dennis: And on Twitter, @Good_WALLY.
George: Yup.
Dennis: And that’s W A L L Y. And how did you come up with the name? I think that it’s an entertaining and cool fun name. I really like the name Good WALLY. How did you come up with that?
George: Yeah, I like it a lot, too. I actually came up with it when I was preparing the slides for the responsive design accessibility talk. And you know how we shorten accessibility to ALLY or a11y. And then we have web accessibility, and I was thinking “Well okay. That needs to be shorten as well.”, so I can you know, have some cool acronyms or cool names, or something. I like to name things, by the way. So WALLY is just web accessibility really.
Dennis: Oh, that’s awesome.
George: Yeah.
Dennis: That didn’t even strike me. Isn’t that funny? Although, that’s what web axe is.
George: There you go. So we both have different names for this. Okay, there you go.
Dennis: Yeah. That’s funny how that happens.
George: Yes.
Dennis: Well that’s cool. All right. So I believe you gave this presentation Responsive Web Design and Web Accessibility – I believe you gave that at the Toronto camp?
George: Yes, that’s correct.
Dennis: Okay. So I’ve seen your name a lot and stuff.
George: Oh, you have? Okay. That’s surprising.
Dennis: Well you know, the last few months, I like came across it. And then I saw this presentation and I thought it was really good, and I checked out your website and everything, and thought I’d ask you to come on the show because it’s a very hot and important topic. So without further ado, I guess we could jump into that.
George: Sure thing.
Before we even go into what is responsive design and so on, I just wanted to touch on your point earlier on on how important this is. I guess I told you before we started the podcast that some people consider responsive design to be a fad, to be a thing that would just go away at some point. And before really diving into responsive design and coding and doing all this myself, I thought the same thing. I just thought it was.
But really, there is nothing new or proprietary to it. It’s just the techniques, right? Or this really just started as a technique.
But I wanted to touch on the point that I believe it’s going to get even more important. You said something very interesting earlier. You said that the web has been responsive before. We just never called it like that, or knew to call it like that, right? And I believe that we’re going back to our roots, I guess; which our roots are to have a fluid layout. We only came up with our own constraints both in terms of screen width, and website width, and so on and so forth fairly recently, right? And we like that because we could easily design things in Photoshop, right? So people could relate to fixed designs and so on.
But I think it’s important and it’s going to become even more important if all these people realize really the benefit of it. And I can tell you for example that even at a traditional bank like Scotiabank (the place where I work), that we’ve started making some of for example, the applications for a credit card or whatever it is – we started making those responsive. And with that, we noticed quite a lot of benefits as well.
So you’re making something responsive, you’re thinking about the web as well. And in turn, you’re doing some things for accessibility, right? So it benefits accessibility as well.
In any case, I’ll go into more details later. But I just wanted to say that I think that if traditional companies take on responsive design for whatever their initial reasons may be, I think that’s a very very good sign that it’s going to pick up even more.
Dennis: And I’m glad you mentioned that because it is important to mention those things. And I think both of us and a lot of other people believe this is not a fad. And supporting different screen sizes and devices and everything nowadays obviously is very important; not only for accessibility, but just usability, I guess you could say.
George: Yup.
Dennis: Or just to support all the crazy devices and array of sizes out there. And a lot of companies now are (and PayPal included) are moving towards responsive design and just kind of more of a one web kind of thing, and I think it’s great.
George: That is fantastic.
Dennis: Oh, one other thing.
George: Yeah?
Dennis: I really like the movie Wally.
George: So do I.
Dennis: The second slide is awesome. It’s a picture of Wally and Eve, right?
George: No no, it’s Eva. Okay?
Dennis: Eva?
George: Yes. I researched this. I wanted to make sure I get it right, okay?
Dennis: Okay. I thought he’s saying Eva, but because the Adam and Eve thing, I thought it was just his robot accent. Okay, Eva. Thank you.
George: Yeah, no problem.
Dennis: So responsive web design and accessibility are really good together like Wally and Eva. Go ahead. Give us a description of what responsive web design is, or what at least it means to you.
George: So first of all, that was the point that I wanted to make with the whole presentation, that responsive web design and accessibility are really good together and it’s mostly good news for the accessibility field. The reason I’m saying this is because I may give the same presentation, but for the other type of audience, so for responsive design people. And they want to know why accessibility may be good for responsive design, right? But in any case, the context of this presentation was Accessibility Camp, so people who do accessibility wanted to know why responsive is a good thing.
So what I tried doing throughout the presentation is to come up with some points as I found out from my own personal experience building responsive websites on why accessibility is considered. And actually, what I wanted to say was that with responsive design, you already get some accessibility gains. So that was my point for the talk.
Responsive design is really, as I said earlier, a technique, or at least it started off as a technique for building one layout that would be smart enough to adapt to the different device capabilities or screen resolutions, so on and so forth. So that is the idea. That is where we want to be. We don’t want to be in a place where we have a different stylesheet or a different set of layout files for each platform; or worse, for each device.
So for example, even when responsive design took off, some people would have their own separate stylesheets for the iOS platform, for the Blackberry platform (I guess mostly phones at the time), and one for Android. And they were trying to do that because they’re targeting different capabilities of the platforms. And they quickly realized that that is just not scalable at all.
Dennis: Right.
George: Because you keep having to update your main navigation menu. Color – you have to do it in 3 stylesheets.
Dennis: Yeah. What if Apple decided suddenly to make the next iPhone a different screen size?
George: Yeah, absolutely.
Dennis: Like the iPhone 5. Then what are you to do? And the iPad mini.
George: You’re not going to do much. Or you have to do much, I guess.
Dennis: Yeah. There’s just like so many devices now. You can’t – it’s impossible to keep up.
George: Yeah, and that was pretty much the premise of responsive design.
Dennis: Yeah. And just a quick note that I see you referenced, like many people, to an article from A List Apart on responsive web design. That was a pretty good and popular article. And I’m looking in the date. It’s funny. It came out like 2 and a half years ago.
George: Yup.
Dennis: A List Apart is really good on that. They always come up with new, a lot of times, ground-breaking stuff.
George: Yeah. So the article that you’re referencing and I have a quote in there on my slide. The quote is from the guy who basically coined responsive design. His name is Ethan Marcotte, and he came up with it.
Dennis: Ah.
George: Yeah. And this is really where it all started. And if you think about it – 2 years and a half, I mean, that’s a lot of years in internet years, I guess. But still, 2 years is nothing in terms of technologies. I mean for example, it took so many years for a technology like – I don’t know – Flash or Ajax to take off, right?
Dennis: Yeah.
George: This has seen a lot of adoption. For example, when I started building website with responsive design a year and a half ago, I thought I was so late to the game. Right? And then I realized well, hold on a second. This guy has just sort of coined it a year before.
Dennis: Yeah. It’s funny how when you’re in the industry and you’re keeping up on things that you think you’re behind, but you’re actually ahead of most people.
George: That’s what I found, yeah.
Dennis: Also, when you’re talking about technologies, – like I was thinking of CSS2, because there were some features in CSS2 that people didn’t catch on or wasn’t supported, and so CSS3 came out. And then, people think certain things like – I think web fonts was in CSS2, right?
George: Yeah.
Dennis: But everybody thinks it’s like a CSS3 thing.
George: Oh, yes.
Dennis: But it’s been around forever. It just wasn’t supported or used until a certain time.
George: Yeah. There are quite a few things that existed before and people think it’s part of CSS3 or HTML5.
Dennis: Right.
George: Today, HTML5 is like this branding name that everything goes under, right?
Dennis: Yeah.
George: Like geo location. That’s not HTML5, but sure, if you want to call it that way.
Dennis: Yeah. That just means like it’s a new cool technology so we have to use it. I’m just kidding. We don’t have to use it. If you don’t need it, don’t use it, please.
George: Yeah, absolutely.
Dennis: All right. So responsive web design. So basically, we talked about kind of doing the fluid layouts and adapting. How does it do that? I guess it uses media queries, right?
George: Yup. My presentation and this part, the part on responsive design, was basically done to give people a starting point. So what I said was that responsive design is – basically, it has 3 components: fluid foundation, media queries, and responsive images. And I’ll explain those in a bit. But what I wanted to do at that time is to give people one line of code, one slide that is actionable, that they can take and implement themselves.
So what I said is really, you should start with a fluid foundation. What does that mean? It means that you let go of fixed widths. You don’t declare your widths with pixels. You just declare them with ratios, which is the em unit in CSS, or percentages and see what happens.
So if your website breaks down because all of a sudden you have a fluid layout… And by the way, fluid would mean for example, if I resize my browser window, the layout resizes with it. So that is I guess my definition of being fluid, as opposed to having a fixed width website, where if I resize my browser window, I just get my horizontal scroll bars. Right?
Dennis: Right. It’s like flexible. I guess it’s kind of another word.
George: Yes, that’s also good, yeah.
Dennis: Stretchy, like stretchy pants.
George: Yup. So what I usually tell people is first, you make sure that your content container is fluid, right? And let your website break, but make that first fluid.
The next thing that you need to worry about is making your actual content responsive. So what does that mean? Well, that means that – so for example, I’m looking at a website with a smartphone. My viewport is going to be really small. What do you want to do with your content if somebody is reading from a really small screen? Well, you want to make it bigger, so that people can read it properly, right? So that is the second part of media queries. And for anybody who is familiar with print stylesheets, if anybody develop print stylesheets, that is a media type.
Media queries – right now, I think it’s a release candidate. Yeah, it’s a W3C recommendation right now. With media queries, you can target the type of media, but you can also target features. So for example in CSS I think starting with 2.1, you’d have your media type to be print, and then you will have all your print-related CSS styles, right?
Dennis: Yeah, that’s a very good point.
George: Yup.
Dennis: Yeah, good comparison.
George: I found that that helped me. I know people use other things to explain media queries, but that’s really what worked for me, and I didn’t even do print stylesheets.
Dennis: I’ve done a little bit of this myself, but I haven’t done in responsive images yet.
George: Okay.
Dennis: Do you think that’s any more difficult?
George: It is. So responsive images is the third component of responsive design. What we’re trying to solve with responsive images is you can have your entire website adapt to a screen size but have a fixed-width image. You need to have your image to sort of match a layout kind of thing.
So how do you do that? There are quite a few ways. Problem is, there isn’t one solution right now that would just magically work for you, so you would have to use one of the many solutions.
But the good part is that there are quite a few smart people right now who started a W3C community group on responsive images, and they’re working together to basically create a new element in HTML that would allow people to put in multiple sources for the same image. So basically, same image, different image qualities and resolutions, so that it’s going to be the browser’s job to pick up the image that matches the screen size or the device’s capability.
So that is what’s going to happen in the future. And I think it’s going to happen because lots of people are waiting.
But for now, what I chose to do is basically try to do a lot of image optimization so that I can get my image have enough quality that it looks decent on a retina screen, for example, or a high-density monitor or screen, but also it’s not big enough so that it just kills somebody’s bandwidth on a mobile device.
Dennis: Right.
George: That is the simplest thing that you can do right now. There are quite a few other solutions out there. You can do responsive images on the server side if you have the capability to do that, and so on and so forth. Those solutions are on my slide decks. So I think that if you share that, people can go through them.
Dennis: Oh, I sure will. I favorited.
George: You favorited? Okay.
Dennis: I favorite the slide deck as well, and I’m looking at it as you speak.
George: Okay.
Dennis: It’s a great slide deck, and that’s why I have you on the show sharing all this great information.
Let’s see. We talked about kind of like the fluid foundation, media queries, and images. Yeah. About the HTML5 thing, that sounds like a great idea. Just it makes me think of right now like with the main or the main content element.
George: Yeah.
Dennis: I hope that goes through. But for the responsive image, I hope they don’t have that much of a problem. But responsive web design is a much sexier topic to me than just a structural element.
George: Yeah, that’s true.
Dennis: I just hope they both go through.
George: Yeah. Me, too. I watched (sort of from the side) a discussion of the main element to be introduced in HTML5, and I saw an argument from somebody. I’m not going to name names or anything. But basically, they said “Well, why don’t we have our outlining algorithm to just basically say that some content is main if it’s not anything else?”. So if it’s not an article, or section, or whatever else. Anything that is not either one of those things it’s main, right? So it’s basically making content main by exclusion, right; excluding everything else?
Dennis: Yeah.
George: I found that to be so not a good idea.
Dennis: I agree. It’s pretty far-fetched. I guess that’s been dubbed the Scooby-Doo method?
George: The Scooby-Doo method, yes.
Dennis: All right. Well, let’s go back to RWD – responsive web design and accessibility. So let’s talk about why they are good together.
George: Sure. I have quite a few arguments where I say reasons for supporting that. But what I did for the presentation, and I’ll do the same on this podcast as well – I grouped everything into 4 categories, basically. So those 4 categories that I was talking about are: 1, personal overriding stylesheet (so that’s just an umbrella term for a few things); second is an inherent inclination for responsive web design and techniques (To adopt web standards; in fact, they’re based on web standards. So we know how good that is, in terms of accessibility); third one is good responsive design is also mobile first, and progressive enhancement follows these two philosophies (and we’ll describe those in a moment); and the fourth one is that it caters to users’ needs, devices, and context.
Dennis: Yeah. When I went to your slide deck, I understood most of that. Except the first one is a little fuzzy – the personal overriding stylesheets?
George: Yeah.
Dennis: So are you talking about like when a user has his own stylesheet for a website, or is applying certain styles to help get the content of that website?
George: Yup, that’s exactly what I’m talking about. So to give you an example, the bank. I know this great developer who also happens to have a visual impairment, and he needs everything to have a certain color scheme and the text to have a certain size in order for him to properly consume that content, basically. And what he does is his loading this CSS stylesheet that he created for himself (because you know, he’s a developer), and he’s basically overriding any website that he visits with his own stylesheet. So all the websites in the world for him look, let’s say with a white text on a blue background, and all the heading level 1’s have a size of let’s say 40 pixels – or actually, let’s make this an em because this is responsive design – 2 em’s or something.
So what I’m trying to say with this is that he has his own personal overriding stylesheet and he’s overriding anything to work for himself. And in a sense, that’s what responsive design is. It’s funny because it’s called responsive design, but it’s not about the design. It’s about the content. So what responsive design does is it’s trying to adapt the design to your device, to your needs, to your browser, so on and so forth, so that it makes the content better and easier for you to consume. And we’ll see later that it also makes it more accessible. So that’s why I called it personal overriding stylesheet.
Dennis: Okay. That makes sense.
George: Yeah.
Dennis: Well the next point kind of gets into the web standards, but if you’re using some markup and web standards, then using a custom stylesheet is obviously going to work much better.
George: Yeah. In my opinion, that’s what responsive web design is. It’s this custom stylesheet that really brings out the content.
Dennis: So the second point – inherent inclination to web standards. Can you talk about that?
George: Yup. First of all, when responsive design came about, it really wasn’t about mobile first or progressive enhancement. All it said was that responsive design has to be built on web standards for the greater interoperability between devices, and browsers, and so on and so forth. So it was very simple. It was that simple. It said you have to use web standards in order to have a chance of your website work in all the multitude of devices that we have today. So that was it.
And then later on, people started coming up with these other techniques or attaching other things to responsive design – mobile first, progressive enhancement, and so on. But when it started, that was it. And people who have done responsive design for a long time or I guess from the beginning are giving presentations. Smart people like Jeremy Keith, Aaron Gustafson, Brad Frost, so on and so forth.
If you watch the presentations, you can sort of pick up on the fact that they always say stop with the platform-specific hacks. Enough with the browser prefixes in your CSS. You can use them, but just so you know, it’s not going to work on all devices, right? So as long as you’re aware with all the risks, go ahead and do it. But really, if you want to do good responsive design, don’t use platform-specific hacks.
Enough of the custom controls. Designers don’t like irregular checkboxes or radio buttons, so on and so forth, because they’re ugly. With the help of JQuery and other platforms and other libraries, people are building their own custom form controls, and they all look nice and fancy and so on. Problem is, their non-semantic, they’re usually a bunch of divs, and yeah, they all look the same in all browsers and all devices. The problem is, the native controls are much better. Responsive design says don’t use custom controls, or use them, but just so you know, the native ones are much better. So build for that first. Build for standards. If you can enhance them later, that’s fine.
And basically, the third one was no more mouse-only wankery, as they call it.
I remember this case at the bank where in our online banking platform or application, we had this what we called a quick menu that would open when users would mouse-over, would hover over. So basically, it was attached on account. And when you would mouse-over that quick menu, you get a bunch of options like pay a bill, or transfer funds, or whatever. It was a quick way to transfer money. And of course when that was designed initially, it was supposed to only work with the mouse.
The accessibility team came in and we said “No no. If you’re designing this from the ground up, we have to make it keyboard accessible. You also need to be able to activate it by keyboard.”, so on and so forth.
When people started using tablet devices, we saw a lot of adoption there. Basically, we had our design team or our web team saying “Oh boy, we dodged that bullet.”, right? And I went back to them and I said “That’s stuff that we did for accessibility. Now, you did it for tablets as well.”. Why? Because we’ve been following web standards, right?
Dennis: Exactly. That’s a great point and a great story.
George: Yeah. So that’s what I meant by this.
Dennis: Yeah. I had a similar issue at PayPal. With JavaScript, we completely rewrote a form component which I didn’t want to do in the first place. We did a great job. We went over the top and made it totally accessible, completely rewrote this basic form component with JavaScript and CSS3. But then of course, when you get to mobile and touch devices and stuff, things start to break down because you’re not using the native HTML element.
George: Yup.
Dennis: So I know how that goes. Good story. Although, I did learn a lot about ARIA when I made that component also.
George: You did, eh?
Dennis: That’s for sure.
George: So basically, what I was trying to get across the room was that – or I should say get across the bits in our case, I don’t know – get across the speakers or earbuds, my point was that responsive design is encouraging using web standards. That’s basically making the case for accessibility. It’s making the case for us. They may get more attractions because responsive is this new cool thing. The accessibility community has been saying this for the longest time ever. But for once at least, not only that we’re getting a new technique or technology that doesn’t impede accessibility, it actually encourages it, right? So that was the great point that I like about this.
Dennis: And it seems like we’re really talking about the r in POUR, right? – the robust part of POUR acronym.
George: Absolutely, yup.
Dennis: Perceivable, operable, understandable, and robust.
Progressive enhancement has been around for awhile now. And hopefully, this will be the thing to push developers to do it more because to this day, I’ve still seen dividers on websites and things not working without JavaScript, and so on.
George: Yeah. I do have one story that I want to share on progressive enhancement. First of all, I should ask you. Are we going to give a sort of a small introduction on mobile first and progressive enhancement? Do you want to do that? We kind of touched on it.
Dennis: I think most people understand what that means.
George: So with progressive enhancement, I gave an example during this presentation where I said an example from this comedian. Actually, I’m going to read what he said.
He was talking about escalators and he said that an escalator can never break. It only becomes stairs. So you would never see an escalator temporarily out of order sign, just an escalator temporarily stares sign. “Sorry for the convenience. We apologize for the fact that you can still get up there.”.
So basically, I was using this to compare progressive enhancement with an escalator in the sense that if you build your website with progressive enhancement, it will never really break down. It will just become stairs, or I should say a staircase, right?, rather than an enhanced escalator.
Dennis: Right.
George: And I gave this example and somebody challenged me in the room and they said “Yeah. But if it becomes stairs, it’s not accessible, right?”. But I’m like “Okay. That wasn’t exactly the point I was trying to make.”. But then, I said “Okay. Well, imagine this. Imagine that you get your flat-moving escalators in airports.”. They are those sort of escalators that are flat or horizontal.
Dennis: Right.
George: And you can get on them with your luggage and they just move around, right?
Dennis: The people mover.
George: The people mover thingy. So I said “Well, imagine that. That, if it breaks down, it just becomes a floor.”. He liked that because that was wheel chair accessible.
Dennis: Ah.
George: So that’s how I like to look at progressive enhancement.
Dennis: Another good one is that electric toothbrush.
George: Yes, the electric toothbrush.
Dennis: So yeah. If it breaks, it’s still a toothbrush, right?
George: Yeah. I wish I would have thought of that. That just might be easier to explain.
Dennis: I didn’t think of it. Somebody else thought of it. I’m just using that example.
George: Oh. There you go. So okay. I’ll start using it, too. So we can both use it.
Dennis: Okay. Part of accessibility is being able to support different user agents. It is a more specification kind of term.
George: Okay.
Dennis: So with responsive web design, you’re doing pretty much the same thing, right? You’re catering to different devices and contexts. Can you elaborate?
George: Yeah, absolutely. So again, I’m basically just using the I guess authoritive faces or authoritive people in responsive design are saying. And they’re saying that responsive design caters to users’ needs, and devices, and contexts. And what does that mean? So for example, Luke W – Luke Wroblewski I think his last name is.
Dennis: Yes.
George: He’s the guy who coined mobile first. And he’s always saying that with mobile devices, you get users’ divided attention, right? So that means that in a regular scenario, somebody’s walking down the street and they hold their phone in one hand and navigate with their index finger, right? So that’s why he calls it divided attention.
So basically, he’s saying from people on mobile devices, you get one eyeball, one thumb. Design your interfaces and your websites such that it accounts for that. If your websites requires people to put both index fingers on the screen to navigate, that’s just a bad idea. So they’re saying this in the context of responsive design, and best practices, and so on and so forth.
In the accessibility community, we know that some people actually do have only one eye or one thumb, and so on and so forth. So again, I was trying to make a point that responsive design people, when they’re talking about these concepts, they’re making the case for accessibility. Except they just don’t call it that. They call it something else.
And to me, that is just amazing. I haven’t been in this field for 20 years. I’ve only been in this field for a few years. But I’ve never seen this coming from any other technology evangelists, or advocates and so on, like I’ve seen coming out from the responsive community.
Dennis: Hmm.
George: So I found that really really powerful for us as an accessibility community.
Dennis: One thing I’ve noticed from the beginning that you know, there’s a lot of crossover obviously between web standards and accessibility and usability and accessibility. And that’s kind of how I got really into it, because of the crossover. And that’s a good example right there.
George: Yup.
Dennis: Wow. So I mean if you think of it as usability or responsive web design or accessibility, it’s all good, right? It’s all benefit to user, and it supports different devices.
George: I would say so, yeah. And it’s interesting, right? With response to design, you don’t even have to target… To go back to your initial question (because I kind of went on a tangent there, not that I do that very often), but to answer your initial question, with response to design, you don’t even have to target specific user agents. And when we’re saying user agents, we’re talking browsers, mobile browsers, whatever it is, right?
Dennis: Mhmm.
George: Yup. You just target their features. So when we’re talking about media queries earlier, we said that you target the media type. The example was the print stylesheet from earlier. But you target the type – you know, if it’s mobile, if it’s screen, if it’s a projector, so on and so forth. And then you target the features. And responsive design is adapting to those features, not necessarily to the media types.
So for example, responsive design doesn’t care that you have an iPhone 3GS that has an iOS 4.1 operating system and the Safari browser 4.2 or whatever it is. It only cares about first, the screen size, and then about the capabilities.
Dennis: Yeah, and that’s obviously the best way to go.
George: It’s definitely one good way to go, yeah.
Dennis: It’s funny, going back to the print stylesheet thing because that’s been around awhile and some people used it which is ideal for printing a webpage.
George: Yeah.
Dennis: But I was just thinking about that. It was funny because it’s just like for people who do sniff for specific browsers or whatever rather than features, it’s like well, if you’re doing a print stylesheet, you’re not sniffing for what kind of printer they have, you know.
George: Oh, that is a good one. I love that.
Dennis: This is a great presentation. I’m glad I had you on the show. There’s a lot of great information. Can you tell us other things you’re doing now or in the near future – planning besides the Toronto monthly meetups and camp?
George: Well, I think 2013 is going to be my year coming down in the States for conferences. I haven’t decided yet whether I should attend CSUN or ACCESSU. At this point, that’s what I’m oscillating between. But it’s definitely my year to come down.
I’m not doing a presentation. At least not just yet, at any of these big conferences. But I’ve seen a lot of attractions here, at least in the GTA. GTA by the way stands for greater Toronto area. So I’ve seen quite some attractions here amongst the web people on responsive design.
I think I might have an opportunity at FITC to talk about responsive design and accessibility. FITC is one of these design conferences that they have all over the world. I don’t know if you’ve heard of it. The URL is fitc.ca, if anybody wants to check it out. But I don’t have any big plans yet.
Dennis: Okay. Well yeah, if you can make one of those – the ACCESSU or CSUN, that’d be awesome. Those are both great conferences. I’ll be at CSUN. That one’s a much bigger conference in San Diego, and I’m presenting one session this year.
George: Awesome. What’s your session?
Dennis: It’d be great to see you there. My session is on ARIA and creating an accessible dropdown button.
George: Right on, right on. Yeah, very cool.
Dennis: I gave a similar talk at the HTML5 dev’s con in San Francisco a couple of months ago. But I talked more about the accessibility and ARIA. So for this talk at CSUN, it’ll be less in the background stuff, since I don’t want to preach to the choir, and a little bit more about the coding details and obstacles and stuff, so it should be good.
George: Yeah, that is fantastic. I think the greatest value that we can offer is to go outside our accessibility community and present and share with other people who may not necessarily know about accessibility, but might know about technology.
Dennis: Exactly.
George: That’s fantastic.
Dennis: Yeah. I was a little surprised at the HTML5 dev con. It was cool to see my room was full of people. I say that because it’s accessibility. But it’s like at lunchtime and Chris Halman was speaking at the same time.
George: Oh, right.
Dennis: Yeah. I was like “Oh, no. Nobody’s going to come to my session.”, but it turned out to be a pretty full room, so I was pretty happy it went well. So I think conferences like CSUN and ACCESSU are great, but we also definitely want to go out to the other types of conferences and events and spread the good word.
Again George, thank you for joining us. Thank you for doing the Toronto meetups and for your great slide deck. And again, I’m going to repeat it once more. Goodwally.ca is your website.
George: Oh, thank you.
Dennis: And then on Twitter, @good_wally. I’ll put all these links on the show notes of course, and the blog post. So great to speak with you, George.
George: That’s fantastic. Thank you for having me. It really was great. It seems like the challenge that I have, or at least we have in the accessibility community always is that we don’t have enough time. We could go on and talk about these things for much much longer, right? It’s always about shortening down. So with that being said…
Dennis: Yup. We could probably talk for another hour, yeah.
George: Yes. But great stuff. And you’re a great moderator. I’m so happy that you’ve been driving this. Very good.
Dennis: Oh. Thank you. I don’t really think so, but thank you for saying that.
George: Well, you’re welcome either way.
Dennis: All right. Maybe we’ll have you on the show again some time, maybe with Jennison next fall.
George: I would not make any promises. I would not go with Jennison on yet another thing. This is too much, you know. It’s too much.
Dennis: All right. That’s great.
George: Great stuff. All right.
Dennis: All right. Thanks again, George.
George: Thank you very much.
[music]
[END]
© Copyright 2005-2012 Web Axe, Dennis Lembree, Web Overhauls