Episode Transcript

Ethan:

Hi, this is a Responsive Web Design Podcast, where we interview the people who make responsive designs happen. I’m your host, Ethan Marcotte.

Karen:

And I’m your other host, Karen McGrane.

Ethan:

And this week, we are continuing our series where we’re shining a spotlight on folks doing interesting work in the area of responsive design. We’ve been talking to designers, content strategists, and developers. And in that vein, we couldn’t be more excited to be joined this week by Sareh Heidari, who is a web developer at BBC News. Sareh, thank you so much for joining us today.

Sareh:

It’s a pleasure to be invited.

Ethan:

Oh, absolutely. We couldn’t be more excited that you’re here.

Karen:

But first, let me welcome our sponsor, FreshBooks. I personally have used FreshBooks to manage my invoicing for many years now. FreshBooks has made my life so much easier by helping me keep track of who has paid me, and who hasn’t. It’s been a great product for years, but now it’s even better, with an all new version redeisigned from the ground up. Now it’s even easier to send invoices, set up online payments, and manage expense reports. Their dashboard, notifications, and automated late payment reminders will help ensure you get paid on time. FreshBooks is offering a 30 day, unrestricted free trial to our listeners. To try them out, just go to freshbooks.com/RWD and enter RESPONSIVE WEB DESIGN in the “How Did You Hear About Us?” section. They’re great, and you should totally try them out.

Ethan:

So for some of our listeners and readers who may not necessarily be familiar with your work, do you want to tell us a little bit about yourself and the things you’ve been working on?

Sareh:

Sure. So, I became a web developer about a year and a half ago. Before that, I was in academia, doing kind of physics-type work. Decided that really wasn’t for me to stay in long term and then did a bit of a coding boot camp, and then went into web development. After that boot camp, the main place that I started work at was BBC News. I’ve been there for just over a year now.

Ethan:

Well, as somebody who once entertained illusions of going into academia, that’s really exciting to hear. Maybe you could tell me a little bit about what you’ve been working on at the BBC.

Sareh:

Sure. So since I’ve joined, I’ve mostly been working on the BBC News front page. It’s been redesigned, rebuilt, and that’s been pretty exciting. So, using a new tech stack, a new kind of CSS framework, a new setup… So, everything’s from scratch, and that’s been pretty exciting and a pretty high profile project, so it’s been really enjoyable to start working on that.

Ethan:

That’s great. As some of our listeners might already know, Karen and I are both big fans of the BBC. We’ve had them on the show a couple times and y’all do wonderful work. Sareh, I’d love to hear a little bit more about—I saw that you’re going to be speaking at CSS Conf, and you’re going to be speaking a little bit about CSS scaffolding at scale. Could you tell me a little bit about what that means and how your work sort of intersects with that?

Sareh:

Sure. So as you probably know, the BBC News is accessed worldwide—just the fact that you’re talking about it and you’re in the US is note of that. The majority of the people that access the BBC News site are domestically in the UK, but it’s also worldwide. So, the thing with dealing things at scale is that not only would you’d want to create lightweight CSS but also working on a wide range of browsers, so from the low-end devices all the way up to the latest. That’s been pretty exciting to work on that. But also the thing is that with the BBC News, we work closely with BBC world service sites, and those sites deliver news in over a couple dozen languages in many, many regions around the world. So, there’s scale in both content and in just the variety of different permutations of sites and content that we have, which is interesting.

Karen:

How do you stay on top of everything that you need to know to work at a place like the BBC News? I think a lot of web developers get overwhelmed by the sheer pace of change in the industry. How do you make sure that you know what the latest trends are?

Sareh:

That’s an interesting question. So when I started, all I really knew about this project was that it would be a Node back-end and front-end Sass and JavaScript and basically HTML. But when I started, I realized that it was using React, so server-side React. So, me and most of the team were, for the first time, really using React on the server. That was really interesting because it was—well, as you’re probably aware, lots of different companies are using that and it’s one of the popular frameworks that’s being used. But what I really liked was because of the way we work and because the way everything is pretty much broken down into these separate milestones, there isn’t kind of an overwhelming waterfall of things that you need to know. It’s kind of paced out. That’s a great way to learn new skills.

Ethan:

Just circling back on Grandstand a little bit, Karen and I are both admirers of, well, most pattern libraries frankly, but the BBC GEL Foundations framework has actually been really interesting to both of us. Could you tell me a little bit about how Grandstand interacts with GEL and how that’s kind of informed some of the work you’re doing there?

Sareh:

Sure. So, GEL is the [B]BC’s Global Experience Language](http://www.bbc.co.uk/gel). So, what that has is its foundation, so it has typography and things like that, and it’s a grid framework. A few years ago, they decided to kind of share this same foundation across different products. So, the BBC is like BBC News, and there’s BBC Sport, and iPlayer, and all these, and in the past these were separate silos, completely separately built, not much interaction between the different products. And then a decision was made a few years ago to have some more uniformity across different products. So, Grandstand, as a CSS framework, pulls in GEL as its kind of base, so as its foundation, and then adds on utility classes and patterns, so objects and different structures on top of that. So, for example, links and then responsive image patterns and things like that. So, it provides a pretty lightweight but also flexible and extensible framework. That was created by the people up in Sport, so in Salford, Manchester, particularly Shaun Bent. Then the decision was, for this front page project and for other projects going forward, to use Grandstand within the News projects as well and to build on that. So, this will allow, going forward, to interchange so we can use components that Sport created, Sport can use components that we’ve created, and allow a much more flexible way of working without being completely siloed products.

Ethan:

I’d love to follow up on that a little bit and I wonder if you could maybe speak to the experience of maintaining a framework over time. I’m curious to hear how some of that cross-team collaboration might change some of the modules and patterns you’re designing and how you might manage that process.

Sareh:

I think the importance of communication really can’t be underestimated, whether that’s by GitHub PR comments. Or we started off with just commenting via GitHub, because it started off with most of the knowledge being up in Sport and us having very little knowledge about the system, and us kind of gradually learning more about how we can incorporate it and how we can use it and becoming a bit more comfortable with it, how to use it with modules and components. And then as things went on, just text format wasn’t necessarily working so well because we wouldn’t really be thinking ahead so much in terms of discussing how we can use things in the next month or the next release of Grandstand, things like that.

So, we started off kind of fortnightly meetings to catch up and decide what is necessary to be within Grandstand as a framework and what can be kept as Sport-specific or News-specific things that isn’t necessarily required to be in the shared structure. That’s kind of evolved a bit more recently, where the World Service team is in the process of building one of their World Service sites using Grandstand as well, and they have a different typography because it’s a non-Latin script. So, that team is now joining these discussions and talking about useful ways Grandstand could be extended for shared purposes.

Karen:

What are you most excited about these days? As you’re looking at the web or the future potential for the web, what do you think are the big opportunities, or what’s got you really excited?

Sareh:

That’s an interesting question, because I’m somebody who really likes keeping up on Twitter and on different Slack teams online and things. It does seem a bit overwhelming because there’s so many things, and I’m kind of like a, “Oh, this is so shiny!” kind of mentality in general. Especially going to, say, conferences or meet-ups and hearing about, I don’t know, things like web VR and all these things which seem really exciting. Perhaps not everybody will be using them in their everyday lives or on every single site, but they seem really exciting.

I guess in general I’d say a lot of the visibility of web accessibility seems interesting to me. I’m not sure how much of this is necessarily because I’m particularly interested in accessibility and I kind of inhabit those kind of hashtags and those circles a bit more. So, I don’t know how much of it is my own little bubble, my corner that I explore. But that interests me a lot.

And really just the awareness of how web users aren’t homogeneous—there’s such a variety, whether that is the bandwidth that you have, the mobile devices might be older or you might be on a really slow connection. So, that’s been a thing that’s existed for a long time, but maybe people I feel like—there’s been more of a spotlight that’s been shining on that, which I find exciting. Specifically to do with front-end web dev stuff, I’m really excited that CSS Grids are a thing and they’re on live browsers and things, or the latest browsers. That’s exciting and I’m following that closely and reading blog posts, and I’ll be excited to play around with that, particularly with a look of how we could introduce CSS Grid for projects in progressive enhancement so that there isn’t a drop-off in experience at all.

Ethan:

Well as somebody who shares your excitement about a number of those things, beautifully put. This has been a wonderful chat, but before we let you go, I’d love to hear if you happen to have any advice for our audience. If someone’s out there who is listening to this podcast or reading this transcript and maybe they’re a developer out there like yourself who’s just about to start a project, do you have any advice or anything they should be keeping in mind in their daily work?

Sareh:

I really enjoy exploring a bit online and then going around—so, maybe, say, Slack forums online, or finding people who are also interested in that kind of an idea, and chatting with them about it, getting a bit more of an idea of different angles to approach a project or approach a problem. And really, that kind of excitement that comes about with discussing it with somebody else is a brilliant kind of launch pad and can really motivate me, personally, to carry on with going ahead with the project and exploring things a bit more. So yeah, I’d say it’s never too early to chat with somebody else about things, even if it’s at a general idea stage. And do feel free, if you’re on Twitter or any online forum, to find like-minded people or people who find similar things interesting, and discuss and explore and work together if you can. And enjoy.

Karen:

Sareh, thank you. We have definitely enjoyed spending a little time with you this morning, and I’m very grateful that you would take some time out of your day to talk with us and our listeners about the work that you’re doing.

Sareh:

Thank you very much for inviting me. It’s been a pleasure talking with you both.

Ethan:

Thanks to everyone for listening to this episode of a responsive web design podcast. Thanks also to our sponsor, FreshBooks. Go to freshBooks.com/RWD and enter RESPONSIVE WEB DESIGN in the “How Did You Hear About Us?” section for a 30 day free trial.

If your company wants to go responsive but you need help getting started, Karen and I offer a two-day onsite workshop to help you make it happen. Visit responsivewebdesign.com/workshop to find out more and let us know your company is interested.

If you want even more from us, you can sign up for our newsletter, subscribe to this podcast, and read full transcripts of every podcast episode at responsivewebdesign.com.

Thanks for listening, and we’ll be back next week.