RWD Podcast Episode #39

Responsive Web Design Podcast Feed

PODCAST SPONSOR

A huge thanks to MobX for their support of this weeks podcast.

MOBX is a Mobile User Experience Conference. It’s running in Berlin this year on the
11th of September, 2015 and you can head over to 2015.MOBXcon.com. It’s all about mobile interactions, designing for small screens, designing for smart devices and dumb phones as well. It’s mainly targeted around user experience and user interface design but anyone would find it useful to attend.

Transcript

Hey everyone, and welcome to another edition of Responsive Design Weekly podcast. My name is Justin Avery, and I am your host and curator of the Responsive Design Weekly newsletter, a weekly newsletter all about Responsive Design, funnily enough. This is episode 39 and I had a late cancellation from
a very, very special guest who will now appear on episode 40. It was an unfortunate cancellation, but we’ll all sort it out for next week.

So next week we’ve got a really cool person coming on … At least I hope it’s going to
be next week, anyway. That’s when we’ve moved it to, but it’s actually Mr. Peter Paul Koch, which is really exciting because he has written some exciting stuff this week which I really wanted to have a bit of a chat to him about.

So for those of you out there that have a question for PPK, for those of you that haven’t
heard of Peter Paul Koch I’m sure you would have come across some of his work. He writes on Quirk’s blog and he writes all about browsers and what’s happening and he keeps kind of all the browser vendors in check. He writes … I think he’s kind of sponsored by all the browsers, but just does a ton of
testing so we don’t have to.

He wrote the mobile web handbook which was published through smashing magazine which is
a fantastic read. I was lucky to see him in Dusseldorf recently … Do a talk all about how chrome really isn’t chrome in all of these many, many places that we find it. So, for instance, on the iphone it’s not really chrome because it’s got the safari rendering engine with IOS web kit running behind
it. So even though it’s got the chrome chrome, the actual rendering engine is still IOS. And then he goes on to explain about the different versions of chrome that appear on Android, whether it be the default browser … Anyway, it’s really great and I won’t do a very good job of explaining it, so that’s
why we have him on the show.

But that’s next week. For this week, before I get into it we’re just going to do a quick
run-over of some of the points that I came across in the newsletter this week and some of the things that I noticed on the web this week as well and strangely on television as well. But before we get into that, I do have a new sponsor this week. It’s not … I wanted to thank Media Temple for all of
their sponsorship over the last quite a few episodes. So thank you very much, Media Temple, for sponsoring the podcast and welcome to the MOBX conference.

So MOBX is a mobile user experience conference. It’s running in Berlin this year on the
11th of September, 2015 and you can head over to 2015.MOBXcon.com. So 2105.MOBXcon.com, and it’s basically all about mobile interactions, designing for small screens, designing for smart devices and dumbphones as well. It’s mainly targeted around user experience and the kind of, kind of the UX, like
more of the scene-y UX roles. I was talking to the organizer the other day and he was really excited about it.

It’s come a very long way in the past couple of years. They’ve got some really great videos
on the site of the previous years as well, and they’ve got some pretty good speakers and some all-right speakers. There’s Jenny Gove who’s a user experience researcher from Google, so you’ll probably notice her stuff … Brad Frost. Amazing. Really great speaker, and also Steven Hay as well. I’ve seen
them both speak before and they’re actually … They’re absolutely fantastic. So I’m actually really, really fortunate I’m going to be sharing a stage with those guys. We’re doing a talk about the responsive workflow and I may, may at the last minute check in a different talk which I’ve been working
on as well but we’ll see how that goes.

But they are sponsoring the podcast for this week so thank you very much MOBX … Go and
check that out if you’re around Europe or the UK or if you’re travelling over, go and check out MOBX. It should be fun! Come and say hello if you’re going to be there. I’d love to catch up and have a chat about the web and the responsive stuff.

So like I said this week we’re just going to have a quick look at some of the points that
are coming up in the newsletter for this week. So the first one is Tim Cadillac is starting a series of posts. He has recently done a whole bunch of research around proxy browsers and rather than sitting on it, he kind of wants to share it in a series of posts. And when I first read proxy browsers, the
immediate thing I thought of wasn’t proxy browsers, so that’s kind of like your Opera mini mobile where you have this browser in the cloud that just serves you … So browser in the cloud that runs off a server, that server goes and gets the content from the website that you’re looking for and then it
serves you the content, but in a much stripped-down form.

We ran a thing recently around what Google were doing with some of the results in Indonesia,
where they were taking the website and compressing the crap out of it. Making the images look terrible, stripping out all the javascript … Basically making the website load super fast and be super small for people in areas where the internet might not be as good and the cost of bandwidth is really
high. So this is kind of what proxy … He does a really good job of explaining it.

But when I first read it, I thought of proxy servers, not proxy browsers. And proxy servers
are things like … Varnish is one, Squid is another … These are like reverse proxies and the way that they work is you have a web server so lets say we have a WordPress site, and WordPress runs the apache, it’s got MySQL on it, and it’s running php and almost every time you request a page from that
server, like just say we request responsivedesignweekly.com, the request goes to the server , it generates the page. So apache gets the request, it’s like “hey, I know this request. I’m going to fire up WordPress, I’m going to go to the database and pull out the content that I need and I’m going to put
these php files together and I’m going to push it back out to the end user.” And it kind of happens every time someone requests a page. That’s just if you’ve got a basic setup.

