Podcasting

Responsive Web Design Podcast Feed

Justin Avery

ResponsiveDesign.is the knowledge hub for planning, designing, developing, and implementing responsive design.

Episodes

RWD Podcast 65 : Public speaking, Hololens, NBC Redesign
20:55
2017-09-22 13:53:31 UTC 20:55
RWD Podcast 65 : Public speaking, Hololens, NBC Redesign

Show Notes

RWD Podcast 64
15:45
2017-09-22 13:53:31 UTC 15:45
RWD Podcast 64

I’m just back from a few weeks in Australia visiting family and getting the podcast back up and running again. This week we go through the best links for the weekly newsletter.

RWD Podcast 63
11:07
2017-09-22 13:53:31 UTC 11:07
RWD Podcast #62
23:33
2017-09-22 13:53:31 UTC 23:33
RWD Podcast #62

RWD Podcast #61
58:00
2017-09-22 13:53:31 UTC 58:00
RWD Podcast #61

RWD Podcast 60
40:22
2017-09-22 13:53:31 UTC 40:22
RWD Podcast 60

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 and other front-end cool stuff. This week I’ve got a small guest but it’s not until the end and I’ve got a piece that I’ll add at the end of the podcast, and the reason why I say it’s a small guest is because they’re small in stature it’s my little boy Noah and he decided that he wanted to do some recording over the weekend so we did a little short podcast together. If you don’t like the opinions of a three year old then feel free just to skip over it. So that’s why I’m not including it until the end. He probably has some better opinions than me a lot of times but, you know, he’s a little childish. Takes after his dad.

But this week to start with I’ve got a lot to offer everyone, so I’m going to get to that first. We’ve got a couple of sponsors this week which is fantastic and they’re giving everything back to us which is great. Or you, the listener. So, conferences, we’ve got a bunch on. We’ve got three conferences coming up. One in the states, one in the UK, and one that is global that you can view anywhere and the first one is the global one.

So this is the SVG online summit and anyone can join it, it’s global, it’s an online thing. There’s a tonne of talks during the day. Actually, let’s go through it properly. A better-prepared person would have all this here. So SVG Summit, if you go to svgsummit.com then you can go check it out. If you use the discount “RWDWEEKLY“, all capital letters, that’s good for 20% off. Now it’s coming up on the 15th of February so it’s not too far away. Starts 10:00am Eastern Standard Time, 9:00am Central Time, and it has six speakers throughout the day. Chris Coyier, Sarah Drasner, Amelia Bellamy-Royds, Dudley Storey, Clark Wimberly, and Kevin Ball and they’re all talking about SVG and different ways to use it online. It’s going to be super cool.

And the great thing about these online conferences is you don’t have to spend any money flying there, you don’t have spend money on accommodation. I love flying to places but it gets expensive when you add everything up, and the time you’ve got to take off. So this just pop it on your computer at work, put your headphones on, and just learn lots. They’re really cool conferences. I’m fortunate I’ve been to a couple where I’ve partaken in a couple, watched on the computer, and I presented at one as well. It’s just so much fun. Really good, the guys do a good job there.

The second conference we’ve got is for the awwwards, so this is for folks in the UK or Europe and it’s coming up fast. It’s the awards conference so A.W.W., see what they did with the name? That’s coming up on the 2nd and 3rd of February so I’m going to be going along there and I’m going to be hanging out with some friends from the Adobe XD Team who I caught up with late last year and I actually want to speak to them a little bit more too because I think the XD stuff is really interesting in terms of like rapid prototyping and being able to get interactions and things on the screen that clients can see. So I kind of want to try a couple of screen-casts and see how it might work out to improve our responsive workflows and stuff.

So if you want to go to that you can go to conference.awwwards.com/london2017. Do a search for “awards conference in London” and that will come up there, and if you use the discount code “responsivedesignldn“, it’s like responsive design London, that’s good for 10% of the ticket as well. They’re also going to be doing a live stream of the conference out as well and Vitaly from Smashing Mag is going to be there to kind of host that as well, so that should be really cool. I want to catch up with him as well because Smashing Mag are doing this huge redesign. They’ve had people like Sarah Souiden working on it, I think Dan Mall had done the original designs perhaps as well. It looks really good. It kind of looks a lot like the Responsive Design redesign as well so I’m happy that the design that I’ve gone with, with the guys from No Divide, that they’re going in a direction similar to Smashing and I think that’s a good direction.

But as part of this, Smashing Magazine and Vitaly, they’re looking at different ways of generating an income for a publisher. So it’ll be really interesting to see with all the ad blockers in now, they don’t make as much money through ad revenue, so you need other ways to supplement the income to continue the business. And Smashing Magazine is a big business so it will be really interesting to see what he’s doing to try and tap in with that. I think he’s going along a little bit of subscription model which I think is cool. I’d be happy to subscribe to a magazine like that, they put out a lot of good stuff. I feel like I should be paying them for doing that as well because they pay all of their writers and I really like it.

And then the last one is for people in the states most likely, or the Americas, and that is called “ImageCon” so it’s imagecon.com and if you use the code “RWDWEEKLY” it’s good for 50% off your ticket which is really cool.

Now I wrote a piece earlier in the week about how to approach typical problems when uploading large numbers of images and it’s actually what I’m going to be talking about after this and running through with you today. If you want to head along to the conference that will let you understand and deal with bigger problems than just how to get images optimised properly and rolled out on your screen or near different sites. They’re going into a lot of detail like the different problems that we have with images at the moment, and it’s on the 1st of March. So 1st of March in San Francisco and it’s got some amazing speakers like Jason Grigsby, they’ve got Allison McKnight from Etsy, Vitaly as well, we just talked about Vitaly from Smashing, Steve Souders like the performance person getting around so he’s at SpeedCurve these days. So all these great people talking about images and it should be a really good conference. That’s imagecon.com and use “RWDWEEKLY” for 50% off your ticket.

That’s all the discount stuff at the top of the show so you can save 20%, 10%, 50%. Great stuff.

So for this week I wanted to talk about watching your weight. And I’m not talking about like the post-Christmas holiday weight and “Oh my goodness, I’m going to put a New Years Resolution to never eat unhealthy again, and I’m never going to drink again.” We’re talking about image weight on your websites. And the reason why I wanted to talk about it this week is because, like I said a bit earlier I wrote an article this week is because I came across a tweet from Andy Clarke. Now Andy Clarke has published this awesome article on his site called “Designing Inspired Style Guides” and it was a talk that he delivered, and he doesn’t think he’ll be able to deliver the talk again, but it got a really good reception and so he thought, “Rather than waste all of this great content, why don’t I turn all of this great content into a super long blog post? Then more people can enjoy it.” Which is like, kudos. It’s a really good, long detailed article about style guides. So kudos to Andy for doing that.

Now in the second paragraph of the article he even says, “This page contains a lot of images.” And he says, “This page contains 35 MB of images, I’ve optimised them as much as I can but you probably don’t want to load this page on your mobile data plan.” So that’s great that he gave people the heads, there’s just the issue that by the time I’ve read that, a lot of the images which are on that page are already starting to download. Now I suppose thing in this is that there were so many images on the page, so there’s like 150 images, there’s so many there that it won’t have downloaded that many because of the number of connection that it has. Or it needs to make the number of HTTP requests. So by the time I read that I could hit stop and then save my data plan a little bit if I was reading it on my phone or even my desktop I had time to stop it.

So I want to get this super clear up front, Andy did as much as he could do with knowledge that he had on providing an awesome resource to everyone and giving them a heads up. Like that’s awesome. Not many people would do that. And I thought, “I wonder if there was anything that could be done to perhaps make that experience a little bit better for users. Let’s see how this goes.”

What I did was first I opened up Chrome Dev Tools and I opened up the Network Panel. There’s an option in the Network Panel where you can set a throttle, so you can say rather than run off your regular connexion to the internet you can set it to run at 2G or 3G or good 3G or 4G or GPRS so you can test different network conditions. So I tested a mobile network condition at regular 3G, ticked “Disable cache” because I’d used the page before, and then refreshed the page and started watching it. And once it had finished loading I noticed it was slow because it was on 3G but all of the files that were being served were PNGs, that was one thing that I noted. And immediately there come a thought, “That must have been the default export option for the presentation he did, Keynote or PowerPoint.” I also noticed that all of the images were being loaded regardless of whether or not I had scrolled down the page to view them, and the last thing I noticed was that every single image required it’s own HTTP request.

So with 150 images that’s 150 round trips between your browser and the server and going through network connexions. With that information I thought, “Right. Let me address those images and see if I can improve upon the load time for that particular page and the great resource.” First I saved down the page locally, so if you ever want to grab a webpage from someone’s site and put it locally so you can work on it and check stuff out, it’s File > Save Page As > Webpage Complete. And that downloads the HTML as a HTML document and then it also downloads a folder and within that folder it has all the assets, so all the images, all the JavaScript, all the CSS, everything that goes to make up that page. So if you’re offline, locally you can double-click on that HTML document and it’ll open up and you’ll see the entire page. So that’s a good start.

I saved it to my desktop and then I moved on, and I mentioned that the first thing I noticed was that PNGs were being used for everything. Now as a general rule you can either have PNGs or you can have JPEGs. It used be GIFs and JPEGs and I know there’s PNG-8 and PNG-24, I won’t go into that but let’s just start with it’s PNG or JPEG. So if you want to choose a PNG, you should choose a PNG when the image is more of block colours. So think vector kind of things like logos, icons, they’re kind of just full block colours. Also if you want to have a transparent background then you might choose a PNG as well, and we’ll go back to the logo and PNG transparency thing in a sec too. You should choose JPEG if the image is more of a rasterized image, like a photo. They’re the general two choices.

Now back at the logos and icons, technically these days we probably would want to go for an SVG rather than a PNG purely because it’s a scalable vector graphic. So it will scale from small viewports to large viewports, so rather than have many different types of your PNGs depending on what size you need to render them as, you have one SVG and it scales magically. Hooray!

And then on the transparency side of things as well, there’s a file type called WebP and it’s supporting in Chrome and I think Opera as well but I do know that Safari were looking at implementing it as well or they were checking it, and they never check stuff out like this so that’s really positive. WebP is a lot more performance so you can compress it a lot more and get still really, crisp, clear JPEGs effectively at much smaller file sizes and it provides transparency as well which is really cool.

So looking through all those images I thought most of them were more suited to JPEGs than PNGs, and if you PNG something that should be a JPEG the file size becomes incredibly larger than what it should be. Whereas if you JPEG a PNG you can really small PNGs for quite large pictures because it’s mostly block colours and you can get incredibly large PNGs for small pictures if it’s more suited to a JPEG. And just out of interest if you’re going to export your files or your slides from something like Keynote or PowerPoint there is an option, definitely in Keynote you can select JPEG high quality, small file size, PNG or TIFs. So just think about what most of your images are going to be and export to suit.

So now that I had them all downloaded, all of the images, or downloaded the webpage, then I wanted to change them all from PNG to JPEG. Now normally with my Mac I can right-click and say “PNG to JPEG” because I’ve set some automation up because I take a lot of screenshots and I just want to switch it through the PNG to JPEG because traditionally JPEGs are better for the screenshots that I take, so I’ve got like this right-click shortcut. But because it’s 150 images in this case I have Photoshop on my machine so I was able to use something from Photoshop, so in these cases where you’ve got large scale, you want to batch-process things. So if you go into Photoshop and you go File > Scripts > Image Processor then it gives you a few options, you select the folder of the images you want to change, you select a folder for where you want your images to end up and then you pick what file [size 16:26] you want it, in this case it was JPEG, and the quality that you want it as well. I chose a four which is about 30% quality because I wanted them small.

Then I hit “Save” and then bam, we got a whole bunch of JPEG images and that changed the file size so it wasn’t 35 MB it was now down to 10.4 MB. So we’ve already reduced it down to a third of what it was just through changing the image file type and optimising the images a little bit. Then when I had all of that the next step is a little bit further optimisation using a tool called ImageOptim. It’s a free tool and the wonderful thing about that is that it provides lossless compression which means that image isn’t as big but it is just as beautiful as it once was, so it doesn’t affect the quality of the image at all, it just reduces the size of it which is exactly what we want. To do that it removes like … I actually don’t really know what it does, it’s like magic I think. But what I do know is it removes a whole bunch of metadata about the image which isn’t needed for people to view it on the web so just get rid of it. So yay ImageOptim. Free, you should totally get it.

So I dragged all the images onto Image Optim and then within like 30 seconds or a minute it had processed all those images and that had taken it from 10.4 MB down to 6.1 MB so now we’re talking about going from like 35 MB all the way down to 6.1 MB which is amazing. From there it’s a simple … I always say simple matter, it’s not always simple. From there you need to get the images back onto your server so I used an FTP client and you put all of the images back into the folder that you had all you PNGs, it won’t override them because now they’re all JPEGs so it won’t overwrite a PNG because they’re different file names. And once they’re all back in there you have to update the reference in the post, so at the moment all the image tags are referencing .png you need to reference JPEGs and it’s Control-F like a find and replace. So you want to find anything that says “.png” and replace it with “.jpg” then you publish and voila. You’ve gone from 35 MB per page for every visitor down to just 6.1 MB for every visitor.

Not only is that really good for the users so they get the content faster, they don’t have to wait around, their browser doesn’t slow down, they don’t lose all their data. The other great thing is Andy is a popular guy, he writes a lot, he does some cool stuff. Now he would have like, I’m guessing 10,000 people would go and view that article that he wrote, it was re-tweeted by a lot of really popular people in the web community as well. So 10,000 people at 30 MB, that’s 300 GB of data that he’s now saved and he doesn’t have to pay in bandwidth. It’s just fantastic, it’s a win-win for everyone I think.

So at the top of the show we talked about there’s three things, so there’s the file size which we’ve now corrected to a certain extent, a pretty good extent I would say. The other thing is that all the images are being loaded regardless of whether or not anyone was going to see them. To fix that essentially you’ve got 150 pictures you might not scroll through all of them so why should you be downloading the ones that you’re not going to view. So you can use a tool, it’s a JavaScript plugin called “lazySizes” and what that does is it Lazy Loads the images into the page. What that means is that when you first load the page it will load the images that you can see that are within your current viewport and then as you scroll through the site as the other images get close to the viewport then it will say, “Hey, you’re about to be viewed by the user. I think you should start downloading now so that you can be there for when they arrive.” And then as you scroll through the images slowly start being loaded in.

If you stop scrolling then the images stop being loaded from below the viewport and it’s just great because it means that only the images that you’re likely to see are going to be loaded. So you’re only paying in bandwidth and time and even the hosts, so Andy is only paying in his bandwidth for the images that you’re going to see as well. Now to do that, like I said “lazySizes” if you do a search we’ve got it in the resources section on the Responsive Design site as well and it’ll be in the show notes. It’s a small JavaScript file, you can load it asynchronously so it’s not a blocking script, it won’t affect the load of your page. And for any image that you want to Lazy Load you need to change the source to “data-source” so it’s a data attribute instead and add a class of Lazy Load to that image.

Now the reason you have to do that data-source thing is because browsers are super smart these days and as soon as they detect an image tag, like even before all the HTML has passed, it will start downloading all of those images and that’s to make it seem as though web pages are faster. They do that for the users benefit for performance side of things. What that means is that all the images start downloading before any JavaScript can run and stop it from downloading so that’s why you need to change it from “source” to “data-source” and then as you scroll through lazySizes checks to see whether the image is approaching the viewport, as it gets close to it like within 200 pixels or so, then it changes the “data-source” to “source” and the browser will download the image. So it’s super, super cool.

I’ve used it for a few sites, I did it for the Adobe Mac site, I rebuilt their conference site from like a better approach for a responsive, responsible design and performance is a big thing. I added lazySizes to it and it’s shaved like several seconds, we’re talking five or six seconds off the load time of the site by just implementing the lazySizes. Very good for image heavy sites, especially for ones that are below “the fold”, so definitely implement that if you can.

We also talked about I said there’s lot of requests for the images as well, so if you were able to run on HTTPS and your server supports HTTP/2 then instead of having one request for each of the 150 images and there’s latency on every single request, with HTTP/2 you don’t have that latency. It can just request all of them at once and they can all download and of course if you’re using lazySizes then you trip yourself up because you don’t want them to all download at once. But that connexion will stay open so you don’t have to make it look up every time, which is fantastic.

And the final thing, there’s one more thing that we can do. For those in podcast room, can anyone just raise your hand and say … Like, are you thinking of one other way that you haven’t mentioned, the key way to have better images for this page? Anyone? You in the back, Mr. Eric Portis? Yes, you were right. It’s using responsive images is the other thing we could do. This requires a little bit more work. What we had for these images is they’re all slides, so they’ve all been exported about 1024 pixels wide. Now if I’m viewing that on my iPhone 5 which has a width of 320 pixels and it’s a retina one, I think they’re all retina, 320 you might double that and arguably say it’s 640, but that’s still like half the screen area of what I need from what the image is being loaded. It’s 1024 only you really need 640. So we can include something like SourceSet for the images so that we can give the browser several different sizes of image to chose from and then it would download the image that best suited the viewport to render that image.

And that great thing about that lazySizes that we talked about before is that it works with responsive image syntax as well so it works with SourceSet and it works with picture as well. So that would be a cool bonus addition there and the reason I … Eric didn’t really put his hand up, but Eric Portis wrote this really awesome article about responsive images and again I’ll link to that in the show notes and it’s linked in the article as well.

So that’s it, so this is how we can turn like … and I encourage everyone, we’ve got this problem at the moment with large web pages, they’re bulking, they’re oversized, they’re overweight. And most of the weight is due to images. We always complain about, “Let’s not include that JavaScript library in there it weighs 30 KB.” And yet we’ll chuck on 35 MB of images onto a page. I see this all the time and it doesn’t have to be 35 MB it could be 5 MB of images, the point is that’s too often, that’s too much. But if you can approach it in a systematic way like, “Am I loading the right images? Are they properly optimised? Have I put them in a responsive image container so that only the right sized image gets served up? We’ve got a tonne of images, are they loading below the fold? Are my users likely to scroll down there and if so will they scroll all the way or should I just be serving up a couple that they’re definitely going to be seeing?”

