RWD Podcast : Episode 40

Transcript

Justin Avery:Hey everyone and welcome to another edition of Responsive Design’s Weekly Podcast. My name is Justin Avery and I am your host and the curator of the Responsive Design weekly newsletter. A newsletter all about responsive design but it’s changing these days so it’s not … Responsive design is I think something which we’ve all come to just accept as … I was going to say gospel but not everyone accepts the gospel.

We just accept it as the best way to build our websites because it kind of is. We still have the whole mobile debate every now and then. It’s less about the M dot debate like do you build a mobile specific website and a desktop specific website? I think the debate is now more around do you build
a responsive website or do you have an … uh, a nap, or do you have an app because it’s hard sometimes to build responsive websites and you get tired like I may be now, mispronouncing and mis-saying my words. Do you build a responsive design website as your mobile approach or do you have
a native app otherwise known as naps from here on forth?

It’s an interesting debate anyway. It’s not … The newsletter now is sort of forming more around that kind of … Not that kind of thinking but I think these days with responsive design being so accepted, it’s time to start looking into some other things as well. That’s
what we’re trying to look at. Well, I’m trying to look at with our guests that are coming up as well.

Next week we’ve got on … Well, I’m doing a couple of recordings next week so we’re getting in Jason Grigsby from Cloud Four who is putting on the responsive day … No, so there was a conference call … The Responsive Day Out that Jeremy Keith organized and he is
doing a … Jason Grigsby is doing a Responsive Field Day in the States and he has got some amazing speakers. More about that when I talk to Jason.

I’ve also got … I’m really, really excited about this, a chat with PPK. I know I mentioned this last week but both he and myself have been busy and missing each other so we’re going to line that up for next week. I’m really excited to have a chat to him because he wrote
that whole let’s stop pushing the web forward and then Jake Archibald came back with some questions and Bruce Lawson came back with some comments, Aaron Gustafson came back with some comments and he has just posted his reply to those comments from the guys.

It’s quite good though. There’s a ton of other feedback from other people as well, not just those three. He’s come back out again and he’s set his point of view a little bit clearer. Some of the things that’s … I was going to say accused but some of the things that
he said last time were perhaps taken out of context. He didn’t describe them quite as well as he would have liked and he has done that in this response. I’m sure that’s going to flare up and have a few more replies to that reply.

It will just be good to get him on and have a chat about. It’s always easier just to speak about things rather than try and put them into words because sometimes people can misconstrue your words. They read it the way they want to hear it rather than the way that you are actually trying to convey
it. Anyway, it will be a great chat if not just for that but also, he is a very, very smart man, does a lot of research around browsers. He’s really got his finger on the whole mobile thing. It’s kind of big these days apparently. It’s growing.

This week, we’re sponsored by MOBX conference. Thank you to the MOBX conference that is running. It’s coming up. If you go to 2015.mobxcon.com, go and check that out. That is a conference … It’s a one-day conference being held in Berlin in Germany on September 11th. There are
some great speakers there and they’ve also got me as well, which is awesome. I’m really, really excited. I’m … I think I mentioned last week, I’m deciding which talk to deliver. I’ve got one on building responsively and focusing on performance and how we go about
Y-framing and sort of an end-to-end process.

Then I’ve got this other cool one where I’m just talking about the universe basically because I love the universe and relating some of the elements that we would see in the universe and how we’ve mirrored that in our own internet universe.  It’s an ever-expanding thing.
I’m still deciding which one to run with. The second one, I’m kind of nervous about because it’s a bit out there and it’s a bit abstract and I’m much better about just doing sort of a … I feel more comfortable and say I’m better, I feel more comfortable delivering more technical ‘This is how we did this thing and why it’s awesome’ kind of talks but there’s better speakers than me coming
out.

Brad Foster’s talking there. Stephen Hay is talking there, two guys who I greatly, greatly admire so I’m really looking forward to sharing the stage with them. It’s all focused around UX and senior UX roles as well but it will cover basically everything web and mobile. If you’re
around Berlin, get yourself a ticket. Go to 2015.mobxcon.com and find yourself a ticket there.

Thank you for sponsoring the podcast this week guys. We’re just going to have a … Because there’s no guest on this week, I’ll have a look at what’s happened this week. We already talked about PPK’s recent article but there’s another one, which I thought was
kind of weird, which was about the transition of everyone moving from HTTP to HTTPS. I know that Google are looking at … or Chrome is looking at changing the way they display the lock icon. The moment whenever you visit a secure site, if it’s completely secure, it will have the green lock
icon.

There’s different levels of SSL certificates you can get. Sometimes it has your brand’s name in that lock as well, which is really secure. It costs a hell of a lot of money to get those certificates but sometimes you see a lock but it’s yellow, which usually it means it’s not
as secure as it could be probably because it has some insecure content on that page as well.

We really focus around showing when a page is secure where as if you visited it on a HTTP, we just ignore it. We don’t include anything so there’s no visual reference for people to understand that they’re on an insecure site. It’s just taken for granted. I think that they’re
looking at perhaps including an icon to show people definitely all the time when they are on an insecure site so that they understand that it’s definitely not secure rather than just showing nothing. Out of sight, out of mind, may as well put something there, which is in mind.

