RWD Podcast Episode #18 : Aaron Gustafson

Read the full transcript

Justin Avery Hi, everyone and welcome to another edition of Responsive Design Weekly Podcast. This is episode 18. My name is Justin Avery, I’m your host and curator of the Responsive Design Weekly Newsletter. A newsletter focused all about responsive design hence the funny name. This week our sponsor is coming from Easy Readers, it’s a fantastic book called Adaptive Web Design and it’s about crafting rich experiences with progressive enhancement. I read this book a few years back and it got me right into looking at how to approach web projects from a progressively enhanced point of view.

Jeremy Keith probably describes the book of the best as someone who’s always been a big proponent of progressive enhancement and talked about a few episodes ago. He says adaptive web design not only provides the clearest, most beautiful explanation of progressive enhancement he’s ever read but it’s also a pack full of practical know how pumped directly into your neocortex through Aaron’s warm and friendly writing style and I couldn’t agree more. This week we’ve also got a very special guest which is the author of the book himself Mr. Aaron Gustafson (messes up the pronunciation of Gustafson). Welcome Aaron, I knew, I knew that was going to happen.

Aaron Gustafson: It’s all right. No worries.

Justin Avery How are you doing?

Aaron Gustafson: Not too bad. How are you on this fine evening?

Justin Avery I am fine and on dandy. It’s getting a little colder, we’re moving out of summer just in time for my summer holiday at the end of the week. I think we’re entering winter again in the UK.

Aaron Gustafson: Yeah, it happens.

Justin Avery Where are dialling in from?

Aaron Gustafson: I’m in … I’m actually at home today which is a surprise for me and I’m in Chattanooga, Tennessee, Southeastern US.

Justin Avery I do hear a lot of good things about the industry at Chattanooga.

Aaron Gustafson: It’s getting there. [00:02:00] It’s definitely … It’s growing, it’s gotten a bit bigger than it was back when we moved here about six years ago but there’s some interesting stuff happening for sure.

Justin Avery Yeah, that’s very cool. Now for some people that may not have been to any conferences over the last couple of years or been reading articles or books and they’re not sure about your background. If you just give us a little bit background about how you gotten to the industry, where your focuses are and how you arrives at your current point today and what you’re up to these days.

Aaron Gustafson: Sure. I came backwards into the industry I guess. I was a journalist and was working on a magazine that I was running back in college and then decided I wanted to do a website for, this was running about 1996 or so. I taught myself how to build a website and went from there and went from just teaching myself HTML and eventually CSS when we have that to learning back end stuff and JavaScript and all over the maps. I think I touched all kinds of projects varying from the strategy on the front end of a project all the way through to the actual production of the code and such both on the HTML side of things as well as the band end.

Justin Avery Good. Do you have a favorite place to be?

Aaron Gustafson: I don’t know. I think I tend to spend a lot of time working in PHP and other back end languages but I do … I love working in HTML and CSS and JavaScript as well. I don’t know, I like to vary it and I definitely enjoy the strategic planning and UX design stuff as well as I like … I like to jump around simply because it [00:04:00] provides variety, it helps it not get stale. It was funny I was doing a talk for some kids a couple of weeks ago here in Chattanooga that we’re doing a summer coding camp and one of the kids asked me what’s my favorite HTML, CSS or JavaScript and I just laughed.

It’s something that only a child will ask that sort of a question but I was, “Gosh, you know, I don’t know that I have a favorite.” They all do their job so well. Yeah, that’s how I got into doing the web and where my technical skills lie probably since about 2003 I’ve been speaking and writing and stuff like that. I looked to the other day and I’ve spoken it something like 75 different events not counting private trainings and stuff like that. Contributed to a couple of books, wrote my own back in 2011 and continue to write and continue to do things.

I publish Web Standards Sherpa as well which was a project that I started when I was one of the group managers of the Web Standards Project before we shut that down. Yeah, I’m all over in the web design world especially in the Web Standards end of things and that ended up failing into the world of progressive enhancement which people were starting to slag off a little bit with the dawn of Safari and mobile Safari and stuff like that. It’s funny because when mobile actually something that people actually cared about and took seriously, “What do you know if progressive enhancement was relevant again?” That’s been a resurgence of interest [00:06:00] in this sort of stuff that I’ve been continuing to do all along.

Justin Avery That’s actually as quite a [co-soaring 00:06:07]. When you … With your writing and stuff around, just staying away from the technical side and stuff, all the writing that you do, do you think you’ve just continue that on more because of the journalism introduction coming from the journalist background?

Aaron Gustafson: Yeah, I think so. I’ve always enjoyed writing and actually when I’m not … When I’m not reading like a fiction book or something like that or I usually have a couple of books that I’m reading at once. If I’m not reading a fiction or some sort of documentary or something like that instead of reading technical books I’m usually actually reading about writing. Trying to … Trying to improve my writing style, I think that’s … That’s one of the things that really drew me to a list apart and one of the things that I really love about Jeffrey Zeldman in addition to just him as a person his been a really good friend and a colleague over the years but I love his writing style.

I’ve always pushed myself to try and become a better writer and to try and learn how to become a better writer because it’s not something that’s necessarily innate but it is something that you can develop. I think one of my [proudest 00:07:30] moments was when he said he thought something that I’ve written was just amazing and I was, “Wow.”

Justin Avery Admired it.

Aaron Gustafson: Yeah, I’ve made Jeffrey happy.