This is the other reason why this image conference is on at the moment too because it is a real problem, but I think we make the problem worse for ourselves by including these things. And I realise that most projects are done in a rush, unfortunately, it’s just the nature of the way we do things. These kind of things tend to be, “We’ll look at that later, let’s just get it up and going.” And I think that’s a bad approach. We should really just focus on trying to make it a little bit lighter, try and work those images as well as we can and see how we go.

So that’s it. Thank you for listening, thank you for tuning in and downloading. If you want to talk about something, if you want me to cover something in particular, feel free to write in. You can hit me up on email, you can reach me on Twitter @ResWebDes, you can subscribe to the newsletter at responsivedesignweekly.com and please rate this show up in whatever podcasting listening tool you’re listening to at the moment. Rate it up that would be super awesome.

Coming up next is my little interview with Noah so if you want to check out what a three year old has to say about the web and what’s better, what’s the newest thing coming out and what’s the best thing to watch The Minions on, then you are in for a treat. Until next week, I will see you soon. Cheers. Bye.

RWD Podcast 59
10:00
2017-09-22 13:53:31 UTC 10:00
RWD Podcast 59

Hey everyone, and welcome to another edition of Responsive Design Weekly. My name is Justin Avery and I am your host and curator of the Responsive Design Weekly Podcast, and the newsletter, a weekly newsletter all about Responsive Design and front end funky stuff. Now this week as you will notice, my throat hasn’t cleared up at all, the kids have kept my cold going and my cough has just got worse. So we’re going to keep this super quick because you don’t want me to be coughing in your ears on your journey to work or while you’re chilling out. So we’re just going to cover one thing this week, and again there’s no guest this week but next week I have two people to chat to which I’m very, very excited about. Yeah, it’s going to be awesome.

So this week, the feature side, the feature article for this week is we’re looking a little bit at an article which Scott Jehl has written from The Filament Group. Scott Jehl for those of you that haven’t heard of Scott, he has been doing wonderful work over the last couple of years on the web and he’s always about practical performance. In fact he wrote a book on just that topic as well. If you go to “A Book Apart”, I’ll type that in and it’s great radio. Here we go with the coughs. So yes, we know of the Responsive Design right? So “A Book Apart” Ethan Marcott wrote his first article on [inaudible 00:01:48] and then he wrote a book called, “Responsive Design” and then it was followed up with “Responsible Responsive Design” from Scott Jehl, and it’s just talking about the responsible ways in which we can approach the booting of websites. Now because Filament Groups stay on top of this stuff, the site is usually pretty darn fast and this latest article though we’re featuring is about them stepping it up, so the title is, “Modernising Our Progressive Enhancement Delivery” and it’s all about taking advantage of some of the newer tools that are available to us today, not across the world, but available to a lot of people.

And namely that is around HTTP/2 and so we can look at the browser support for HTTP/2 and it’s running on IE 11 partially but it’s limited to Windows 10 for IE 11, but Edge runs so 14 and 15 for IE or now Edge. Firefox supports it as of version 36 I think and we’re up to version 50 at the moment. Chrome has supported it since 41 and we’re at 55. Safari? Come on Safari. Safari offered partial support. Safari. Opera supports, iOS Safari does support it, Opera mini does not, but Android browsers and Chrome for Android both support it as well. So that’s from the Browser point of view. So if you send an HTTP/2 across to a Browser that doesn’t support it, it just falls back to HTTP/1.1 in the way that the web works. We always fall back, which is great, and that’s why the web is so awesome.

So the thing with HTTP/2, one of the coolest things, I think I’ve talked about this a little bit in the past as well, it’s just a lot faster. The communication between the server and the browser is done with 1’s and 0’s now, instead of text, so it’s a lot quicker. The compression on the chats is a lot better as well. But the main thing is that there’s no blocking requests. So previously if we requested an HTML page, and that HTML page had CSS and images and JavaScript and the like, it would wait, generally we would have that waterfall, network diagram. So it would request an image and then it wouldn’t request the next image until that image had downloaded and then it would go off and request the other one and the bring that back.

So each time we needed a new HTTP request, which was expensive and made things slower. With HTTP/2 you won’t even need to make a single request, and when the HTML comes back to the Browser, it then looks through it and goes, hey I need all of these files, go and get them. And they all come back at once, which means we don’t need to concatenate files together so much anymore because we’re not using the extra HTTP requests, it’s just all coming back. So instead of seeing this hierarchical, as like waterfall thing, it’s one request, bang everything else comes back. So that’s great.

The other thing that we’ve been doing is critical CSS. So the idea is that we want the first fourteen kilobytes that comes back from the server, we want to render as much of the page as possible within that first fourteen kilobytes because that’s the first trip back. And to do that we need to have all of the CSS that is required to render the visible part of the page within that first fourteen kilobytes. So we used to inline that CSS, called critical CSS. With HTTP/2 now, we’ve got this option of a server push, so that when the request goes out for the webpage, so when you request the Filament Groups homepage, as the server send the HTML back to the browser, you need to wait for the HTML to arrive in the browser, look through the HTML, find the images and the CSS and JavaScript, then request them, and even then they’re going to come back in one whole hit, and it’s one request, there’s still a bit of latency involved with that.

Instead because you know what file is going to be sent back, you can instruct the server to say, hey if someone requests this page, push along that HTML we’re sending back, push all these files because I know that these files are going to be required on that page. So that’s really, really awesome. It means that you don’t have to do that second request and then you don’t actually have to inline your styles anymore, you can just push them down.

Now I can imagine you’re thinking, but hey what if we already have those files, what if we’ve already visited that page once before? Fortunately, Scott has thought of that as well, and they’re using a cookie to check that. So even though the push happens, the browser can actually cancel that at any point. Now there is a couple of occasions where those files will come down and you will get the extra burden on your data plan because you’ve downloaded files that you already had. But for the most part once that cookie is set, then you no longer have to push those files down anymore, which is great. So I highly recommend, check the newsletter out, check the website out on redesign.responsivedesign.is.

Well you’re probably there at the moment, check the show notes of this as well, we’ve got a link to that article, but definitely check it out, browser support is great like we said. HTTP/2 you need to do a little bit of configuration on your server depending on what server you’re running, that will also need to support HTTP/2, but if you’re using something like CloudFlair, which I highly recommend, that actually has HTTP/2 out of the box. Another bonus about it as well is that you have to be on HTTPS, so you have to be serving your site securely to take advantage of HTTP/2. Another good reason to use it because you get all of these benefits along with it.

So that’s it for this very short episode, I’m really hoping that this cough sorts itself by the time we get a guest on. But fortunately, they will be doing more speaking then what I will, hopefully. Either that or I’ll just sit with a bottle of cough medicine and just swig it for every time I’m going to ask a question, another swig and see how we go.

So that’s it for this week, if you’re not already subscribed, head over to responsivedesignweekly.com and subscribe to the weekly newsletter. Check out the new stories going up on redesign.responsivedesign.is every day, and we tweet about them, so you can follow us on Twitter @ResWebDes. See you next week.

RWD Podcast 58
19:35
2017-09-22 13:53:31 UTC 19:35
RWD Podcast 58

Show notes

Transcription

Hey, everyone, and welcome to another edition of Responsive Design Weekly. My name is Justin Avery, and I am your host and the curator of the Responsive Design Weekly news letter. A weekly news letter all about front end development and back end stuff and performance stuff and frameworks and tools. A whole bunch of stuff. This podcast is like a … I was going to say  a sidekick. It’s not a sidekick. It’s like a spin off of the news letter as well, so I bring you some cool stuff on the podcast as well I hope. This is edition number 58 which is kind of cool, and the fist time that I’ve gone back to back editions week to week for a while actually. It’s the first time in 2017, but it’s only been two weeks in 2017, but it’s actually the first time for quite a while including 2016, so yay.

Thank you for downloading and tuning in again. This week I’ve got like this tickle in my throat thanks to my little boy. Thanks to him going back to school, so he’s bringing back a whole swathe of new germs that can do the run around in the family as well, so I’m going to try this thing where I click on the mute button if I feel a cough coming, so there will be like tonnes of tiny little pauses through the show. Super professional, I know.

This week no guest, but I did on Tuesday night I went to the London web performance meet up, and I saw a wonderful talk from Ada Rose Edwards. You can see her site at Ada.is. She was fantastic. She talked all about web VR. Now, I looked into web VR a couple of months ago because a client was asking what they could do with it, and they wanted to keep on top of things, and when I had a look I came across this framework called A frame. Aframe.io, and it’s a framework produced by the Mozilla company. Here we go. We’re going to try to cough quickly. I hope that worked.

I believe it’s developed by Mozilla. Anyway, it’s a wonderful thing. It’s like a framework. You drop in a bit of Java script, and instead of programming really, really difficult like web GL stuff and things that I have no idea or understand, have any comprehension of how to do at all. You drop this code in so the reference to a Java script file, and then you can just pretty much write HTML. The HTML, like you write HTML but with particular components, but it then turns it into a wonderful web VR experience. Then all you need is, all you need, you then need a phone. Some description. Something that supports web VR, so I mean I’ve got an iPhone five here. I’ve got an iPhone six from work. Both of those support it, and then like a headset which could be Google cardboard, or it could just be you pushing the phone really hard up against your face.

Google cardboards come pretty cheap. Fortunately there was a Google representative that gave away 100 Google cardboards at this meet up, so we all got to try it out. I forgot to hit the mute then. It was a wonderful meet up, and it was really, really good. Ada talked. No slides, just demos which makes it even better. Web VR it’s really a thing. It’s like it’s here, and it’s ready to go. I’m not going to lie, it looks a little bit like the designs that were coming out in the mid 90s or late 90s, so they’ve got a very 80s, 90s feel about the designs, but that’s because the web VR stuff is still, I mean the pixel perfection we expect retina quality stuff now with our screens and our phones, but the resolution on web VR just isn’t up to that scratch, but man it is immersive, and it is cool, all right?

One of the wonderful things I think is that you can jump straight into it. Now, A frame has a whole bunch of examples to allow you to get involved with it straight away, and there’s this wonderful component that you can add in called a sky box, all right? It’s almost literally … Let me just fire up. I built a call thing. Well, I didn’t build a call thing. I built a thing. Not necessarily going to say it’s cool. Yeah, it’s called a sky, so you know how I’ve dissed [amp alone 00:05:12]. I’ve questioned the usefulness of amp and the ideas behind it, so this has a very similar idea, so you’re loading in Java script at the top of the page. May as well.  We have locking script.  Pretty sure it is. Then instead of using regular HTML tags you’re using kind of like components I suppose, so everything in amp is predefined or prefixed with amp-image or amp-iframe.

Everything in here with the components is prefixed with an A for A frame, so you can build a box which is A-sky. Give it an ID. Give it a radius. Give it a source, and then it will effectively build a sky for you which is well cool. Now, the cool thing that I did with this if you go on to aframe.io and we can try it out. There’s an example which is a 3-D 360 image. This is how simple it was. It was lunch time yesterday, and I thought look I just want to try this out. I want to see how quickly I could build something that might be somewhat helpful. I jumped on and we have at work some clients, and as you would hope, and the clients are really keen on making sure that new employees get a really good feel for what it’s going to be like to work at the place.

All right, and that’s great, so you can have tours of your office which is fine, or you can show pictures, or you can show a video of the office and stuff, but sometimes things like if you’re working in construction, so we have like for a couple of construction companies, you can’t take people onto construction sites and show them because you’ve got it go through a whole bunch of safety rigmarole things, so it’s not really going to fly. Some places are super secure, so you’re not allowed to let people in, so even though you could show them the office, and there’s nothing super secure on desks or anything you’re not actually allowed to let them into the building to begin with.

Sometimes people just won’t travel, right? If you’re doing an international placement, or if you’re moving from one side of the country to the other, and you want to get a feel for what it’s like then, I mean, it’s a long way to go just to get a feel. I thought well it would be cool if you could kind of get an immersive experience of what it’s like in an office. I downloaded … For this you need a 360 degree picture, and so I didn’t have the camera. You can get a camera, and what Ada recommended there’s a Samsung Gear 360. It takes some pretty sweet shots. Like, it looks beautiful. It does video I believe, or maybe it’s just … Could be just … I’ll check that. It may not do video, but it definitely does some beautiful pictures. It’s 349 quid, so not cheap. Not something that I’m just going to drop 350 quid on to try out, but I probably will now that I’ve seen how cool it is.

I’m not going to tell you to go and do that, but if you do have a phone which I’m sure most of you do there is I think available for the iPhone anyway which is what I had. An app called 360 panorama, and it’s by Occipital. It was a pound 50, so 350 pounds verse a pound 50. I went with the cheaper pound 50 for a change, and essentially it lets you kind of do a panorama like you can do with your iPhone now, but it sets like this globe grid behind it to begin with, and then as you hold you phone over a particular area it records that part of the image and then adds it to this grid, and you basically do a circle and then you look up and then you look down, and you’re done. You have this amazing 360 … You have this amazing … I just muted my headphones instead of the microphone, sorry. You have this amazing 360 view. This is great.

Now, from that you just download it and put it into an images folder like you normally would a regular image and then you’ve got this picture which you can then paint on the sky box, all right? This is amazing, so you can get started with this just having a 360 image, and I think it’s like about 30 lines of code, but for me it was like a copy and paste and update one image reference. It was really cool. What I did is I downloaded this thing and then I took a look around, and I did a 360 view at my desk. Then I went into our kitchen, and I did a 360 view of our kitchen as well. Then once I was finished doing that I downloaded the picture and then I chose the gallery option, so the gallery option is like the 360 image, but it allows you to have multiple images.

What this does is it just gives you the ability to put like just two boxes like a thumb nail to say I want to view that one, and with web VR because you don’t have a mouse or a pointer or a clicker you can write into it that you want a little dot which is kind of life your reference point, or it’s like a pointer. Then if you move that dot onto a square that you’ve designated as a link and you stare at it for a little bit it activates that as if you were clicking on it which is super cool, right? Then the click is you can just control the click event like you do with Java script for normal click events. I’ve got these two boxes now which one says office, one says kitchen, and you look at the kitchen box, and it sets the sky box. The A-sky to use the 360 picture of the kitchen, and then if you look at the office box then it runs Java script and that sets it as the office one.

Now I’ve got this 360 immersive experience with … I mean, I’m going to say it’s not the best picture in the world, but it gives you an idea of what the office is like. Yeah, so now we’ve got this thing, so if I was to say hey you should come and work for us. This is what our offices look like. This is what our kitchen looks like. This is … Maybe not toilets, but you know just showcase some of the different areas. If you’re in a building construction site you can showcase those different areas there. If you’re selling houses why not showcase the different rooms the house has?

One of the things I want to do with it is I’m Australian. I live in the UK. I have a lot of family back in Australia, family and friends, and they’ve never been over to visit. They don’t know I I live. They don’t know what our house looks like. They can’t picture like what a garage is like or a backyard or anything, so I’m going to go … Especially my dad who’s technically not there I would say to be nice. Sorry, dad.  You’re not the most cynical person. The most practical person in the world. He can build. He’s build a barge. He builds some cool stuff, but computers he’s not a fan. I can now do these pictures in rooms and set this up, and my brother who lives over there with him still can give him this phone. He can put on this cheap Google cardboard headset, and he can be immersed. He can see pictures of the kids. He can be involved in it.

It’s really cool, so anything you can do with Java script you can do. You can import objects. You can, if you’ve done a bit of SVG work and sort of moving SVGs around and animations and stuff this is all possible with this A frame. I highly, highly recommend it. We talked about responsive design. We talked about how we’re going to make our information and make our content respond to the different devices that we’re consuming it from. Well, we’ve been looking at screens. We’ve been looking at windows, so I remember someone describing a screen as amazing, but it’s kind of like if you take a picture and then you put it in a frame. That’s kind of … That’s what you get. You can look at it, but you can’t experience it. You can take a video of something which is better, but it’s still a picture, and it’s still a frame, and you’re looking at it through a 16 by nine window. What you want to do is you want to put your head through that window and be there and experience it.

If we can create content which allows people … We are creating content, but we want to be able to create content that allows people to experience it in that way, and at the moment the web can now do it, so with this web VR we’re able to start doing it. Now, a couple of things which I’ve learned over the last couple of days and from the talk is text in web VR is not a great idea. I still want to wrap my head around that a little bit more, but I just have really advised against using huge amounts of text. That causes a bit of an issue if we’re creating loads of content on our web sites, and we want people to consume it, and then we said we can’t use text then we need to find other ways for people to be able to do that. I need to wrap my head around that a little bit more. If anyone has experience on web VR and large amounts of text or being able to consume content, text content, in that way, I’d love to hear from you and learn a bit more about that.  I’ll be updating anyway.

I kind of want to do a responsive, so I’m doing the redesign of the responsive design that is coming along nicely. I kind of want to add a web VR version of it as well, and see how that just might look. I think that would be quite cool. Text, not so great. The other thing is you need the camera, but like I said we’ve got this fall back. You can use an app to do that instead. There’s a whole bunch of different cameras that you can get a hold of, but apparently that one is the best one. The Samsung 360 VR. We also at work we did this project with an energy company, and we built this 3-D model of this island in a futuristic city, and the 3-D modellers, we only got a 2-D picture of it because we were putting it up on a website, and we kind of made it float like an island because it was a transparent PNG, but what we really wanted to do is make it so that people could experience it. They could turn it around. They could zoom into it like a web VR process.

