RWD Podcast Episode #27 : Andi Dysart

Justin Avery: Hey everyone, and welcome to another episode of Responsive Design Weekly Podcast. This is Episode 27. My name is Justin Avery. I am your host and the curator of Responsive Design Weekly Newsletter.

This week, our sponsor is Ghostlab. Ghostlab is a pretty cool little testing tool that you can use for your responsive site, so you’re testing across a variety of different sites. It’s synchronized browser testing for the web and the mobile is the strap line on their website itself. It’s produced by
a company called Vanamco, and this week our special guest is someone from Vanamco, Mr. Andi Dysart. Hello, Andi.

Andi Dysart: Hello, world.

Justin Avery: How are you?

Andi Dysart: Good, thanks. Not too bad tonight.

Justin Avery: Excellent. Whereabouts, whereabouts are you based?

Andi Dysart: I’m based in Zurich, Switzerland. It’s the German part. It’s in the northern part of Switzerland. It’s on the border to Germany. But I’m actually a Kiwi, so an Australasian, like you.

Justin Avery: I was going to say, it’s a very strange Switzerland-ish German accent you have going, there. How long have you been out of Kiwiland?

Andi Dysart: I’ve been hitting the, I’ve been on the road off and on pretty much since nineteen … So, eleven years. Twelve years, I think.

Justin Avery: Oh, wow. Happy thirtieth.

Andi Dysart: Yeah. I’ve got more than that, but yeah, been quite a while. In Switzerland seven years, eight years.

Justin Avery: Oh wow, that’s awesome. So how did you, at the moment you’re working for Vanamco.

Andi Dysart: Yeah.

Justin Avery: And they’re doing lots of different stuff. The Ghostlab is definitely one that I’d be keen to hear more about. But how did you kind of, like, what is your role there, and how did you fall into kind of working with the web?

Andi Dysart: Okay. So [00:02:00] I’ll start with the, how did I get into the web, because it’s actually quite a long story, right through till Ghostlab.

Yeah, so I’m actually an industrial designer. I studied industrial design, I worked in that industry for quite a few years developing [really cool 00:02:16] products in sports, sports and transport, like trains and stuff.

Justin Avery: Oh, wow.

Andi Dysart: And anyway–Yeah. It was quite intense stuff. It was really interesting stuff. But the only problem was, with this job, is everybody wanted to do this job because it’s so good, and there wasn’t that many jobs. I worked in some good companies, but I wasn’t that flexible,
so I decided to look around for something else that was a bit more flexible, and yeah. Yeah.

Justin Avery: So is that right as the web was sort of kicking off? Like, at what point-

Andi Dysart: No, no. That was, I’m actually quite a latecomer to the web. That was about five years ago? Yes. So not that long ago, actually. The, actually in the web, and yeah. In web live, that’s probably quite long, but yeah. And that’s, no, it’s, I’m quite a newbie if you say, if
five years is, yeah. I’m not an old-school guy.

But I did develop my first website in Dreamweaver, if that’s any cred. Street cred.

Justin Avery: Yeah, that’s, that’s definite–It depends with, was Dreamweaver owned by Macromedia or Adobe at the time?

Andi Dysart: Macromedia.

Justin Avery: Oh, that’s definite street cred on that one.

Andi Dysart: Yeah, because, yep.

Justin Avery: So were you, were you kind of building sites while you were, while you were studying at uni to become an industrial designer?

Andi Dysart: Yeah. More designing them than [inaudible 00:03:39] stuff. But actually coding them, I was never actually coding them. It’s not until I decided to get into web design I started, like, had to make a portfolio, so that’s, then I started coding. My start in coding.

It was actually quite a smooth transition from industrial design. I put out a ad in the local [00:04:00] online hipster website, and they, yeah. Then a couple of, a week later, I got a call from Florian, which is the owner of Vanamco, and yeah. It kicked off from there. It’s been, it’s been, yeah.
So that was … It’s pretty much the story how I got into web design.

Justin Avery: When you, when you were doing the design through Dreamweaver, because … So, Dreamweaver, for anyone that hasn’t used Dreamweaver before and is stuck with, like, the text editor and stuff. It used to kind of be, like, draw a box here and draw a box there
and insert an image here, right?

Andi Dysart: Mm-hmm.

Justin Avery: So is that, did that kind of make sense? Could you draw parallels between, like, industrial design with physical things, and what you were doing on the web?

Andi Dysart: Yeah that, I think they’re quite different things. I think between product design and digital design is, 2D design, means a large difference, a big gap between that. But there’s a lot of similar stuff, like corporate entity, usability, colors and forms, and people recognizing
symbols, and stuff like that. So that’s, that can be brought over.

But [actual 00:05:15] 3D … Yeah, the human emotion part is also quite, you can bring that over as well. Like, how to manipulate, I guess people when they come to your website. Get them to do what you want them to do. Get them to download stuff, or get them to scroll, or go … Like, get them to convert.
You can bring that into web development from industrial design.

