RWD Podcast Episode #28 : Catherine Farman

Transcript goes here.

Justin Avery: Hey, everyone and welcome to another edition of Responsive Design Podcast. This is Episode 28. My name is Justin Avery. I’m your host and curator of Responsive Design Weekly, a weekly newsletter all about friendly enough responsive design. This week’s sponsor, a big shout out and a big thank you to Girl Develop It they are our sponsor this week. We’ll hear a little bit more about them afterwards. Basically, their mission on their site is … It’s a nonprofit organization and they exist to provide affordable and accessible programs to women who want to learn web and software development through mentorship and hands-on instruction.

I’ve see them come quite a few times and I know we featured one of their courses or one of their events recently, one of their newsletters when Ethan Marcotte went to speak in Boston. This week, I’m very fortunate to be joined with Catherine Farman who will tell us a little bit more about Girl Develop It. Welcome, Catherine.

Catherine Farman: Hi. Thank you so much for having me. I’m so excited to talk to you.

Justin Avery: Yeah. Thank you for coming along. Where are you dialing in from?

Catherine Farman: I am in Philadelphia which is where I’ve been living for 6 years.

Justin Avery: Nice.

Catherine Farman: It’s nice and chilly, and rainy here today so I’m really happy to be inside.

Justin Avery: It seems to match the same kind of weather we’re having over here in London.

Catherine Farman: Nice.

Justin Avery: Now, for those of you listeners out there that aren’t aware of Catherine, Catherine, maybe you could tell us a little bit about how you got into the web and some of the things that you’re doing now, maybe in particular around the Girl Develop It stuff.

Catherine Farman: Yeah, absolutely. I am a web developer/front end developer and I’ve been doing this for about 6 years as my career. The way that I got into web stuff was really through design [00:02:00] and playing around with stuff. I’ve told this story a few times so I’m sorry to have to repeat it again. My first website that I ever built was a Hanson fan website when I was about 12 years old, maybe 11 or 12. Yeah, and I just was really into the Internet and like using the family computer to like join web rings and Hanson fan web rings, and stuff like that. I started making my own website using an FTP program to upload it. I was on all of the hosts like GeoCities and Yahoo, and Tripod, I had sites on all of them. I would just code things in Notepad and look stuff up, and this was like before Google even. I was really just learning from those thorough experimenters that I was meeting online in this kind of fan space of music fans.

Justin Avery: Was this all done with tables?

Catherine Farman: Yeah, tables. No CSS. We’re talking tables and font tags, link tags. I was a huge fan of link tag. I remember using JavaScript for the first time. I just like copied someone’s code into the page, at the bottom of the page, and like it was to make an alert come up and ask you for your name. Then it would print your name on the page and like I didn’t even know how that worked. I just like copied it from some other site and I was like, “Yes. This is the best thing ever.” That was my first exposure to building websites.

Justin Avery: That’s awesome. I’m pretty sure that’s how everyone still builds them today.

Catherine Farman: Yeah, yeah. One of my former colleagues, Yesenia Perez-Cruz, we worked at Happy Cog together. She also says that she got into web stuff because she was building I think it was a Christina Aguilera fan website. Everyone kind of has these embarrassing web pasts that I wish we could still like find those sites and [00:04:00] –

Justin Avery: It’s one of the saddest things that all these things have gone by the way. You don’t still have the URL? It was sort of like one of those Hanson.yahoo.pages.

Catherine Farman: Yeah. I think I remember the neighborhood that I was in on GeoCities, but that’s it. There’s some archives that’s still available and I’ve tried to go in and like find my old website, but there’s just too many pages to click through. There’s got to be like an automated way to dig that stuff up someway and have someone else look into that.

Justin Avery: Yeah, definitely. It’s a project for Christmas. While things are a little bit quiet just go back and try and dig up a GeoCities.

Catherine Farman: Yeah, like crawl through the GeoCities looking for my name plus Hanson. I will find it.

Justin Avery: Did you graduate much from Notepad across to the old Macromedias or FrontPage?

Catherine Farman: Yeah, I did. I was really lucky. I grew up in Texas and I went to like a public school. We’re very lucky to have a teacher who was like into this stuff. She taught a web design class when I was in high school that used Dreamweaver and was just like, “You make websites using Dreamweaver, which is really cool.” We got to play around on the Internet before people came up with the idea of blocking schools and stuff. We got into a lot of trouble like downloading Kazaa and songs, and music all into all the computers at school because they weren’t locked down at all.

I was really lucky. I had learned to type in elementary school and knew how to use a computer through that, and then gotten to take this web design course in high school. It was something that I kept up with in that way. It’s like a side like fun thing that I like to do. Hey, I can get course credit for it too.

What we really got me considering this as like a career was that when I went to college, I went to Bryn Mawr College which is a school outside of Philadelphia. There was an internship program that was by [00:06:00] a multimedia design and development program where you would stay for the summer on campus and build these projects for faculty or students, or staff people who needed whatever if they needed a website or their department, or the … One project I worked on was to make introductory videos and website materials for adjunct faculties.