I’m going to get that file back.  I’m going to trial it out and see what it’s like. Now, when you’re working with 3-D objects, I asked Ada and she said, “What you want to do is you want to keep the polycount under 100,000 in total.” I don’t know what that means, but just that’s a tip, right, so someone says because that was a question the 3-D artist asked me. They said, “What polycount should it be?” I don’t know. What is a polycount? Under 100,000 is what you want. The other thing that the 3-D artist asked for was what file type did you need it in? For that, again, I have no idea, but you can work with objects so .obj or .gltf. Again, I have no idea what that means, but if you’re going to grab 3-D objects then use those ones as well.

That’s it for this week. Yeah, like I said, highly recommend. Go check out Ada.is and read about what Ada is talking about. Go use Aframe.io  and just trial something. It’s pretty cool. People will be pretty impressed, and if you want to have a look at the little gallery that I built you can go to vr.Simplethin.gs/gallery.html.  I’ll put links up in the show notes, and you can check that out. See where I work. That would be kind of cool, but that’s it for this week.

Next week I think … Is it next week? We’ve got a guest coming up which is super cool and very awesome. If it’s not next week it is the week after. Definitely the week after we have Una Kravets which is going to be super cool. She runs a podcast called Web Tools with another guest, and I’ve promised her that if she does a song at the beginning of theirs about what she’s going to talk about, so I’ve said that I will sing a song for Una when she comes on which will be an interesting way of going about it. I’m looking forward to that.

Yeah, until then let’s go for a streak of three, and I will see you next week. Until then stay responsive.

Cheers. Bye now.

RWD Podcast 57
23:02
2017-09-22 13:53:31 UTC 23:02
RWD Podcast 57

RWD Podcast 56
33:51
2017-09-22 13:53:31 UTC 33:51
RWD Podcast 56

Show Notes 

ESPN Senior Front End Developer

An awesome opportunity to join a wonderful team and push the boundaries of what is considered story telling on the web. Apply Now.

@supports will change your life

View article

Charlotte Jackson shows just why @supports can be so valuable for the sites that we build.

RWD Survey

Take it now. It’ll take 60 seconds TOPS.

RWD Podcast 55
18:10
2017-09-22 13:53:31 UTC 18:10
RWD Podcast 55

RWD Podcast #54
25:41
2017-09-22 13:53:31 UTC 25:41
RWD Podcast #54

Sponsor

  • URL: http://mobxcon.com
  • Conference day: September 9, 2016. A Friday.
  • Location: Berlin, Kino International (the same old cinema we were in in 2015)
  • Speakers: Kim Goodwin, Andy Budd, C Todd Lombardo, James Archer and several more.
  • Topics at MOBX 2016: Real world RWD projects, conversational interface, chatbots, IoT and the vision of Zero UI. Design Leadership, Designing with Scenarios and more…
  • Promotion code for your listeners, followers, readers: rwdpodcast  (that’s a 60 euro discount per ticket)

Did everyone see that? USE PROMOTION CODE ‘rwdpodcast‘ for a €60 discount per ticket.


RWD Podcast #53
16:20
2017-09-22 13:53:31 UTC 16:20
RWD Podcast #53

Show Notes

Browsersync

I can not believe this is something I haven’t shared with you all, yet here we are. It’s unusual for a tool to make it to the headline but this is such an important tool in the web workflow that it needed to be prominent…. and y’know it’s totally free and awesome.

BrowserSync essentially allows you to test your local dev copy of your site (or live site) across a network of devices, and what you do on one device is immediately visible on the others. Your scroll, click, refresh and form actions are mirrored between browsers while you test. AH-MAZE-ING

New <video> Policies for iOS

When we wanted to share videos on the web we would convert them to animated gifs, and now that animated gif’s are a big thing on the web we are taking those gifs and converting them to videos in process of becoming more performant (a mp4 video of a gif of a video is smaller than the gif). Now safari
are allowing for <video>
elements to auto play IF there is no audio track or if the track is muted. Check out the list of policies Webkit are including to ensure this isn’t abused or annoying for the user.

Offline Google Analytics Made Easy

If you’re jumping onto the Progressive Web App (PWA) bandwagon, and well you should, then you probably want to track analytics when your users are offline as well as online. Now with this library shared by Google you can stored the users actions in IndexDB and send them once the users is online
again. Is there anything Service Workers can’t do???? (rhetorical… I know there’s things they can’t do).

RWD Podcast #52
23:02
2017-09-22 13:53:31 UTC 23:02
RWD Podcast #52

Sponsor

  • URL: http://mobxcon.com
  • Conference day: September 9, 2016. A Friday.
  • Location: Berlin, Kino International (the same old cinema we were in in 2015)
  • Speakers: Kim Goodwin, Andy Budd, C Todd Lombardo, James Archer and several more.
  • Topics at MOBX 2016: Real world RWD projects, conversational interface, chatbots, IoT and the vision of Zero UI. Design Leadership, Designing with Scenarios and more…
  • Promotion code for your listeners, followers, readers: rwdpodcast  (that’s a 60 euro discount per ticket)

Did everyone see that? USE PROMOTION CODE ‘rwdpodcast‘ for a €60 discount per ticket.


Show Notes

Hey everyone and welcome to another edition of RWD Weekly.

In the show this week I discuss both Beacons and HTTPS along with

  • When you might use them
  • How you can implement them
  • What you and your customers get out of it

Physical Web & Beacons

This week I found out that you can enter the physical web world without the use of one of the beacons.
– First beacon from the TheWeb.is
– Used it to locate my keys.
– Idea is that it just broadcasts a URL. Great for discoverability.

from the article:

Not convinced this is the future? Well think about this: what if you were giving a presentation, and could bring along a beacon that sent out a link to download the slides for your presentation? Or what if you owned a sandwich shop and wanted customers to easily access a link to the mobile app for online ordering you spent so much time building? Or wanted to push an updated agenda link to conference attendees as they walked in the door? The possibilities are endless.

There always seems to be a catch. Luckily this one isn’t too bad: just note that you can only send secure web pages (HTTPS), and the URL is limited to 17 characters because of Bluetooth packet size limitations.

If your URLs are too long then use a URL shortening service.

Everyone in the audience to turn their Bluetooth and Location on and for iOS users to add Chrome to their notification center (I’ll explain why they have to do this later), then I ask to raise hand if they got the URL on their phones.

– android users automatically get notifications when a Physical Web is within range

– iOS users first need to add Chrome to the Today section in their Notification Center. There is a great step-by-step tutorial for that on the Physical Web website.

HTTPS

The other great story this week is that the web has now doubled in the number of HTTPS websites being served in the past year.

This is amazing and I think it’s down to a couple of reasons.

  1. it’s a lot cheaper to go https now.
    1. Lets Encrypt provide free SSL certificates
      – with that a lot of other providers have driven their prices down
      (there was never a reason to set the price so high, it was just something we did).
  2. Large services are serving them by default
    1. GitHub Pages
    2. WordPress
  3. Services such as Cloudflare make it super simple and free.
  4. Carrots — Not the ones that rabbits and reindeer eat, but ones that compliment the stick.
    If you want to take advantage of things like Geo Location, the speed of HTTP2, the amazing-ness of Service Workers and progressive web apps… even serving your sites on physical web beacons… then they need to be on HTTPS…

RWD Podcast #51
22:27
2017-09-22 13:53:31 UTC 22:27
RWD Podcast #51

I talk about using a combination of your own CMS, RSS feed and something like IFTTT to post it for you. I use IFTTT for posting articles to Surf the Dream, saving images from Facebook, posting news articles to Facebook… although now I’m trialling Zapier.

Speaking of WordPress, I also delve into some issues that I recently came across with a clients site.

  • changing URLs – why that can be bad
  • Links don’t work
  • no natively support 301 redirects
  • Page templates failing

RWD Podcast #50
15:49
2017-09-22 13:53:31 UTC 15:49
RWD Podcast #50

RWD Podcast #48
33:53
2017-09-22 13:53:31 UTC 33:53
RWD Podcast #48

This week we take a quick preview of the up coming RWD Summit and offer up a discount code for 20% off (but you have to listen to get it, of course). While on the conference band wagon we also talk about the CSS Dev Conference opening up for proposals… get your talk in now.

Google release their new RWD resizrvery similar to another tool we’ve seen.

Finally we talk about content modelling (with Jekyll) and how it makes it a lot easier to roll out things like Apple News feeds or AMP pages if you decide you want to push your content out there as well. Speaking of AMP pages, I also talk through how you set up an AMP page properly and the bits you need to include (but are not told about).

RWD Podcast Episode #47
68:52
2017-09-22 13:53:31 UTC 68:52
RWD Podcast Episode 46
30:26
2017-09-22 13:53:31 UTC 30:26
RWD Podcast Episode 46

RWD Podcast Episode 45
26:42
2017-09-22 13:53:31 UTC 26:42
RWD Podcast Episode 45

RWD Podcast Episode 44
35:36
2017-09-22 13:53:31 UTC 35:36
RWD Podcast Episode 44

Hey, everyone, and welcome to Responsive Design Weekly Podcast, episode number 44. My name is Justin Avery. I am your host and the curator of the Responsive Design Weekly Newsletter, a weekly newsletter all about responsive design. A whole lot of cool stuff has been happening since the last time I ran one of these. This is episode 44. The last 2 episodes were all about the presentation that I gave over in Germany, in Berlin, and since then, there&rsquo;s just been so much happening, tons, and I just wanted to share a couple of those things with you as well.

This week, we don&rsquo;t have a sponsor, but what I will shout out is that we&rsquo;re finally getting the Responsive Design notebooks printed up, so just in time for Christmas. Although, it was supposed to be at the beginning of this year. I&rsquo;m doing a set of 3 notebooks that you can get a hold of, so the 3 notebooks will be covering the 3 tenants of responsible design or responsive design, so we&rsquo;ll have our fluid grids, our flexible media, and our media queries as well.

Each of them have 36 pages inside and a little quote in the back from some of the leading thought people, our thought leaders, so there&rsquo;s a little bit in there from Brad, a little bit in there from Ethan, and also a little bit from the man who I think started this on this path a long time ago which is Mr. John Allsopp with his “Dao of Web Design.&rdquo; Yeah, so that&rsquo;s coming up. If you go to backpocket.co, backpocket.C-O, you can put your email address in there and be one of the first to find out when they come available. There&rsquo;ll be a limited edition of 200 available in the sets, [00:02:00] so be quick, be very quick, and grab it. Yeah, more about that in the weeks to come.

Recently, I was lucky enough. I head over to the States for the Adobe Max Conference. It was a 3-day conference. I was there for a couple days either side. It was just amazing. It was really cool. They put on a huge massive big event. The party that they had there, it had donuts. They had a doughnut wall, which I&rsquo;ll put a picture up in the show notes. It was crazy. They had some really great keynote speakers, and some of the things that they were sharing about where they&rsquo;re heading with the products was great. They had some really good product demonstrations.

I think they&rsquo;re doing &hellip; Adobe are actually doing a pretty good. Given where they were for a little while, they&rsquo;re doing a really good job in listening to what you and I as web designers and web developers, what we need and what we&rsquo;re missing in our day-to-day workflow like the web is continually changing, so is the way that we&rsquo;re building, and we need our tools to change along with us as well, and it&rsquo;s just becoming &hellip; I think their focus has been a lot more around collaboration, but they&rsquo;ve also had some pretty cool stuff improved as well, and there&rsquo;s a new product coming out, which is a project called “Comet,&rdquo; which I might talk about in a little bit as well.

Yeah, like all great conferences have &hellip; It&rsquo;s not so much about everything that you see and you&rsquo;re presented, but it&rsquo;s about the people as well. This one, the Adobe Conference was no change from that, so there were some amazing people there. I got to actually meet the people from Comet and who are working on it. I might as well talk about it now. [00:04:00] Comet is a new kind of prototyping tool that Adobe are coming out with. It gives you the ability to mock up designs quite quickly and allows you to reuse patterns, so if you have a particular pattern.

Just think we&rsquo;re doing a &hellip; we&rsquo;re building Pinterest, for example, and we want to mock up how that might look, so you might have card view or you might have a multi-card view. You can build out 1 card, and then option-click and create a second card, but then you can turn that into like a module. As you click and drag the &hellip; if you were to make it larger, so wider or taller, instead of it stretching the width of the card itself, what it would do is it will turn into like a repeater, so it will repeat it to the right, and it will repeat it low down as well.

The other cool thing is that we usually design these things with Lorem Ipsum. You can put dummy data in there, so if you type a name into a name field and then something into a description field, it can randomize stuff, so it knows that you&rsquo;re putting in name, so it will put in random names. If you have a first name and second name, it will put in random first names and second names, so you can get the feel of like, “Is it going to go over 2 lines? How is the design going to look if someone&rsquo;s name is really, really long?&rdquo; They even extend it further past that where you can drag &hellip; you can have a whole bunch of images sitting in your library, and it will automatically pull those images into the little pins as well, so you can see how real images will look.

The great thing though about that is when you extend it further and you can go &hellip; so if we were redesigning Pinterest in this example, we could go to pinterest.com, and we could have a look at a board, and I could &hellip; from Comet, I could like &hellip; I can&rsquo;t remember what the command was, but just say it&rsquo;s like a right-click on the title, and then you go over, so you&rsquo;ve got a page in your design [00:06:00] full of these cards. Right-click on one of the titles, go to pinterest.com, and select the title of a range of cards in a view as well, and it&rsquo;s smart enough to look through all the HTML, find out what elements that title is, and then pull back all of the content, and populate your design with the content on the website. If you were redesigning a website, you can redesign it with real data as well, which I thought was super cool, but that&rsquo;s just like one of the small things.

There&rsquo;s another guy who I hang out with quite a bit too, Jay [Messing 00:06:38]. He&rsquo;s over based in Germany. He&rsquo;s the guy who came up with the Open Device Lab or one of the guys that came up with the Open Device Lab. The whole concept of the Open Device Lab, we want to test on as many devices as possible, right? We build these websites, they&rsquo;re responsive. We need them to work. We build them, so that they work across a variety of devices, but then most of us, a lot of us will just test inside of Chrome or Safari, and open up DevTools, and move things back and forth, but you really need to get on to devices to check out how they actually feel and how they interact with the site. It doesn&rsquo;t make sense. Is it comfortable?

Now, buying devices is really, really expensive. Really expensive, so this Open Device Lab allows you to go and look at a world map. You go to opendevicelab.com, and you get to see a world map, and you can see where there are device labs near where you live. You can go to that device lab, and you can book some time, and go in, and test your websites on someone else&rsquo;s devices. It&rsquo;s an open device lab. You don&rsquo;t have to pay for any of these.

Equally, if you&rsquo;re a company who is fortunate enough to be able to afford all these devices and you want to share that with the community, you&rsquo;re not using them all the time, then you can register yourself on [00:08:00] Open Device Lab. Register the devices that you have, and then other people can come, and book time with you, and sit down, and test their websites using your devices, so a really, really cool idea.

Who else was there? I caught up with Brad Frost. He was there, and he introduced me to one of his friends , Dan Rose. Dan Rose is &hellip; he was a really cool guy. We hung out a bit. We went to the Kings&rsquo; hockey game. I&rsquo;m from Australia, so I don&rsquo;t actually think what ice hockey is like and about, and so I went in a t-shirt, and it was really cold. I didn&rsquo;t think that perhaps the stadium needs to be chilly to keep the ice from melting, so I froze for most of the game, but he&rsquo;s really cool, Dan.

He runs a website called “Photoshop Etiquette,&rdquo; so photoshopetiquette.com, and you should all go and check that out. If you are a designer and you work in Photoshop, go and check this site out. It tells you how not to be a pain in the butt when you hand your designs to a developer. It gives you tips on how you should be adding layers, how you should set things up, how you might be able to set your workspaces up or your outboards. If you&rsquo;re a developer, go and check it out. See how the designers will and can lay their Photoshop files out to make your lives a lot easier as well. Yeah, definitely go check it out.

He&rsquo;s done a lot of really cool work around Photoshop and workflows, wrote a book for Adobe called “Responsive Design with Photoshop.&rdquo; He does not advise you to design responsively inside Photoshop. You can&rsquo;t design for every single device and every single break-point unless you&rsquo;ve got a hell of a lot of time, but the book goes through and explains when [00:10:00] &hellip; what you should be doing in Photoshop, and where you should be jumping at, and trying to get in the browser, and get into the code as quickly as possible, so a lot of experience around that sort of area as well.

Now, I&rsquo;m going to try and get Dan &hellip; or Dan, he&rsquo;s going to come on the podcast in the next few weeks, and we&rsquo;re going to talk about that. We&rsquo;re going to talk about a responsive workflow, and he&rsquo;s going to talk through Photoshop and share his experiences of how he designs and how he works with developers and other designers who have more &hellip; so other designers that might have a lot of dev skills like a lot of HTML and CSS skills, and also, how he works with people that have limited dev skills who have never used HTML and how he works with them in different ways as well. He is primarily a Photoshop guy. A designer, but he does have his like responsive badge coding up site, so it should be a really good episode. I&rsquo;m really looking forward to that as well.

There&rsquo;s another guy there called “David Blatner&rdquo; as well, and he&rsquo;s more of an Illustrator and InDesign guy. He runs a couple of different conferences, and I think even like InDesign magazine or something. I&rsquo;m not a designer. I&rsquo;ve never heard of that magazine before, but he was really a nice guy, and we were talking about &hellip; because he was into InDesign and stuff like books can be written through InDesign, all these design and laid out type set, and we&rsquo;re talking about bringing books into the browser to make the content universally available across the world or universally.

It really struck a chord with me like this conversation because I&rsquo;ve been working on a side project of taking a PDF version of an old book, a science-y book, a universe-based book, and I&rsquo;m trying to put it across to HTML and CSS to make it more accessible [00:12:00] for everyone to be able to access it. It&rsquo;s an unsolicited side project, but I&rsquo;ve really enjoyed working on it. I want to make it offline and available for everyone.