Anyway, the article by Troy Hunt is talking about SSL perhaps being, although we want to push people towards it, it still could be considered a bit of a premium service. He goes into a whole lot of detail around why he thinks this. He’s been running a blog for years and years and years and is
on Blogger so a Google platform. At the moment, that doesn’t offer SSL and so he’s looked at different ways to be able to achieve that.

The number of people that are writing on Blogger because it’s a free tool, they are not able to go to SSL if they wanted to and so they would have to then export all those posts and put it into a WordPress, pay for WordPress hosting, pay for a certificate and then put it on that so there’s
not so much of a free offering. He goes into … Apparently, he has a wife or a girlfriend I think, writes on a Ghost blog and the Ghost is unable to run on SSL as well, it just it can’t do it or at least the hosting platform that Ghost provide don’t offer that particular solution.

There’s just a series of things where he’s tried to move on to SSL but its cost money because you have to host it yourself therefore, pay for it yourself and thinks that is going to be a barrier for people to move into it. The reason it came up … Well, that came up and then I also
during the week, I tweeted something out. I’ve been looking at a bunch of sites that I’m doing a gallery … I’m doing a review of a whole bunch of sites that’s going to be posted up on the site and one of them is the Polaroid.com website, which is absolutely beautiful, a
lovely responsive site.

When I ran it through a webpage test, the waterfall chart is just out of this world. There’s like 500 HTTP requests, it’s insane. Strangely though, the performance is quite good. The first render is kind of three seconds and it loads in 10 so that’s not great but the page reloads so
the second visit is super fast. It cuts it by … I don’t know, there’s only a 10th of the amount of requests coming in for the second so probably even less than that and it’s super, super fast.

I said, “Oh, I can’t believe how big this waterfall is. This is ridiculous but it’s still great. It’s kind of performing all right,” and someone came back and said, “Look, it’s not even going to be a problem if you’re using HTTP2.” I agree, so I
employ … I use CloudFlare as a CDN … Or a CDN, is that the right word? I use CloudFlare basically in front of the ResponsiveDesign.is site to serve my content to you faster. They’ve got a whole bunch of servers all around the world. All of my content sits on those servers so it reaches
you as fast as humanly possible … As fast as digitally possibly.

They offer HTTP2 or SPDY interface as well so that means that if you have a SPDY enabled browser, instead of all these old hacks we used to have to do for HTTP. This HTTP2 doesn’t require as many hacks. For example, there are only a certain number of requests that can happen on HTTP1 at a time
and that’s why we see these waterfalls and that’s why it’s called a waterfall chart because it makes one request, it delivers it, it goes back and makes another one, it delivers it, it goes back and forth and back and forth. The more requests you have, the more time it takes to load
the page because these can’t be done in parallel. HTTP2 will allow you to do this in parallel. The whole thing around the spreadsheets, you don’t need to use it anymore.

Jake’s point was that … This was Jake making this point is that once we switch across to HTTP2 then it doesn’t  really matter. I was like, “Man, that’s going to be ages away. What are you even talking about? No one actually supports it,” until I went to the
CanIUse. Before I went back and said, “This is ridiculous. This is ages away,” I had a look at CanIUse and SPDY’s on just about everything. Its green lights just about all the way across. There’s a really old version. Maybe Opera Mini, which doesn’t matter anyway because
that’s practically an image of the website anyway. It has its own proxy server, IE8 and for some reason, EDGE is listed as not supporting it, which I can’t imagine it’s true so it’s really, really well supported.

If you have a website, you probably do, you’re listening to this, put CloudFlare in front of it or talk to your sys admin and see if they can enable SPDY on your engine X or on your Apache server. It will just make things so much faster and everyone wants faster stuff. Google are doing it, Facebook’s
doing it, Twitter’s doing it. You just may as well do it and for people that have the browsers to support it, which is just about everyone now, then they’re going to get an awesome experience. Yeah, definitely, definitely get on the SPDY wagon that’s for sure.

There was another article, which I saw, which I really liked. I went to the Web IS conference last year I think it was. Craig Lockwood ran that conference and it was spectacular. It was really awesome. Really great bunch of speakers. I think it was Scott Jensen spoke there who was like a spokesperson
for Google. He’s looking at taking the physical web and making something of it. He’s kind of like … I hate to say evangelist but he’s going around talking the good talk about these things.

One of the things he gave out to some of the audience members were these beacons. They’re a little square thing like a key ring. It’s the size of a key ring and it’s a … It’s like a size of a … If you had a matchbox and you made the matchbox to be square instead
of rectangle then that’s how big it is if it was a square. Crop it into 300 by 300. That’s how big it is.

It’s powered by a small battery. It runs a low-powered … What is it called, Bluetooth emission. What you can do is you can program a URL into it. I would program say ResponsiveDesign.is into this thing. Programming it is really easy. You press a button, you have an app on your phone, you
type the URL into your app, you hit like send or commit or go and then writes it to the beacon.

