Episode Transcript

Karen:

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

Ethan:

And I’m your other host, Ethan Marcotte.

Karen:

And this week, we are genuinely thrilled, we are joined by Johannes Holmertz and Ulf Högberg to talk about Di.se. Welcome.

Ulf:

Thank you.

Johannes:

Thank you.

Ethan:

But before we dive in, a few words about our sponsor. I couldn’t be happier to have Gather Content back as a sponsor on the podcast. You see, Gather Content is a content collaboration platform. It helps teams plan, organize, and produce all their web content in one place. They provide structured templates and simple workflows to make collaboration and production easy without the shuffling around of Word documents and unnecessary emails. Centralizing the editorial process will make approval of content easy, so everyone knows what they’re responsible for and when they’re responsible for it. And what’s more, Gather Content has recently published a free online guide to Content Strategy for Website Projects, which they’ve written for all the people who want to make smarter, content-led decisions on their designs. So every responsive design, I believe, benefits from a content-first approach. But as Gather Content’s guide says, that doesn’t mean waiting until all the content is written. Instead, it means considering and thinking about content at every single stage of your project. And Gather Content’s guide can help you do just that. So whether you’re working in an agency on client websites or maybe you’re working on an in-house team, Gather Content’s guide should help you more effectively contribute to your digital projects. You can read it online for free at gathercontent.com/RWD, or check out Gather Content’s products at gathercontent.com.

Karen:

So perhaps you could just start us off by introducing yourselves, give us a little information about what your role is, and perhaps a little bit about what Di.se is. Johannes, do you want to go first?

Johannes:

Yeah, sure. I am the product owner for the current version of Di.se. We’ve been around since early 1994, we’re one of the first news websites in Sweden. We are now the biggest financial news website in Sweden, we have about a million unique visitors per week and around fifteen million page views.

Karen:

And Ulf, how about you?

Ulf:

Yeah, my name is Ulf Högberg, and I’m the head of design for Di.se, for all of our digital products, basically. I’ve been in the news business for twenty years or so—CNN, ITV, a bunch of companies here in Sweden as well. So, I’m responsible for all design and part of the UX process as well, for everything we do in our digital sphere here.

Karen:

Well, it’s a subject and a space that’s very interesting to me. So, maybe you could start out just by giving us a little bit of background on the decision to launch a responsive website. Was there any question or concern in the organization about using responsive as an approach given other platforms and other solutions for mobile devices?

Johannes:

It was a no-brainer to go responsive for us. The management was very clear that they also wanted a responsive site, so we were all very happy to start working with it. We also have a history of having separate sites—one desktop site, one mobile site, and one mobile app that has been with different offshore teams managing them, and it’s been a hassle to say the least. So, we were very glad to get one codebase and move forward with one local team.

As for getting the rest of the editors to sign on a responsive website, that has been more of a challenge because they were very used to having a fixed width, fixed ratios to work within, and now they have more space. But we’re getting there; it’s a work-in-progress.

Ethan:

Well, I think the current version of that work-in-progress is lovely. I’d love to follow up on Karen’s question and hear a little bit more about how you reconciled that old way of thinking about mobile versus desktop users as you moved into a responsive design. We hear from a lot of organizations that think that mobile users and desktop users have fundamentally different needs and they need different content depending on the device, whereas we talk to some other organizations and publishers who feel that effectively the kind of device doesn’t dictate what the user should access. Where did Di fall on that spectrum?

Ulf:

We’re kind of split there, because as far as news content goes, we want to do the same on every platform. But as far as services and market numbers, things like that, stocks and indexes, we’re trying out new ways to condense the material because it can be vast. So, we’re trying different things all the time.

The new app we’re working on right now is going to be targeted towards a mobile audience, so it’s not going to be as heavy with content, trying some ways for how you can see news on a mobile device. It could be both fast and slow so we can highlight the top stories for the day, but also it should be easy to scan the latest news. So, we’re not sure exactly where the audience is right now, so we’re trying out different things.

Karen:

Let me ask about how you sort of approach a project of this magnitude. How did you think about planning out the work or scoping how long it would take and maybe how much it would cost? Did you anticipate any problems along the way that you needed to plan around?

Johannes:

We started this project a little bit more than a year ago with workshops, workshops, workshops, trying to understand what our old site was and what it had for content, and also what content we wanted to bring to the new site. But we realized that it was a massive scope and we said we would deliver a start page, an article page, and we started working with an open beta site, started rolling out the new design and new responsive site slowly to more and more users. But we’re not finished, so we still have a lot of scope to go, I guess. We’re about halfway done.

Ethan:

Ulf, I’d love to hear a little bit from you about the design process for launching the new Di. Specifically as you move from a standalone device-specific experience to a more flexible layout, has that changed the way you think about design, or has that changed the way you approach your design process?

Ulf:

It has, and I have to say the biggest challenge has been the ads, because in our world we don’t have responsive ads. They should be here by now, but they’re not. A big thing for us to move over to a new platform was we’re going to go all IAB standards. We use them as a platform for different ad sizes and solutions, but those should be the launching pads so we can fill it with the standard sizes or plug in programmatic ads as well. So, that’s a big challenge. Our old desktop site had a lot of ads, and we’re kind of struggling with the new responsive site and filling those gaps with the same amount of ads or finding new solutions as far as page views. It’s a bit of a struggle, but we’re getting there and I’m pretty sure we’re going to be much better six months from now. So that’s the biggest hassle.

The other big scope is to bring the editorial team on board and being very clear on what kind of impact it’s going to have for them. I’m trying to get them on board to think in a responsive way. We’re not there yet. The site today looks pretty much like the old site as far as the layout goes and type of content.

Karen:

Let me follow up on that and just ask a little bit more about the challenges that you might have had in either getting the editorial team, the content team to think differently about what they’re publishing in a responsive context, or maybe even the content management system and other tools that journalists are working in.

Johannes:

Yeah, the old site used to have a content management system called Episerver, which was both back-end and front-end, it rendered the site as well. A part of this project has been to rethink and rework the whole architecture of the site—not just our site, but also our sister sites. We work closely with other newspapers in Sweden that use the same architecture that Episerver, or whatever CMS we have in the future will just be text input and then it will be stored in a central database, and then we’ll use APIs from sites and apps to actually get the content out, so hopefully it will be a faster and less tangled setup.

But the challenges for the editorial team has been very much of getting the headlines right, and getting the preambles right, and the blurbs, and also images. It’s been a lot of work.

Ulf:

I see it this way: we’re going out very rough. We didn’t have time to educate the editorial staff. So, we’re going to do the same thing as we did for the old desktop site, and while we’re out being very rough, they’re going to see the impact and they can act on that, pretty much. So since we launched, we have a lot of new ideas and they’ve started to work differently because it’s sharp, they kind of have to, and it’s much easier because we didn’t have the time to pre-plan and conduct the workshops we were supposed to do in a perfect world. So, it’s a work-in-progress.

Ethan:

As a work-in-progress, I’d love to hear a little bit about how you talked about the responsive design as a digital team as it was being worked on. Was it a very traditional comp-focused design methodology, or were you actually doing a little bit more prototyping? Yeah, I’d just love to hear a little bit more about the applications and tools you might be using to actually work on this responsive design.

Ulf:

We didn’t have a lot of time to do prototyping. We wished we could, but it was more old school kind of comp design on various platforms and devices, mockups in Photoshop and Sketch, so they could act upon that. But it was more to build out what we already had, because we weren’t ready to take a new scope on the editorial content right away. So, that kind of goes hand-in-hand with how we lay out the site and they can act upon that, and we can act upon their needs as well. So, it’s a give and take.

Karen:

Let me ask sort of broadly about all of the other stakeholders, interested parties within the organization that might have needed to contribute or weigh in on the work in progress. Did you change how you communicated with your stakeholders, like the editorial team or other people involved? Were they looking at prototypes or being asked to give feedback in a different way?

Johannes:

On day one of development, we set up a beta site, beta.di.se, so it was an open development project for everyone in the editorial and ads department, and sales, they could just go in and check out what we were doing and see the work-in-progress. But we also had demos and we also had workshops, and a part of our development team were from editorial and sales and ads. So, the stakeholders were quite involved in the progress and checked regularly on what we were doing.

Ethan:

One thing we hear from a lot of publishers is the challenge of testing a responsive design, specifically how they actually determine which devices to support, how to incorporate them into their QA process, or even how to use device labs as a design tool. Are these things that you had to wrestle with while you were working with Di’s redesign?

Johannes:

Yes, it was. Thankfully someone made the decision to not support IE6, IE7, IE8, and IE9, and to only support the latest versions of Chrome and Firefox, so that was a big help for the desktop experience. As for mobile, we have a big device lab with a lot of devices. But we’ve been fortunate because the developers work by mob programming, so there are a couple of programmers that sit around one screen and take turns writing the code, and the rest are working as both part of the problem-solving but also as testers. So, the quality of the code that comes out in production is actually quite high, so we have very few bugs. But we sit down once every second week and go through the site on a lot of devices and check for bugs and UI things that might have been broken. It’s also a work-in-progress.

Ethan:

That’s great. I guess the other side of that coin is how do you talk about performance, the speed of the new responsive design while you’re actually working on it so that you’re not just looking at the layout but also how quickly it’s available to users?

Johannes:

That is also an ongoing discussion. We started out saying that performance is key to our business, that we need to have the fastest site possible, and the developers are very aware of that. We also use all the technical tricks with content delivery networks, CDNs, and everything to speed up the user experience, and we also take a sprint once a month and work on performance issues.

Karen:

What about other data that you might be tracking or measuring? What sort of analytics or lens do you use to identify if the redesign is actually working?

Johannes:

We use the standard page views, unique visitors, visits per visitor, and also time on site, and then the editorial have another tool, like clicks on teasers to articles, like click-through rate that they’re looking at. So, looking at different things when it comes to success of the site.

Ethan:

Well Ulf, Johannes, this has been a fantastic chat. But before we let you go, I’d love to hear if you have any advice for our audience. Let’s say there’s someone who’s listening to this podcast who’s about to undertake their own responsive design, what’s one or two things you’ve learned working on the new Di that you’d like to share with them?

Ulf:

The main thing is, like I mentioned before, that are we going to view the mobile audience as separate or do they want the same thing on all devices or not? That for me, as a designer, how you lay out content, that’s been very key to me and I’d like to explore that a lot more. I think it’s a big benefit, but it’s also the biggest challenge to get the content in a perfect contextual way. So, go for it. There’s no drawbacks on that. But it’s going to take some time, especially for a big media company like ours.

Johannes:

I would like to add communication to that. Talk about what you’re doing, why you’re doing it to each and every person in the organization, because everyone will be a part of it, so it’s very good to have them on board as early as possible.

Karen:

Well Johannes, Ulf, thank you so much for taking some time out of your day to share this redesign case study with us. I think it’s a fascinating story and the site looks great, so thanks.

Ulf:

Our pleasure.

Johannes:

Thank you.

Ethan:

Thanks to everyone for listening to this episode of a Responsive Web Design podcast. And thanks also to our sponsor, GatherContent. Go to gathercontent.com and take control of your content production process today.

If your company wants to go responsive but you need a little help getting started, Karen and I offer a two-day onsite workshop to help you make your responsive design happen. Visit responsivewebdesign.com/workshop to drop us a line—we’d love to hear from you.

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

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