And industrial design, it’s not only 3D products, it’s also touchscreen, like, we did a lot of interface design, with how to use a machine, or how to use a … A [eye surgical 00:05:55] machine. So we had to develop … We have to [inaudible 00:05:58] the interface for that, [00:06:00] as well. So
it [wasn’t yeah 00:06:01]

Justin Avery: Yeah, that’s really cool. Because I was, I was just thinking, then, when you came across to work on the web, or Vanamco, were there lessons you were able to bring from industrial design that digital designers or people from websites just, they didn’t, they
didn’t grasp at that stage?

Because I would think, because industrial design has been around for so long. I’m guessing since the Industrial Revolution, maybe? And yet the web is so young. Like we said, you’ve been in it for five years, you’ve been in there for a quarter of its life. Were there lessons you brought across which
people were like, holy shit, I never thought of that?

Andi Dysart: Um … Yeah. I can only, I’ve only worked, really, for one company, Vanamco. So I can, yeah, I can talk for what I’ve, I guess from what I’ve learned there. But yeah, I think that for me … Industrial designers need to … I guess that the main thing is how to work with
the people that actually use the product at the end of it.

I think industrial designers, they get taught that actually the people that use it are the people that judge what a product is, or how much it’s value, or what it feels like when you touch it. Or what response it gives you in, you do something to it, or it does something for you. I think that’s, that’s
to me the, the thing that I thought that the web lacks, when I came in, and what I thought I could bring into it. A bit of, yeah. A bit of consumerism, you could say that, as well.

Justin Avery: Yeah.

Andi Dysart: I guess, it’s cruel to say, but that’s what … That’s what a lot of it is about, actually. Wanting people to want your application, your app or your, your website. Give them that personal touch.

Justin Avery: So I suppose a lot of it is around [00:08:00] the, and I’ve seen it quite a bit is, UX and UI have been … Like, it just used to be bundled into a project, or bundled into a role that people were doing. And now there are these UI and UX developers, or designers.
But if you were to suffix it with … They’re a role unto itself. Because … Do you think it’s, the web has matured to that point now, where that is a requirement? Is that kind of what you are doing within the company itself?

Andi Dysart: Mm-hmm. Yeah, I think so. What I’m doing in the company at the moment is a bit of, I was [initially in front-end development 00:08:41]  I deal with the front-end stuff … And things like that, developing the products, and building the whole system up.

We’ve got two, main, two products. The Ghostlab, and Devicelab. Devicelab was the whole, the idea is that development, the tooling, the production, the shipping and the [inaudible 00:09:12] so pretty much had my finger in every pie, there. Devicelab now is pretty much the front end of marketing. The
team … [inaudible 00:09:22] Mathias [inaudible 00:09:25] into Florian, they pretty much do all the back-end stuff on that. They’re the geniuses that actually make it work. Just put a, I just put a bit of lipstick on it.

But yeah, that’s my role there at Vanamco. It’s pretty much front-end development, and the marketing side of it, I guess. Developing new products and new ideas. Looking to develop new products and new ideas for the company.

Justin Avery: That’s awesome. I won’t ask you what’s, what new ideas that you’ve got up there, because I’m sure it’s under a veil of secrecy at the moment. But when [00:10:00] you were, like, as a front-end developer, then, I want to talk a bit more about, like, the difference
…

Actually, maybe, can you talk our listeners through what, what actually is Ghostlab, and what is Devicelab? Start, kick off with Ghostlab.

Andi Dysart: Okay, Ghostlab. Ghostlab is an app for Mac and Windows that synchronizes events in the browser. So when you’re developing websites, Ghostlab takes care of the legwork when it comes to refreshing the browser, and taking care of the server. It has a server built in. It also
synchronizes all events.

What you can do with Ghostlab is you can pretty much type a URL from one browser to another, so you can open your website up in Chrome, Firefox, or Internet explorer. Then you can develop in one browser, and what you see in one browser, you see in all other browsers. What that does is just ease the
developer’s life when it comes to developing a website, yeah.

Justin Avery: But it’s a bit more as well, with … Because you could have live reload, right? Loaded into the, to, like, there’s a footer script which would just then refresh the page as you hit save.

Andi Dysart: Mm-hmm.

Justin Avery: It’s a little bit more than that, though, right? It’s not just refreshing the page after each save.

Andi Dysart: No, no. Refreshing’s quite simple to achieve. It does quite a few things that … It looks for your events, so it replicates clicks, it replicates scrolling. When you fill out a form on one browser, it will do the same in every other browser that’s connected to Ghostlab.
That’s the base functionality.

For example, logins and stuff like this, it also achieves that quite well, as well. But basically, that’s what it does, yeah. It replicates events [00:12:00] throughout all your connected devices and browsers. That’s mobile, or if it’s a web, wordpress website, a live wordpress website, or a local
environment, yeah.