I started doing a bit more research around it and seeing some other books as well, and there&rsquo;s a whole bunch of really great examples where authors publish books. They&rsquo;re for sale. You can download the PDF. You can download the EPUB version, but &hellip; and they might still be in print as well, so you can get a hard copy, but they also provide all of the content online for free. If you want to find out about it, then you can go and learn about it, but if you want to buy and you want to contribute to them, then you can buy it.

This one is learnpythonthehardway.org. Aaron Gustafson is &hellip; just released a second or is in the process of releasing a second edition of the “Adaptive Web Design&rdquo; book, but if you go to adaptivewebdesign.info, you can either pre-order the second edition, or you can read the entire first edition on the web as well. Brad Frost is writing a book, “Atomic Design in the Open.&rdquo; As he writes each chapter, it gets added to his site. That&rsquo;s at atomicdesign.bradfrost.com. Mark Boulton as well, he wrote &hellip; Jeez, I can&rsquo;t remember the name of his book. “The 5 Simple Steps: Web Design.&rdquo; I&rsquo;ll put it on the show notes, but that is another one (ed: it was actually Designing for the Web).

Lara Hogan with “Designing for Performance&rdquo; so designingforperformance.com. Again, there&rsquo;s a button there to buy it, but otherwise, you can read the whole thing online as well. Also, there was one I was speaking to, a former podcast guest, Stephen Hay. He really gets into this sort of stuff in terms of manipulating Markdown. [00:14:00] He uses a tool called “Dexy&rdquo; to work with his content, and he mentioned one called “practicaltypography.com.&rdquo; That&rsquo;s something that I&rsquo;m looking at, at the moment, so this concept of writing content in one place like in a Markdown sort of way.

I should point out that people are &hellip; that like Aaron, Brad, Lara Hogan, they all used Jekyll, I suppose. Like a static site generator, they created their content in Markdown, and then they ran it through a static site generator, which punched out a website at the end of it, which they then went through and hand-coded all the stuff that they want to, but the whole idea of like writing once and publishing everywhere is like the idea that we have with responsive design as well. We have to have it in 1 centralized location.

Anyway, this “Practical Typography&rdquo; book is just that. It&rsquo;s written, and then it&rsquo;s using a thing called “Pollen&rdquo; which is able to push it to EPUB. It&rsquo;s able to push it to PDF. It&rsquo;s able to push it to .MOBI. It&rsquo;s able to create a book as well. I&rsquo;m going to look into that, and try and get something, which we&rsquo;ll be at a &hellip; republish this, this thing. I&rsquo;m only really concerned about doing the HTML version because the other versions have already been created and are being sold. Yeah, it&rsquo;s really, really interesting, and that&rsquo;s the side project that I&rsquo;ll be working on over the next couple of months anyway, so that&rsquo;s excellent.

One of the things I&rsquo;m trying to do is mostly make these, the books, available offline. When I was going to fly over, I wanted to do some work on this side project, and it involves a little bit of jQuery because I&rsquo;m a little bit terrible with JavaScript. I can get by with jQuery, but I often have to refer to the documentation, and that&rsquo;s hard to do at 30,000 feet.

Now, [00:16:00] I haven&rsquo;t used &hellip; I didn&rsquo;t have Dash installed, which is apparently the go-to tool and what I should have, but I went to a site called “devdocs.io,&rdquo; and that allowed you to save different development documents offline, so when you went back to that URL, all of those docs would be available to you to check out like I had problems with my jQuery I couldn&rsquo;t work out, and so I went back to devdocs.io on the browser in the plane at 40,000 feet, 50 &hellip; whatever. However high you fly. I typed in the URL, and then bam, I had all the information that I needed.

I really love that idea of not just every device, we&rsquo;re creating content for every device in every scenario, but also, every data connection. If you&rsquo;re not connected to the network, is your content going to be available anyway? That is something that I think is the next thing that we&rsquo;re all working towards. The other thing that I&rsquo;m working towards is like making things more performant. Recently, the last couple weeks anyway, they had the release of AMP, so the Accelerated Mobile Pages. This is the new thing that Google kicked out there, and the whole idea is that it makes things faster.

When love when things are fast and when things load fast, but I had a carpool of problems in understanding what they&rsquo;re actually trying to do. For one, the A-M-P Project or the AMP Project requires you to create a new template layout for your site. It forces you, and I do mean force, so you to include this. You have to include the AMP JavaScript in the header of the document. If the AMP JavaScript doesn&rsquo;t load, then your page doesn&rsquo;t load. For me, that&rsquo;s against the [00:18:00] natural way that we try and get people to build things like, “You should build them progressively, you should make your content available, and then you should lay things upon it.&rdquo; To come up with a solution to a faster &hellip; to making faster websites and then forcing this JavaScript in there, it goes against the grind a little bit.

The other thing that it requires you to do is you need to use only a subset of HTML elements, and a lot of those elements then get renamed. For instance, if you want to include an image within your AMP document, then you need to not use the image tag. You need to use “AMP-image&rdquo; as the tag instead, and then there&rsquo;s a bunch of HTML tags that you are not allowed to use. I can&rsquo;t recall all of them. I&rsquo;m going to say things like you can&rsquo;t include things like iFrames. Basically, they&rsquo;re trying to make it as performant as possible, so they&rsquo;re stripping out things that might counteract to that performance.

Now, for me, it &hellip; this approach is like going back to an MDOT site. All right? In the past, we used to have desktop sites and mobile sites, and the mobile would have an entirely different structure around it. It would have different content in it, and it would only be available for mobile phones. This feels like the same thing. It feels like I need to create a new document to house new content within that just to take advantage of this AMP process.

Now, you can use &hellip; you can do it though like the focus I think shouldn&rsquo;t be about, “Let&rsquo;s get on to AMP, and let&rsquo;s start booting our pages there, and then that will solve our performance problems. Then, we can make our other site really, really big and have loads of images, [00:20:00] and it doesn&rsquo;t matter.&rdquo; That&rsquo;s not the approach like I would focus upon making your site as bleeding fast like bleedingly quick as possible. Once you&rsquo;ve done that, then you can look at your AMP stuff because effectively, AMP is just a way of making the web faster, so if you just made your website faster, you wouldn&rsquo;t actually need to use it.

Now, the good thing is it&rsquo;s not that difficult to set up, so &hellip; and complain a little bit about it, but effectively, if you already run an RSS feed, this is essentially what you&rsquo;re doing. All right? RSS takes the content of your page, and then repurposes it within an XML structure effectively, and then you can customize what you want in there. AMP does the same thing, so I created a new template. I created a new layout for the content area. The CMS that I use has like a template as a wrapper, which would be the header, a HTML head, body tag, and then closing body tag, and closing HTML, and then a layout wrapper, which then just lays out how the page structure would normally look.

For me, it took me an hour to set up. I didn&rsquo;t include any styles within it because I didn&rsquo;t want to copy and paste styles, and spend time. It was just to get it going, and I didn&rsquo;t mock around with the images at all. I included 1 image at the top of the page, which was like the article feature image. Imagine that like as a thumbnail kind of image, so I used the AMP image for that, but otherwise, I didn&rsquo;t worry about converting image tags within the body of the content itself into AMP image tags, so I don&rsquo;t know how that&rsquo;s going to break.

Like I said, it&rsquo;s like using RSS. If you&rsquo;ve already got that, it&rsquo;s not too much of a step. [00:22:00] The only other thing you need to do, you need to put a meta tag in the head of your document, so of the original document on your website. You put in a meta tag, and I think you do a “rel,&rdquo; a “rel AMP.&rdquo; I&rsquo;ll put it in the show notes to relate it, and then you give the URL of the AMP version of the page. Then, on the AMP version of the page, you point back to the canonical version of the article as well, so it&rsquo;s cool.

Again, I&rsquo;m not really sure it&rsquo;s the greatest thing in the world, but for an hour&rsquo;s work, at least it&rsquo;s up there. You can check it out. I don&rsquo;t think I&rsquo;ve set it up on the podcast page, but if you do go to one of the articles page, if you go to “Articles&rdquo; in the menu, and then check out one of the articles, then you&rsquo;ll be able to see the link to the page, and then you&rsquo;ll be able to grab the link for the AMP page, and then open that up, and check that out as well. How you register it with Google, I just assume they&rsquo;re going to index my pages, and then find that canonical link, and then go and index the AMP pages, but I&rsquo;m not actually sure. If anyone does now how that might happen, do let me know.

Google, Google do some cool things. This is one of them. I know they&rsquo;re trying to make the web faster. One thing that they did to make the web faster was they removed that 300-millisecond tap. If you had a mobile, a touch device on a webpage, it would delay 300 milliseconds on a touch to ensure that it wasn&rsquo;t going to be like a touch scroll. You put your thumb on the screen, and then you just push it up, and that&rsquo;s a scrolling action. If every time you did that and you were hovering over a link or a button, you don&rsquo;t want to fire that, and then just go to a different page every time you&rsquo;re going to scroll. That would be super frustrating.

The browser vendors put in [00:24:00] this delay to see if you like touched like down and up, and then it would do the link after 300 millisecond. Whereas if you left your finger there and moved it, then it would know it was a scroll event, and then it would scroll the page for you. On any device or any website on a Chrome browser on Android, that has &hellip; or the viewpoint meta tag set to width equals device width, then it removes that 300-millisecond delay when clicking and still avoids the incident of accidentally clicking through to links when you&rsquo;re scrolling as well.

Now, WebKit have just announced that they&rsquo;re doing the same, which means Safari users like us &hellip; yay, or us. I say “us&rdquo; because I&rsquo;m an Apple person. We&rsquo;re going to get that on the iPhones, which is awesome, but one of the problems is it&rsquo;s been released now, so they say, “Yes, we&rsquo;re going to do it now,&rdquo; but the release cycle for Safari is just diabolical. They release it once a year when they release the update to the operating system, so we&rsquo;re not actually going to get it until like September of 2016. Thank you for that, Apple. You guys rock in the most sarcastic way possible. It is super like frustrating to have this sort of things. This sort of thing is like so close, but then not able to actually take proper advantage of them.

Fortunately though, our great friends at the FT, the Financial Times labs, they&rsquo;ve come up with a lovely little script which allows you to bypass the whole 300-millisecond delay, so if you go to GitHub &hellip; GitHub. Is there a website called “GitHub?&rdquo; I wonder. If you go to github.com/ftlabs/fastclick, [00:26:00] it will remove that 300-millisecond, 350-millisecond delay from clicks and make your websites just feel so much more responsive. Definitely, go and check that out. It requires JavaScript to work, but hey, so does AMP, so sometimes. If it doesn&rsquo;t load, then you&rsquo;re just going to get the same use case, the same experiences as not loading it and you&rsquo;re not losing out on anything.

Now, that is designed to make it feel faster, make the web feel faster, and when we say “feel faster,&rdquo; we&rsquo;re always equating this to, “How does a native feel? Like how much faster does a native app feel?&rdquo; It feels native. It&rsquo;s smooth. It&rsquo;s 60 frames per second. I was having a long conversation/argument with a really good friend of mine on the way home from the football the other day. He is brilliant. He helps me with my hosting. He gets my website running super fast. He&rsquo;s been a massive help over the last couple of years, but we&rsquo;re talking about this new app that was coming out and how it didn&rsquo;t have a mobile side. It was native only.

We know that Instagram went this way for a little while, but I&rsquo;m sure even from the get-go, Instagram still allowed you to view pages. You just couldn&rsquo;t do anything, so if I took a picture of something, I could share it with someone. If they didn&rsquo;t have Instagram, they still got the web version, and they could see the image. Now, I want to say if they didn&rsquo;t have that maybe at the very beginning, it was a real pain in the butt because someone would send a link or post a link to their Instagram image, and then you&rsquo;d go there, and it&rsquo;d be like, “Bop bow, you need to install [00:28:00] Instagram,&rdquo; and that&rsquo;s super frustrating like really, really frustrating.

Anyway, so we&rsquo;re having this chat, and we&rsquo;re talking about this new app, and it&rsquo;s only native, and they&rsquo;re not going web because they don&rsquo;t feel as though web provides a good enough experience for people and that the web is dead. Now, not his words. He&rsquo;s recycling the words, but yeah, like the web is dead, and that native apps were the future, and the web will die this death.

Now, I remember seeing a presentation recently where they put up all the wide articles that mentioned that the web was dead all the way from like &rsquo;98, &rsquo;99, 2001, 2003, 2005, 2007, 2009, 2011 like it just keep coming up, “The web is dead. The web is &hellip;&rdquo; this time, definitely dead that native is going to kill it. Whenever I hear it, I just giggle to myself and like, “Yeah. Okay. Fair enough. The web is going to die. Sure. Native is the future.&rdquo;

I can see their point. It&rsquo;s just going &hellip; it&rsquo;s a bad user experience. They want to build their brand on a fast, sleek experience, but I think the experience of clicking and receiving a notification about something, and not being able to access it unless you have a specific phone or a specific operating system, or if you have enough space on your phone to be able to download the app, if you have a good enough connectivity to warrant downloading 50 megs, if you have a good enough connection. Not just like the speed of the connection, but how&rsquo;s your data plan?

I don&rsquo;t know how big this app was, but I&rsquo;m talking about like 50 or 100 meg. That seems a lot to me to be able to just view some content and a few pictures, but you have to download it like you [00:30:00] still have to download it. There are no times ever when you receive something that you have to download the internet. You never have to download the web. All right? Every device comes with a browser. If it doesn&rsquo;t have a browser, it probably doesn&rsquo;t connect to the internet, and you probably want to be able to get your native experience on that device as well.

For me, he was like dangling a massive red flag in front of my eyes that&rsquo;s like waving in front of me just waiting for me to charge, and charge I did. I stuck up for the web, and the way of building things responsively, and also that it doesn&rsquo;t need to be slow. We have things like this FT click thing. Now, I agree, it will be &hellip; things will be sleeker on native because you have &hellip; you&rsquo;re closer. You&rsquo;re like 1 layer of obstruction, closer to the operating system. You can tap into &hellip; just things will work faster that&rsquo;s naturally. It&rsquo;s a natural thing.

In the talk that I did at the MOBX Conference, I don&rsquo;t understand why you would have one over the other, right? I can understand why you would have a website over native apps because it&rsquo;s universal and not everyone is going to download the native app, but I don&rsquo;t understand why you have a native app without a website. There&rsquo;s no reasoning around it. You&rsquo;re just cutting off your nose despite your face by saying, “This has to be special. Only special people can access this particular content. I don&rsquo;t really want to access the universal audience that I have at my fingertips if I had a web version of this.&rdquo;

Anyway, we spoke lots about it. We argued quite a bit, and then we [00:32:00] just bowed and agreed to disagree. It turns out that on further conversations, and when we looked into it a little bit further, and spoke to a few other people we know, it is on this company&rsquo;s roadmap, and they are heading in that direction now, whether it was always that plan or they come to the realization, but it&rsquo;s something which I totally agree. Native apps are great. You do need them for some things to be super fast like I use Slack. It&rsquo;s great. I have it on my tablet and my phone, but I also have it in the browser. All right? It&rsquo;s just a good experience. If I were only able to access it in the browser, I would be absolutely fine with that because it does what I need.

That&rsquo;s my week. That&rsquo;s what&rsquo;s been happening. Yeah, we&rsquo;re going to &hellip; I&rsquo;m putting a couple of these links that I&rsquo;ve talked about so far into the newsletter this week. If you&rsquo;re not subscribed to the newsletter, make sure you head over to responsivedesignweekly.com and drop your email address in there. You&rsquo;ll get a newsletter once a week talking about all this kind of stuff with links that you can go off and check things out yourself.

Next week, we&rsquo;re going to be talking to &hellip; I say “we.&rdquo; I&rsquo;m going to be talking to the team from ZURB. ZURB are the guys that build Foundation. It&rsquo;s like Foundation and Bootstrap have been going head to head for the last couple of years. ZURB are actually about to release Foundation Version 6, and they&rsquo;ve cut their code by 50%.&nbsp;

They&rsquo;ve made things faster. They&rsquo;ve made them smarter.

What we&rsquo;ll be doing is we&rsquo;ll be catching up with some of the developers who have been putting this stuff together and talking about why they changed it, what has changed on the web for them to warrant changing the [00:34:00] framework in this way. Also, if you are running something like Foundation, how people be able to go and do updates properly. Can they just drop it in there, or is there like a few steps that they need to go? Also, where they&rsquo;re looking at next like what they think the next big problem is to squish out.

I also mentioned we&rsquo;re going to be talking to Dan Rose. It&rsquo;s coming up, so that&rsquo;s going to be all about workflow, and working with Photoshop, and the responsive design workflow in teams which will be really cool and really interesting. Then, also, Rachel Andrew who has agreed and said she&rsquo;d be happy to come on the show as well. Rachel is going to be talking about her thoughts and knowledge on the grid layout specification, which is really exciting. It&rsquo;s bed down a little bit now. It doesn&rsquo;t change as much as it was, so she&rsquo;s been able to create some really awesome examples and build up a little bit of a talk around. I think in the moment, she&rsquo;s in the States talking at an event, but &hellip; so it will be really good to get her on and chat through that stuff as well.

Yes, we&rsquo;ve got some really great guests and talking about some really great topics on the way over the next couple of weeks. Yeah. Thank you for tuning in and listening. Please go ahead and rate the show up 5 stars. Leave a comment. That&rsquo;s how people find out about it. Tell your friends. Tell your friends to subscribe. If you have a topic that you want me to cover, or if you would like to join me and talk about some of the things that you&rsquo;ve been doing at work, or some of the things that you&rsquo;ve been working on, or some of your own thoughts and ideas, then do reach out. You can reach me the contact form link in the footer, but until next week, stay responsive, and I will see you then. Cheers, everyone. Bye.

RWD Podcast Episode 43
46:40
2017-09-22 13:53:31 UTC 46:40
RWD Podcast Episode 43

Presentation Slides 

