RWD Podcast Episode #23 : Zurb Foundation

Transcript

Justin Avery: All right. Hi everyone and welcome to another edition of responsive design weekly podcast, its episode 22. This week we are lucky to be sponsored by MailChimp. MailChimp is awesome. I love MailChimp so much I get to hang out with it every Thursday night while write the newsletter. Anyone that’s planning on doing any kind of email marketing campaigning, sending newsletter for the love of it, get on to MailChimp, they’ve got a free slot for up to 2000 users, 2000 subscribers and I think its about 10,000 emails a month, you have to check that.

It’s a lovely service, it’s very easy to use, they make great responsive emails. Every time I send an email every Thursday night, I get this little Freddie the MailChimp monkey puts up his high five hand and slaps through the screen and brings a smile to my face. A big thanks to MailChimp for sponsoring this week’s podcast. You should definitely checkout that mailchimp.com.

The other sponsor for this week is one of my favorite frameworks, Responsive Framework. I got into Zurb Foundation pretty much when it first came out. Although I think I got a [bird 00:01:10] version to great for record product typing, the responsive design weekly site is built upon it as many other sites that I’ve done. They’re sponsoring this week as well.

With that, we also have Brandon Arnold and Geoff Kimble joining us from the team at Zurb. Welcome guys.

Brandon Arnold: Hey.

Geoff Kimble: Hello.

Justin Avery: How are you guys today?

Geoff Kimble: Very good.

Brandon Arnold: Yeah, yeah really good. We are in Southern California, raining this morning like 80 degrees right now. [Laughter]

Justin Avery: Beautiful. Now in my neck of the woods 80 degrees things are going to start boiling very soon. It sounds nice sounds lovely and warm. Now you guys are just coming off … before I ask a little bit more about yourselves, you’re just coming off a big redesign, right? Like a 24 hour thing [00:02:00] that you guys do for charity?

Brandon Arnold: Oh yeah, yeah. Last week, we do every year its called Zurb Wired and we spend 24 hours and even though we are all web designers for the most part, start piling print materials, we get them printed that night and then we also we’ll redesign an entire website for a charity and local charity in the area.

Justin Avery: Where was it this year?

Brandon Arnold: It was at a charity called Sacred Heart, St Claire Valley and really great. They do probably spend everything [laughs], they do a lot of, they have a food bank, they do food drives and they do like advocacy and just pretty much they keep us pretty much as a community together. It’s super important for us to help them out. We only launched a whole brand new website CMS and all and then I think 20 different promotional print material.

Justin Avery: That’s awesome. It’s up live now.

Brandon Arnold: Yeah, yes Sacred Heart …

Geoff Kimble: sacredheartcs.org

Brandon Arnold: There we go, community services, yeah.

Justin Avery: Excellent! It will be this week’s feature site of the week to show a few good work. Well done. Brandon and Geoff a little bit about yourselves, how did you end up working at Zurb? Did you get into the responsive design building of websites?

Brandon Arnold: Yeah, yeah. I actually started in advertising as like an art director and overall like pitchman in general. With all these doing, the web staff here as well, I worked actually down the street from Zurb at the time. My old office was the old office that Zurb had. We hear this awesome thing called Foundation [laughs]. I started using Foundation, heading over for the all meet ups and eventually [00:04:00] they swopped me in. I was a designer at Zurb for while, am a design lead now and also the other Foundation team which is pretty fun and exciting to have that as like the path of how got to Zurb and to be on the leading thing of it now.

Justin Avery: Very cool.

Geoff Kimble: Yeah. My background is pretty much front end with a little bit of design in the side. I’ve been doing that for quite a long time. I also found out about Zurb through Foundation. I’ve used this since speedy version three and I was able to net an internship at Zurb. Then when I graduated college, they were able to swop in and grab me also. Now I get to make Foundation [laughter], so I think my art.

Brandon Arnold: This is the first time that Foundation fans have been hired to build Foundation.

Geoff Kimble: Yeah, very cool.

Justin Avery: Now you’re taking the lead.

Geoff Kimble: [Laughter] Yeah.