Justin Avery: And so when you, do you need to have a master thing that you’re working from? So if I’m working from my laptop, and I connect it, what have I got around me. I’ve got a Blackberry and I’ve got an iPad and an iPhone. Do I, is the laptop the master which then
controls all of them?

Andi Dysart: They can, there’s a function called presentation mode which, you can choose who’s the master or slave. So like, if you’re, Andy Clarke gave us the idea. He was presenting for … He was presenting to clients here in Switzerland, Geneva. And he said, a good idea would be
if I can present to my clients and they could actually hold the device in their hands, and I could actually show them the workflow and how people log in, and navigate the site, but I had the control of the, the page. So if they touch the screen, it wouldn’t be, show up on other devices.

So yeah, you can actually choose, if you want, other devices, or your Blackberry to control an Android or your master computer to turn this on and off.

Justin Avery: That’s actually really cool.

Andi Dysart: Mm-hmm. It’s good for presentations. People actually use it quite a bit. It’s quite hidden, at the moment, this functionality. Yeah, on the surface it seems quite simple, Ghostlab, what it does. But to get it actually working, and people don’t actually notice when it works
and doesn’t work. It’s so … There’s, we’ve solved so many problems. Like, especially with logins and tunnels and VPNs and stuff like this. It just works, that’s the thing, because we’ve solved a lot of problems with it.

Justin Avery: So you kind of get it, there’s no add-ons to it, like, oh, if you want login capability, if you want to [beat 00:13:55] the VPN, you pay extra for this.

Andi Dysart: Yeah, no, no. Just works. [00:14:00] That’s the thing, it does cost, too. But there’s a lot of, we do support a lot, too. We spend a lot of time with support. We get our clients moving, because these guys are professional testers, you know. So Mathias is always on the ball
there, fixing the problems or logins … A lot of the cases it could be we debug for them, or so we find a bug on their side, maybe. And we say, oh this is the reason, because Java [inaudible 00:14:31]

Yeah, yeah. But the networking is difficult anyway. Yeah, there’s a lot of support involved. Ghostlab as well, it’s just not there. People contact us for a variety of things, yeah.

Justin Avery: Because I saw, I’ve seen in the past something called BrowserSync.

Andi Dysart: Mm-hmm, yep.

Justin Avery: I think I’ve, I did a screencast about that once upon a time. There were some issues around that, so I don’t think it … It had the scrolling, so if I scrolled on one it scrolled on the other. I think it had the touch events. But I don’t know if it actually
had the form filling, or it definitely didn’t have the logging in functionality. I had to log in on each individual device.

Andi Dysart: Really? Yeah.

Justin Avery: Yeah.

Andi Dysart: I’m not sure, I think it’s quite active, the project BrowserSync … Yeah, I think that it does fill out forms. I haven’t had a look at it for a while now, but yeah. It got some [inaudible 00:15:27] motion on GitHub.

Justin Avery: Yeah, I’ll have to, I have to go revisit it and do another run-through. And one of Ghostlab, of course.

Andi Dysart: Yeah, it’s even got a ghost mode. So has, like … But yeah, we, it came out, [inaudible 00:15:42] came out six months after … What, eight months after Ghostlab, which is quite late, I thought. I thought Ghostlab would have been, you know, I think yeah, somebody would
have tried to replicate Ghostlab much earlier than that. The URL Ghostlab.com got snapped up within the first day. [00:16:00]

Justin Avery: Oh, no way.

Andi Dysart: Yeah.

Justin Avery: So who launched it without getting the URL?

Andi Dysart: No, that’s … Yeah, that’s the idea. We could have, but it wasn’t … We’ve got a different system. We were going to run the product through our corporate URL. It’s much easier to manage domain names and stuff like this. Yeah. We’ve got a different idea about this. Like
Docs.Google.com or Maps.Google.com, things like this.

Justin Avery: Yeah, good idea.

Andi Dysart: Yeah, it’s better to … Then we know that we have the URL every time.

Justin Avery: Yeah, no, that’s a good point.

Andi Dysart: [Matilda 00:16:34] does that as well, so.

Justin Avery: The, I have … I’m trying to find where I can … I’ve got … I’m doing a bad job of explaining this. I’m trying to send you a message on, on Skype, and I can’t find how to send a message while we’re talking.

Andi Dysart: [inaudible 00:16:52]

Justin Avery: I’ll find it, though.

Andi Dysart: Oh, there it is. Yeah, Skype is, the UX on Skype’s terrible.

Justin Avery: Are you, shoot me a quick message. This is terrible listening to, I apologize to anyone that’s listening. There we go. Hello … There we go. So I, I Googled for Ghostlab. There’s actually, have you ever watched the television show?

Andi Dysart: No, I’ve never watched the television show.

Justin Avery: It looks awful.

Andi Dysart: [inaudible 00:17:17]

Justin Avery: I’ll put this up in the show notes. When I Googled it, I’m like, oh man. Andi Dysart is massive. He’s this huge, burly guy with a goatee and looking real mean with Ghostlab in the background. So I’m actually going to download one of those episodes and check
it out. But the picture will be in the show notes of that, and it’s not Andi. I’ll put a picture of you up there, as well.