It’s like dry subject matter, but it was really fun because I got to work with this group of fellow students where we were just like figuring stuff out. We were in a tiny room in the computer lab on campus all summer like banging our heads on the desk whenever stuff was breaking, but getting help from each other and figuring it out together, learning Drupal, learning JavaScript, learning CSS. That was where I learned CSS for the first time. I had these really amazing mentors who … One was the developer for the Bryn Mawr website and another was really interested in technology and was the educational technologist. She was really interested in sharing what she knew with students and creating the space for us to play around and learn, which was awesome.

That made me more focused. I got really into web standards. This was like 2005. I remember where we took a trip to the local Barnes & Noble which doesn’t exist anymore, of course, because all bookstores are gone.

Justin Avery: Thanks, Amazon.

Catherine Farman: Yeah. Thanks, Amazon. We went to Barnes & Noble and picked up all these web books. I still have a copy of like a CSS reference guide. I think it’s by Eric Meyer, and I have Designing with Web Standards by Jeffrey Zeldman, which, of course, is iconic.

Justin Avery: Staple reads.

Catherine Farman: Yeah, book. I got into the whole idea of standards and even learned accessibility and building accessible websites [00:08:00]. The importance of that was really like baked in to what we’re learning. I had no idea at the time like how important and unique that was and how special it was, but it’s been something that’s stuck with me since then. Starting from that internship that I did I didn’t study development or software, or programming in college at all. That was really the one unique opportunity that I had and took advantage of. It didn’t really occur to me to study computer science because at the time I wasn’t sure what the relevance was to what I was doing.

I’m very much a visual person. To me, it was awesome to be able to like play with code in order to make things look the way I want it. That was my whole interest.

My interest was also in the visual aspect. I know a lot of front end developers who get into web development because they are really designers or they used to be print designers, or they just find the graphic design element of web design to be interesting. Then they have to figure out how to actually do it on the web so they become technical as well. That was definitely my experience where … I studied art history in college. I’m very much a visual person. To me, it was awesome to be able to like play with code in order to make things look the way I want it. That was my whole interest.

Justin Avery: When you were learning to code in the Notepad during your tables which we all did and then jumped across to … Was it Macromedias? Dreamweaver, yeah. Because you’re more of a visual person, did you fall more in love with the “what you see is what you get” kind of drawing boxes or you’re still like “No, code is where it’s at. I can be quicker and better here.”

Catherine Farman: Yeah. It’s funny that you say that I think because I did have that Notepad experience, which now that I say I’m like, “Oh, I should put that on my resume.” Notepad experience, 20 years or whatever. I think because I have started out where I was just messing with the code, going in to browser. That was what stuck with me as my process, like to this day I have never really used a [00:10:00] a Wiziwig interface in an editor. Even when I used Dreamweaver, I would drag the Wiziwig like picture out of the way and just use the code out of that, really. I don’t know. I think even though I’m visual, I like to stick to the browser. I like to like focus on one thing at a time. Does that make sense?

Justin Avery: Yeah, nice.

Catherine Farman: Dreamweaver was like notoriously crappy in the code that it would recommend you to use –

Justin Avery: The preloaded image JavaScript stuff that it used to put in there like you could always tell when a site was built by Dreamweaver because they had all these … It would preload all the images and all of the hover images. It was just really like just lines and lines, and lines of really bad JavaScript. If you source and go Dreamweaver, Dreamweaver built that.

Catherine Farman: Yeah. I always felt like my code was so much clearer if I just wrote it, even if it took longer. It’s just like, “Oh, I can’t stand to look at the Dreamweaver output.”

Justin Avery: It sounds like you were really influenced during that time. Is it [inaudible 00:11:09] in the States when you entered this summer?

Catherine Farman: The summer program was just local to the university I attended.

Justin Avery: It sounds like you were driven by … It sounds like you were quite well influenced by the people doing the teaching and stuff. Has that led you more like … Have you just seen what they’re able to do for you and then is that what you’re doing a little bit more work around things like Girl Develop It?

Catherine Farman: Yeah. I think that’s a great point. I’ve definitely always felt like I wouldn’t be here in this industry. I feel like I fell into this career driven by this interest, but also by people who taught me stuff really well and gave me in this great foundation in what web design is [00:12:00] or what it can be. My high school teacher, the folks who taught me in college, having that learning environment is definitely crucial to the fact that I’m a front end developer.

Yeah. That’s a great point. I definitely credit like good teaching and I think that’s definitely motivated me to give back and get involved with Girl Develop It, which I have volunteered as a TA for. I’ve been like a helper in classes and I’ve also taught a handful of classes and written curricula for. It certainly motivates me to think that I can continue to pass on this knowledge that I was given at several steps along the way that got me into this industry.

Like I said, I didn’t study development or software engineering, or computer science in college. When I actually was starting out as a web developer, it was because of these opportunities I had that taught me a little bit about that industry, and because it’s … I realized that people will pay you to do this full time and I was like, “Oh, I have these skills. These people need them? Okay, cool. I guess I’ll do this.”