Justin Avery Not to … Okay. I don’t want to go into everything that’s in the book because I think people should go and grab it and have a look at it. The book came out you saying 2011 which was around the time that responsive design making its [00:08:00] small voice heard. I think Ethan wrote his article in 2010.

Aaron Gustafson: Correct.

Justin Avery Did you focus around or was that part of the reason that you started writing [crosstalk 00:08:13] book.

Aaron Gustafson: No, actually the book was all ready underway when his article came out and it was funny he and I both actually wrote about media inquiries at the same time he publishes article in [inaudible 00:08:27] and I published mine in .Net magazine. Within days I’ve one another I think and I was just walking through how to inject different layouts and I played around with Simon Collisons website in order to demonstrate how that stuff worked in his website was at the time very structured in terms of fixed width and all that stuff and how he had it his columns setup.

I had a couple of different layouts that I introduce trying to not take too many liberties with what he had done but sticking with the fixed layout thing. Then Ethan’s article came out and I honestly … When Responsive Web Design the article first came out I wasn’t really amazed by it in terms of … It wasn’t a profound thing. I think it’s certainly a good bit of putting together three somewhat desperate things and I think that’s the brilliance of what it is.

As I’ve come to understand the concept more and as he flashed it out in the book and stuff like that I think it’s definitely an incredibly valuable technique. I didn’t really … It didn’t really strike me as something that I felt I needed to address as I was doing the final edits on the book. Because the book was written … I think the book probably was written by about then by May and then [00:10:00] it was probably about six or eight months in production because we were doing all the correction ourselves in-house but it took awhile to get through that.

I am starting to put together my second edition of adaptive web design and in that I’ll definitely be talking quite a bit about where responsive web design fits in and the progressive enhancement idea of a website as a continuum. Because I do think it fits and especially if you’re looking at it from mobile first perspective. I think the desktop first responsive design not so much because you don’t up getting as well performing of a site as you could if you went from the mobile first perspective.

Looking at mobile devices as the lowest common denominator and probably the least feature which devices that you might have visiting your site, it just makes sense to start with that and potentially even deliver that same experience that you expect them to have to older browsers [inaudible 00:11:10] which a lot of people written off at this point. On many of our projects we’ll go back and look at them and they’ll be fine because we’re just delivering the mobile experience to them. That’ll be part and parcel of the second edition of the book but wasn’t really talking much about the first one.

Justin Avery The book is so far because this is on rich experiences which tends to like my mind immediately jumps to JavaScript enhanced experiences, is that a fairly heavy even the next book coming out you’re looking at more techniques surrounds not just the adaptive or the responsive layout that Ethan talked about and you wrote in your Net magazine article. More around adding layers of JavaScript upon that to provide. [00:12:00]

Aaron Gustafson: Yeah, there’s a bit of that in there now and basically the book it’s more of a philosophical book than a tech book. It’s not really about techniques, it’s about trying to get people in the mindset of layering on experience. It’s arch with a bit of the under pinning to the philosophy but then takes you through what the importance of good symmetric markup is and how you can actually have different layers of experience even just within markup. Then styles and talks about how you can layer experiences and style shoots using fault tolerance and using media inquiries and stuff like that then …

Or just media declarations period to address print and things. Then on top of that layering on JavaScript and how JavaScript really shouldn’t be an all or nothing sort of view of it. It’s not just a pioneer you have JavaScript or you don’t. There’s a lot of new ones that you could have certain scripts can run and certain other ones can’t based on what the capabilities about the device or the browser on that device are. It follows all through that and then it have the cap stone about chapter that talks about the accessibility implications as they percolate it throughout but focusing mainly around the idea of Aria and how we can create richer interfaces using Aria attributes and such.

Justin Avery It’s cool. You talked then just about layering on experiences around CSS. Do you have a general rule around … You go from your mobile to more of a desktop or anywhere in between that extreme? Do you layer upon … Do you have the approach of layering [00:14:00] upon CSS when it’s required it’s causing more requests or you’re more of a put it all up the pipe with one request and solve the issue? Is there a general rule for that that you follow?

Aaron Gustafson: It really depends on the site. I don’t really a hard and fast rule on it. I think some sites are necessarily large and may benefit like if there are substantial number of rules that are being dropped into the CSS to handle particularly large screens or something like that. It may make sense to shard that off separately but in many cases especially if you’re doing the Ben Methodology or [Smacks 00:14:54] or something like that where you’re doing modular CSS that helps to keep things a little bit thinner on the CSS end.

It’s entirely possible to roll everything up into one file. We’ve actually … The last couple of projects that we’ve worked on we’ve been … We moved probably about a year and a half ago over to using SAS for a lot of stuff and we found a SAS ad on, it’s actually for Compass but it can actually be use without Compass as well called BreakUp. With BreakUp what you can do is define your media inquiries in a SAS structure, it’s not a SAS, let us put it it’s the Hash basically and I think this is Hash.

You define them there and then can basically create within a particular component file different break point aggregations [00:16:00]. Then you can turn those on and off individually when you’re generating different files. It’s actually quite impressive because we were able to use that to … Because we don’t send any media inquiry information at all for instance to IE, we just … We played around [crosstalk 00:16:20]. Yeah, they do actually the desktop version for IE desktop we’ll give them [crosstalk 00:16:27].

Justin Avery Like the conditional style shape.