Andi Dysart: Yes, [inaudible 00:17:40]

Justin Avery: So that’s, you could play for New Zealand if you were that size.

Andi Dysart: Yeah, I could.

Justin Avery: If you were out in the front row, it would be, it would be outstanding.

Andi Dysart: [Beat the Americans 00:17:49] yeah.

Justin Avery: Not that you couldn’t make the side now, it’s just … You’d be in the front row.

So that’s, that’s Ghostlab. So Devicelab is something different, as well? [00:18:00]

Andi Dysart: Yeah. So, yeah. Actually, it was about, started at the same time. We started developing both of them at the same time. They were both out of my necessities as a front-end developer. Like, I’m quite chaotic and … Yeah.

The idea for Devicelab came, I had seven, eight devices on my desktop, and I was testing them. They were always turning off, they were always sleeping. They were always out of batteries, or if I wanted to look at one, I had to pick one up and code with my one hand. [inaudible 00:18:37] Yeah, I couldn’t
type with my hand. So I thought there must be a better way. Then, and everyone in the office needed them, as well, so they’re stolen or they’re … Someone’s wife had them for that week or something, because they smashed the screen. I don’t know.

Being an industrial designer, I thought, okay, I can fix this. It … Yeah. We started developing the, Florian and I started developing the Devicelab, not knowing, really, how it was going to work, or what’s going to happen, or if it’s going to be successful or not. And yeah, that took us quite a while.
Took us eight months, nine months to get it to production.

Justin Avery: Wow.

Andi Dysart: Which is, in product terms, it’s quite quick.

Justin Avery: Yeah. In physical, like industrial products terms.

Andi Dysart: Yeah, industrial products when you’re producing, yeah, it’s pretty quick. But it felt like a long time. Because yeah, we had to deal with every aspect of it. From … Like, digital products you can just ship it, you know? You can, oh, there’s a bug? Update it. Push it.
You can see it in the browser, but yeah. Those kind of decisions for toolings, tooling and things like this is, yeah. You’re investing money into it. You do it once, you got to do it properly.

Yeah, so what I, I designed it, tested it, did the C-A-D, the CAD. Then [solid works 00:19:54] built it, 3D, and we did quite a few prototypes, as well. [00:20:00] Got it working. The hardest thing was to future proof it, I guess. Like yeah, there’s so many different devices coming out all the time,
different size and stuff. You have to think of a way to actually future-proof it, so it doesn’t get stagnant within a year. There was the Velcro part, we need to sew down Velcro for that, which …

Yeah, people don’t really like putting Velcro on the back of the phones, which we understand. But they are, [it is 00:20:25] a professional device.

Justin Avery: They’re test phones, right?

Andi Dysart: Yeah, exactly. Exactly, yeah. It’s a personal … yeah.

Justin Avery: And put, put a cover on it.

Andi Dysart: Yeah. Exactly, yeah. And it’s the safest way. If we did anything else, then people would be sending us bills for their … They can’t, anyway. But we’d be getting complaints for that.

But it’s incredible. It’s actually quite a, successful so far. Agencies really lap it up. They order the agency package, which is three Device Labs, and five license to Ghostlab. They work quite well together, as well.

Justin Avery: Oh, great.

Andi Dysart: Those two products. Yeah, the agencies really get into those Device Labs. Because yeah, it’s one of the only, I guess … It’s a geek product, in 3D.

Justin Avery: Yeah, yeah. I’m looking at a couple of pictures on the site itself, here. There’s an example of three Device Labs. So you picture like, a … Well, basically, it’s a thing which holds your phone, with Velcro.

Andi Dysart: Mm-hmm. It’s pretty simple.

Justin Avery: But the simple ones are often the best. It’s solving good problems. So what’s this? This is, one of them’s holding six phones, two by three. Another a tablet and two phones lengthways, and then a, three phones at the top, a giant Galaxy gigantor Note next
to an iPad, and it’s almost as big as the iPad. So I don’t know if that’s a tablet. It’s a phablet, I suppose.

Andi Dysart: Phablet.

Justin Avery: But they’re, they’re [00:22:00] actually, that’s really cool. That is really cool.

With … Do you ever offer any … Because I’ve asked you this before. Ever offer any advice around, so if I bought a couple of Device Labs off you for the agency I work at, so just say I get the agency pack. Have you ever thought of supplying second-hand phones? Or do you recommend certain devices
that people should be testing on?

Andi Dysart: Yeah, we get this, we do get this question often. Not that often, because there’s some good blog posts out there, about what, which devices to test on.

I guess the best place to start is … Well, our rule of thumb is just get the devices that cover most of the fields. Because no agency has enough money to spend on, or, yeah. The budgets for these devices are quite expensive. They’re quite, they are quite expensive. But if you get one from each operating
system, and a few versions, then it should cover it. Like the Apple phone, the old ones with the latest one. And an Android four and above, and then Blackberry, and …