RWD Podcast Episode 42
22:29
2017-09-22 13:53:31 UTC 22:29
RWD Podcast Episode 42

RWD Podcast 65 : Public speaking, Hololens, NBC Redesign
20:55
2017-09-23 00:10:05 UTC 20:55
RWD Podcast 65 : Public speaking, Hololens, NBC Redesign

Show Notes

RWD Podcast 64
15:45
2017-09-23 00:10:05 UTC 15:45
RWD Podcast 64

I’m just back from a few weeks in Australia visiting family and getting the podcast back up and running again. This week we go through the best links for the weekly newsletter.

RWD Podcast 63
11:07
2017-09-23 00:10:05 UTC 11:07
RWD Podcast #62
23:33
2017-09-23 00:10:05 UTC 23:33
RWD Podcast #62

RWD Podcast #61
58:00
2017-09-23 00:10:05 UTC 58:00
RWD Podcast #61

RWD Podcast 60
40:22
2017-09-23 00:10:05 UTC 40:22
RWD Podcast 60

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 and other front-end cool stuff. This week I’ve got a small guest but it’s not until the end and I’ve got a piece that I’ll add at the end of the podcast, and the reason why I say it’s a small guest is because they’re small in stature it’s my little boy Noah and he decided that he wanted to do some recording over the weekend so we did a little short podcast together. If you don’t like the opinions of a three year old then feel free just to skip over it. So that’s why I’m not including it until the end. He probably has some better opinions than me a lot of times but, you know, he’s a little childish. Takes after his dad.

But this week to start with I’ve got a lot to offer everyone, so I’m going to get to that first. We’ve got a couple of sponsors this week which is fantastic and they’re giving everything back to us which is great. Or you, the listener. So, conferences, we’ve got a bunch on. We’ve got three conferences coming up. One in the states, one in the UK, and one that is global that you can view anywhere and the first one is the global one.

So this is the SVG online summit and anyone can join it, it’s global, it’s an online thing. There’s a tonne of talks during the day. Actually, let’s go through it properly. A better-prepared person would have all this here. So SVG Summit, if you go to svgsummit.com then you can go check it out. If you use the discount “RWDWEEKLY“, all capital letters, that’s good for 20% off. Now it’s coming up on the 15th of February so it’s not too far away. Starts 10:00am Eastern Standard Time, 9:00am Central Time, and it has six speakers throughout the day. Chris Coyier, Sarah Drasner, Amelia Bellamy-Royds, Dudley Storey, Clark Wimberly, and Kevin Ball and they’re all talking about SVG and different ways to use it online. It’s going to be super cool.

And the great thing about these online conferences is you don’t have to spend any money flying there, you don’t have spend money on accommodation. I love flying to places but it gets expensive when you add everything up, and the time you’ve got to take off. So this just pop it on your computer at work, put your headphones on, and just learn lots. They’re really cool conferences. I’m fortunate I’ve been to a couple where I’ve partaken in a couple, watched on the computer, and I presented at one as well. It’s just so much fun. Really good, the guys do a good job there.

The second conference we’ve got is for the awwwards, so this is for folks in the UK or Europe and it’s coming up fast. It’s the awards conference so A.W.W., see what they did with the name? That’s coming up on the 2nd and 3rd of February so I’m going to be going along there and I’m going to be hanging out with some friends from the Adobe XD Team who I caught up with late last year and I actually want to speak to them a little bit more too because I think the XD stuff is really interesting in terms of like rapid prototyping and being able to get interactions and things on the screen that clients can see. So I kind of want to try a couple of screen-casts and see how it might work out to improve our responsive workflows and stuff.

So if you want to go to that you can go to conference.awwwards.com/london2017. Do a search for “awards conference in London” and that will come up there, and if you use the discount code “responsivedesignldn“, it’s like responsive design London, that’s good for 10% of the ticket as well. They’re also going to be doing a live stream of the conference out as well and Vitaly from Smashing Mag is going to be there to kind of host that as well, so that should be really cool. I want to catch up with him as well because Smashing Mag are doing this huge redesign. They’ve had people like Sarah Souiden working on it, I think Dan Mall had done the original designs perhaps as well. It looks really good. It kind of looks a lot like the Responsive Design redesign as well so I’m happy that the design that I’ve gone with, with the guys from No Divide, that they’re going in a direction similar to Smashing and I think that’s a good direction.

But as part of this, Smashing Magazine and Vitaly, they’re looking at different ways of generating an income for a publisher. So it’ll be really interesting to see with all the ad blockers in now, they don’t make as much money through ad revenue, so you need other ways to supplement the income to continue the business. And Smashing Magazine is a big business so it will be really interesting to see what he’s doing to try and tap in with that. I think he’s going along a little bit of subscription model which I think is cool. I’d be happy to subscribe to a magazine like that, they put out a lot of good stuff. I feel like I should be paying them for doing that as well because they pay all of their writers and I really like it.

And then the last one is for people in the states most likely, or the Americas, and that is called “ImageCon” so it’s imagecon.com and if you use the code “RWDWEEKLY” it’s good for 50% off your ticket which is really cool.

Now I wrote a piece earlier in the week about how to approach typical problems when uploading large numbers of images and it’s actually what I’m going to be talking about after this and running through with you today. If you want to head along to the conference that will let you understand and deal with bigger problems than just how to get images optimised properly and rolled out on your screen or near different sites. They’re going into a lot of detail like the different problems that we have with images at the moment, and it’s on the 1st of March. So 1st of March in San Francisco and it’s got some amazing speakers like Jason Grigsby, they’ve got Allison McKnight from Etsy, Vitaly as well, we just talked about Vitaly from Smashing, Steve Souders like the performance person getting around so he’s at SpeedCurve these days. So all these great people talking about images and it should be a really good conference. That’s imagecon.com and use “RWDWEEKLY” for 50% off your ticket.

That’s all the discount stuff at the top of the show so you can save 20%, 10%, 50%. Great stuff.

So for this week I wanted to talk about watching your weight. And I’m not talking about like the post-Christmas holiday weight and “Oh my goodness, I’m going to put a New Years Resolution to never eat unhealthy again, and I’m never going to drink again.” We’re talking about image weight on your websites. And the reason why I wanted to talk about it this week is because, like I said a bit earlier I wrote an article this week is because I came across a tweet from Andy Clarke. Now Andy Clarke has published this awesome article on his site called “Designing Inspired Style Guides” and it was a talk that he delivered, and he doesn’t think he’ll be able to deliver the talk again, but it got a really good reception and so he thought, “Rather than waste all of this great content, why don’t I turn all of this great content into a super long blog post? Then more people can enjoy it.” Which is like, kudos. It’s a really good, long detailed article about style guides. So kudos to Andy for doing that.

Now in the second paragraph of the article he even says, “This page contains a lot of images.” And he says, “This page contains 35 MB of images, I’ve optimised them as much as I can but you probably don’t want to load this page on your mobile data plan.” So that’s great that he gave people the heads, there’s just the issue that by the time I’ve read that, a lot of the images which are on that page are already starting to download. Now I suppose thing in this is that there were so many images on the page, so there’s like 150 images, there’s so many there that it won’t have downloaded that many because of the number of connection that it has. Or it needs to make the number of HTTP requests. So by the time I read that I could hit stop and then save my data plan a little bit if I was reading it on my phone or even my desktop I had time to stop it.

So I want to get this super clear up front, Andy did as much as he could do with knowledge that he had on providing an awesome resource to everyone and giving them a heads up. Like that’s awesome. Not many people would do that. And I thought, “I wonder if there was anything that could be done to perhaps make that experience a little bit better for users. Let’s see how this goes.”

What I did was first I opened up Chrome Dev Tools and I opened up the Network Panel. There’s an option in the Network Panel where you can set a throttle, so you can say rather than run off your regular connexion to the internet you can set it to run at 2G or 3G or good 3G or 4G or GPRS so you can test different network conditions. So I tested a mobile network condition at regular 3G, ticked “Disable cache” because I’d used the page before, and then refreshed the page and started watching it. And once it had finished loading I noticed it was slow because it was on 3G but all of the files that were being served were PNGs, that was one thing that I noted. And immediately there come a thought, “That must have been the default export option for the presentation he did, Keynote or PowerPoint.” I also noticed that all of the images were being loaded regardless of whether or not I had scrolled down the page to view them, and the last thing I noticed was that every single image required it’s own HTTP request.

So with 150 images that’s 150 round trips between your browser and the server and going through network connexions. With that information I thought, “Right. Let me address those images and see if I can improve upon the load time for that particular page and the great resource.” First I saved down the page locally, so if you ever want to grab a webpage from someone’s site and put it locally so you can work on it and check stuff out, it’s File > Save Page As > Webpage Complete. And that downloads the HTML as a HTML document and then it also downloads a folder and within that folder it has all the assets, so all the images, all the JavaScript, all the CSS, everything that goes to make up that page. So if you’re offline, locally you can double-click on that HTML document and it’ll open up and you’ll see the entire page. So that’s a good start.

I saved it to my desktop and then I moved on, and I mentioned that the first thing I noticed was that PNGs were being used for everything. Now as a general rule you can either have PNGs or you can have JPEGs. It used be GIFs and JPEGs and I know there’s PNG-8 and PNG-24, I won’t go into that but let’s just start with it’s PNG or JPEG. So if you want to choose a PNG, you should choose a PNG when the image is more of block colours. So think vector kind of things like logos, icons, they’re kind of just full block colours. Also if you want to have a transparent background then you might choose a PNG as well, and we’ll go back to the logo and PNG transparency thing in a sec too. You should choose JPEG if the image is more of a rasterized image, like a photo. They’re the general two choices.

Now back at the logos and icons, technically these days we probably would want to go for an SVG rather than a PNG purely because it’s a scalable vector graphic. So it will scale from small viewports to large viewports, so rather than have many different types of your PNGs depending on what size you need to render them as, you have one SVG and it scales magically. Hooray!

And then on the transparency side of things as well, there’s a file type called WebP and it’s supporting in Chrome and I think Opera as well but I do know that Safari were looking at implementing it as well or they were checking it, and they never check stuff out like this so that’s really positive. WebP is a lot more performance so you can compress it a lot more and get still really, crisp, clear JPEGs effectively at much smaller file sizes and it provides transparency as well which is really cool.

So looking through all those images I thought most of them were more suited to JPEGs than PNGs, and if you PNG something that should be a JPEG the file size becomes incredibly larger than what it should be. Whereas if you JPEG a PNG you can really small PNGs for quite large pictures because it’s mostly block colours and you can get incredibly large PNGs for small pictures if it’s more suited to a JPEG. And just out of interest if you’re going to export your files or your slides from something like Keynote or PowerPoint there is an option, definitely in Keynote you can select JPEG high quality, small file size, PNG or TIFs. So just think about what most of your images are going to be and export to suit.

So now that I had them all downloaded, all of the images, or downloaded the webpage, then I wanted to change them all from PNG to JPEG. Now normally with my Mac I can right-click and say “PNG to JPEG” because I’ve set some automation up because I take a lot of screenshots and I just want to switch it through the PNG to JPEG because traditionally JPEGs are better for the screenshots that I take, so I’ve got like this right-click shortcut. But because it’s 150 images in this case I have Photoshop on my machine so I was able to use something from Photoshop, so in these cases where you’ve got large scale, you want to batch-process things. So if you go into Photoshop and you go File > Scripts > Image Processor then it gives you a few options, you select the folder of the images you want to change, you select a folder for where you want your images to end up and then you pick what file [size 16:26] you want it, in this case it was JPEG, and the quality that you want it as well. I chose a four which is about 30% quality because I wanted them small.

Then I hit “Save” and then bam, we got a whole bunch of JPEG images and that changed the file size so it wasn’t 35 MB it was now down to 10.4 MB. So we’ve already reduced it down to a third of what it was just through changing the image file type and optimising the images a little bit. Then when I had all of that the next step is a little bit further optimisation using a tool called ImageOptim. It’s a free tool and the wonderful thing about that is that it provides lossless compression which means that image isn’t as big but it is just as beautiful as it once was, so it doesn’t affect the quality of the image at all, it just reduces the size of it which is exactly what we want. To do that it removes like … I actually don’t really know what it does, it’s like magic I think. But what I do know is it removes a whole bunch of metadata about the image which isn’t needed for people to view it on the web so just get rid of it. So yay ImageOptim. Free, you should totally get it.

So I dragged all the images onto Image Optim and then within like 30 seconds or a minute it had processed all those images and that had taken it from 10.4 MB down to 6.1 MB so now we’re talking about going from like 35 MB all the way down to 6.1 MB which is amazing. From there it’s a simple … I always say simple matter, it’s not always simple. From there you need to get the images back onto your server so I used an FTP client and you put all of the images back into the folder that you had all you PNGs, it won’t override them because now they’re all JPEGs so it won’t overwrite a PNG because they’re different file names. And once they’re all back in there you have to update the reference in the post, so at the moment all the image tags are referencing .png you need to reference JPEGs and it’s Control-F like a find and replace. So you want to find anything that says “.png” and replace it with “.jpg” then you publish and voila. You’ve gone from 35 MB per page for every visitor down to just 6.1 MB for every visitor.

Not only is that really good for the users so they get the content faster, they don’t have to wait around, their browser doesn’t slow down, they don’t lose all their data. The other great thing is Andy is a popular guy, he writes a lot, he does some cool stuff. Now he would have like, I’m guessing 10,000 people would go and view that article that he wrote, it was re-tweeted by a lot of really popular people in the web community as well. So 10,000 people at 30 MB, that’s 300 GB of data that he’s now saved and he doesn’t have to pay in bandwidth. It’s just fantastic, it’s a win-win for everyone I think.

So at the top of the show we talked about there’s three things, so there’s the file size which we’ve now corrected to a certain extent, a pretty good extent I would say. The other thing is that all the images are being loaded regardless of whether or not anyone was going to see them. To fix that essentially you’ve got 150 pictures you might not scroll through all of them so why should you be downloading the ones that you’re not going to view. So you can use a tool, it’s a JavaScript plugin called “lazySizes” and what that does is it Lazy Loads the images into the page. What that means is that when you first load the page it will load the images that you can see that are within your current viewport and then as you scroll through the site as the other images get close to the viewport then it will say, “Hey, you’re about to be viewed by the user. I think you should start downloading now so that you can be there for when they arrive.” And then as you scroll through the images slowly start being loaded in.

If you stop scrolling then the images stop being loaded from below the viewport and it’s just great because it means that only the images that you’re likely to see are going to be loaded. So you’re only paying in bandwidth and time and even the hosts, so Andy is only paying in his bandwidth for the images that you’re going to see as well. Now to do that, like I said “lazySizes” if you do a search we’ve got it in the resources section on the Responsive Design site as well and it’ll be in the show notes. It’s a small JavaScript file, you can load it asynchronously so it’s not a blocking script, it won’t affect the load of your page. And for any image that you want to Lazy Load you need to change the source to “data-source” so it’s a data attribute instead and add a class of Lazy Load to that image.

Now the reason you have to do that data-source thing is because browsers are super smart these days and as soon as they detect an image tag, like even before all the HTML has passed, it will start downloading all of those images and that’s to make it seem as though web pages are faster. They do that for the users benefit for performance side of things. What that means is that all the images start downloading before any JavaScript can run and stop it from downloading so that’s why you need to change it from “source” to “data-source” and then as you scroll through lazySizes checks to see whether the image is approaching the viewport, as it gets close to it like within 200 pixels or so, then it changes the “data-source” to “source” and the browser will download the image. So it’s super, super cool.

I’ve used it for a few sites, I did it for the Adobe Mac site, I rebuilt their conference site from like a better approach for a responsive, responsible design and performance is a big thing. I added lazySizes to it and it’s shaved like several seconds, we’re talking five or six seconds off the load time of the site by just implementing the lazySizes. Very good for image heavy sites, especially for ones that are below “the fold”, so definitely implement that if you can.

We also talked about I said there’s lot of requests for the images as well, so if you were able to run on HTTPS and your server supports HTTP/2 then instead of having one request for each of the 150 images and there’s latency on every single request, with HTTP/2 you don’t have that latency. It can just request all of them at once and they can all download and of course if you’re using lazySizes then you trip yourself up because you don’t want them to all download at once. But that connexion will stay open so you don’t have to make it look up every time, which is fantastic.

And the final thing, there’s one more thing that we can do. For those in podcast room, can anyone just raise your hand and say … Like, are you thinking of one other way that you haven’t mentioned, the key way to have better images for this page? Anyone? You in the back, Mr. Eric Portis? Yes, you were right. It’s using responsive images is the other thing we could do. This requires a little bit more work. What we had for these images is they’re all slides, so they’ve all been exported about 1024 pixels wide. Now if I’m viewing that on my iPhone 5 which has a width of 320 pixels and it’s a retina one, I think they’re all retina, 320 you might double that and arguably say it’s 640, but that’s still like half the screen area of what I need from what the image is being loaded. It’s 1024 only you really need 640. So we can include something like SourceSet for the images so that we can give the browser several different sizes of image to chose from and then it would download the image that best suited the viewport to render that image.

And that great thing about that lazySizes that we talked about before is that it works with responsive image syntax as well so it works with SourceSet and it works with picture as well. So that would be a cool bonus addition there and the reason I … Eric didn’t really put his hand up, but Eric Portis wrote this really awesome article about responsive images and again I’ll link to that in the show notes and it’s linked in the article as well.

So that’s it, so this is how we can turn like … and I encourage everyone, we’ve got this problem at the moment with large web pages, they’re bulking, they’re oversized, they’re overweight. And most of the weight is due to images. We always complain about, “Let’s not include that JavaScript library in there it weighs 30 KB.” And yet we’ll chuck on 35 MB of images onto a page. I see this all the time and it doesn’t have to be 35 MB it could be 5 MB of images, the point is that’s too often, that’s too much. But if you can approach it in a systematic way like, “Am I loading the right images? Are they properly optimised? Have I put them in a responsive image container so that only the right sized image gets served up? We’ve got a tonne of images, are they loading below the fold? Are my users likely to scroll down there and if so will they scroll all the way or should I just be serving up a couple that they’re definitely going to be seeing?”