Aaron Gustafson: To generate that conditionally commented style shape, we actually just unwrap all of the break point data that’s contained and all of those component files but we generate the same stuff in basically. It allows for a much more componentized structure and we can recombine and things on the fly. I’m really intrigued with the idea of using that in [inaudible 00:16:56] with some of the techniques that the [inaudible 00:16:58] group have been working on for sending the initial CSS rules that are used to render the first …

Justin Avery Critical CSS.

Aaron Gustafson: Yeah, the critical CSS stuff, the critical path rendering that into the document and then essentially having the full rules I get lazy littered in. Which I think it’s a pretty clever technique from a main stand point it could potentially be a big headache for some teams. You have to kind of all be on the same page or have a pretty good built system to manage that. It’s an interesting idea and using a tool like BreakUp would actually allow the generation involve those different files pretty easily just when you’re running your normal SAS.

Make it a little bit easier for the front end developers who are working in SAS and working with the CSS to provide those words of instructions rather than having an all part of the built processing kind of taking place in the sausage factory [00:18:00].

Justin Avery With BreakUp because I’ve used in the past is it … It’s Break Point or Point Break where you can basically allows you to inline all of your media inquiries within the module itself. BreakUp work based on those inline declarations so you can still have that, “This is my module. This is the mobile first version then this is the medium and this is the large or within.” Then it breaks those out?

Aaron Gustafson: Yes, it does.

Justin Avery That’s amazing.

Aaron Gustafson: Yes, you could do … You can run that all in one file and then you can decide where things go. You can create a default, you can create basic then wide full all that sort of stuff and then just pull in the pieces that you want and you can even do the tweak points. Basically the make or break points that are one off sort of things pretty easily as well within that setup.

Justin Avery That’s a really good thing. I might check … I will check that out and see how it goes. Have you tried to implement the … I was looking at a grant task the other day and I’ve added in … I saw the critical CSS, I couldn’t get that to work and just probably incompetence on my part but there’s another one called [Pentask 00:19:27] which I could get to work to split that critical CSS out there as well. Are you using anything at the moment in any projects?

Aaron Gustafson: No, I haven’t played around with any of that stuff yet.

Justin Avery Because I wonder whether … It just seems … It seems it happen really quickly that the focus on performance which is a really great thing that more and more people these days it’s not so much the first thing it used to be when responsive design was first became popular. First thing [00:20:00] I would do is grab the side of the browser and drag it in and just see whether it’s responsive. I find myself now more … The first thing I would do is open up the [credentials 00:20:10] and see how quickly the side loads and what that loading and how it’s performing. This culture of performance seems to be skyrocketing at least in the nerdy industry.

Aaron Gustafson: I do think it is … I don’t know. I do feel sometimes we tend to make more work for ourselves. There is obviously in a lot of performance stuff. There is serious benefit to it but if you’re spending all of your time on this and you’re not actually … You don’t actually have a good image compression like setup in place [crosstalk 00:20:53]. It doesn’t really matter, you’re just … You’re shaving bits when there’s such larger issues to address. I think it’s all good and I’m completely in favor of finding ways that we can streamline things.

At the same time I think having your eyes on the big picture and where’s some of the other bottlenecks basically could be coming from, I mean images are going to kill pretty much anything. That’s a big thing. The other thing I’m intrigued by that I don’t think would really be able to work in the same system as some of these critical CSS setups is the idea that of … It’s called stacker is what the 30 some signals are Basecamp people are using now to make Basecamp really fast and it’s basically … [00:22:00] It’s all wrapped around HTML pushed it and basically bringing in the main page and then just using pushed it and updating via Ajax portions of the page.

Obviously every page renders without JavaScript as well but once you have that frame in place why even bothering making a request for anything from apart from the individual assets that you need to re-render the page the outer frame and then just swap out the pieces that you want which I think is another pretty impressive approach to performance.

Justin Avery Does it pretty much just serving up the content basically they had that one.

Aaron Gustafson: Basically and [inaudible 00:22:38] to download new images and stuff like that which is fine. It seems like a much more streamline to then and there maybe someway to make them work in concert, I haven’t tried to do either of them yet but it’s definitely … It’s becoming interesting to figure out how all the stuff works together. We’ve been working for a while in terms of not just lazy loading JavaScript but also lazy loading CSS when the JavaScript requires an additional CSS and stuff like that in some instances if it’s a significant amount of CSS required for a particular JavaScript rather than loading it all.

Justin Avery Not having the module, if you’re lazy loading a module and they’re not providing the CSS is part of the normal request.

Aaron Gustafson: Correct. If it’s something that’s substantially large or might potentially slow down the experience will sometimes lazy load the two things at once or something like that and obviously try to bundle those requests as much as possible. Yeah, that’s been one thing that’s been helpful for stream lining at least the initial page load.

Justin Avery I was reading something that you wrote the other day around … You were talking about images and lazy loading as well. Lazy loading of images [00:24:00] which is a great way of not …

Aaron Gustafson: Absolutely.

Justin Avery Wasting it runs down with those and the page load down at all. How … I think the article you’re talking about is including a data image source PayTag and then bring JavaScript through that so that image wouldn’t be displayed anyway. Do you think how would that technique fit in something like the picture element in using that? Is it the same thing? Is it …

Aaron Gustafson: I think you probably could do the same thing. I was thinking a bit about that and I think you could do the same thing with the picture you just don’t have an image fallback and you have the picture element only be comprise of sources that are within the break points that you actually want to display an image. There would be no image display for instance on a particularly small screen because I think the article that you’re talking about and when I talked about it in workshops and stuff like that as well.