Yeah, we have quite a few in the office, so it’s easy. But we’ve got [Mozilla 00:23:19] phones, the developer phones, and also tablets, there’s one or two tablets. So an iPad and an Android tablet of some sort.

But it is a difficult question, because it kind of … It’s nice to have a variety. Then, when you need to, when a client … Most of the time the problem comes when a client says, okay, it doesn’t work on my crappy Android, you know. What’s the problem? It doesn’t work on my phone. Or my clients have
mostly Blackberries, or something. So then it’s worth it just to go and buy a dead phone for that job, if it’s a big job, or …

Often, we also refer [00:24:00] the clients to Open Device Labs around the area, around their area. They can always go there and use those phones, if they have them in stock.

Justin Avery: They’re really cool, the Open Device Lab stuff. Are you in touch with many open Device Labs? Because I know that the, so this is a bit weird. But Device Lab, your product, as in the stand, went to an Open Device Lab, the OD … I think it’s ODL.org.

Andi Dysart: Yeah, ODL.

Justin Avery: Yeah, ODL, go and check that out and it has a map of ones near you.

Andi Dysart: OpenDeviceLab.com.

Justin Avery: Oh, yeah? Is that it? It’s not ODL.org? It’s OpenDeviceLab.com.

Andi Dysart: This, too, is Lab Up, I think. Yeah, LabUp.org. I’m just [inaudible 00:24:50]

Justin Avery: Yeah, you’re right. And OpenDeviceLab.com.

Andi Dysart: Yeah, and OpenDeviceLab.com. But yeah, OpenDeviceLab.com is the place where you can find devices in your area.

Justin Avery: Yeah. That’s typical … So I know, Aaron Gustafson got a device, a Device Lab the product off you guys at the [on teller ium 00:25:18] when we [inaudible 00:25:18]

Andi Dysart: Yeah, yeah, that’s right.

Justin Avery: Which is, which is lovely. So I know he was super stoked about getting it, getting that back, and setting it up in their device lab.

Andi Dysart: There was two we gave away. There was, when was that? That was in summer.

Justin Avery: That was, that was in May. It was-

Andi Dysart: Mm-hmm. That’s an awesome conference there, it’s amazing.

Justin Avery: It was fantastic. I was very lucky to be able to go, because I was getting married a week later-

Andi Dysart: Yeah, that’s right.

Justin Avery: And I wasn’t entirely sure I was going to be allowed back into the country for the wedding. But it all worked out well. We had visa issues, it was fine.

Andi Dysart: Yeah, I know, I know that’s … Issues.

Justin Avery: They’re terrible. So back on the, for the Ghostlab and stuff. [00:26:00] When … What was the catalyst which sort of landed when you went … No, we need something like this. This is going to, this will be a good business.

Andi Dysart: Mm-hmm. Yeah, it actually didn’t start off as a business idea. I was, before I was using Adobe Shadow. It was like the, it was actually the first product to have this kind of system, where you could put a website on the device. I was actually using this, there was a better,
I think, Adobe Shadow was the better version.

Justin Avery: It’s Edge Inspect, now?

Andi Dysart: Yeah, now it’s Edge Inspect, yeah. It’s part of the Adobe Cloud package, yeah. Or it’s something, it’s twelve thirty in francs, dollars or pounds a month, or something.

Yeah, that’s, I was using that. I was complaining. I just think, oh, I’m too lazy to scroll on every device and fix the bug in this footer. I had a real bad bug in the footer of this website. And every reload I had to scroll with my finger right down to the bottom.

I was complaining about this for a couple days, and I think Florian, my boss, he got sick of me, listening to me complain about it. And now, he’s a hacker. He’s amazing, he’s really talented. He just loves these kind of questions, and so he … Unbeknown to me, he just started hacking away at this,
at a solution for that. And yeah, and then Ghostlab was born.

Then yeah, we had to, we saw the movement online. This is right at the time when responsive design was … Coming of age, I guess. You know, everyone was talking about it, it was the new coolest thing on the block, and we’ve already had this product, like, we already had this thing, really, like, and
it was actually perfect timing.

We put a skin on it, made it work really well. Extremely well. And put it on the market. Yeah, it was … Yeah. So there was two products on the market, then. [00:28:00] it was the Edge Inspect and Ghostlab.

Justin Avery: Nice.

Andi Dysart: Oh, yeah. Mm-hmm. You know, it did well. Yeah. That was the catalyst. The catalyst was me being annoying. That as … No, that little bug in the footer was the catalyst.

Justin Avery: The … The recent topics that I’ve been speaking to guests on the podcasts about have been about sort of advanced responsive design techniques. And a lot of the feedback from them have been like, just get the basics right, and get that sorted, and then
start, like, build progressively, and stuff.

Now, as a front-end developer, and someone who’s been frustrated with testing responsive designs before, and you’ve obviously been building them, because these sites are lovely, as well, the product sites that you’ve done.