Justin Avery: It’s interesting that fans have now come to build it because I’m a massive fan. I think it’s awesome. How have you seen it evolve over time and how has it changed with … what has forced foundation to change over the years? Like I said, I think I started working within version two, its now version five. How has it been evolving?

Two designers in front end does, one named Duncan Smiley and one actually named Mark Otto. They actually created the internal style guide. Mark actually later went on to Twitter and created Bootstrap and John Smiley actually stayed at Zurb creating Foundation

Brandon Arnold: Yeah, yeah. I mean Foundation originally started as actually Zurb’s internal style guide. Zurb first and foremost is an agency. We do like 100 websites and web apps a year. It started as our internal style guide. Every time we started a website, we knew we were doing the same things over and over again. Two designers in front end does, one named Duncan Smiley and one actually named Mark Otto. They actually created the internal style guide. Mark actually later went on to Twitter and created Bootstrap and John Smiley actually stayed at Zurb creating Foundation. [Inaudible 00:05:57] which is there.

I think it’s actually [00:06:00] a really fun really like cousins thing, its nice [laughs]. Then Foundation, the first public release was Foundation 2, so Foundation 1 was an internal thing only. The first public release was responsive by nature. We later went on to be mobile first because we saw a need for that. We definitely saw that okay; mobile browsers are really becoming the popular medium.

We saw the projections and they were actually pretty correct that I think by 2013 like half of all internet traffic was on mobile.

Geoff Kimble: Yeah, [inaudible 00:06:36] it happens.

Brandon Arnold: One of our advisors, Mr. Luke W, if I try to pronounce his last name, I think my head would explode.

Geoff Kimble: Wroblewski.

Brandon Arnold: Wroblewski there we go, was chanting this mobile first thing, mobile first. He actually just lives up right up the street. He started coming by and we really saw that as like definitely the future of that. Basically every time smaller screens start yelling at us to do more specific things for them, that’s how Foundation grew out of that, was being responsive kind of the compass for where the framework should be going.

Justin Avery: That’s awesome. Now I read in a recent blog post that you’ve introduced Zurb Ink to handle the mal responsive designs which I’m extremely thankful for. Also there is another thing moving around specifically for web apps. Do you see a split between designing for the web and web apps at the moment?

Brandon Arnold: Yeah, yeah, I mean so Foundation is really great and what we discovered in our studio works for the marketing sites in simple web apps, right? Once you need to do some thing a little more extreme in a web app environment and an app that’s kept online browser, it starts to break down a little and that’s pretty much [00:08:00] any kind of framework we have  today.

We are creating a family of Foundations if you will. Foundation the Ink that you talked about a second ago which is literally foundation if you build an email. If you want to code like 1999 [laughs]

Male:[Inaudible 00:08:19]

Brandon Arnold: That’s the perfect framework for that. That will be rebranded as Foundation for Emails. We do have a giant squid mascot for that. I mean it’s sad to see Inky go [laughter] but that’s okay. Foundation will be rebranded as Foundation for Sites and there will be a new kid on the block called Foundation for Apps which basically is set up to say, “Okay, we know you need some pretty intense grid structures here, we know you need like probably an MBC Framework built into this and we know you need a lot of motion within your app to make it feel and compete with like this sleek feeling need of apps.

Justin Avery: Sounds exciting.

Brandon Arnold: It is, it is. We are prototyping the whole process. Maybe you guys will probably see some of that online here. We are prototyping, Geoff and I pretty much and then a couple members of the team just prototyping away a lot of fun features. We are mixing some and we are adding new ones and say, no, that doesn’t work and its nice environment to actually get a chance to in addition to our client that we do get paid to build open source.

Geoff Kimble: Yeah.

Brandon Arnold: [Laughs] To help the community.

Justin Avery: Where are you taking a lot of your directions from in terms of the prototyping and stuff you’re doing?

Brandon Arnold: Probably from the work that we do here internally, so Geoff and I think have both just come off a stint of that. I just finished this last like couple of months, I think like four clients that needed web apps done. Geoff you just finished …

Geoff Kimble: I have one and even though I use Foundation, I wrote a lot of custom code because the layout needs were too complex.