It’s the performance certainly but the other thing is that in some cases on a small screen it’s having the … The image there is almost more of a distraction and it makes it more difficult to read the articles. It’s about creating a good reading experience as well. Then when you’ve done lazy loading at the image in making sure the … If you lazy load the image when the device was rotated landscape but you don’t want to show when it’s … When it’s horizontally wouldn’t lazy loaded it when it’s horizontal or portrait mode then having the CSS rules there to hide it again.

Because obviously if you wouldn’t lazy load it you weren’t anticipating it being or occupying space rather in reading flows. Maybe it makes sense to hide it again and if it’s lazy loaded in it’s not that big of a deal because they saw it at one point. They’re all ready the performance at that point if you want to do this right on. Otherwise [00:26:00] if they’re just in portrait mode they never see the image and their never [inaudible 00:26:04]. I think it makes a lot of sense and especially in pages like I think a lot of new site home pages.

Justin Avery [Crosstalk 00:26:11].

Aaron Gustafson: Yeah, it is helpful to have the images when you’re on a large screen because it helps to visually breakup the page and helps to draw your eye to particular places. Drawing your eye to particular places is not something that we can do really on a small mobile screen.

Justin Avery There’s only one place in your eyes all ready there.

Aaron Gustafson: Exactly. Exactly. I think a lot of that stuff that really is there to guide somebody here the page really has no place being in the mobile version. In that case I think lazy loading in those images when you’re above a certain break point makes sense.

Justin Avery We’ve spoke a little bit early just around things like some advance techniques which is things that I’m looking at for the readers to learn a little bit more as well tying the break points that you run in CSS and the things you can do in there to the JavaScript breakpoints as well. Even if a step further if we’re putting picture elements in there in the picture element but if we’re including sizes we’d based the sizes upon our break points that are in there as well. Be crazy to think that you could even try and link those up as well if you’re all ready linking about with the JavaScript. Then of course you’ve all ready produce the page that wouldn’t really work with it.

Aaron Gustafson: There’s been some talk around defining what your immediate [brace 00:27:42] are going to be ahead of time and then having JavaScript and CSS and the picture element and the video element. Basically anything that could potentially reacts to those media inquiries be aware of them front loaded [00:28:00]. I think there’s merit in that as an approach, I’m not sure what that … What the implications of that are in a more broad context that creates more difficulty down the road in terms of cashing or updating or maintainability or something like that. That stuff I’m not quite sure about yet but I think it’s got … It’s got some merit to it as a concept.

Justin Avery Was that around … Was that part of the article or was it Bruce Lawson running it that … Those manifest file or Jason manifest file or you could declare a series of things that the browser would interpret and then pass on to the markup or is that something that’s different again?

Aaron Gustafson: I don’t remember that … The at manifest you can indicate a bunch of stuff but that’s mainly having to do with the cash thing as far as I’m aware. Trying to remember this is a long time ago kind of an early discussion that the response images community group talking about the idea of declaring your media inquiries up front. I don’t remember who it was that propose that initially because it’s been a hot minutes since that discussion happened.

Justin Avery I’ve seen some people referring … Declaring them in a many tag elements in the head previously as well.

Aaron Gustafson: Yup, have seen that as well. The problem is … In terms of that stuff you’ve been … You have to orchestrate with JavaScript in order to get CSS on board which is not necessarily my favorite way to go.

Justin Avery [Crosstalk 00:29:45] the progressive enhancement.

Aaron Gustafson: Yeah, if something happens with your JavaScript you get no styles which is stupid. That was the thing I was doing when less was first taking off as an alternative [00:30:00] to SAS. They had the JavaScript compiler and people would just have the JavaScript compiler included in their source files that were served by the browser and then the browser would take care of generating … Converting the less file into CSS which is not very good performance wise. It was really fun because if you turn off JavaScript you just got a naked version of the site which was pretty hilarious.

Justin Avery At least it loaded quickly.

Aaron Gustafson: Exactly, exactly. I’ve taken a page from some of the stuff Gerry McKeith was talking about by using CSS to inform JavaScript to break points. The technique that we’ve been using is … I read a little snip it called get active MQ which generates a hidden dev and then that is what you assign your styles to and you just assign a family of whatever the break point is. In our work we’ve tended to use basically break hyphen some numbers starting with break zero all the way up to however many major break points we have.

Justin Avery Break zero being the font family that you’re calling?

Aaron Gustafson: Yeah, the font family calling and then break zero and quotes or break hyphen zero and quotes. Then for each subsequent media inquiry we go through and do break one, break two, etcetera, etcetera. I have a nice little piece that I wrote in order to dynamically create that from the SAS map that we’re using for breakup as well which makes a little bit even easier to generate that on the fly and make sure it’s always there. Excuse me. We use that to basically generate that hidden dev and then we read back the properties along the lines of what Jeremy was talking about in his blog poster awhile back.

We pull that back and then have JavaScript to actually react to [00:32:00] that. Typically we combine it with another little script that we wrote called watch resize that basically it just tracks any resize event on the browser which rotation fires that as well. It throttles it so that it only happens basically right after you stop adjusting the screen size. We use that to basically track which break point we’re in and then each individual JavaScript component if it’s something that shouldn’t be a universal experience. If it’s like a tab interface for instance that we only want to appear on a large tablet screen or desktop screen.