What are the kind of, things that you’ve found sort of frustrating or enjoyed with responsive design? How have you stepped it up over time?

Andi Dysart: Enjoyed, I guess the mass adoption of it, like how people just take it and just run with it. What I found at the start, everybody was complaining oh, it’s so hard, and there’s so many questions, especially with the responsive images and stuff. But it’s quite nice that everyone
just got on with it, and did solutions and just by default started using responsive design as their base, or mobile first. That’s the cool thing about it.

What was the other question? Was [inaudible 00:29:37]

Justin Avery: Well, like … What are the kind of things that you’re finding troublesome at the moment? Or that you’re beginning to introduce into the builds that you’re going? Like, are you touching on-

Andi Dysart: Yeah, Flexbox.

Justin Avery: Flexbox?

Andi Dysart: Yeah, yeah. So yeah, I’m developing at the moment the new Ghostlab. And [00:30:00] we build this in HTML5, and a lot of other technologies. But yeah, we’re doing the front end in HTML5, so we can deploy it in Windows, as well. We just put a wrapper around it, and then deploy
it within … The wrapper’s actually online on GitHub repoed for Ghostlab. So if you want to build it, your own, it’s on that repo.

It’s a wrapper for Windows or Mac, [Depo 00:30:26] I think it’s called. Anyway, yeah. Some develop-

Justin Avery: Because, just to, just delve into that a little bit more. Because Ghostlab itself isn’t like, something that runs out of Terminal or in the browser, right? It’s an actual app you download from the App Store, or it’s an executable, right? But it’s still,
it’s built in HTML.

Andi Dysart: Exactly, yep. See, I’m the … I don’t know a hell of a lot about it, like, the how it, like, technical side of it. I’ve got the team, it’s doing that. But yeah, pretty much. It’s built in HTML. It’s just simply, extremely intelligent app, website, built around a wrapper
that communicates with the operating system. Although, if it’s Windows, or if it’s Mac. Because with a browser, you can’t do, yeah. You can’t communicate through every action with a browser. You can’t have the right to do a lot of things, actually, you need.

Especially with networking, as well. It can be quite technical, it’s going to be quite, with firewalls and permissions, and stuff.

Justin Avery: So what you’ve done is built a wrapper to allow you to …

Andi Dysart: Mm-hmm. Yep. It’s a custom wrapper, and there’s other wrappers out there. Zephyros is what, it’s called Zephyros, the wrapper. It’s a multi-platform HTML5 wrapper. It’s on GitHub.com/VNMC. Short for Vanamco. VNMC.

Yeah, Zephyros is pretty much a wrapper that we put Ghostlab into. From there you can [00:32:00] run your own apps across multiple platforms. Because we have Ghostlab on our own build, we have it on Windows, and we have it also on App Store. And App Store is quite, you know, they have their own rules
about what can be and can’t be downloaded from the store, as well. This wrapper that we built, that’s for all these platforms.

Justin Avery: That’s really cool. Are you building any other apps that you use to wrap around this?

Andi Dysart: At the moment, not. No. At the moment we haven’t. We’re building other apps and stuff like this, but we haven’t used this-

Justin Avery: But none that you’re using.

Andi Dysart: Yeah. [inaudible 00:32:38]

Justin Avery: Out of interest, then, like the way this wrapper works, because I’d forgotten we’d talk about this. I think it’d be on [teller 00:32:45] as well. But the way the wrapper works, because it’s got HTML in it, but you’re not running it out of a browser, right?
You’re running it out of an application window. Does it, can you make it responsive? Like, can you put CSS, I imagine you can put CSS.

So as you resized, or if you allow people to resize the app, you could actually respond to that, and have a responsive app inside this wrapper that is running on HTML and CSS.

Andi Dysart: Yep, pretty much, yeah. And so it’s pretty much a website. Like, what you can do in a website, you can do inside this app. This wrapper.

Justin Avery: But more as well, right? Because you can get into the OS.

Andi Dysart: Yeah, much more. Mm-hmm. Much, much more. But essentially, yes. Essentially the app’s a responsive website inside a … And also, yeah, it’s, you’ve got to cross the line. You’ve got to decide, okay. How much, how webby am I going to go, and how appy should I go? Because
people expect different things from different platforms, you know.

So we’ve got to decide, okay, do we show, is it a cursor pointer, or do we show a finger on a link or something like this? You don’t in an app. All those things have to be considered. Or how big is the viewport, and things like that. It’s interesting, it’s very, very interesting.

Justin Avery: So have you made those decisions across the [00:34:00] different platforms? Have you got it slightly different for Windows and slightly different for Mac?

Andi Dysart: No. No, that’s the same. Same thing.

Justin Avery: Good. Good work.

Andi Dysart: Also, like, we’ve, coming up … Also we’re coming up with a new design. We’ve worked with a company in Zurich, awesome, awesome company. Ala, that is, A-L-A-dot-C-H. CH is the top-level domain name for Switzerland. They’re doing our icons and interface design. So yeah,
it’s pretty cool. It’s coming up.