This is the other reason why this image conference is on at the moment too because it is a real problem, but I think we make the problem worse for ourselves by including these things. And I realise that most projects are done in a rush, unfortunately, it’s just the nature of the way we do things. These kind of things tend to be, “We’ll look at that later, let’s just get it up and going.” And I think that’s a bad approach. We should really just focus on trying to make it a little bit lighter, try and work those images as well as we can and see how we go.

So that’s it. Thank you for listening, thank you for tuning in and downloading. If you want to talk about something, if you want me to cover something in particular, feel free to write in. You can hit me up on email, you can reach me on Twitter @ResWebDes, you can subscribe to the newsletter at responsivedesignweekly.com and please rate this show up in whatever podcasting listening tool you’re listening to at the moment. Rate it up that would be super awesome.

Coming up next is my little interview with Noah so if you want to check out what a three year old has to say about the web and what’s better, what’s the newest thing coming out and what’s the best thing to watch The Minions on, then you are in for a treat. Until next week, I will see you soon. Cheers. Bye.

RWD Podcast 59
10:00
2017-09-23 00:10:05 UTC 10:00
RWD Podcast 59

Hey everyone, and welcome to another edition of Responsive Design Weekly. My name is Justin Avery and I am your host and curator of the Responsive Design Weekly Podcast, and the newsletter, a weekly newsletter all about Responsive Design and front end funky stuff. Now this week as you will notice, my throat hasn’t cleared up at all, the kids have kept my cold going and my cough has just got worse. So we’re going to keep this super quick because you don’t want me to be coughing in your ears on your journey to work or while you’re chilling out. So we’re just going to cover one thing this week, and again there’s no guest this week but next week I have two people to chat to which I’m very, very excited about. Yeah, it’s going to be awesome.

So this week, the feature side, the feature article for this week is we’re looking a little bit at an article which Scott Jehl has written from The Filament Group. Scott Jehl for those of you that haven’t heard of Scott, he has been doing wonderful work over the last couple of years on the web and he’s always about practical performance. In fact he wrote a book on just that topic as well. If you go to “A Book Apart”, I’ll type that in and it’s great radio. Here we go with the coughs. So yes, we know of the Responsive Design right? So “A Book Apart” Ethan Marcott wrote his first article on [inaudible 00:01:48] and then he wrote a book called, “Responsive Design” and then it was followed up with “Responsible Responsive Design” from Scott Jehl, and it’s just talking about the responsible ways in which we can approach the booting of websites. Now because Filament Groups stay on top of this stuff, the site is usually pretty darn fast and this latest article though we’re featuring is about them stepping it up, so the title is, “Modernising Our Progressive Enhancement Delivery” and it’s all about taking advantage of some of the newer tools that are available to us today, not across the world, but available to a lot of people.

And namely that is around HTTP/2 and so we can look at the browser support for HTTP/2 and it’s running on IE 11 partially but it’s limited to Windows 10 for IE 11, but Edge runs so 14 and 15 for IE or now Edge. Firefox supports it as of version 36 I think and we’re up to version 50 at the moment. Chrome has supported it since 41 and we’re at 55. Safari? Come on Safari. Safari offered partial support. Safari. Opera supports, iOS Safari does support it, Opera mini does not, but Android browsers and Chrome for Android both support it as well. So that’s from the Browser point of view. So if you send an HTTP/2 across to a Browser that doesn’t support it, it just falls back to HTTP/1.1 in the way that the web works. We always fall back, which is great, and that’s why the web is so awesome.

So the thing with HTTP/2, one of the coolest things, I think I’ve talked about this a little bit in the past as well, it’s just a lot faster. The communication between the server and the browser is done with 1’s and 0’s now, instead of text, so it’s a lot quicker. The compression on the chats is a lot better as well. But the main thing is that there’s no blocking requests. So previously if we requested an HTML page, and that HTML page had CSS and images and JavaScript and the like, it would wait, generally we would have that waterfall, network diagram. So it would request an image and then it wouldn’t request the next image until that image had downloaded and then it would go off and request the other one and the bring that back.

So each time we needed a new HTTP request, which was expensive and made things slower. With HTTP/2 you won’t even need to make a single request, and when the HTML comes back to the Browser, it then looks through it and goes, hey I need all of these files, go and get them. And they all come back at once, which means we don’t need to concatenate files together so much anymore because we’re not using the extra HTTP requests, it’s just all coming back. So instead of seeing this hierarchical, as like waterfall thing, it’s one request, bang everything else comes back. So that’s great.

The other thing that we’ve been doing is critical CSS. So the idea is that we want the first fourteen kilobytes that comes back from the server, we want to render as much of the page as possible within that first fourteen kilobytes because that’s the first trip back. And to do that we need to have all of the CSS that is required to render the visible part of the page within that first fourteen kilobytes. So we used to inline that CSS, called critical CSS. With HTTP/2 now, we’ve got this option of a server push, so that when the request goes out for the webpage, so when you request the Filament Groups homepage, as the server send the HTML back to the browser, you need to wait for the HTML to arrive in the browser, look through the HTML, find the images and the CSS and JavaScript, then request them, and even then they’re going to come back in one whole hit, and it’s one request, there’s still a bit of latency involved with that.

Instead because you know what file is going to be sent back, you can instruct the server to say, hey if someone requests this page, push along that HTML we’re sending back, push all these files because I know that these files are going to be required on that page. So that’s really, really awesome. It means that you don’t have to do that second request and then you don’t actually have to inline your styles anymore, you can just push them down.

Now I can imagine you’re thinking, but hey what if we already have those files, what if we’ve already visited that page once before? Fortunately, Scott has thought of that as well, and they’re using a cookie to check that. So even though the push happens, the browser can actually cancel that at any point. Now there is a couple of occasions where those files will come down and you will get the extra burden on your data plan because you’ve downloaded files that you already had. But for the most part once that cookie is set, then you no longer have to push those files down anymore, which is great. So I highly recommend, check the newsletter out, check the website out on redesign.responsivedesign.is.

Well you’re probably there at the moment, check the show notes of this as well, we’ve got a link to that article, but definitely check it out, browser support is great like we said. HTTP/2 you need to do a little bit of configuration on your server depending on what server you’re running, that will also need to support HTTP/2, but if you’re using something like CloudFlair, which I highly recommend, that actually has HTTP/2 out of the box. Another bonus about it as well is that you have to be on HTTPS, so you have to be serving your site securely to take advantage of HTTP/2. Another good reason to use it because you get all of these benefits along with it.

So that’s it for this very short episode, I’m really hoping that this cough sorts itself by the time we get a guest on. But fortunately, they will be doing more speaking then what I will, hopefully. Either that or I’ll just sit with a bottle of cough medicine and just swig it for every time I’m going to ask a question, another swig and see how we go.

So that’s it for this week, if you’re not already subscribed, head over to responsivedesignweekly.com and subscribe to the weekly newsletter. Check out the new stories going up on redesign.responsivedesign.is every day, and we tweet about them, so you can follow us on Twitter @ResWebDes. See you next week.

RWD Podcast 58
19:35
2017-09-23 00:10:05 UTC 19:35
RWD Podcast 58

Show notes

Transcription

Hey, everyone, and welcome to another edition of Responsive Design Weekly. My name is Justin Avery, and I am your host and the curator of the Responsive Design Weekly news letter. A weekly news letter all about front end development and back end stuff and performance stuff and frameworks and tools. A whole bunch of stuff. This podcast is like a … I was going to say  a sidekick. It’s not a sidekick. It’s like a spin off of the news letter as well, so I bring you some cool stuff on the podcast as well I hope. This is edition number 58 which is kind of cool, and the fist time that I’ve gone back to back editions week to week for a while actually. It’s the first time in 2017, but it’s only been two weeks in 2017, but it’s actually the first time for quite a while including 2016, so yay.

Thank you for downloading and tuning in again. This week I’ve got like this tickle in my throat thanks to my little boy. Thanks to him going back to school, so he’s bringing back a whole swathe of new germs that can do the run around in the family as well, so I’m going to try this thing where I click on the mute button if I feel a cough coming, so there will be like tonnes of tiny little pauses through the show. Super professional, I know.

This week no guest, but I did on Tuesday night I went to the London web performance meet up, and I saw a wonderful talk from Ada Rose Edwards. You can see her site at Ada.is. She was fantastic. She talked all about web VR. Now, I looked into web VR a couple of months ago because a client was asking what they could do with it, and they wanted to keep on top of things, and when I had a look I came across this framework called A frame. Aframe.io, and it’s a framework produced by the Mozilla company. Here we go. We’re going to try to cough quickly. I hope that worked.

I believe it’s developed by Mozilla. Anyway, it’s a wonderful thing. It’s like a framework. You drop in a bit of Java script, and instead of programming really, really difficult like web GL stuff and things that I have no idea or understand, have any comprehension of how to do at all. You drop this code in so the reference to a Java script file, and then you can just pretty much write HTML. The HTML, like you write HTML but with particular components, but it then turns it into a wonderful web VR experience. Then all you need is, all you need, you then need a phone. Some description. Something that supports web VR, so I mean I’ve got an iPhone five here. I’ve got an iPhone six from work. Both of those support it, and then like a headset which could be Google cardboard, or it could just be you pushing the phone really hard up against your face.

Google cardboards come pretty cheap. Fortunately there was a Google representative that gave away 100 Google cardboards at this meet up, so we all got to try it out. I forgot to hit the mute then. It was a wonderful meet up, and it was really, really good. Ada talked. No slides, just demos which makes it even better. Web VR it’s really a thing. It’s like it’s here, and it’s ready to go. I’m not going to lie, it looks a little bit like the designs that were coming out in the mid 90s or late 90s, so they’ve got a very 80s, 90s feel about the designs, but that’s because the web VR stuff is still, I mean the pixel perfection we expect retina quality stuff now with our screens and our phones, but the resolution on web VR just isn’t up to that scratch, but man it is immersive, and it is cool, all right?

One of the wonderful things I think is that you can jump straight into it. Now, A frame has a whole bunch of examples to allow you to get involved with it straight away, and there’s this wonderful component that you can add in called a sky box, all right? It’s almost literally … Let me just fire up. I built a call thing. Well, I didn’t build a call thing. I built a thing. Not necessarily going to say it’s cool. Yeah, it’s called a sky, so you know how I’ve dissed [amp alone 00:05:12]. I’ve questioned the usefulness of amp and the ideas behind it, so this has a very similar idea, so you’re loading in Java script at the top of the page. May as well.  We have locking script.  Pretty sure it is. Then instead of using regular HTML tags you’re using kind of like components I suppose, so everything in amp is predefined or prefixed with amp-image or amp-iframe.

Everything in here with the components is prefixed with an A for A frame, so you can build a box which is A-sky. Give it an ID. Give it a radius. Give it a source, and then it will effectively build a sky for you which is well cool. Now, the cool thing that I did with this if you go on to aframe.io and we can try it out. There’s an example which is a 3-D 360 image. This is how simple it was. It was lunch time yesterday, and I thought look I just want to try this out. I want to see how quickly I could build something that might be somewhat helpful. I jumped on and we have at work some clients, and as you would hope, and the clients are really keen on making sure that new employees get a really good feel for what it’s going to be like to work at the place.

All right, and that’s great, so you can have tours of your office which is fine, or you can show pictures, or you can show a video of the office and stuff, but sometimes things like if you’re working in construction, so we have like for a couple of construction companies, you can’t take people onto construction sites and show them because you’ve got it go through a whole bunch of safety rigmarole things, so it’s not really going to fly. Some places are super secure, so you’re not allowed to let people in, so even though you could show them the office, and there’s nothing super secure on desks or anything you’re not actually allowed to let them into the building to begin with.

Sometimes people just won’t travel, right? If you’re doing an international placement, or if you’re moving from one side of the country to the other, and you want to get a feel for what it’s like then, I mean, it’s a long way to go just to get a feel. I thought well it would be cool if you could kind of get an immersive experience of what it’s like in an office. I downloaded … For this you need a 360 degree picture, and so I didn’t have the camera. You can get a camera, and what Ada recommended there’s a Samsung Gear 360. It takes some pretty sweet shots. Like, it looks beautiful. It does video I believe, or maybe it’s just … Could be just … I’ll check that. It may not do video, but it definitely does some beautiful pictures. It’s 349 quid, so not cheap. Not something that I’m just going to drop 350 quid on to try out, but I probably will now that I’ve seen how cool it is.

I’m not going to tell you to go and do that, but if you do have a phone which I’m sure most of you do there is I think available for the iPhone anyway which is what I had. An app called 360 panorama, and it’s by Occipital. It was a pound 50, so 350 pounds verse a pound 50. I went with the cheaper pound 50 for a change, and essentially it lets you kind of do a panorama like you can do with your iPhone now, but it sets like this globe grid behind it to begin with, and then as you hold you phone over a particular area it records that part of the image and then adds it to this grid, and you basically do a circle and then you look up and then you look down, and you’re done. You have this amazing 360 … You have this amazing … I just muted my headphones instead of the microphone, sorry. You have this amazing 360 view. This is great.

Now, from that you just download it and put it into an images folder like you normally would a regular image and then you’ve got this picture which you can then paint on the sky box, all right? This is amazing, so you can get started with this just having a 360 image, and I think it’s like about 30 lines of code, but for me it was like a copy and paste and update one image reference. It was really cool. What I did is I downloaded this thing and then I took a look around, and I did a 360 view at my desk. Then I went into our kitchen, and I did a 360 view of our kitchen as well. Then once I was finished doing that I downloaded the picture and then I chose the gallery option, so the gallery option is like the 360 image, but it allows you to have multiple images.

What this does is it just gives you the ability to put like just two boxes like a thumb nail to say I want to view that one, and with web VR because you don’t have a mouse or a pointer or a clicker you can write into it that you want a little dot which is kind of life your reference point, or it’s like a pointer. Then if you move that dot onto a square that you’ve designated as a link and you stare at it for a little bit it activates that as if you were clicking on it which is super cool, right? Then the click is you can just control the click event like you do with Java script for normal click events. I’ve got these two boxes now which one says office, one says kitchen, and you look at the kitchen box, and it sets the sky box. The A-sky to use the 360 picture of the kitchen, and then if you look at the office box then it runs Java script and that sets it as the office one.

Now I’ve got this 360 immersive experience with … I mean, I’m going to say it’s not the best picture in the world, but it gives you an idea of what the office is like. Yeah, so now we’ve got this thing, so if I was to say hey you should come and work for us. This is what our offices look like. This is what our kitchen looks like. This is … Maybe not toilets, but you know just showcase some of the different areas. If you’re in a building construction site you can showcase those different areas there. If you’re selling houses why not showcase the different rooms the house has?

One of the things I want to do with it is I’m Australian. I live in the UK. I have a lot of family back in Australia, family and friends, and they’ve never been over to visit. They don’t know I I live. They don’t know what our house looks like. They can’t picture like what a garage is like or a backyard or anything, so I’m going to go … Especially my dad who’s technically not there I would say to be nice. Sorry, dad.  You’re not the most cynical person. The most practical person in the world. He can build. He’s build a barge. He builds some cool stuff, but computers he’s not a fan. I can now do these pictures in rooms and set this up, and my brother who lives over there with him still can give him this phone. He can put on this cheap Google cardboard headset, and he can be immersed. He can see pictures of the kids. He can be involved in it.

It’s really cool, so anything you can do with Java script you can do. You can import objects. You can, if you’ve done a bit of SVG work and sort of moving SVGs around and animations and stuff this is all possible with this A frame. I highly, highly recommend it. We talked about responsive design. We talked about how we’re going to make our information and make our content respond to the different devices that we’re consuming it from. Well, we’ve been looking at screens. We’ve been looking at windows, so I remember someone describing a screen as amazing, but it’s kind of like if you take a picture and then you put it in a frame. That’s kind of … That’s what you get. You can look at it, but you can’t experience it. You can take a video of something which is better, but it’s still a picture, and it’s still a frame, and you’re looking at it through a 16 by nine window. What you want to do is you want to put your head through that window and be there and experience it.

If we can create content which allows people … We are creating content, but we want to be able to create content that allows people to experience it in that way, and at the moment the web can now do it, so with this web VR we’re able to start doing it. Now, a couple of things which I’ve learned over the last couple of days and from the talk is text in web VR is not a great idea. I still want to wrap my head around that a little bit more, but I just have really advised against using huge amounts of text. That causes a bit of an issue if we’re creating loads of content on our web sites, and we want people to consume it, and then we said we can’t use text then we need to find other ways for people to be able to do that. I need to wrap my head around that a little bit more. If anyone has experience on web VR and large amounts of text or being able to consume content, text content, in that way, I’d love to hear from you and learn a bit more about that.  I’ll be updating anyway.

I kind of want to do a responsive, so I’m doing the redesign of the responsive design that is coming along nicely. I kind of want to add a web VR version of it as well, and see how that just might look. I think that would be quite cool. Text, not so great. The other thing is you need the camera, but like I said we’ve got this fall back. You can use an app to do that instead. There’s a whole bunch of different cameras that you can get a hold of, but apparently that one is the best one. The Samsung 360 VR. We also at work we did this project with an energy company, and we built this 3-D model of this island in a futuristic city, and the 3-D modellers, we only got a 2-D picture of it because we were putting it up on a website, and we kind of made it float like an island because it was a transparent PNG, but what we really wanted to do is make it so that people could experience it. They could turn it around. They could zoom into it like a web VR process.