Brandon Arnold: A lot of it is from our own just necessity and the things [00:10:00] that we are seeing in the community. we are also pulling from just things that we are seeing from what … [Sportify 00:10:06] has done a really great job at building a really amazing web app that I think is desktop only, I don’t think its …

Geoff Kimble: Yeah, yeah. It will be desktop only, but it has all the same interactions as the desktop app that they wrote in html.

Brandon Arnold: Which is pretty cool. We are just seeing a big shift there, we are going, “Okay, if this is reality, how do we take this from our responsive groups? How do we help people build these things in responsive manner?”

Justin Avery: That’s really cool. The stuff which I was working with Foundation today actually is really funny. It’s not a complaint. One thing that I find sometimes difficult is the good structure at the moment when working on a CMS where a client wants a layer, kind of complex layer within a content area and you need to keep adding in rows to separate things out. You’re adding this non semantic code; you have to get content editors to put a container and then another container within the container itself. Has that come up at all in the things that you can change around that to help?

Brandon Arnold: Yeah.

Brandon Arnold: Yeah, that’s a necessity with how [cuff 00:11:18] loads work [laughs]. Slots in to know when to clear themselves and that’s pretty much all row does. If you actually look at the structure of what a row is, it literally is a box that clear.

Geoff Kimble y:Yeah, as a [inaudible 00:11:33] so that’s about it.

Brandon Arnold: In the new version of Foundation for Apps, we wanted to tear down that construct and say, “Okay, what if there was one thing?” The new version has both the horizontal and the vertical structure to it, so like rows and columns make sense. We have one item called the block, so we have building block. You literally can just nest blocks inside of blocks, inside of blocks. Blocks [00:12:00] can be parents and children; they can be sized or not sized, its not going to simplify a lot of those types of interactions, right? You’re not going hit a row and a column, a row and a column, you just put a block inside and you’re good.

Justin Avery: So it will make the building of a CMS base component a lot easier I suppose?

Brandon Arnold: Totally. Then in addition to that, there’s going to be a lot of angle integration. A lot of the stuff would be put into directives which feels like web component, right? As opposed to having to write three or four [dibs 00:12:32] to create a mortal and then have class names and data attributes to them, this is in finalizing syntax, you might just be [left care 00:12:40] foundation-mortal right care and then …

Geoff Kimble: You have your own tags then for each component versus dips with classes basically.

Justin Avery: Cool.

Brandon Arnold: That would be like a nice little functionality to simplify the whole process for people.

Justin Avery: From there, can you guys move on to solve the element query problem?

Brandon Arnold: That’s actually funny. We talked about that. [Laughter]

Geoff Kimble: We do it next week.

Justin Avery: Nice.

we have this thing called interchange which basically lets us at different screen sizes taken in different HTML partials or different images. It’s kind of like if the picture element can be used today and if also the HTML partials for those images

Brandon Arnold: In Foundation for Sites we have this thing called interchange which basically lets us at different screen sizes taken in different HTML partials or different images. It’s kind of like if the picture element can be used today and if also the HTML partials for those images, it’s pretty sweet if you’ve ever used that checker interchange part of Foundation. We’re rewriting interchange as an angle directive and we wrote in a lot of stuff that was element query as well. The problem with element query it doesn’t actually do any element queries, it’s actually not that complex. The problem is [laughter] [inaudible 00:13:47]

Geoff Kimble: Well I guess support thing right now.

Brandon Arnold: But it’s also like how do you differentiate element queries from the enquiries from a presentation class language, right? We’re mixing this pretty easy [00:14:00] but in the presentation class, when I say small, medium and large for my grid size or I say small, medium and large for other things, how do I know that that is an immediate query or not, not an element query? There’s a lot of things like that that you’re like, that hurt my brain at night and I have a take pills to go to sleep at night [laughter].