Then we’ll essentially have watch resize with a check against the media inquiry and then it will either build or tear down the interface depending on what the situation is. It obviously does the checks to make sure if it’s all ready built, it doesn’t try and rebuild it, if it’s all ready been destroyed it doesn’t try and destroy it again. That way we can dynamically adapt the components to changing landscape of the browser or rotation on the device. It works pretty well for us.

Justin Avery That’s cool. You’re looking at doing that because you’re able to tie directly into the media inquiries or instead of using some match media to look at the whip. Is it purely just to link those … The CSS up with the …

Aaron Gustafson: Yeah, we opted not to use match media because if we use match media then we have to know what the different media inquiries where and we were trying to have the … Yeah, trying to have all the instructions in one place.

Justin Avery Advantage upon the match media?

Aaron Gustafson: I think so. I think if we get to the point where we do have some way of indicating what our media inquiries are [00:34:00] and global sense and then having CSS, JavaScript, HTML elements and everything be able to clue into that so that we don’t have to repeat ourselves in many places. I think in that case match media and being able to check that against a key would be extremely useful. That’s the ultimate in terms of being able to track the stuff.

Justin Avery I spoke with … The episode when I was talking with Jeremy as well we’re talking about how … And you were on the committee for the picture elements. I thank you very much for the hard work you did. Now the picture elements has been finished and [inaudible 00:34:45] within … We don’t have to worry about anymore which is completely untrue because there’s still a lot things need to be done. They’ll be moving on to the element inquiries. This is … Now that we’ve got our picture we just all of a sudden look for the next problem that we need to fix and element inquiries seem to be the one that everyone is driving for. Did you have the same [crosstalk 00:35:08] coming. Is that something that’s …

Aaron Gustafson: Yeah, element inquiries would be extremely helpful thing because then we can really get super modular with what it is that we’re doing basically and start to make much more intelligent interfaces. Again, we’re starting … We’re definitely introducing a lot of complexity which is increasing the learning curve and there’s some things that I always … I put my teacher had on and how teachable is this, how learnable is it, how … How easy is it for somebody to grasp what is going on with something because the problem that we see with specs that aren’t intuitive is that they end up …

People don’t take time to read specs [00:36:00] first of all, they rarely take time to read articles, they don’t take … They don’t take time to listen to podcast except for all you wonderful listeners. The vast majority of developers out there are like, “What do I need to do to get this done so I can go home,” right. They honestly could care less. There are some of us who really do give a shit about the code that we’re producing but there’s a lot of people who don’t care.

Those people for better or worst if they don’t understand the purpose of something and they don’t understand how something works they will probably end up abusing it. We’ve seen this time and time again, we saw those with Web Kit as a prefix another prefix to the point where Opera was … Has decided to actually implement Web Kit vendor prefixes and iOS considering that at one point as well just because things were not looking good and they were taking slack for it when it wasn’t really their fault, it was all of the implementors who roll the page authors rather who are to blame.

We saw the same thing with generating content, generating content originally was not supposed to be read by a system technology, it was supposed to be purely presentational text but people started putting actual content in there and a system technology …

Justin Avery [Crosstalk 00:37:34] elements to that before.

Aaron Gustafson: Yeah, yeah. Yup, now that gets read by screen readers because people did things they were not meant to do. This has happened time and time again, even we want to go further back showing my age when Dreamweaver started … Started [00:38:00] implementing the doc type into … Into the HTML that it generated … That’s right, we need some water. That was around the time that the doc type switch have been created by [Top Barner 00:38:17] and [inaudible 00:38:18]. The entire idea of the doc type which is if somebody is using a doc type we can safely assume that they know what they’re doing and that they watch a render according to the W3C CSS box model because that was an issue at the time.

They want to render according that box model and therefore we’ll auto opt them into that. That move forward and the folks at Macromedia, I think it was Macromedia it wasn’t Adobe at the time. Folks at Macromedia trying to help people generate great markup went ahead and started to [inaudible 00:38:55] the doc types which was really great of them. Unfortunately at the same time we had browsers that didn’t implement the doc type properly or didn’t pay attention to the doc type switch.

We ended up with all of the sites that people expected things to work on certain way because they were looking at old version of IE or something like that. It basically made that as a flag, a worthless endeavor. A long came version targeting and we’ve some what moved away from version targeting and conditional comments and stuff like that. We come along and we ruin everything that we create. We keep [crosstalk 00:39:39]. I am somewhat concern that with all of these complexity that we’re introducing it’s going to make it harder to teach and it’s going to make it so that people are less likely to actually learn with the purpose of the various things are which in the end could come back to fight us in the ass.

I’m kind of [00:40:00] there as the, “Is this going to be teachable? Can we figure this out? Can we make it so that it’s stupidly obvious to somebody that this is the way something is supposed to function which is why I source that was always … Didn’t always sit well with me.

Justin Avery How are you with the final picture? I know … I’ve gone through and done it on my side project sites I at least experience how to go through to it but I made several mistakes and I was fortunate that Eric [Ports 00:40:38] commented and said, “You’ve not done it right here and you’ve not done right there. Also you should have done this.” I’ve been able to go back and fix that up but I’ve got who I think quite right friends who build the front end stuff and they … They struggle to wrap the head around that sizes and it’s all set stuff.

Because it’s not producing what they think should be coming into the browser. I’m trying to say if the browser makes his decision up based on different things but you have to let go. You don’t have that much control anymore almost.