Now what a proxy browser … sorry, proxy browser. What a proxy server will do or a reverse
proxy server will do is it sits in front of that stack. So where you would have apache, MySQL and php running, it would sit in front of it. So let’s say it’s the squid server, you will request something, it will get to squid and it will say, “right, I want responsive design weekly,” it will check it’s
own cache to see if it already has that page. If it doesn’t, then it will ask the regular stack to build that page and serve it to the proxy or reverse proxy, which is squid, and then it will say, “okay, I will serve this.” But it kind of serves it just as flat html with a CSS and javascript request
that will come through as well. But it just serves it up, it doesn’t serve a dynamic version of it, it just serves the page as if it’s just standard html like a flat site rather than a database powered site.

The exciting thing about that is if there’s additional requests for that same page, and
it’s still in the proxy’s cache, then it won’t bother the server. And the important thing about that is that if you have a really large CMS … Excuse me, if you have a really large CMS … So let’s look at CSS tricks, for example, that database is massive. So Chris has been doing that for so long that
if that database has to fire off for every single request, then it’s quite taxing on the server so he would need a much larger server with a lot more power to serve every single request that comes through. If he had a reverse proxy, then the server has to do much, much less work because it doesn’t have
to start the CMS. It doesn’t have to do these queries, it just has the page already there in cache. So the same way that caching in a browser is great, so it saves additional requests, but you as a user, the reverse proxy is great because it saves all these additional requests to my server.

Now I used to work on a CMS so the the responsive design is CMS, is a CMS called matrix.
And it’s an enterprise-level CMS. It’s way weightier than I need for this particular site … But you know I worked for a company that produced this CMS and I got really good at building things in it so you do what you know. But it’s really expensive to get going because it’s an enterprise level it has
all of these permissions … The way it’s designed, it just takes for an age to get started. So when a request comes in to it, to get it kick-started and for all the moving parts in that CMS to start working, it’s like half a second. And so my time to first bite is absolutely woeful. So what we used
to do is we would but this squid server or varnish reverse proxy in front of the other stack so that we saved on all of these requests.

Now if you use something like Fastly, or if you use the one I use, CloudFlare, they’re great.
That’s kind of what they are. They’re reverse proxies, but they’re also like a content distribution network. They’re like a CDN. They’re reverse proxies all around the world. So not only do you get that benefit of saving a request to your server to get it working, you also can deliver content to people
wherever they’re living. So they work really, really well. But this thing just sort of sits, like this reverse proxy just sits in front your stack. Now the reason why this is important is it makes things more performant. It makes it faster.

Now last week in the newsletter I talked about my cousin coming over from Australia. She
came to stay with us for a couple of days which was great … And we hung out, we watched a bit of TV on the Sunday night, and the television program that came on was a program called “Dragon’s Den.” And for those of you that aren’t aware of what “Dragon’s Den” is, it’s this program where entrepreneurs
come on and they pitch their idea to these four dragons. So we’re not talking like Jon Snow fighting dragons, what is it, “Game of Thrones” dragons, these are just people who have made it in business who have a bunch of cash and they want to invest in startups or entrepreneurs so they can make their
money back. So someone will pitch them and idea and say, ” I would like a half a million dollars or half a million pounds for a 40% stake in my company.” And then if it’s a good idea, people will buy it. Or at least give them money.

Now that’s the premise of the show, and what some people do when they come on is … I just
don’t think they want the money. They just want the coverage. Because this runs on BBC2 on a Sunday night when when they know there’s a lot of people just sitting around their living room watching television, watching really bad television. But they’ll still watch it. And if you hear about a product
on it, the chances are you’re going to be sitting there with your smartphone or your laptop on your lap, or your tablet, and if it’s a good idea, you’ll probably Google them and you’ll go and check it out.

So I saw one a couple of weeks ago which was a property developer and he had a stupid evaluation,
which didn’t make any sense. And he didn’t really want the money, I think he just wanted the coverage. But last week they had a company called Van Girls, who were just an all-woman team, many hired women and they would move people. Basically, you hired them, they would come and move your house or move
something from one place to another. And they were just based in London for now, but they’re growing and they needed money to grow.

Anyway, it was a great pitch and I think it was Emma who did the pitch, she said “my website
is really great.” And so they gave a pitch for her website, which is great. She’s trying to build her company up. I went and had a look at it, because if someone says “this is a really great website,” I’ll go and check it out and try to poke holes in it or just look what a great website is and see if
there’s anything I would have done differently on the site. And I got there and it was just database error connection. The traditional error you get with WordPress when something goes wrong with the database.