Justin Avery: As long as it’s solved in about a fortnight, we will all be fine, will buy you a drink, you’ll probably sleep a lot better [laughter]. One of the things … you said you do quite a few; well you do tons of sites, so that’s what it sounded like, hundreds of sites a year, that’s awesome. One of the complaints that I often read on the Twitters and sometimes on the stack overflows and just talking with people is that, I mentioned using Foundation for Twitter big strap or something is that, yeah frameworks they’re bloated, you don’t need any frameworks and they’re good, you just write it from scratch. Do you guys get that at all? You must be able to answer that question a lot more eloquently than I do. [Laughter]

Geoff Kimble: Yeah, that’s pretty common. Yeah, yeah definitely at this point your frameworks are kind of a constant. You probably either use the word you don’t just because you have a preference. We can definitely say our frameworks are bloated. We definitely made a lot of strides in Foundation, with this new version to make it easily customizable, that’s one of our big things like with our massive settings file and also very modular. It’s very easy to either just comment out components you don’t need so that the CSS does an output. Or you can hide the CSS classes and just use [mixing 00:15:41], we generate all of our classes from [mixing00:15:44].

If you were to write your own classes, you would only use bits and pieces of our component, you can use our mixing and that will cut down on your file size. So as opposed to having small dash five in your mark up, you would just have side bar and then you would extend that. Then you wouldn’t need [00:16:00] any of our presentation classes.

In addition to that, there’s actually like and this is something that I haven’t actually tested myself but am hearing like really cool reviews for a lot of like some of our clients and different people. I don’t know if people have heard this thing called On CSS, its sweet [laughs]. Basically it’s anything like [inadubile 00:16:19] a golf tub, it’s probably [inaudible 00:16:21] but for all those things, task that basically scans your entire, all your pages on your site. Then compares them to the CSS and then on the output the CSS that you used as opposed to the CSS that you didn’t use.

Justin Avery: Oh well, that’s kind of cool.

Brandon Arnold: Yeah, it’s pretty neat. You can definitely take that file size. I mean even so the amount of classes that you’re going to end up and are actually using probably are pretty high. If you’re building with semantic mark ups, so it makes sense, you’re going to minimize that CSS file already like a lot.

Justin Avery: Random, the minimizing the CSS and stuff, one of the big things that everyone  is pushing is like performance budgets and making like, I think responsive design its got this huge flak of like, you guys make the web so much bigger. It’s not the approach itself, right? It’s not the tool or the technique itself, it’s us or other people building them bloated. Are you guys putting much work into not just reducing the size of things, but just speeding things up, trying to help these sides be a little bit more trimmer? Not just for the framework but the sole stuff that you’re doing for clients as well?

Brandon Arnold: Yeah, we just finished a redesign that will be going up pretty soon for a very large retail ecommerce sites. One of the guy’s bosses like midway to the project I think came up to him [00:18:00] and said, I don’t if that’s responsive design and stuff. This is more like once size fits none [laughter]. We went, “Oh no!” We do a lot of stuff animation-wise. We’ve converted all our animations from takeaway base to CSS base.

Justin Avery: Cool.

Geoff Kimble: Definitely much more performance obviously. Like ways you are to handle on the job script versus defining all your animations in java script, very nice.

Brandon Arnold: There’s other things that [inaudible 00:18:33] we’ve paired a lot of it down. We’ve gotten a little more strict about community requests for things like that, let’s solve a problem for very specific person and we’re like, I would like to solve the problem for you. We’ve gotten a little more strict about adding in things that they’re going to add especially with javascript get bloat.

I think lastly the biggest thing we did was an interchange blog and I talked about it a bit ago which honestly if you’re using that, you can cut down a lot of unnecessary java script. Well not necessarily html from being loaded. If you have different image sizes for different devices, if you have full different sections for different devices, you’re not going to double load  that content any more. You’re just going just pull in the content you need when you need it.

Justin Avery: That’s really cool. Previous guests  Patrick Harmann who works for The Guardian does similar stuff around that and them trying to break the thousands or the second barrier of serving news content by only loading what is actually needed onto the pages which is really cool. Anyway [inaudible 00:19:42]

Brandon Arnold: That’s insane now.

Justin Avery: You guys must, how is the pressure of having this foundation framework? I think last time I was in the site it was like 18,000 star gazers, so [00:20:00] you’ve been starred a lot in …

Brandon Arnold: Everyone’s eyes.