Aaron Gustafson: Yeah, I’m pretty happy with where it ended up but I do … They’ll be the first submit there were a lot of compromises to get us to the final spec. I don’t necessarily think it’s intuitive … You’re a smart guy, I’m sure your developers are smart people but the fact that it did not make sense to you and it was not producing what you thought it should produce. That is a problem to me and that was one of the things that source that I haven’t gotten into nor if I really dove into using the sizes stuff.

Simply because I feel like I need an afternoon or a day to sit down and actually [00:42:00] purse out what the different short hands are … I don’t know. Yeah, short hands always a problem if it’s not obvious what the pieces are and stuff like that. It can be an issue but said I always mix up which background position offset I need to run for the stuff. That’s why we have chrome development tools just to inch them up and down and remind ourselves which ones the X and which ones the Y.

Justin Avery Exactly.

Aaron Gustafson: Then which one X and Y actually is. One of the things I think with … I think that we’re trying to see you a lot more involved in it was the picture element because it’s not returning sometimes the results that you’re expecting it’s because it’s the browsers making the decision about what to pull in. In the future what we’re hoping for is that the browsers will start to implement things which will give the HTML a better understanding if the person’s context. Things like the speed of the connection and I don’t know what else but the speed of the connection would be one thing.

If we could pass that information across then it could make the decision that even though I’m on my written … Written of whatever it won’t load in the 3,000 pixel image, it won’t load in the small image because the network is terrible if we don’t want to clog it out.

Justin Avery Yeah, there’s that piece and then there’s … It could be a fast connection but maybe it still a metered connection you’re connection by the bit …

Aaron Gustafson: I had that happen when I was in [Lisbin 00:43:44] for UXLX I landed and I had roaming data turned in on on my phone and I was using that because the hotel WiFi was awful. I tethered my phone and I was trying to do some emails or something like that [00:44:00] and Chrome crashed and of course Chrome being Chrome when it reopened it reopened all of the tabs because I was trying to restore all that stuff nicely for me.

Justin Avery Trying to be helpful.

Aaron Gustafson: Yeah, which is fine but one of the tabs that it opened happened to be YouTube and it happened to be an hour long HD video that of course auto played because YouTube is helpful in that way. I got a message from my provider saying holy shit you just run through your … You’re running through half your data in a very short amount of time you need to figure out what’s going on and then I noticed what happened. This was before Chrome had the little music icon on the tab still let you know which one was making noise.

I had no idea that that was running in the background and it had been running for good 20 minutes when I got the message. I do somewhat wonder … There’s the whole … Just playing time with the spec but it’s basically the network information stuff. It’s supposed to give us information about whether the person’s on a meter connection or a non-meter connection and stuff like that about the profile of the network. I do wonder in that instance with that even helped me because as far as my computer knew it was on WiFi. It was my phone that was actually on metered connection.

I think we need to get really smart about how we’re doing and I think it’s a challenge that we absolutely need to address but I think we need to really think about how that information gets passed across. How it’s managed in tethering situation. Some of it may need to be done by a pending headers or something like that when a device is proxying another device or something like that, I’m not sure all the technical details [00:46:00] of the networking and what we could do in that respect.

I think it is a problem that we need to solve but I don’t even know that the specs that we’re working on right now are actually addressing some of the real world used cases. I think it’s getting us close but it’s not always going to be accurate. I think if you make assumptions based on, “Oh, this person is on WiFi.”

Justin Avery Let’s load that image.

Aaron Gustafson: I’ve almost honestly given up on … Not responsive images but on red images and high DPI images. Because I honestly don’t really see the value.

Justin Avery In the last episode Steven said the exact same thing, Steven said, “Just don’t serve them ever.”

Aaron Gustafson: Yeah, I don’t really feel like we need to do them. I’ll serve different sizes or different crop using picture, I’m fine with that but I just … I don’t see the point and actually [Brad Frost 00:47:01] and I were talking about this yesterday I think about just using images that are slightly larger than you want them to be in the display and they’ll look pretty good for another … For a high DPI browser but won’t ginormous in terms of how much larger they are than the actual display which can serve the best of both worlds.

Yeah, I stayed out of this source set thing just because I don’t find much value in doing the high resolution images. I’d much rather have the photos and stuff like that be a standard size and then just do [inaudible 00:47:43] and stuff like that for the other bits, the things that we can control a little bit better.

Justin Avery As they should about. I think it is more and more becoming the default for what we used to use is PNG’s and I just sort of almost [inaudible 00:47:56] replace by [SPG’s 00:47:48] which is hopefully the way we [00:48:00] continue. You told me … Saying you don’t know whether that network specs at the moment. You’re looking at … Do you know anything to pick up on those things, okay you’re looking at other things outside of the browser with the view port in terms of an adaptive or … From a progressive enhancement point of view to provide a better interface doing anything with JavaScript [inaudible 00:48:30] anything like that whether is a user port. Do you look at …

Aaron Gustafson: Not so much the user agents I think the only times we’ve done that is when we know we’ve got a specific pain in the ass browser or one that lies. Most of the time we’re doing checks against future capabilities … Is a certain feature implemented in this browser or is it not implemented in this browser. Actually one thing I was playing around with actually yesterday was dealing with an avatar upload with the context of an app. Excuse me. We had a visualization of what the current avatar was and you could click to upload a new one which is great.