So obviously what had happened is that she’s mentioned this on a television show which has
a few hundred thousand viewers, a few of those viewers have decided to … Excuse me, I’ve got a dry throat. A few of those viewers have decided to go and check this website out on their phone or tablet or laptop, and it’s just brought the server crashing down. The same thing happened for another mother/daughter
combination who were pitching for a handbag spa which I didn’t go and check out but my cousin did, and she said she couldn’t get on because it crashed. That one the server had come down, not the database.

But the whole thing is like, this is really simple stuff which all of, like, a lot of your
clients … I know you work on websites, you will have clients who will have websites, you will have websites, so you may be the client, like you may be working for a company and you build their website … And these are really, really basic things. If you’re going to have a spike in traffic, and you
know it’s coming up, it’s not like they recorded this on the Sunday night and they’re like, “oh, man, I totally forgot that we needed the website” … They recorded this weeks if not months in advance. They had time to plan it.

Whoever built them this site, which does look kind of lovely, apart from the fact that they’ve
also built them a mobile-specific site, we’re not judge-y here, but, you know, I’ll judge … They just didn’t build it well. It does look great and she’s very proud of it, but there were 20 CSS files and javascript files from all the different plug-ins that WordPress comes with. So, for one, they should
have all been concatenated into a single file. Caching wasn’t really turned on so requests were going back to the CMS every time a page was requested. They obviously didn’t have a proxy sitting in front of it to help with these requests, so the database was working overtime and all of a sudden a few
thousand people hit their website at once. It just brought it down.

So by doing really basic stuff like adding gzip, concatenating all your files so there’s
less HTTP requests to the server, putting in a proxy or putting CDM like CloudFlare or Fastly in front of your website. CloudFlare offers a free tier; there’s almost no reason not to go with them. They mitigate threats, brute force attacks, especially for WordPress sites that will get rid of, that means
you’ve stopped getting hacked, and if you do, like if you’re lucky enough to have this massive spike in traffic because, I don’t know, Smashing Magazine tweets you or Brad Frost mentions you somewhere or Ethan Marcotte sends a retweet out or someone from A List Apart mentions you or you hit the front
page of Reddit- it happens. Sometimes your site gets really really popular, the last thing you want with all this traffic coming through is for your site to go down because you’re not prepared and it wasn’t built properly in the first place.

So that was super, super annoying. So you should definitely look at your websites and make
sure that stuff doesn’t happen and that you are ready or your clients are ready for that kind of hit. It’s super important, that sort of stuff.

The other thing … if you do need javascript, like different javascripts as well, remember
you can check the async attribute on to the script tag which will mean it won’t be blocking … But just a word, like we were doing some performance improvements at work today on a popular website and I was trying to get them as close as possible to the green 100 [inaudible 00:17:42] Google page insights
and down as close to 1,000 on the speed index for webpage test, and Modernizr was one of the things that they were hanging hooks on to be able to load other things into the site. Modernizr’s a weird one, it does need to run in a head because it needs to be able to put things into the head class so you
are able to hook things on to. So you can’t actually defer that by putting the async in there. That does need to load in the head. But I recently went through and took Modernizr out of a whole bunch of my sites as well.

There was a talk, like a talk that was a discussion on a slack group called Front End London,
by all means go and join it. It’s open and free to join … So if you’re in London, even if you’re not, there are some really great people on there. And it was like, “does anyone use Modernizr anymore?” I was like, “that’s a really good point. It used to be in the HTML5 boilerplate, I think it probably
is, and I think we use that without thinking for a long time, at least I did, and I just include Modernizr on every single project because I was like, “yeah, well, if I need it I can tell if someone’s got Flexbox support or if JS isn’t working or if this or that … But at the end of the day, it was
in the head but I never did the test. I never looked to see if those things were loading or not, I just assumed. So I actually went through and removed it from a ton of projects. Because it’s just an extra javascript file, an extra HTTP request that doesn’t need to be there.

So if you have built something based on the HTML5 boilerplate, if you are using Modernizr,
just go back and check, like are you actually using it or are you just loading it? I commented it out, and it had no bearing on my site whatsoever. So I was super, super impressed with that.

So that’s about it. There were a couple of things that popped into my head while I was going
through the links this week. There’s probably a few more things but my throat is just getting far too dry. This is why I have a guest on, so I don’t talk all the time and get a dry and croaky throat. But thank you for tuning in and downloading this week’s podcast, next week I will be back with a very
special guest. Like I said, we’re getting Peter Paul Koch on, that’s very, very exciting. And also another one coming up is Jonathan Fielding as well. He’s the author of the Simple State Manager, which is kind of like matchMedia on steroids which is very cool. So we’ll talk to him about some of the talks
that he’s giving shortly and some of the work he’s doing around that and why it’s a really cool tool.But like I said, that’s all for me. Thank you very much for MOBX for sponsoring this show, 2015.MOBXcon.com, go and check it out. My name is Justin Avery, you can subscribe to the weekly newsletter at responsivedesignweekly.com and you
can check out all of the responsive design resources. And it’s not just responsive design anymore, there’s a whole bunch of resources and tools and tutorials and podcasts on on the responsivedesign.is website. Thanks for listening, and I’ll see you … Well, I’ll hear you or you’ll hear me next week.
Cheers until then. Bye.