Justin Avery: Yeah, everyone is watching you too. You’re talking about how you’re a lot more strict now of like what gets included. Do you have a process, how do you decide what goes in and how you change it?

Brandon Arnold: For the most part, its not just Geoff and I there’s a couple of people who work on Foundation as well community members and everything. For the most part, we’re pretty like in sync on a lot of things that we need and want. If we do find ourselves with too many PRs that are getting piled up, too many, like there are some issues that none of us want to solve, we will during work hours just lock ourselves in the room for four hours together and just call out, okay, this, this and this, its been tested, it worked but do we need it? Then we will take an informal vote of [laughs] of individuals.

As far as like the stress of the community too, we just had an incident where trying to make one group of people happy, made others disgruntled as well, there’s a big guilt level, I know Geoff felt the pressure of that.

Geoff Kimble: Yeah [inaudible 00:21:13]. We had issues with like SAS compatibility balancing ruby SAS and Lib SAS. We were supporting one and we axed the other and then the Lib SAS community was not too happy about it, so we’ve working extra hard to maintain that compatibility and keep people happy.

Brandon Arnold: There’s definitely some of that getting down on yourself on that. We have no stats by the way of who uses what version [laughter]. Apparently a lot of people use Lib SAS.

Geoff Kimble: Yeah, more that we thought [laughter].

Brandon Arnold: Things like that are definitely a problem. For the most part its gut reactions and if we see it enough, right? [00:22:00] If it keeps coming up, we keep turning it down. Like Equalizer is an example of a plugin we said we would never have in one of those [inaudible 00:22:07] which is a plugin that uses java script to automatically equalize heights of different columns and on page resize we equalize them to get the same height. That was something I know in Foundation three or Foundation four, we close like four ratios each four and then eventually we were like, you know, I need it for this project and I keep hearing it and okay, we just build it in and it has been like a godsend in every work I’ve done.

Geoff Kimble: That’s super nice. [Laughter]

Brandon Arnold: I was working on the site to date rebuilding the site for someone and they had the same thing. They had the equalizer stuff in there. They were using Foundation. I was like I’ll just keep using what they’ve got there.

Brandon Arnold: Its definitely not like, it probably took like an hour to code and it’s very big and we are like okay, so don’t we love it.

Justin Avery: With the Flexbox stuff that you’re including for the mobile apps, well sorry, Foundation for Apps that’s what it’s called, the brand?

Brandon Arnold: Foundation for Apps, yeah.

Justin Avery: Two really good questions because I know you guys are going to go very shortly. Are you going to be using the Flexbox for Foundation for the web, for sites? Then also are you looking down the feature light of the grid spec itself?

Brandon Arnold: Those are two questions. We actually rewrote the Foundation grid in Flexbox like two and a half years ago. This has been sitting on a branch [laughter]. It’s actually like really easy and it cuts the grid code down by like two thirds.

Geoff Kimble: Kind of use this browser compatibility, we just axed our [inaudible 00:23:58] for Foundation file but I think we do [00:24:00] like having …

Brandon Arnold: We actually mixed the [inaudible 00:24:02] before.

Flexbox is still kind of leading edge but we are putting our stake in the ground, kind of a long game kind of thing. More things will only support it.

Geoff Kimble: That’s right, yes. We’ve been on that for a while. We do like having IE9 and IE10 users, I think it uses [inaudible 00:24:13], yeah I think it uses the twin of syntax of Flexbox that came between the first and the final spec. as for the grid spec, and it’s like way in the future. We looked at that and it has a lot of the same futures like [inaudible 00:24:26] like flexible widths and things like that. Maybe you’d have to give it like two or three years to be anywhere close to being on a lot of browsers probably.

Brandon Arnold: We are totally aware; we are not like ignorant to the fact that like Flexbox is supposed to be built for the layout.

Geoff Kimble: Flexbox is still kind of leading edge but we are putting our stake in the ground, kind of a long game kind of thing. More things will only support it.

Brandon Arnold: Then floats whenever meant for layout. [Laughs]

Geoff Kimble: We’ve been using the same layout paradigm for like a decade on the web [laughter].