Justin Avery: I’ll take your money.

Catherine Farman: Yeah. It’s certainly like the teachers that I encountered along the way that allowed me to fall into this, for sure, and ever since then I’ve kept that in the back of my head.

Justin Avery: That’s awesome. I did a bit of a read from Girl Develop It from their website. I don’t think I did it as much justice as I possibly could do. Can you talk a little bit more around … Before we start jumping in outside and firing these responsive questions off of you. Just talk a little bit about what Girl Develop It is and what they’re trying to achieve.

Catherine Farman: Sure. Girl Develop It is a national nonprofit here in the US. [00:14:00] There’s chapters in over 35 cities. I think it’s 36 or 37 at this point. There’s one here in Philadelphia. The first one was in New York and they’re in like every major city in the country, basically. As you said, the goal is to … It’s a nonprofit so it’s a charitable organization. The whole goal is to have these supportive hands-on classes in these cities that are affordable and available to women. It’s targeted and marketed at women, although everyone is welcome to these classes and they’re meant to be affordable.

I remember looking up web design classes when I was at my first job. I was like, “I need to get better at Illustrator.” I was trying to do more design stuff then. Everything was like a local university and it was like thousands of dollars. In the past, there really haven’t been like affordable options if you just want to like dip your toe in and learn a little bit of HTML and CSS.

Now, we have this huge explosion of like educational websites, but there still isn’t that hands-on opportunity. I think Girl Develop It is really unique in that way. We have these chapters in all these cities, and each chapter has meet ups, basically. The work that is done with Girl Develop It can’t happen without Meetup.com. I don’t know if you use that for your own kind of events planning, but it’s an amazing resource to find people and attract them to your events.

We have like thousands of people on the Philadelphia website from Meetup.com, it’s a Girl Develop It Philadelphia site. We find people through these websites and set up classes. Basically, we’ve been putting on classes in Philly for about 2 years, 2-1/2 years.

It’s a really great structure. I love the way that this community is structured because unlike other nonprofits that are like very nationals. This one is all about like local efforts. All of the classes take place [00:16:00] in one city and that chapter is run by the same people. You’re really building a network of women who are interested in technology who are there to learn. Oftentimes, the women who started out as students in these classes become teachers or they find jobs as full-time developers in the industry, and they become leaders in the local tech community, which is really awesome and gratifying to see.

…we shared and got to hear from each other about what everyone’s doing. People are doing amazing stuff. I think it’s definitely time that these women are recognized for the amazing work that they’re doing

It’s a special thing that’s happening with Girl Develop It. I was also really lucky to go to a national conference that they had a couple of weekends ago in New York City, where all of the chapter leaders from all of these cities came into one place and one room, and we shared and got to hear from each other about what everyone’s doing. People are doing amazing stuff. I think it’s definitely time that these women are recognized for the amazing work that they’re doing.

These are women who were like technologists, developers, software engineers that after their full-time job, they’re going home and they’re running up classes and finding teachers, and looking for sponsors and looking for space to run these classes in, and building this community and making technology more welcoming to women, who otherwise may not know how to get into that industry.

You don’t really hear about it a lot and when I was in that room with all of these women that are doing this amazing work, I was just like overwhelmed, blown away. There is this whole kind of hidden work we’ve been doing behind the scenes to make technology more diverse, and it’s really cool to see that. My goal for 2015, I think, is to get the word out more about what these awesome women are doing and make sure that they’re being recognized and also that they’re inspiring other people to help out and do this work.

With that in mind, if all of this sounds cool to anybody listening you should totally check out GirlDevelopIt.com/donate [00:18:00] because Girl Develop It is looking for donations to help sustain that kind of work. They have very little administrative overhead, very little central leadership. They have quite a lot of work to do to run all of these chapters nationally. Any help that your company can give, if you know people who want to give back and increase the diversity in technology communities then this is a great way to do so, so just something to think about.

You can also see if there is a chapter near you. If you go to GirlDevelopIt.com and see if you can get involved that way. I know that the organizers who run these chapters … The thing I heard at this recent conference was that they just don’t have that much time and they’re always looking for more help. If it sounds like something you would be able to help out with, I recommend you get involved as well that way.

Justin Avery: I’ve had a bit of a flick through the site as well. The resources is amazing. If anyone is actually … For one, definitely go and donate. The resources there they’ve got some basic workshop slides. They’ve got classes on HTML and CSS, JavaScript, Ruby on Rails, Python, Android. I’ve had to flick through. They are as good as running a classroom on tree house, but they’re up there and free.

Catherine Farman: Yeah.

Justin Avery: Everyone should check that out.

Catherine Farman: Yeah. That’s a good point. There’s also a GitHub organization. That’s GitHub.com/girldevelopit. I believe is the URL. It has even more than what’s listed on that website that you just referenced. All of the curricula that is written by Girl Develop It leaders and teachers is open source. Whenever someone makes slides for a class for new subjects, they post it to GitHub. That means that we can use it in other cities that are Girl Develop It chapters, but anyone else can also reference that material which is really cool and, again, something that I don’t think [00:20:00] a lot of people know exists.