I’m going to get that file back.  I’m going to trial it out and see what it’s like. Now, when you’re working with 3-D objects, I asked Ada and she said, “What you want to do is you want to keep the polycount under 100,000 in total.” I don’t know what that means, but just that’s a tip, right, so someone says because that was a question the 3-D artist asked me. They said, “What polycount should it be?” I don’t know. What is a polycount? Under 100,000 is what you want. The other thing that the 3-D artist asked for was what file type did you need it in? For that, again, I have no idea, but you can work with objects so .obj or .gltf. Again, I have no idea what that means, but if you’re going to grab 3-D objects then use those ones as well.

That’s it for this week. Yeah, like I said, highly recommend. Go check out Ada.is and read about what Ada is talking about. Go use Aframe.io  and just trial something. It’s pretty cool. People will be pretty impressed, and if you want to have a look at the little gallery that I built you can go to vr.Simplethin.gs/gallery.html.  I’ll put links up in the show notes, and you can check that out. See where I work. That would be kind of cool, but that’s it for this week.

Next week I think … Is it next week? We’ve got a guest coming up which is super cool and very awesome. If it’s not next week it is the week after. Definitely the week after we have Una Kravets which is going to be super cool. She runs a podcast called Web Tools with another guest, and I’ve promised her that if she does a song at the beginning of theirs about what she’s going to talk about, so I’ve said that I will sing a song for Una when she comes on which will be an interesting way of going about it. I’m looking forward to that.

Yeah, until then let’s go for a streak of three, and I will see you next week. Until then stay responsive.

Cheers. Bye now.

RWD Podcast 57
23:02
2017-09-23 00:10:05 UTC 23:02
RWD Podcast 57

RWD Podcast 56
33:51
2017-09-23 00:10:05 UTC 33:51
RWD Podcast 56

Show Notes 

ESPN Senior Front End Developer

An awesome opportunity to join a wonderful team and push the boundaries of what is considered story telling on the web. Apply Now.

@supports will change your life

View article

Charlotte Jackson shows just why @supports can be so valuable for the sites that we build.

RWD Survey

Take it now. It’ll take 60 seconds TOPS.

RWD Podcast 55
18:10
2017-09-23 00:10:05 UTC 18:10
RWD Podcast 55

RWD Podcast #54
25:41
2017-09-23 00:10:05 UTC 25:41
RWD Podcast #54

Sponsor

  • URL: http://mobxcon.com
  • Conference day: September 9, 2016. A Friday.
  • Location: Berlin, Kino International (the same old cinema we were in in 2015)
  • Speakers: Kim Goodwin, Andy Budd, C Todd Lombardo, James Archer and several more.
  • Topics at MOBX 2016: Real world RWD projects, conversational interface, chatbots, IoT and the vision of Zero UI. Design Leadership, Designing with Scenarios and more…
  • Promotion code for your listeners, followers, readers: rwdpodcast  (that’s a 60 euro discount per ticket)

Did everyone see that? USE PROMOTION CODE ‘rwdpodcast‘ for a €60 discount per ticket.


RWD Podcast #53
16:20
2017-09-23 00:10:05 UTC 16:20
RWD Podcast #53

Show Notes

Browsersync

I can not believe this is something I haven’t shared with you all, yet here we are. It’s unusual for a tool to make it to the headline but this is such an important tool in the web workflow that it needed to be prominent…. and y’know it’s totally free and awesome.

BrowserSync essentially allows you to test your local dev copy of your site (or live site) across a network of devices, and what you do on one device is immediately visible on the others. Your scroll, click, refresh and form actions are mirrored between browsers while you test. AH-MAZE-ING

New <video> Policies for iOS

When we wanted to share videos on the web we would convert them to animated gifs, and now that animated gif’s are a big thing on the web we are taking those gifs and converting them to videos in process of becoming more performant (a mp4 video of a gif of a video is smaller than the gif). Now safari
are allowing for <video>
elements to auto play IF there is no audio track or if the track is muted. Check out the list of policies Webkit are including to ensure this isn’t abused or annoying for the user.

Offline Google Analytics Made Easy

If you’re jumping onto the Progressive Web App (PWA) bandwagon, and well you should, then you probably want to track analytics when your users are offline as well as online. Now with this library shared by Google you can stored the users actions in IndexDB and send them once the users is online
again. Is there anything Service Workers can’t do???? (rhetorical… I know there’s things they can’t do).

RWD Podcast #52
23:02
2017-09-23 00:10:05 UTC 23:02
RWD Podcast #52

Sponsor

  • URL: http://mobxcon.com
  • Conference day: September 9, 2016. A Friday.
  • Location: Berlin, Kino International (the same old cinema we were in in 2015)
  • Speakers: Kim Goodwin, Andy Budd, C Todd Lombardo, James Archer and several more.
  • Topics at MOBX 2016: Real world RWD projects, conversational interface, chatbots, IoT and the vision of Zero UI. Design Leadership, Designing with Scenarios and more…
  • Promotion code for your listeners, followers, readers: rwdpodcast  (that’s a 60 euro discount per ticket)

Did everyone see that? USE PROMOTION CODE ‘rwdpodcast‘ for a €60 discount per ticket.


Show Notes

Hey everyone and welcome to another edition of RWD Weekly.

In the show this week I discuss both Beacons and HTTPS along with

  • When you might use them
  • How you can implement them
  • What you and your customers get out of it

Physical Web & Beacons

This week I found out that you can enter the physical web world without the use of one of the beacons.
– First beacon from the TheWeb.is
– Used it to locate my keys.
– Idea is that it just broadcasts a URL. Great for discoverability.

from the article:

Not convinced this is the future? Well think about this: what if you were giving a presentation, and could bring along a beacon that sent out a link to download the slides for your presentation? Or what if you owned a sandwich shop and wanted customers to easily access a link to the mobile app for online ordering you spent so much time building? Or wanted to push an updated agenda link to conference attendees as they walked in the door? The possibilities are endless.

There always seems to be a catch. Luckily this one isn’t too bad: just note that you can only send secure web pages (HTTPS), and the URL is limited to 17 characters because of Bluetooth packet size limitations.

If your URLs are too long then use a URL shortening service.

Everyone in the audience to turn their Bluetooth and Location on and for iOS users to add Chrome to their notification center (I’ll explain why they have to do this later), then I ask to raise hand if they got the URL on their phones.

– android users automatically get notifications when a Physical Web is within range

– iOS users first need to add Chrome to the Today section in their Notification Center. There is a great step-by-step tutorial for that on the Physical Web website.

HTTPS

The other great story this week is that the web has now doubled in the number of HTTPS websites being served in the past year.

This is amazing and I think it’s down to a couple of reasons.

  1. it’s a lot cheaper to go https now.
    1. Lets Encrypt provide free SSL certificates
      – with that a lot of other providers have driven their prices down
      (there was never a reason to set the price so high, it was just something we did).
  2. Large services are serving them by default
    1. GitHub Pages
    2. WordPress
  3. Services such as Cloudflare make it super simple and free.
  4. Carrots — Not the ones that rabbits and reindeer eat, but ones that compliment the stick.
    If you want to take advantage of things like Geo Location, the speed of HTTP2, the amazing-ness of Service Workers and progressive web apps… even serving your sites on physical web beacons… then they need to be on HTTPS…

RWD Podcast #51
22:27
2017-09-23 00:10:05 UTC 22:27
RWD Podcast #51

I talk about using a combination of your own CMS, RSS feed and something like IFTTT to post it for you. I use IFTTT for posting articles to Surf the Dream, saving images from Facebook, posting news articles to Facebook… although now I’m trialling Zapier.

Speaking of WordPress, I also delve into some issues that I recently came across with a clients site.

  • changing URLs – why that can be bad
  • Links don’t work
  • no natively support 301 redirects
  • Page templates failing

RWD Podcast #50
15:49
2017-09-23 00:10:05 UTC 15:49
RWD Podcast #50

RWD Podcast #48
33:53
2017-09-23 00:10:05 UTC 33:53
RWD Podcast #48

This week we take a quick preview of the up coming RWD Summit and offer up a discount code for 20% off (but you have to listen to get it, of course). While on the conference band wagon we also talk about the CSS Dev Conference opening up for proposals… get your talk in now.

Google release their new RWD resizrvery similar to another tool we’ve seen.

Finally we talk about content modelling (with Jekyll) and how it makes it a lot easier to roll out things like Apple News feeds or AMP pages if you decide you want to push your content out there as well. Speaking of AMP pages, I also talk through how you set up an AMP page properly and the bits you need to include (but are not told about).

RWD Podcast Episode #47
68:52
2017-09-23 00:10:05 UTC 68:52
RWD Podcast Episode 46
30:26
2017-09-23 00:10:05 UTC 30:26
RWD Podcast Episode 46

RWD Podcast Episode 45
26:42
2017-09-23 00:10:05 UTC 26:42
RWD Podcast Episode 45

RWD Podcast Episode 44
35:36
2017-09-23 00:10:05 UTC 35:36
RWD Podcast Episode 44

Hey, everyone, and welcome to Responsive Design Weekly Podcast, episode number 44. My name is Justin Avery. I am your host and the curator of the Responsive Design Weekly Newsletter, a weekly newsletter all about responsive design. A whole lot of cool stuff has been happening since the last time I ran one of these. This is episode 44. The last 2 episodes were all about the presentation that I gave over in Germany, in Berlin, and since then, there&rsquo;s just been so much happening, tons, and I just wanted to share a couple of those things with you as well.

This week, we don&rsquo;t have a sponsor, but what I will shout out is that we&rsquo;re finally getting the Responsive Design notebooks printed up, so just in time for Christmas. Although, it was supposed to be at the beginning of this year. I&rsquo;m doing a set of 3 notebooks that you can get a hold of, so the 3 notebooks will be covering the 3 tenants of responsible design or responsive design, so we&rsquo;ll have our fluid grids, our flexible media, and our media queries as well.

Each of them have 36 pages inside and a little quote in the back from some of the leading thought people, our thought leaders, so there&rsquo;s a little bit in there from Brad, a little bit in there from Ethan, and also a little bit from the man who I think started this on this path a long time ago which is Mr. John Allsopp with his “Dao of Web Design.&rdquo; Yeah, so that&rsquo;s coming up. If you go to backpocket.co, backpocket.C-O, you can put your email address in there and be one of the first to find out when they come available. There&rsquo;ll be a limited edition of 200 available in the sets, [00:02:00] so be quick, be very quick, and grab it. Yeah, more about that in the weeks to come.

Recently, I was lucky enough. I head over to the States for the Adobe Max Conference. It was a 3-day conference. I was there for a couple days either side. It was just amazing. It was really cool. They put on a huge massive big event. The party that they had there, it had donuts. They had a doughnut wall, which I&rsquo;ll put a picture up in the show notes. It was crazy. They had some really great keynote speakers, and some of the things that they were sharing about where they&rsquo;re heading with the products was great. They had some really good product demonstrations.

I think they&rsquo;re doing &hellip; Adobe are actually doing a pretty good. Given where they were for a little while, they&rsquo;re doing a really good job in listening to what you and I as web designers and web developers, what we need and what we&rsquo;re missing in our day-to-day workflow like the web is continually changing, so is the way that we&rsquo;re building, and we need our tools to change along with us as well, and it&rsquo;s just becoming &hellip; I think their focus has been a lot more around collaboration, but they&rsquo;ve also had some pretty cool stuff improved as well, and there&rsquo;s a new product coming out, which is a project called “Comet,&rdquo; which I might talk about in a little bit as well.

Yeah, like all great conferences have &hellip; It&rsquo;s not so much about everything that you see and you&rsquo;re presented, but it&rsquo;s about the people as well. This one, the Adobe Conference was no change from that, so there were some amazing people there. I got to actually meet the people from Comet and who are working on it. I might as well talk about it now. [00:04:00] Comet is a new kind of prototyping tool that Adobe are coming out with. It gives you the ability to mock up designs quite quickly and allows you to reuse patterns, so if you have a particular pattern.

Just think we&rsquo;re doing a &hellip; we&rsquo;re building Pinterest, for example, and we want to mock up how that might look, so you might have card view or you might have a multi-card view. You can build out 1 card, and then option-click and create a second card, but then you can turn that into like a module. As you click and drag the &hellip; if you were to make it larger, so wider or taller, instead of it stretching the width of the card itself, what it would do is it will turn into like a repeater, so it will repeat it to the right, and it will repeat it low down as well.

The other cool thing is that we usually design these things with Lorem Ipsum. You can put dummy data in there, so if you type a name into a name field and then something into a description field, it can randomize stuff, so it knows that you&rsquo;re putting in name, so it will put in random names. If you have a first name and second name, it will put in random first names and second names, so you can get the feel of like, “Is it going to go over 2 lines? How is the design going to look if someone&rsquo;s name is really, really long?&rdquo; They even extend it further past that where you can drag &hellip; you can have a whole bunch of images sitting in your library, and it will automatically pull those images into the little pins as well, so you can see how real images will look.

The great thing though about that is when you extend it further and you can go &hellip; so if we were redesigning Pinterest in this example, we could go to pinterest.com, and we could have a look at a board, and I could &hellip; from Comet, I could like &hellip; I can&rsquo;t remember what the command was, but just say it&rsquo;s like a right-click on the title, and then you go over, so you&rsquo;ve got a page in your design [00:06:00] full of these cards. Right-click on one of the titles, go to pinterest.com, and select the title of a range of cards in a view as well, and it&rsquo;s smart enough to look through all the HTML, find out what elements that title is, and then pull back all of the content, and populate your design with the content on the website. If you were redesigning a website, you can redesign it with real data as well, which I thought was super cool, but that&rsquo;s just like one of the small things.

There&rsquo;s another guy who I hang out with quite a bit too, Jay [Messing 00:06:38]. He&rsquo;s over based in Germany. He&rsquo;s the guy who came up with the Open Device Lab or one of the guys that came up with the Open Device Lab. The whole concept of the Open Device Lab, we want to test on as many devices as possible, right? We build these websites, they&rsquo;re responsive. We need them to work. We build them, so that they work across a variety of devices, but then most of us, a lot of us will just test inside of Chrome or Safari, and open up DevTools, and move things back and forth, but you really need to get on to devices to check out how they actually feel and how they interact with the site. It doesn&rsquo;t make sense. Is it comfortable?

Now, buying devices is really, really expensive. Really expensive, so this Open Device Lab allows you to go and look at a world map. You go to opendevicelab.com, and you get to see a world map, and you can see where there are device labs near where you live. You can go to that device lab, and you can book some time, and go in, and test your websites on someone else&rsquo;s devices. It&rsquo;s an open device lab. You don&rsquo;t have to pay for any of these.

Equally, if you&rsquo;re a company who is fortunate enough to be able to afford all these devices and you want to share that with the community, you&rsquo;re not using them all the time, then you can register yourself on [00:08:00] Open Device Lab. Register the devices that you have, and then other people can come, and book time with you, and sit down, and test their websites using your devices, so a really, really cool idea.

Who else was there? I caught up with Brad Frost. He was there, and he introduced me to one of his friends , Dan Rose. Dan Rose is &hellip; he was a really cool guy. We hung out a bit. We went to the Kings&rsquo; hockey game. I&rsquo;m from Australia, so I don&rsquo;t actually think what ice hockey is like and about, and so I went in a t-shirt, and it was really cold. I didn&rsquo;t think that perhaps the stadium needs to be chilly to keep the ice from melting, so I froze for most of the game, but he&rsquo;s really cool, Dan.

He runs a website called “Photoshop Etiquette,&rdquo; so photoshopetiquette.com, and you should all go and check that out. If you are a designer and you work in Photoshop, go and check this site out. It tells you how not to be a pain in the butt when you hand your designs to a developer. It gives you tips on how you should be adding layers, how you should set things up, how you might be able to set your workspaces up or your outboards. If you&rsquo;re a developer, go and check it out. See how the designers will and can lay their Photoshop files out to make your lives a lot easier as well. Yeah, definitely go check it out.

He&rsquo;s done a lot of really cool work around Photoshop and workflows, wrote a book for Adobe called “Responsive Design with Photoshop.&rdquo; He does not advise you to design responsively inside Photoshop. You can&rsquo;t design for every single device and every single break-point unless you&rsquo;ve got a hell of a lot of time, but the book goes through and explains when [00:10:00] &hellip; what you should be doing in Photoshop, and where you should be jumping at, and trying to get in the browser, and get into the code as quickly as possible, so a lot of experience around that sort of area as well.

Now, I&rsquo;m going to try and get Dan &hellip; or Dan, he&rsquo;s going to come on the podcast in the next few weeks, and we&rsquo;re going to talk about that. We&rsquo;re going to talk about a responsive workflow, and he&rsquo;s going to talk through Photoshop and share his experiences of how he designs and how he works with developers and other designers who have more &hellip; so other designers that might have a lot of dev skills like a lot of HTML and CSS skills, and also, how he works with people that have limited dev skills who have never used HTML and how he works with them in different ways as well. He is primarily a Photoshop guy. A designer, but he does have his like responsive badge coding up site, so it should be a really good episode. I&rsquo;m really looking forward to that as well.

There&rsquo;s another guy there called “David Blatner&rdquo; as well, and he&rsquo;s more of an Illustrator and InDesign guy. He runs a couple of different conferences, and I think even like InDesign magazine or something. I&rsquo;m not a designer. I&rsquo;ve never heard of that magazine before, but he was really a nice guy, and we were talking about &hellip; because he was into InDesign and stuff like books can be written through InDesign, all these design and laid out type set, and we&rsquo;re talking about bringing books into the browser to make the content universally available across the world or universally.

It really struck a chord with me like this conversation because I&rsquo;ve been working on a side project of taking a PDF version of an old book, a science-y book, a universe-based book, and I&rsquo;m trying to put it across to HTML and CSS to make it more accessible [00:12:00] for everyone to be able to access it. It&rsquo;s an unsolicited side project, but I&rsquo;ve really enjoyed working on it. I want to make it offline and available for everyone.