Brandon Arnold: That’s probably about time to switch it up and we are not afraid to take a stand like that. Its a little nerve racking that we are going choose wrong on occasion, but we will just bounce back and figure it out. Mixing IE8 definitely was a tick against foundation for some people, but we had to take a stand against IE8 community and say, “No, we are not going to do it anymore.”

Geoff Kimble: Some people made it work I think. There are some apps on …

Brandon Arnold: Certainly you can make it work with polyfil I mean that boot trap actually works with polyfil.

Geoff Kimble: Yeah, that’s how they do their IE8 support it’s the polyfil.

Brandon Arnold: At the end of the day people are just going to fall back to swimming lines and stuff, 100% they’ll be fine.

Geoff Kimble: Totally, yeah. Look at that, look at that.

Brandon Arnold: Can we get you as a client? [Laughter]

Justin Avery: I don’t have any money. [Laughter] can you build me a site like eBay then Amazon with a touch of YouTube, that will be fine. I get those questions all the time. [Laughter] [00:26:00] I could keep talking to you guys and I’m probing about Foundation and grids and how you build these things up, but I know I’ve got to let you go. Brandon, Geoff, thank you very much for coming on. Thank you very much for all the work that Zurb does for the community around Foundation and for continuing to develop it and awesome things. Personally you’ve saved me tens if not a hundred hours of development work in terms of setting up sites. Massive thank you from me. If people want to contribute to Foundation or get in touch with you guys, how do they do it?

Brandon Arnold: They can head to foundation.zurb.com, they can head to, from there they can go to get hub. They can do Twitter @zurbsfoundation. We have a forum that we have as well, zurb.com/forum and just a lot of good amazing ways to contact us. That forum address is actually entirely wrong so don’t go there [laughter].

Geoff Kimble: Search Foundation forums.

Brandon Arnold: You Google search that. As for us individually, you’ll probably see us on Get Hub, talk to us if you see us on Twitter, talk to us on there too.

Justin Avery: Twitter address is? I’ll link you guys up.

Brandon Arnold: Yeah. Brandon_Aarnold, easy enough.

Geoff Kimble: I’m Geoff Kimble which you will [inaudible 00:27:29] show notes because of how my name is spelt [laughter]. There’s an X in there guys, I mean [inaudible 00:27:35] [laughter]

Justin Avery: It’s silent.

Brandon Arnold: It’s also invisible so you [inaudible 00:27:41] [laughter]

Geoff Kimble: Silent three. [Laughter]

Justin Avery: Guys like I said thank you very much. Now look one thing that I didn’t get a chance to do is, each week one of my previous guests asked a question. I’ve recorded [Jordan Hoss 00:27:56], interview a few weeks ago so I didn’t get back to listen to his question. [00:28:00] can you come up with a question for our next guest? Be a little bit web related, preferably responsive. Does not have to be. Pose the most difficult question that you can think of.

Geoff Kimble: Got you.

Brandon Arnold: Right now, right on the spot?

Justin Avery: No, I’m actually going to leave it because usually I prep the guest so that they’re have to answer this.

Brandon Arnold: We can do this.

Justin Avery: [00:28:25] [Inaudible] Rock, paper, scissor there who’s going to come up with the question and then we will give you a chance to think of it.

Brandon Arnold: Sweet, perfect. 1, 2, 3

Justin Avery: This is [inaudible 00:28:39] [laughter]

Brandon Arnold: The question is, I would just say, what’s your max width now on the web?

Justin Avery: That’s good.

Brandon Arnold: That’s something we get asked every single time. Foundation 5 is still on 1000 pixels [inaudible 00:28:54] pixels [inaudible 00:28:55] for ends. [Laughs] what’s your max width for a website when you start this or a marketing site. That’s what I want to know.

Justin Avery: That’s a great question. I will ask that next week to our next guest. For now again thank you very much guys for coming on and yeah hope to catch again soon and looking forward to these new products coming out.

Brandon Arnold: Justin thank you so much for your time.

Geoff Kimble: Yeah, thank you.

Justin Avery: Cheers. Bye.

Brandon Arnold: Bye.