Justin Avery: That’s amazing. Well done. Kudos to you and to everyone else doing that sort of stuff. Still on the Girl Develop It stuff, it looks like you wrote a course around … You’ve at least got slides from your responsive web design presentation. Was that associated with one of the Girl Develop It Meetups?

Catherine Farman: Yes. I taught a responsive design class in 2013 and again this year. That was slides that are put together for that class with some few hands-on exercises just to get people comfortable with design and with coding for responsive design. The CSS is definitely a little bit different if you never learned it. Yeah. That was one of the first classes that I taught for Girl Develop It, and they didn’t have an existing curriculum for that so I got to write the materials myself. I definitely got a lot of use from Ethan Marcotte’s book of course which is like the standard, which I guess has just come out with a new edition. That’s cool.

Justin Avery: Yeah, yeah. Second edition.

Catherine Farman: You can check that out.

Justin Avery: How do you teach the course? If you’re going to teach someone responsive design from the get-go, how does your course go about? What things do you focus on to begin with?

Catherine Farman: The way that I approach that class is really … We expect that people who take it have some kind of HTM L and CSS experience because we’re not starting completely from scratch. I usually take it from the perspective of how we use to build websites before responsive design and what is different. Because I found that a lot of the students have that experience of building like a desktop website or maybe –

Justin Avery: Like fixed with like 10/24 or 9/80, or 9/60.

Catherine Farman: Yeah, exactly or if they’ve even built like a mobile website and have some experience with that. They want to know what’s different with responsive. [00:22:00] I start out with that. We have just an example Photoshop file that’s a design and then we use that as a guide, where I can give students some code to start with and then they have to write the CSS to make it mobile first and responsive. It’s a pretty big challenge, especially for just a few hours of instruction.

I think it’s so important to emphasize the importance of mobile first. It’s the way that I’ve been putting responsive design for a few years. I can’t really see any advantages to doing like a mobile last design at this point.

Justin Avery: Yeah, I’m glad that you’re saying mobile first as well.

Catherine Farman: Yeah. That, to me, is something that, I think, still gets backburnered when you’re introducing responsive design with people. I think it’s so important to emphasize the importance of mobile first. It’s the way that I’ve been putting responsive design for a few years. I can’t really see any advantages to doing like a mobile last design at this point. I definitely see lots of disadvantages so I try to preach that gospel.

Justin Avery: Do you think it’s easier, well, perhaps that some of the teachers think it’s easier for students to wrap their head around and starting like this is a desktop and here’s how you will deconstruct it to a mobile, like we don’t give them enough credit to go, “These are blocks of content and here’s how you create something desktopy.”

Catherine Farman: Yeah. I think it’s more visual to be like, “We’re going to shrink this.” It’s quicker because there’s only one step there. It’s not actually the most optimal way to make website, right?

Justin Avery: It’s not the right way to go.

Catherine Farman: Yeah, right.

Justin Avery: Between 2013 and … You said you did this course the first time in 2013 and you’ve done it again this year. Have you changed the curriculum at all? Have you been like, “Ahh. Now, we do it this way,” or introduced anymore like a technical … like made it more technical or a little more difficult, or is it stayed the same time across?

Catherine Farman: Yeah. I think I did change it. Actually, the biggest difference was that I made it a mobile first [00:24:00] like website as the exercise, like make this work mobile first. In the first time that I gave it, we tried to do both where we did like a mobile last and then we changed it to mobile first. That just was very confusing for people who were like, “Wait. Where does my CSS go?” Because it’s all about the cascade. I want to introduce like different ways of making your CSS responsive, and it means reversing like the order of your code and stuff. I think that’s just overwhelming for people. That was the biggest thing. As far as like new or like alternative ways of doing things, that’s a question. I actually want to look at it now and find out.

Justin Avery: Like touching it on … Like you introducing … I don’t know … Flexbox for lads and all or introducing like this is how you might handle responsive images now.

Catherine Farman: Yeah, Flexbox. It’s actually funny that you said that because I was like tweeting about some responsive thing. Someone is like, “You can do that in Flexbox.” I was like, “Crap. I am so behind.” I definitely did catch up on that. Yeah, responsive images. Again, I think it’s something that’s like it’s almost there, but it’s a little too complex to like introduce to people who are just learning responsive for the first time, especially because if you go with like that maxed with 100% method you are pretty solid. I just tell people to do that.

Justin Avery: That is very true. I think Brad Frost wrote an article recently. He’s like, “I put 2 sizes of images, one at this size and one at that size, and that’s it. Just everyone dealt with it.”

Catherine Farman: It’s simple. There’s some really interesting solutions that I’ve attempted to use in my work, but I think it can get really complex really quickly and hard to maintain. When it’s hard to maintain, it’s just like, “No. That’s going to go up a window in like 2 months after launch.” I agree with Brad there.