One of the things I wanted to do was if you picked a new image that we would go ahead and if it was available use the follow reader API to actually read and what that image looks like and give you a preview of what image you’re uploading. That’s a fairly easy thing to do you just … You have file reader actually exist within window and then if it does then you can go ahead and check the unchange event of an upload field of a file and basically read in the file that they’re trying to upload [00:50:00].

Justin Avery That’s very cool.

Aaron Gustafson: Yeah.

Justin Avery Do you have … Because these are enhancements but when you approach … I supposed when you’re approaching a site you always start from a … The most basic version to accomplish. For an image uploader or and avatar upload that you’d have a form with an input field and a submit or a file input field or a submit button and it would post that and then it would refresh the page. Now you’ve got to the point where you’re passing in reading that and then putting down to the screen if someone has those capabilities. When you’re designing that first part have you got an idea of where you’re going to across [crosstalk 00:50:47]?

Aaron Gustafson: In some cases, yes. In some cases, yeah. It’s funny in the last two projects that I think that I’ve worked on it just worked out that I actually built the HTML and the JavaScript before I even touched any CSS which was an interesting thing because I was building at the behaviors and making sure that they worked in the context of just pure HTML which is fun actually. It seems like a weird way to do it but actually worked out really well and let me just focus on the functionality on not layering up that experience and overtaking a certain standard operations in the browser and making it behave slightly differently if certain options were available and stuff.

Justin Avery Then just also from my component level like you’re building a giant website these days, you’re building components for existing websites more at pasting. Where do you focus with most of your work?

Aaron Gustafson: Still a variety, we do have development but we also had a couple of large types that we built we’ve been … Even on the large sides [00:52:00] we’ve been moving towards more work and base design doing a lot of pattern library work and then implementation of that pattern library within the context of the app for the website. In that we’re trying to continue to think modularly and in some cases there are relationships between a specific component in HTML that has certain class names on it but more often than not are JavaScript is dumb for lack of a better word.

It just pays attention to instructions in the markup so will use data attributes to tell that, “Okay. This should be converted into this sort of an interface,” and we want to use these options for it. That sort of stuff becomes very declarative in the markup which makes it more maintainable because a back end developer who knows nothing of the JavaScript can come in and see, “Okay. Here are the instructions for this. I know how to tweak this and it makes sense to e.”

We use that in for instance are validation library that we wrote. It’s a really stupid, simple JavaScript validation library. It pays attention to all of the HTML5 instructions and then additionally you can control the messaging that’s been up for error messages if the field is invalid or if it’s empty both at the form level … As a global default but also on an individual field. Then the JavaScript basically just pays attention to those instructions if you have an HTML5 or web browser uses the HTML5 validation stuff that’s native and goes ahead and just high jack’s the message, the validation error message to insert your custom message.

If the [00:54:00] the browser doesn’t support validation natively or pretends that it does in the case I mentioned browser alike. There are some browsers that think that they do but they don’t actually … They can technically validate but they don’t actually have any UI that actually enforces that stuff.

Justin Avery What happens in that case just in files …

Aaron Gustafson: It let’s it pass through that’s what Safari does, I think it still doing it. The last couple of projects that we’ve worked on Safari just basically it knows that the field is invalid but it just let’s it go.

Justin Avery Because that’s the way of showing?

Aaron Gustafson: Yeah, if you do a check on the browser you would find out that in fact it does support validation but the reality that it doesn’t, in that case you actually do need the browser sniff and in that case we’re trying to somewhat smart about how we’re sniffing on that to make sure that we’re not being jealous and just taking anything that has Safari in it which is inaccurate but only going for certain builds of Safari and stuff like that.

Justin Avery It sounds like the whole [inaudible 00:55:05].

Aaron Gustafson: Oh yeah, yeah. It’s anytime you go into agents sniffing it’s just … It’s a pain in the butt.

Justin Avery Do you use anything [Waffle 00:55:15] or things like for that?

Aaron Gustafson: We use things like that in the past, again we’re trying to do as much of it in the browser as possible. I really like the idea of actually doing some tests on the front end of actually recording that back to the back end via cookies or the like so it doesn’t necessarily get it on the first load. Then you can optimize what the presentation is for the rest of the site based on that profile. Those sorts of things work really well and especially in complicated interfaces and such.

Justin Avery It sounds very cool. It’s says like a jobs are getting [00:56:00] really much and much more complicated and difficult but in a fun way.

Aaron Gustafson: Yeah.

Justin Avery When it works, when it doesn’t work that’s not a fun way. If I … The rate is wanted to start getting into more things around … I would call this more advance is taking responsive design to a next level more of a JavaScript and a progressive enhancement. Is that always been around but if wanted to start learning more about that and looking at the techniques and things that you’ve been talking about. Where would I go to find out more about the stuff or sites that are implementing this?

Aaron Gustafson: We talked about it a bit on our blog when we have time to. The filmmaker talks a lot about this stuff as well. We have a repository for easy designs that has a lot of these sorts of, usually they’re [inaudible 00:56:58] but sometimes native JavaScript components and things that you can just pick up and use in project that are made to be progressively enhanced that are made to be accessible and so on. If they wanted to see some of the stuff working in the real world you would profile the Nickels College redesign that we did just recently. A lot of that stuff is rolled up in there.

Justin Avery It’s a very nice sought.

Aaron Gustafson: Thank you. That would be one place that they can conduct not only look.

Justin Avery I think I’ll have to go back and include that as part of the coverage of that site because I didn’t include all of that stuff.