Then what happens is the beacon just broadcasts that. It has like a five to ten meter radius that it can broadcast this signal and anyone else with this app, this physical web app will be able to see that URL. At the moment, they see it as if it’s a Google search result. You have your blue links,
your green URL, your black text and if there’s a few of them around then it will list a few of them. Then you can just click on it and it opens up that web page for you.

The whole idea is that these are going to go into vending machines or parking meters so you can pull up next to it, open up your phone, get the URL of that particular meter, click on it, pay your parking or if you’ve got a vending machine, walk up to it, click on the URL, go pay for your chocolate
bar or whatever using your phone as the device and then this just spits out your chocolate bar afterwards or you’ve covered your parking. It’s a really, really good idea.

This article is just about what is going to become a reality like when you are walking through a store, how is it going to look? What are malls going to have? It’s really a good review of how we are going to make URLs more discoverable. I was tying that back into a responsive thing. People are
just going to be browsing this stuff on their mobile so if you’re not going to have a responsive site then you’re in the poop or at least a mobile optimized site.

The other thing is you might look at … The great argument for the responsive side of things is that you’re looking at this website on your mobile. It might be in passing, you’ll send it to yourself, you’ll save it, you’ll share it with someone, who knows what they’re
going to be on, they don’t want to get an M dot thing. Yeah, it’s really good. It’s a cool article and if you can pick a beacon up and start playing around with them, they’re at $4 or $5 I think it is, two or three quid, three or four quid, definitely, definitely try that and
check that out.

The other one that we’ve got is a Lazy Load. I’ve spoken about performance quite a bit and hacked on it. Images, one of the problems with this Polaroid site, which was … The first render was okay but it took so long to download and I tweeted just, just before I came across a conference
site not MOBX and not one that I’ve been to before but it was a digital conference. The speakers’ page had 123 requests. It took 2.6 minutes to load and it was 31.1 megabytes of data transferred.

Now, I didn’t scroll past the first frame so I just opened it and let it load. I didn’t scroll to the bottom or anything and it still loaded all of that. Now, that’s completely pointless. That is ridiculous. This particular plug-in which I’m putting into this week’s news
[inaudible 00:18:06] is called Lazy Load and they’ll be in the show notes but it’s a light weight JavaScript plug that’s not reliant on jQuery and it will only load in the image when it’s about to enter the view port of the scrollable area.

For example, if you’ve got a page of 30 speakers and you’ve got kind of … when you first load, you can only see one speaker. Just under the fold, the second speaker will be there. Because it’s so close to the fold, I’m using my finger quotes. It will load in as well but
the third speaker won’t because it’s not within the particular range of the viewport. If you start scrolling, you get close to the bottom of the second image then the third image will start loading in.

You will have this nice continuous experience where the image is always there but if you decide to bail on it after three or four speakers, you’re not going to be penalized by downloading 30 images that you’ll never see and spend 31 meg of your data. Anyway, very cool, very slick.

That’s it for this week. Like I said, next week, I’m very, very excited to get a couple of guests back on the show. It’s going to be very cool. Before we go, there is another conference coming up, which is … A good friend of mine, Dave Letorey is helping organize this conference
for the London Web Standards Group. He’s one of the organizers and event coordinators there. Yeah, we can spot him anywhere because he’ll have a big red hat on. When you see him, you’ll know what I mean.

He is offering subscribers to the newsletter and listeners as well, a 15 percent discount to attend The State of the Browser. If you go to www.stateofthebrowser.com, you can check that out. Slash speakers, you’ll be able to see the speakers that are there. There are some really … There’s
always some great speakers. I really love this conference.

Bruce Lawson is going to be there from Opera. Seb Lee-Delisle, he is one of the best speakers I’ve ever seen. He always does something with lasers, usually live coding, which is always very, very cool. Chris Heilmann is going to be there from … Where does he work these days? I think it’s
Microsoft these days but formerly of Mozilla, formerly of Yahoo. He’s one of those evangelist folks. Adam Onishi, a great speaker well, Laura Elizabeth who’s talking about patterns and pattern libraries, Ada Rose Edwards who’s taking about the animation performance on the web, Phil
Nash is speaking, there’s a whole bunch of people.

Go and check that out. If you want a cheap ticket, you get a 15 percent discount if you use the code RWD-SOTB5. That’s RWD-SOTB5. This is in the show notes so check it out but it’s RWD-State of the Browser 5 but yeah, that’s it. Thank you very much for listening and downloading this.
Next week, will be a little bit more a two-way conversational instead of me just hounding you for the 15 or 20 minutes that I’ve been doing.

Thank you very much for your support. If you want to go and check out some of the latest articles or some of the news items that will be in next week’s newsletter you can go to ResponsiveDesign.is and check out the latest news section. There’s going to be more examples of sites up there
as well and there’s a whole backlog of cool podcasts with some very, very special guests talking about very special things, very intelligent guest. You’ve got to check that out as well.

Until next week, enjoy it and have a wonderful weekend. Thanks everyone and see you then, bye.