Justin Avery: That kind of approach because I’ve heard … We’re lucky to have Ethan on the show a couple of … [00:26:00] Well, a few episodes ago. I was asking if responsive web design had changed at all. He just went, “Well, no. It’s still the same thing. It’s flexible grids, flexible media like images, video, and CSS3 media queries. That’s it. That’s the 3. That’s responsive web design. Anything else you want to do on top of that go nuts like go crazy, but that is it.”

Catherine Farman: Yeah. I can’t argue with that.

Justin Avery: Which I think is very cool. I think it makes it so much easier to teach people with concepts of it without getting bogged down into some of the more nitty-gritty build pots of it.

Catherine Farman: Yeah. I agree completely.

Justin Avery: Having said that, you were not bogged down but you do some of the nitty-gritty stuff yourself. The reason I came across you in the first place was I read this awesome article on SitePoint about improving performance like web performance now or performance is a massive thing. Tim Kadlec talks lots about it, Luke Wroblewski talks a ton about it, Scott Jehl’s new book on Responsible Responsive Design, he’s got a favor about this sort of performance of web pages and they keep getting more and more bloated. You wrote an article on how you can test for performance with Grunt.

Catherine Farman: Yes, all of those people have been talking about this for a long time in web design years. Also Lara Hogan has been speaking probably about –

Justin Avery: Totally.

Catherine Farman: Designing for performance for ages and talking about that. Her book is coming out as well which I’m really excited for.

Justin Avery: Again, I just an email today. It’s been rereleased so another edition has been [00:28:00] … If you’re in a preview edition you can buy the prerelease version of it under Riley. She’s just released another prerelease version. It’s awesome.

Catherine Farman: Excellent. Okay, I’ve got to pick that up. Yeah, I love that perspective on it too because I think for a while performance has been really talked about in technical terms and the people leading that conversation are getting recognized for that conversation tend to be developers, tend to be technical and that’s definitely important because so much of performance is really technical constraints, right? It’s also really important to keep performance in mind early on in a project whatever that project is. It really should be a part of the design process which means it needs to be a part of their research process, right, user experience testing process.

Performance is really finally becoming recognized as something that has to be a part of every conversation about what’s going on with your website

Performance is really finally becoming recognized as something that has to be a part of every conversation about what’s going on with your website which I love because it’s a real challenge if you’re a developer especially if you’re a front end developer and you’re tasked to help make a website faster. It’s like, “Well, okay, there’s a whole bunch of checklists out there that I can follow, but ultimately a lot of it is going to be predicated on design and decisions that were made long before you were brought into the conversation.” I definitely had that experience.

I think having these tools like you mentioned that SitePoint article I wrote about, having more of these easy install tools that make performance and the idea of a performance budget accessible to nontechnical people and to help you generate data, a number to share with nontechnical people to make it clear what our goals are with the projects and how we can better serve our users by making our website more performant, I think that’s all just making it a lot easier to make performance part of the conversation.

Justin Avery: So for those people that are getting [00:30:00] into Grunt at the moment, we were talking really quickly before, the podcast, I was terrified to get involved with Grunt to begin with because I was terrible with JavaScript and command-line wasn’t my friend but it’s not that scary, right?

Catherine Farman: Yeah, oh man, that’s such a great point. Command-line is really intimidating for folks and I totally get it. I also love that I can open up terminal now and type stuff and it does things because I feel like I’m like a hacker. It’s like flip side of it. Yes, it’s scary but then once you figure it out you’re also like a hacker nerd so that’s kind of cool. I didn’t –

Justin Avery: If people are getting started with Grunt where would you get them to look at to begin with?

Catherine Farman: I would definitely recommend, I think it was Chris Coyier who did a 24 Ways article last year about how Grunt is not just for developer weirdos anymore, how everybody can use Grunt. He laid out all these easy ways to get started with it. I would definitely recommend that. Honestly, anything he does, anything on CSS-Tricks. Anytime someone like in a development class or … Asks me, “How do I learn more about this?” I’m like, “Just Google that plus CSS-Tricks and -“

Justin Avery: Sometimes you don’t even have to add CSS-Tricks because it’s just there number 1.

Catherine Farman: Yeah, it will probably come up first. That’s like my go to resource not even Google. Yeah, I love that one. I wrote a SitePoint article earlier this year because I was … When I was at Happy Cog we were doing different ways to do front end tasks, things like Sass unification and Sass compiling. That’s funny that you mention about the command-line because I think the only reason I even started using the command-line was because I was using Sass. Once I figured out like, “Oh, [00:32:00] I could use this tool. It’s just another interface on my computer.” You really open up this whole world of other things that use a command-line that are so important to development now, things like get. You even learn some version which is crazy to me, things like Grunt.

Yeah, I definitely credit Sass with forcing me to learn the command-line a few years ago.

Justin Avery: When you build a site these days, what’s your typical kind of workflow like best case scenario, client isn’t being a nightmare as someone who is developing it and has an eye for design? I imagine you do a bit of front end design as well. What’s your workflow from sort of start to finish, for a technical side and also dealing with a client, talking to them about how you’re going to do things, performance budgets, responsive or not? It’s never not really, is it anymore? How do you take a client through?