Aaron Gustafson: There’s lots of fun things in there.

Justin Avery To go hunting more. It’s the time to find to do it. It seems [crosstalk 00:57:50].

Aaron Gustafson: It’s all bundled up and minify and all that sort of stuff too.

Justin Avery Just have [00:58:00] a look the … You minify JavaScript and CSS. Any thoughts on gzipping? Sorry, not gzipping, you definitely gzup HTML but minifying HTML?

Aaron Gustafson: We’ve done it on some sites like the tipr.mobi, it’s T-I-P-R.mobi, was a site I worked on. I initially built over, basically overnight as a tip calculator for myself back in 2007 and I was experimenting a lot of the mobile optimization stuff. We did shrink the HTML and send that along. We were doing it as a PHP post processing thing or we’re actually ran every page through a script and then it would knock it out. That’s something that we’ve done, a lot of it can be automated on the server now.

We did for a while [SHERPA 00:59:10] but we didn’t on web standard SHERPA but we didn’t see a whole lot of value in it. We thought the other thing was from a … The stand point of that being a teaching tool magazine patting it expose was a useful thing. I think there’s pros and cons. I think a lot of times we end up in this scenario where we’re trying to show off on how fast we can make our sites and stuff like that with some cases then we lose the opportunity at the site as a learning tool.

Justin Avery I would stop short of HTML purely even it could be faster but I learned how to build sites by viewing the source of other people and stealing their stuff and re-implementing it and learning how to do it and fixing the things that were wrong with it. I just … It just seems wrong to take that away from [01:00:00] anyone else, I want to learn in that way.

Aaron Gustafson: No, absolutely, absolutely.

Justin Avery I think we’ve got to the end. I’ll have to let you go now. One thing that’s … I’ve got many things I wanted to talk about. I’ll have to follow up with you around things like web component as well. Actually if you got a sec just to quickly turn your thoughts. Web components the idea behind them of package to HTML, JavaScript and CSS ride together in a component which can then run on a site. Could there be a solution around things like element inquiries. If they can contain that whole package within themselves, do they kind of the answer in where they should be looking or we should be looking?

Aaron Gustafson: I don’t know. I think there’s potential with them. My main concern with web components is if we move towards this componentized architecture I which I think we’re naturally gravitating towards. We like to have … We like to have [inaudible 01:01:15], right, or we can just reach in and grab stuff and drop it in and I think that’s fine. As with anything that’s out there it’s really all about who it is that’s creating the components and what their priorities are, what their agenda is, what problems they’re trying to solve and ultimately are or rather is their problem they were trying to solve aligned perfectly aligned with the problem you are trying to solve.

Because I look at how many sites are out there using Bootstrap. It’s our concept whipping boy but Bootstrap came about to as a prototyping tool for a team at Twitter [01:02:00] in order to be able to quickly mock up new concepts and stuff like that. Now it’s gone from that to the de facto pattern library that everybody is using across the web. I’m sure if you did probably a combined sites that are using Bootstrap and sites that are using WordPress that way you’re probably come close to a 100%.

My concern is that if you don’t do your do diligence and look into what are the implications of the decisions that were made by the authors of this particular library, this component or what have you. You’re having to buy into their mindset and it may not align properly with yours. In the case that Bootstrap is to be that it was desktop first responsive. If you wanted to do mobile first you couldn’t do that with Bootstrap. Now you can do that but … And the tools will continue to evolve and that’s a good thing but it’s still you’re buying into what they’ve done.

I think we need to be somewhat concerned about the quality, the perspective, the priorities of the code itself and people behind the code for the components that are out there. Just like I think more people need to pay more attention to the code that’s underlying jQuery plugins for instance is that actually a good plug in to use. Does it cause accessibility or does it do this than on the other. I think accessibility definitely is one of the things that tends to get overlooked in a lot of these instances.

Justin Avery Suggest people go … I assume the easy designs get hub account is very similar to the filming group and the SAS straight stuff where it’s pretty much [01:04:00] built basic first with options to layer it up as you go.

Aaron Gustafson: Yup, not as well publicized but yes.

Justin Avery If you want to start doing these things look to both of those. We’ll track out links into the show notes as well. Aaron, thank you very much for taking time and joining.

Aaron Gustafson: Thank you, Justin.

Justin Avery It’s been awesome to hear ideas and thoughts around these things. It’s very refreshing to hear. Finally as well is … Are you speaking anywhere? Are you writing anything knew? What’s happening with you in the future? Plug a few things before we let you go.

Aaron Gustafson: I’ve got a bunch of speaking engagements coming up in the fall. I’ll be at the Accessibility Summit which is an online conference from the Environments [Freeman’s 01:04:54] folks [inaudible 01:04:56] in Charlotte, North Carolina. I’ll be up for the Accessibility Quebec, Accessibility Conference in October in Quebec, Canada and then I believe I’ll be in Orlando in November for Beyond the Desktop. I think I’m making it back over to Europe again this year but maybe to Australia next year, we’ll see.

Justin Avery It sounds exciting to fly back.

Aaron Gustafson: Indeed.

Justin Avery Pretty good. Thank you again for joining us.

Aaron Gustafson: Yeah, thank you, Justin.

Justin Avery Yeah, it’s been great.

Aaron Gustafson: Yeah, same here.

Justin Avery Thanks, Aaron. Cheers.

Aaron Gustafson: Sure. Bye- bye.