They designed it, and their way of thinking about how things should be displayed, and how, when stuff should be displayed, and how things move when you click something. How they, what happens to this object? So they’ve been working on that. And yeah, and I’ve been implementing it, and it’s been …
Yeah.

Justin Avery: So, speaking of implementing.

Andi Dysart: Well, the front end.

Justin Avery: Yeah, yes. We were touching on, like, the testing of things, and building things responsively, and stuff. Did you, did you have this huge weight on your shoulders when they came to building a responsive site about a responsive testing tool? That it couldn’t
fail in any browser or device ever, because you have this tool, and you’re trying to sell it?

Andi Dysart: Actually, no. Because I know that there’s so many different, [inaudible 00:35:24] there’s so many different screen sizes. If I start with that, then I’m going to go crazy. It’s not possible. But what I did want to do is make sure everybody got the data they needed to do
[in the kit 00:35:35] you know. If they wanted to know something they knew it. It just got downgraded, the experience, pretty much.

But funny that you ask me that, because I found a bug on our website, on the Ghostlab website. I left it there because I wanted to see if anyone would pick it up, you know? And I left it there for, I think it was a month and a half, two months. It was a, it was a Facebook widget, you know? It was,
it was blowing out the side, and … [00:36:00] I ripped that out straightaway, anyways.

Yeah, I left it in there just to see what, somebody would say something. Or it’s to see, you know, if people are actually testing the sites, or looking at the code, or … You know, if they’re using Ghostlab to browse. But yeah, no one said anything. So I guess they had their own problems. Their own
bugs. Pretty cheeky, I know.

Justin Avery: Just, just download and get on with it.

Andi Dysart: Yeah, yeah. Which is good, they should do that. That’s what the …

Justin Avery: So is there anything that you’re looking forward to at the moment, on the responsive design horizon? With, we’ve almost solved, well, we’ve solved images I think.

Andi Dysart: Yeah.

Justin Avery: But then there are problems that you’re running into. You said you’re using Flexbox more, and is that for … Like, the large macro layout and columns, and the grids? Or is that more for, like, specific, widget-type things?

Andi Dysart: That’s for the whole grid. Yeah, that’s pretty much, yeah. The main layout, and also the smaller components, as well. But I [inaudible 00:37:05] said to you, we don’t have to use Flexbox for everything, but it is … Once you got a handle of Flexbox, it’s amazing. Oh, it’s
such a dream.

Justin Avery: It’s like going back to tables.

Andi Dysart: Yeah, it is. Yeah, it’s kind of, kind of a bit. But it’s … Nice, flexible tables. But I hate tables. I do. There’s not one table in Ghostlab. There’s on in, just in the settings, in the code. There’s one table. The rest are, yeah. I’m not a table fan at all.

But yeah, the future of responsive design. Yeah, I think we’ve passed this, it’s grown up a bit. I think it’s, it’s, get quite accepted, I think. What’s really cool is how it’s getting mainstream adoption, which it has already. But people actually, like the marketers and the SEO people are actually
realizing now how valuable it is.

I actually wrote a post last week, we put it on [00:38:00] NickSEO.com about responsive design and SEO. Just Google it. We wrote a post about that and how the marriage between responsive design and these other areas of the web are coming together quite nicely, and becoming a nice big flexible family,
I don’t know.

Justin Avery: That’s really cool. Is it Nick SEO, you said?

Andi Dysart: Yeah, NickSEO.com. And I guess it’s the latest post, [inaudible 00:38:26]

Justin Avery: Yeah, it’s SEONick.net/responsive-design-[SEO 00:38:32]

Andi Dysart: Is it? Okay, sorry. Sorry, Nick. [inaudible 00:38:33]

Justin Avery: It’s really cool. I’ll, I’ll actually include that in this week’s newsletter, you don’t mind. Thank you for adding an extra link for me.

Andi Dysart: Yeah. It’s … Yeah, Nick is, he’s got quite a nice site there, quite a, going to the roots of SEO. It’s a, what is it? SEONick.net/responsive-design-SEO.

Justin Avery: Yeah. Yeah, we’ll chuck that up there. So I’ll have a look, and then I’ll run that through for this week’s, this week’s newsletter, as well.

So I’ve got an, like, one last kind of question for you, which is a question … And I’ll ask you, once I ask you this, and you can answer it. I’ll ask you to come up with a question for next week’s guest.

So each week, the guests ask a question of the one afterwards. So the question from you came from Stu Robson. It was a few weeks ago when we were in Cardiff. He was, he was saying, if Ethan Marcotte didn’t come up with the three tenets … Or, he came up with the three tenets of responsive design.
So flexible grids, flexible images, and media queries, to resize things at different viewports.

If he didn’t come up with that, would we have seen a [surgence 00:39:54] of more m-dot sites, and possibly t-dot sites, [00:40:00] or would someone else have connected the dots?