Catherine Farman: I think there’s a lot to be said for that research phase where you’re learning about the client’s needs, you’re learning about the goals of the project, you’re doing these benchmarking analyses where you’re finding out what competitors are doing or what you want to do better. Using that and everything that you have to share with the client moving forward is based upon that knowledge. Any time that you have to take a stand about a process or a way of doing something and educate someone else about how this works in a responsive website or how we can make our website faster and how these decisions needs to be made, you back it up with that research that came out of the beginning.

I like to document what I’m learning as a way of processing it and then also using that later to back up what you’re doing and make sure that it still follows those kinds of goals from the beginning.

To me that’s really important. I’m the kind of person who takes obsessive notes all the time. I have pages and notes for this podcast [00:34:00] for instance. I like to document what I’m learning as a way of processing it and then also using that later to back up what you’re doing and make sure that it still follows those kinds of goals from the beginning. That to me is really crucial.

That said, I’m still a developer so it’s usually a collaborative process where there’s lots of other amazing people that are guiding the whole project in the way that it works. A lot of what I do during the design phase is kind of a critical eye to see what things are going to be implementable, what’s going to be something that’s performant and where can we make improvements as far as like how to make things faster when it gets built, how to make sure that a design works and is fluid at all screen sizes. Especially if you’re not working in a mobile first context I think it’s important to make sure that you have an idea of how the context will change and how the design is going to change at all importantly else but also kind of all along the way.

There is so much fluidity that I end up making quite a lot of design decisions and you hear this from developers all the time now. A lot of front end developers we have to be designers and design thinkers as well because when we’re coding out a responsive design we’re making decisions along with the designers. It’s not just a designer who makes something and then we make everything pixel perfect anymore.

I think the biggest thing there is just communicating with people and coming up with ways to keep on top of problems as they arise and address them. That’s also what I find really fun like working with designers and being like, “Hey, how do you want this to work?” and like, “How about this? Did you see this example over on my [00:36:00] CodePen or this cool thing on CSS-Tricks, we can try that.” Just trying stuff out and experimenting. That’s what I love about building responsive now.

Justin Avery: Do you often get sort of Photoshop comps still from the designers to work from?

Catherine Farman: Yeah, pretty much every responsive site that I didn’t design myself and even the ones I designed myself, like my website and a couple freelance projects yeah, there’s been Photoshop work first. That can be anything from a sketch or a full on comp. There’s was one project I worked on a couple of years ago at a different agency that was Yarn.com which … I love to brag about that one because any time that you work on a website that’s a noun.com that’s a pretty big deal, right?

I worked on yarn.com. I worked on soccer.com, that’s pretty kick-ass.

Justin Avery: That’s awesome.

…having those (photoshop) comps was really important to talking about it. Even if we didn’t end up building everything the way that they were designing the comps we had a starting point.

Catherine Farman: The yarn we designed was … We had a website. We wanted to basically make tweaks to it to make it responsive but mostly the HTML and the information architecture, all this stuff is going to be mostly pretty much intact. We’re really just doing a front end reskin and making it responsive which is a huge undertaking and it was, I think, a pretty successful one.

The designer put together full on comps for a few different key pages, so the homepage, the product landing page, the product detail page, each of those really important ecommerce sites stuff like shopping cart got a mobile, tablet and a desktop comp. I found all of those really super helpful especially when we were talking before we even started coding you talk about like, “Okay, what’s going to happen when the user presses that button on the product detail page and tries to check out like” … Let’s talk about all this and the users flow [00:38:00] and we’ll really clarify that whole interface and that flow before coding even started which is great. Because if you have to change the user flow in an ecommerce shopping site during development it can be a real pain in the ass.

Just having those comps was really important to talking about it. Even if we didn’t end up building everything the way that they were designing the comps we had a starting point. That to me is really the purpose of using Photoshop now, not necessarily to make things look exactly the same as the picture anymore but really to have a starting point so that you can figure out how best to –

Justin Avery: Yeah, to have those conversations about the things that matter.

Catherine Farman: Yep, exactly.

Justin Avery: Jumping in do you have a set of break points that you follow you’re kind of like, “Well, this looks like a mobile. Let’s start at zero and go to it looks crappy here at 400. It looks crappy at 600?” Or have you got, “We have to do 320 and 768 and …”

Catherine Farman: I did both. Usually with Sass I have a set of starter files that are like … My Sass style sheets are structured the same way for each project and I have a bunch of breakpoint saved as variables. Then I can use those to write my media queries and be like, okay, no [inaudible 00:39:19], medium screen sizes, I have this value saved. That’s consistent early on. I think it just makes it easier so you can say like, “Okay, the navigation as a whole is going to morph here and then it’s going to shift into something else.”

Oftentimes especially if you have things like some kind of JavaScript that is triggered at different verdict points then it’s really useful to have that consistent breakpoint that you’re using in your CSS.

Then I feel like later on in the project it starts to become like, “Okay, now we really have to clean up those in between states. Where does it get fuggly and weird?” That’s when you start adding random numbers.