I started doing a bit more research around it and seeing some other books as well, and there&rsquo;s a whole bunch of really great examples where authors publish books. They&rsquo;re for sale. You can download the PDF. You can download the EPUB version, but &hellip; and they might still be in print as well, so you can get a hard copy, but they also provide all of the content online for free. If you want to find out about it, then you can go and learn about it, but if you want to buy and you want to contribute to them, then you can buy it.

This one is learnpythonthehardway.org. Aaron Gustafson is &hellip; just released a second or is in the process of releasing a second edition of the “Adaptive Web Design&rdquo; book, but if you go to adaptivewebdesign.info, you can either pre-order the second edition, or you can read the entire first edition on the web as well. Brad Frost is writing a book, “Atomic Design in the Open.&rdquo; As he writes each chapter, it gets added to his site. That&rsquo;s at atomicdesign.bradfrost.com. Mark Boulton as well, he wrote &hellip; Jeez, I can&rsquo;t remember the name of his book. “The 5 Simple Steps: Web Design.&rdquo; I&rsquo;ll put it on the show notes, but that is another one (ed: it was actually Designing for the Web).

Lara Hogan with “Designing for Performance&rdquo; so designingforperformance.com. Again, there&rsquo;s a button there to buy it, but otherwise, you can read the whole thing online as well. Also, there was one I was speaking to, a former podcast guest, Stephen Hay. He really gets into this sort of stuff in terms of manipulating Markdown. [00:14:00] He uses a tool called “Dexy&rdquo; to work with his content, and he mentioned one called “practicaltypography.com.&rdquo; That&rsquo;s something that I&rsquo;m looking at, at the moment, so this concept of writing content in one place like in a Markdown sort of way.

I should point out that people are &hellip; that like Aaron, Brad, Lara Hogan, they all used Jekyll, I suppose. Like a static site generator, they created their content in Markdown, and then they ran it through a static site generator, which punched out a website at the end of it, which they then went through and hand-coded all the stuff that they want to, but the whole idea of like writing once and publishing everywhere is like the idea that we have with responsive design as well. We have to have it in 1 centralized location.

Anyway, this “Practical Typography&rdquo; book is just that. It&rsquo;s written, and then it&rsquo;s using a thing called “Pollen&rdquo; which is able to push it to EPUB. It&rsquo;s able to push it to PDF. It&rsquo;s able to push it to .MOBI. It&rsquo;s able to create a book as well. I&rsquo;m going to look into that, and try and get something, which we&rsquo;ll be at a &hellip; republish this, this thing. I&rsquo;m only really concerned about doing the HTML version because the other versions have already been created and are being sold. Yeah, it&rsquo;s really, really interesting, and that&rsquo;s the side project that I&rsquo;ll be working on over the next couple of months anyway, so that&rsquo;s excellent.

One of the things I&rsquo;m trying to do is mostly make these, the books, available offline. When I was going to fly over, I wanted to do some work on this side project, and it involves a little bit of jQuery because I&rsquo;m a little bit terrible with JavaScript. I can get by with jQuery, but I often have to refer to the documentation, and that&rsquo;s hard to do at 30,000 feet.

Now, [00:16:00] I haven&rsquo;t used &hellip; I didn&rsquo;t have Dash installed, which is apparently the go-to tool and what I should have, but I went to a site called “devdocs.io,&rdquo; and that allowed you to save different development documents offline, so when you went back to that URL, all of those docs would be available to you to check out like I had problems with my jQuery I couldn&rsquo;t work out, and so I went back to devdocs.io on the browser in the plane at 40,000 feet, 50 &hellip; whatever. However high you fly. I typed in the URL, and then bam, I had all the information that I needed.

I really love that idea of not just every device, we&rsquo;re creating content for every device in every scenario, but also, every data connection. If you&rsquo;re not connected to the network, is your content going to be available anyway? That is something that I think is the next thing that we&rsquo;re all working towards. The other thing that I&rsquo;m working towards is like making things more performant. Recently, the last couple weeks anyway, they had the release of AMP, so the Accelerated Mobile Pages. This is the new thing that Google kicked out there, and the whole idea is that it makes things faster.

When love when things are fast and when things load fast, but I had a carpool of problems in understanding what they&rsquo;re actually trying to do. For one, the A-M-P Project or the AMP Project requires you to create a new template layout for your site. It forces you, and I do mean force, so you to include this. You have to include the AMP JavaScript in the header of the document. If the AMP JavaScript doesn&rsquo;t load, then your page doesn&rsquo;t load. For me, that&rsquo;s against the [00:18:00] natural way that we try and get people to build things like, “You should build them progressively, you should make your content available, and then you should lay things upon it.&rdquo; To come up with a solution to a faster &hellip; to making faster websites and then forcing this JavaScript in there, it goes against the grind a little bit.

The other thing that it requires you to do is you need to use only a subset of HTML elements, and a lot of those elements then get renamed. For instance, if you want to include an image within your AMP document, then you need to not use the image tag. You need to use “AMP-image&rdquo; as the tag instead, and then there&rsquo;s a bunch of HTML tags that you are not allowed to use. I can&rsquo;t recall all of them. I&rsquo;m going to say things like you can&rsquo;t include things like iFrames. Basically, they&rsquo;re trying to make it as performant as possible, so they&rsquo;re stripping out things that might counteract to that performance.

Now, for me, it &hellip; this approach is like going back to an MDOT site. All right? In the past, we used to have desktop sites and mobile sites, and the mobile would have an entirely different structure around it. It would have different content in it, and it would only be available for mobile phones. This feels like the same thing. It feels like I need to create a new document to house new content within that just to take advantage of this AMP process.

Now, you can use &hellip; you can do it though like the focus I think shouldn&rsquo;t be about, “Let&rsquo;s get on to AMP, and let&rsquo;s start booting our pages there, and then that will solve our performance problems. Then, we can make our other site really, really big and have loads of images, [00:20:00] and it doesn&rsquo;t matter.&rdquo; That&rsquo;s not the approach like I would focus upon making your site as bleeding fast like bleedingly quick as possible. Once you&rsquo;ve done that, then you can look at your AMP stuff because effectively, AMP is just a way of making the web faster, so if you just made your website faster, you wouldn&rsquo;t actually need to use it.

Now, the good thing is it&rsquo;s not that difficult to set up, so &hellip; and complain a little bit about it, but effectively, if you already run an RSS feed, this is essentially what you&rsquo;re doing. All right? RSS takes the content of your page, and then repurposes it within an XML structure effectively, and then you can customize what you want in there. AMP does the same thing, so I created a new template. I created a new layout for the content area. The CMS that I use has like a template as a wrapper, which would be the header, a HTML head, body tag, and then closing body tag, and closing HTML, and then a layout wrapper, which then just lays out how the page structure would normally look.

For me, it took me an hour to set up. I didn&rsquo;t include any styles within it because I didn&rsquo;t want to copy and paste styles, and spend time. It was just to get it going, and I didn&rsquo;t mock around with the images at all. I included 1 image at the top of the page, which was like the article feature image. Imagine that like as a thumbnail kind of image, so I used the AMP image for that, but otherwise, I didn&rsquo;t worry about converting image tags within the body of the content itself into AMP image tags, so I don&rsquo;t know how that&rsquo;s going to break.

Like I said, it&rsquo;s like using RSS. If you&rsquo;ve already got that, it&rsquo;s not too much of a step. [00:22:00] The only other thing you need to do, you need to put a meta tag in the head of your document, so of the original document on your website. You put in a meta tag, and I think you do a “rel,&rdquo; a “rel AMP.&rdquo; I&rsquo;ll put it in the show notes to relate it, and then you give the URL of the AMP version of the page. Then, on the AMP version of the page, you point back to the canonical version of the article as well, so it&rsquo;s cool.

Again, I&rsquo;m not really sure it&rsquo;s the greatest thing in the world, but for an hour&rsquo;s work, at least it&rsquo;s up there. You can check it out. I don&rsquo;t think I&rsquo;ve set it up on the podcast page, but if you do go to one of the articles page, if you go to “Articles&rdquo; in the menu, and then check out one of the articles, then you&rsquo;ll be able to see the link to the page, and then you&rsquo;ll be able to grab the link for the AMP page, and then open that up, and check that out as well. How you register it with Google, I just assume they&rsquo;re going to index my pages, and then find that canonical link, and then go and index the AMP pages, but I&rsquo;m not actually sure. If anyone does now how that might happen, do let me know.

Google, Google do some cool things. This is one of them. I know they&rsquo;re trying to make the web faster. One thing that they did to make the web faster was they removed that 300-millisecond tap. If you had a mobile, a touch device on a webpage, it would delay 300 milliseconds on a touch to ensure that it wasn&rsquo;t going to be like a touch scroll. You put your thumb on the screen, and then you just push it up, and that&rsquo;s a scrolling action. If every time you did that and you were hovering over a link or a button, you don&rsquo;t want to fire that, and then just go to a different page every time you&rsquo;re going to scroll. That would be super frustrating.

The browser vendors put in [00:24:00] this delay to see if you like touched like down and up, and then it would do the link after 300 millisecond. Whereas if you left your finger there and moved it, then it would know it was a scroll event, and then it would scroll the page for you. On any device or any website on a Chrome browser on Android, that has &hellip; or the viewpoint meta tag set to width equals device width, then it removes that 300-millisecond delay when clicking and still avoids the incident of accidentally clicking through to links when you&rsquo;re scrolling as well.

Now, WebKit have just announced that they&rsquo;re doing the same, which means Safari users like us &hellip; yay, or us. I say “us&rdquo; because I&rsquo;m an Apple person. We&rsquo;re going to get that on the iPhones, which is awesome, but one of the problems is it&rsquo;s been released now, so they say, “Yes, we&rsquo;re going to do it now,&rdquo; but the release cycle for Safari is just diabolical. They release it once a year when they release the update to the operating system, so we&rsquo;re not actually going to get it until like September of 2016. Thank you for that, Apple. You guys rock in the most sarcastic way possible. It is super like frustrating to have this sort of things. This sort of thing is like so close, but then not able to actually take proper advantage of them.

Fortunately though, our great friends at the FT, the Financial Times labs, they&rsquo;ve come up with a lovely little script which allows you to bypass the whole 300-millisecond delay, so if you go to GitHub &hellip; GitHub. Is there a website called “GitHub?&rdquo; I wonder. If you go to github.com/ftlabs/fastclick, [00:26:00] it will remove that 300-millisecond, 350-millisecond delay from clicks and make your websites just feel so much more responsive. Definitely, go and check that out. It requires JavaScript to work, but hey, so does AMP, so sometimes. If it doesn&rsquo;t load, then you&rsquo;re just going to get the same use case, the same experiences as not loading it and you&rsquo;re not losing out on anything.

Now, that is designed to make it feel faster, make the web feel faster, and when we say “feel faster,&rdquo; we&rsquo;re always equating this to, “How does a native feel? Like how much faster does a native app feel?&rdquo; It feels native. It&rsquo;s smooth. It&rsquo;s 60 frames per second. I was having a long conversation/argument with a really good friend of mine on the way home from the football the other day. He is brilliant. He helps me with my hosting. He gets my website running super fast. He&rsquo;s been a massive help over the last couple of years, but we&rsquo;re talking about this new app that was coming out and how it didn&rsquo;t have a mobile side. It was native only.

We know that Instagram went this way for a little while, but I&rsquo;m sure even from the get-go, Instagram still allowed you to view pages. You just couldn&rsquo;t do anything, so if I took a picture of something, I could share it with someone. If they didn&rsquo;t have Instagram, they still got the web version, and they could see the image. Now, I want to say if they didn&rsquo;t have that maybe at the very beginning, it was a real pain in the butt because someone would send a link or post a link to their Instagram image, and then you&rsquo;d go there, and it&rsquo;d be like, “Bop bow, you need to install [00:28:00] Instagram,&rdquo; and that&rsquo;s super frustrating like really, really frustrating.

Anyway, so we&rsquo;re having this chat, and we&rsquo;re talking about this new app, and it&rsquo;s only native, and they&rsquo;re not going web because they don&rsquo;t feel as though web provides a good enough experience for people and that the web is dead. Now, not his words. He&rsquo;s recycling the words, but yeah, like the web is dead, and that native apps were the future, and the web will die this death.

Now, I remember seeing a presentation recently where they put up all the wide articles that mentioned that the web was dead all the way from like &rsquo;98, &rsquo;99, 2001, 2003, 2005, 2007, 2009, 2011 like it just keep coming up, “The web is dead. The web is &hellip;&rdquo; this time, definitely dead that native is going to kill it. Whenever I hear it, I just giggle to myself and like, “Yeah. Okay. Fair enough. The web is going to die. Sure. Native is the future.&rdquo;

I can see their point. It&rsquo;s just going &hellip; it&rsquo;s a bad user experience. They want to build their brand on a fast, sleek experience, but I think the experience of clicking and receiving a notification about something, and not being able to access it unless you have a specific phone or a specific operating system, or if you have enough space on your phone to be able to download the app, if you have a good enough connectivity to warrant downloading 50 megs, if you have a good enough connection. Not just like the speed of the connection, but how&rsquo;s your data plan?

I don&rsquo;t know how big this app was, but I&rsquo;m talking about like 50 or 100 meg. That seems a lot to me to be able to just view some content and a few pictures, but you have to download it like you [00:30:00] still have to download it. There are no times ever when you receive something that you have to download the internet. You never have to download the web. All right? Every device comes with a browser. If it doesn&rsquo;t have a browser, it probably doesn&rsquo;t connect to the internet, and you probably want to be able to get your native experience on that device as well.

For me, he was like dangling a massive red flag in front of my eyes that&rsquo;s like waving in front of me just waiting for me to charge, and charge I did. I stuck up for the web, and the way of building things responsively, and also that it doesn&rsquo;t need to be slow. We have things like this FT click thing. Now, I agree, it will be &hellip; things will be sleeker on native because you have &hellip; you&rsquo;re closer. You&rsquo;re like 1 layer of obstruction, closer to the operating system. You can tap into &hellip; just things will work faster that&rsquo;s naturally. It&rsquo;s a natural thing.

In the talk that I did at the MOBX Conference, I don&rsquo;t understand why you would have one over the other, right? I can understand why you would have a website over native apps because it&rsquo;s universal and not everyone is going to download the native app, but I don&rsquo;t understand why you have a native app without a website. There&rsquo;s no reasoning around it. You&rsquo;re just cutting off your nose despite your face by saying, “This has to be special. Only special people can access this particular content. I don&rsquo;t really want to access the universal audience that I have at my fingertips if I had a web version of this.&rdquo;

Anyway, we spoke lots about it. We argued quite a bit, and then we [00:32:00] just bowed and agreed to disagree. It turns out that on further conversations, and when we looked into it a little bit further, and spoke to a few other people we know, it is on this company&rsquo;s roadmap, and they are heading in that direction now, whether it was always that plan or they come to the realization, but it&rsquo;s something which I totally agree. Native apps are great. You do need them for some things to be super fast like I use Slack. It&rsquo;s great. I have it on my tablet and my phone, but I also have it in the browser. All right? It&rsquo;s just a good experience. If I were only able to access it in the browser, I would be absolutely fine with that because it does what I need.

That&rsquo;s my week. That&rsquo;s what&rsquo;s been happening. Yeah, we&rsquo;re going to &hellip; I&rsquo;m putting a couple of these links that I&rsquo;ve talked about so far into the newsletter this week. If you&rsquo;re not subscribed to the newsletter, make sure you head over to responsivedesignweekly.com and drop your email address in there. You&rsquo;ll get a newsletter once a week talking about all this kind of stuff with links that you can go off and check things out yourself.

Next week, we&rsquo;re going to be talking to &hellip; I say “we.&rdquo; I&rsquo;m going to be talking to the team from ZURB. ZURB are the guys that build Foundation. It&rsquo;s like Foundation and Bootstrap have been going head to head for the last couple of years. ZURB are actually about to release Foundation Version 6, and they&rsquo;ve cut their code by 50%.&nbsp;

They&rsquo;ve made things faster. They&rsquo;ve made them smarter.

What we&rsquo;ll be doing is we&rsquo;ll be catching up with some of the developers who have been putting this stuff together and talking about why they changed it, what has changed on the web for them to warrant changing the [00:34:00] framework in this way. Also, if you are running something like Foundation, how people be able to go and do updates properly. Can they just drop it in there, or is there like a few steps that they need to go? Also, where they&rsquo;re looking at next like what they think the next big problem is to squish out.

I also mentioned we&rsquo;re going to be talking to Dan Rose. It&rsquo;s coming up, so that&rsquo;s going to be all about workflow, and working with Photoshop, and the responsive design workflow in teams which will be really cool and really interesting. Then, also, Rachel Andrew who has agreed and said she&rsquo;d be happy to come on the show as well. Rachel is going to be talking about her thoughts and knowledge on the grid layout specification, which is really exciting. It&rsquo;s bed down a little bit now. It doesn&rsquo;t change as much as it was, so she&rsquo;s been able to create some really awesome examples and build up a little bit of a talk around. I think in the moment, she&rsquo;s in the States talking at an event, but &hellip; so it will be really good to get her on and chat through that stuff as well.

Yes, we&rsquo;ve got some really great guests and talking about some really great topics on the way over the next couple of weeks. Yeah. Thank you for tuning in and listening. Please go ahead and rate the show up 5 stars. Leave a comment. That&rsquo;s how people find out about it. Tell your friends. Tell your friends to subscribe. If you have a topic that you want me to cover, or if you would like to join me and talk about some of the things that you&rsquo;ve been doing at work, or some of the things that you&rsquo;ve been working on, or some of your own thoughts and ideas, then do reach out. You can reach me the contact form link in the footer, but until next week, stay responsive, and I will see you then. Cheers, everyone. Bye.

RWD Podcast Episode 43
46:40
2017-09-23 00:10:05 UTC 46:40
RWD Podcast Episode 43

Presentation Slides 

RWD Podcast Episode 42
22:29
2017-09-23 00:10:05 UTC 22:29
RWD Podcast Episode 42