Andi Dysart: We would have seen a big, yeah. I think … Yeah. Probably would have taken a bit longer to get where we are now. Maybe a year or so. But I think this is a natural progression. Yeah, I think people realized when he coined the term, and everyone started using responsive
design, then I think it was just natural. I don’t think it was …

I think, maybe it would have been delayed, sure. And we would have seen more m-dots, websites and stuff like that. But … Yeah, I think he did, Ethan did some good work there by getting it out to the people so quickly as well, also. So thoroughly.

Justin Avery: Yeah, he did well.

Andi Dysart: He’s still going hard, yeah. He’s still doing it.

Justin Avery: Yeah, they’ve actually released a version two of the book. A second edition, which is pretty cool. And I think we, he spoke at the [inaudible 00:41:01] right? As well. When we were there.

Andi Dysart: Yeah, he did, yep. That’s cool.

Justin Avery: Yeah, that was, yeah. That was super cool. That was really cool. Yeah, it was very cool.

Andi Dysart: But yeah, he’s always got some good to day, yeah. Definitely follow him. Follow him if you’re not, already. Who isn’t actually.

Justin Avery: It’s @beep, if you haven’t already. If you’re one of the-

Andi Dysart: Yeah, and it’s [inaudible 00:41:18]

Justin Avery: Seventeen … If you’re listening to this podcast, I’m going to put it out there that if you’re not following @RWD, which is his Twitter handle as well, follow @beep for just a plethora of GIFs, really.

Andi Dysart: It’s awesome.

Justin Avery: He speaks in GIFs. It is. It is fantastic, it is really cool.

Andi Dysart: And the RWD, they’ve got, he’s got quite a few followers in that, too, haven’t they? Eighty K, or something.

Justin Avery: Yeah. I thought, yeah. He’s, yeah. Very a lot.

Andi Dysart: Boom. Hit the roof.

Justin Avery: Yeah. I … You know, he does, he does very well. So do you have a question for our next … Podcast?

Andi Dysart: Yeah. I do. It’s not a very serious one. But I’m not a very serious kind of [00:42:00] guy, but yeah.

Justin Avery: Me too.

Andi Dysart: I do, I do a lot of … With this, I do a lot of marketing. And yeah, and I, I sit on my, sometimes I’m sitting in my desk, and I see, I’m on Facebook, and my colleagues come over and they look at me, like, yeah, you’re on Facebook. And it’s like, yeah, but it’s for work.
It’s actually for work, you know? I’m actually, like posting something, caught, like, trying to … Yeah, or Twitter or something.

My question to the next interviewee, what’s the best site to waste time on? Yeah, what’s the best site to waste time on, but still look like you’re actually working? If it’s … I don’t know. If it’s searching through code on GitHub, I don’t know. I don’t know. Whatever that question means, but yeah.

Justin Avery: That’s, that’s quality. And I think, if anyone listens to this edition, they’re definitely going to be tuning into the end of the next one to go, yeah actually, seriously, what is that best site? That’s awesome.

Andi, we’re running out of time now, so thank you very much for making some time. It’s the evening, for those of you that are unaware. And I think you’re even an hour ahead of me as well, so it’s even later for you.

Andi Dysart: Yes.

Justin Avery: So thank you for making some time, sharing your knowledge and your background, and how Ghostlab has come about. And … And everything that you’ve shared so far. Before we go, though, how do people get in touch with you, or follow you, or look at these amazing
things that you’ve been talking about?

Andi Dysart: Yeah. So, my Twitter handle is GitMesh. G-I-T-M-A-S-H. My personal website is Andi.io. Andi with an I. The Germans don’t know, the Germans don’t put a Y, they like to put I. So I did, yeah, I got used to it.

And yeah, Vanamco. Vanamco, on our website, you see the products and everything that we’re doing. We’ve got a blog too, which we’re updating all the time, which is pretty cool stuff. The guys at work, [00:44:00] they’re real, real good, proper nerds. Good nerds. They like to do cool posts, and stuff.
So we’re updating the blog all the time. Yeah, check it out, and yeah.

Justin Avery: Awesome. Andi, thank you again for your time.

Andi Dysart: Thank you.

Justin Avery: I’ll put you, as well, if in the next couple of weeks, maybe after Christmas. If we can maybe do a, we’ll run a screencast perhaps of how Ghostlab is, how quickly we can set up Ghostlab and get going and get testing, as well, if you’re up for that?

Andi Dysart: Definitely, definitely.

Justin Avery: Awesome. So all those links and stuff will be in the show notes of the show. Andi, thank you again for your time. It’s been absolutely marvelous. Thank you, all the listeners, for tuning in, downloading, or subscribing on the podcast, podcast listener of
your choice, as well. If you want to learn more about responsive design, jump onto Responsive Design Weekly.com and subscribe to our weekly updates, or go and hit us up on ResponsiveDesign.is and check out some of the stuff there.

Once again, thank you very much Andi for tuning in, and thank you listeners, and we will see you next week. Cheers, everyone.