Justin Avery: The magic numbers. [00:40:00] I went through FontShop recently because they’ve just released a responsive redesign. It looks amazing, it looks really nice, 34,000 lines of CSS and there are just some media queries. I think I listed out about 48 media queries, separate media queries but I kind of love that as well because it’s a bit magic number-y with the media queries. I’m looking at one here and one is 31.25 the other is 35.4375ms but also there’s something beautiful about like at that exact point there was something wrong so they’ve dropped a media query in to fix it because it absolutely has to look great across every screen width and height. There were some height queries in there as well.

Catherine Farman: Oh crazy.

Justin Avery: With your Sass are there any kind of tricky mixins or are you an in-liner of your media queries or you kind of pack all of your CSS within sections?

Catherine Farman: I do the FontShop approach. I have a bazillion media queries. I use them in a block of code that I want to apply to them. Yeah, I use a Sass mixin. I actually wrote an article on cognition which is the Happy Cog blog about my mixin [inaudible 00:41:27] for responsive design and media queries in Sass. The reason I started using that mixin was so that I could have fall back styles for browsers like IE8 that don’t support media queries.

That was the impetus behind that using that mixin. I find that I really like that style of writing where you’re writing, you’re mixing kind of max the code that applies to it. It just conceptually makes sense especially when you’re coding and then later when you’re reading and you’re trying to find that media query like it’s next to all of us the code that applies to the element which [00:42:00] just makes sense.

I used to work with Kimberly Blessing who is an experienced awesome developer and she has done some performance test in browsers of the rendering time for CSS media queries in different ways, right? If you sprinkle dozens of media queries throughout your CSS versus just one giant block of media queries versus imports and stuff like that, and she found that as far as the number of media queries in your CSS, one versus 25 there’s no difference basically in the rendering or speed at which the browser found those media queries and shows them to you.

Once I learned that I was like, “Cool, I’ll keep going on this way.”

Justin Avery: Yeah, for sure. A win is a win.

Catherine Farman: Yep.

Justin Avery: I know you’ve used … You’re saying you use Grunt. The article was about using it for performance testing, I think it was web page test?

Catherine Farman: Yes.

Justin Avery: You used Sass or Sass library within the Grunt as well. Are there any other Grunt tasks that you would recommend if someone was getting into Grunt as a workflow for their responsive design work? Do you have a list of go-to Grunt tasks that you use?

Catherine Farman: Yeah, absolutely. I actually have a little set of tasks on my GitHub account that are basic front end tasks like that so Sass is in there. There’s a JavaScript concatenation task, I forget what it’s called right now. I think it’s uglify. That’s what it is which takes your JavaScript and minifies it and compiles it all into one file so that when you’re developing you can have your structure for your jobs however it is, in separate files, many different folders, set it up in your Grunt file [00:44:00] to pull all of those different files into one file and then minify it and uglified output so that it’s shorter JavaScript and that is what you can use on your production site.

Justin Avery: Nice.

Catherine Farman: The cool thing about Grunt that I love too is that … That’s a workflow that you would use for production site, but usually if you’re working local or in a staging environment you want to be able to inspect the code. You don’t want it uglified. You want to see the JavaScript that you wrote. You can set up different tasks with Grunt based on the environment and run those tasks only on staging.

On staging when you wrote your JavaScript it can be in separate files or it can be in a more readable format than you were on your production site. You only have to configure that once in order to have that set up and ready to go which I love. I find honestly to be the biggest advantage to use in cloud.

Justin Avery: Yeah, that sounds awesome. Does that mean that you can … I mean how does … Does that still work across a larger team if you worked across a larger team of developers where there’s more than just one person working on these files or these Sass files or on the JavaScript that you’re looking at?

Catherine Farman: Yes, absolutely. Everyone on the team will share the same Grunt setup. It will be version control. Everyone has that on their machine and all of those different environments will be configured in that same Grunt setup. If you can configure … If you have a bill process where you can run commands on a server like your staging server and your production server then what you need to run is that particular Grunt command so that anytime someone pushes to the staging server that particular Grunt command is automatically run as part of the build. No one has to do an extra step in that process which is really cool and it’s the same for everyone so everyone is seeing the same benefits and sees the same process working in all those [00:46:00] environments.

Justin Avery: That’s super cool. I need that.

Catherine Farman: Yes. You also need a coworker to help run all those environments so I highly recommend becoming friends with your sys admins.

Justin Avery: Like sys admin.

Catherine Farman: Yeah.

Justin Avery: Because you need things like yeah, that just doesn’t happen does it? You just can’t push it up to Amazon and all of a sudden it amazingly magically appears. I love sys admins. I love sys admins.

Catherine Farman: We love you.

Justin Avery: During the last couple of podcasts one of the questions that I was asking people was around … Like because responsive design has been around for quite a few years now, enough time for a few books to come out and even Ethan’s book to reach a second edition. People are looking to get more advanced with some of the techniques that they’re doing. Do you consider any particular any techniques advanced or would you advice anyone to … If they were looking to take their responsive design cred up to the next level, things that they could try out?

Catherine Farman: I really do think performance is the next level there. It’s something that is still an afterthought but is so important. I personally am the kind of person who when I’m done with my work I don’t really use the computer although I know this is not everybody so I’m very unique in this way. I depend on my phone to interact with the web like the majority of the time when I’m not at work.

I often am browsing stuff and it takes forever for the websites to load and I’m on a pretty decent network usually or a wireless connection and yet these sites are so huge that often I’ll be like trying to read an article and I just want to yell at people like, “Oh, I don’t care about your stupid web thoughts” because it’s always like their text never loads [00:48:00] and I can’t see the text of the article that I want to read because their web fonts are so slow. It’s like that kind of stuff that’s really a turn off and a huge disadvantage to a user and to your site the fact that you’re not reaching as many people as you could be.

Those are all aspects of design and responsive design that people are finally starting to pay attention to. I think if you really want to level up in responsive design you’re going to start to streamline the kinds of sites you’re building in the CSS. I’m so guilty of building enormous CSS base sites that are responsive and they’re pretty and they work well but they are really built with performance in mind and that just gets past on the user as ultimately how that works out.

If we can start to see more approaches, more … What I love to is designers are definitely a part of this conversation and thinking about these things. Katie Kovalcin wrote an article about designing for performance budgets that talks about some really kind of specific but simple tradeoffs that designers might need to keep in mind when they’re working on a responsive design project that are all about coming with a performance budget saying that we don’t want our site to take more than this many seconds to load or be larger than this many megabytes or kilobytes.

Once you have those numbers you start to make these tradeoffs and you start to make these design decisions where you have these new constraints introduced but that’s really the nature of design, right? The nature of web design especially is that we have so many insane arcane even constraints to the way that we design websites but that’s the whole point. Take advantage of them.

Justin Avery: It’s what makes it challenging.

Catherine Farman: Yeah, that’s why we’re here to figure it out. [00:50:00]

Justin Avery: That’s awesome. That’s really good advice actually. I like that. On that note, I know we’re running out of time, I have one more question for you which is each week the guest from the previous week ask a question of the guest from this week and seeing as you’re the guest from this week, Andy Dysart who was our guest last week, he asked whether or not … He does a lot of social media for his company at the moment. He’s often found hanging around on Facebook or Twitter or Google+ or LinkedIn trying to, he says, promote but all of his colleagues so do all passengers go, “You’re just on Facebook, aren’t you?”

His question for you is do you have a favorite site at work that you go on to just kill time and I’m doing the Dr. Evil quotations there of basically wasting time but kind of trying to make it look workish.

Catherine Farman: Ooh, that’s a dirty question. I would say definitely Twitter because I do follow like a million web people and I do get very interested in research and work based articles there but also I just like to bum around on Twitter and talk to people.

Justin Avery: Excellent. That is a really good one, actually. I allocate half an hour of my morning now to Twitter just to go through the list and see what new articles have been out there and what else has happened in the football team that I follow or something else.

Catherine Farman: Yeah, no, it really is a great resource. That’s why I started using Twitter I was like, “Oh, all these web people are like real people and they’re online.” Now it’s like anything goes.

Justin Avery: You can reach them as well.

Catherine Farman: Yeah, you can talk to them.

Justin Avery: You just @ them and they reply. They’re real people. It’s amazing.

Catherine Farman: It’s bizarre.

Justin Avery: It is. It’s great though. I love it. [00:52:00] Thank you. That is a good answer. I’m sure he’s going to … He’s probably on there already. He’s probably on there as we’re talking now. You now have an opportunity to ask a question of our next guest. Is there something in particular that you would like to know or you would like to pose?

Catherine Farman: Let’s see, I would like to know what the next guest is most excited for in the year 2015.

Justin Avery: Ooh, nice. Is this web related or is this just in general?

Catherine Farman: Anything. Anything.

Justin Avery: Anything at all?

Catherine Farman: Yeah.

Justin Avery: That’s a good question. That is good. Our next guest is coming … In fact, there’s 2 people coming up this Friday so it would be interesting to hear what they come back with

Catherine Farman: Oh great. Can’t wait.

Justin Avery: That should be really good. Thank you very much for taking time out of your afternoon, Catherine. It’s been fantastic having a chat hearing about the things that you’re doing and the stuff that Girl Develop It has been doing as well. Before we go, how do people check out your work, how do people send you messages, how do they get in touch with you on Twitter?

Catherine Farman: Yeah, Twitter is probably the best place. I am cfarm, F-A-R-M. That’s me on Twitter. You can find my website on there. My website has my email if you want to get in touch via email. I also recommend that you follow Girl Develop It on Twitter and see what they’re up to because they are really great at keeping at with conversation about not just women in tech but all kinds of cool tech stuff so I would check them out too.

Justin Avery: Excellent. Thank you very much. Thank you to all our listeners for this week. I hope you’ve learned as much as I have from Catherine. Until next week, thanks very much for joining in. Cheers everyone, bye.