PageProof Academy: HTML Proofing – URLs, ZIP Files, Emails & Comment Management

Welcome everybody. It's Marcus here from PageProof for the PageProof Academy number 4, which is HTML proofing. So today we're going to go through 4 areas of HTML proofing. And we're going to start with what it is and some of the things that you should know about HTML proofing in regards to PageProof. So we'll start with the types of files and URLs and content that you can use through the HTML proofing tool. We'll then take a look at how you can load those in. We'll put some markup on the HTML proofs. And then we'll take a look at how do you manage the comments? And how do you get the most out of that comment pane when you're looking at HTML feedback that's come back from your clients or from your internal teams on an email or maybe a website that you've been working on. So Those are the areas that we'll cover off in this session. And what we'll do is we'll get straight in and take a look at the types of content that you can do. So as I said at the beginning, PageProof, we have an HTML proofing component built into all the licensing of PageProof. So everybody can use this for their work. And we have 3 types of HTML proofing that we support. Number 1 is a live URL. So you can take a website, you can take a staging server, possibly. You could also take a share link from Figma, or you could be working in Google Sheets and you just want to share that sheet with somebody or a Google presentation. You use the share feature to get a URL, and then you can use the URL proofing. And that goes for things like Adobe XD share links, also things like Microsoft Office 365 share links as well. So this URL feature is extremely flexible and lets you do a lot of the content which is live and on a URL on the internet. Number 2 is a zip file. So we support zip file proofing where the zip file contains HTML content. So it'll have an index.html or maybe just a single HTML file at the top. So that is typically when you're doing something like a set of banner ads, or you might have in there a a microsite. So you've put together an entire website, little tiny little website, and you just zip that up and you want to send that out for proofing. So those are extremely flexible for allowing you to put any sort of content in there that you like, and you can upload that zip file into PageProof and get people to leave you feedback. And then number 3, and this is probably You know, this is undoubtedly one of the most popular HTML content features of PageProof, which is email. Now we all know that sending out emails from an email templating system like Mailchimp or ActiveCampaign or Salesforce or anything you like, it's a little bit of a painful task. You send out all these test emails and you get bombarded with all this feedback coming back. With PageProof, we have simplified that whole thing. So that you can do email proofing here and keep it in a nice, controlled, orderly fashion. So we'll show you how to do that. Now, interestingly, email comes in two ways. Number one is that you can upload a file that you've saved from Outlook or Mail. So if you're looking at an email inside, inside your email application, and you think, oh, I wouldn't mind sending that out for proofing, You just highlight that email in your inbox, go up to the File menu and go Save As, and it will give you an EML file. So it's a.eml or a.msg file. So those are files that you can drop into PageProof. The other way is that you're able to take a system like Mailchimp, ActiveCampaign, Salesforce. There's literally 3,346 systems that can send out email from email templating systems. So I think I exaggerated there, but the point is there are thousands of them. We support them all. As long as the system can send a test email, then you can proof it in PageProof. So we'll go through that as well. So there we have it. 3 ways, just recapping, 3 ways of doing HTML proofing. URL, zip file, email. So let's get straight into looking at how you load these in. So you'll see the file dropper in the middle of the screen on your PageProof dashboard. Now this file dropper, when you click onto it, it pops open and shows you these options. And you'll see at the top, we actually have the three at the very, very top there. So my computer will enable you to browse for a zip file or browse for an EML file that you might have on your computer. So that's, that's one way. The second one there is website URL. And this is the one we'll start with. This is where when you choose website URL, it takes you to what is the URL of your proof. And in this case, you know, in here I could paste a Figma share link, or I could paste a Google Doc share link or an Office 365 share link.. But in this case, I'm going to actually put into here a website. So we'll go HTTPS, and that is an important thing. Make sure it's the secure version of the site. And then we'll put in something like rolex.com. Now that's going to check that that's a valid site that we can actually proof. It's something to note as well. You have to make sure, or at least do a test email to yourself before you go onto a site that you're proofing for the very first time. To make sure that the owner of the website has enabled you to embed it. That's something that is out of PagePress control. But you just want to make sure that the owner has not said do not embed the site, you know, has enabled us to be embedded. So that's how you put those URLs in. Now, if you are putting a staging link into here, sometimes those staging links will have some credentials that you want people to enter. So you can actually roll down the three dots on the end here, turn on the basic authentication, and set the username password if you want to. So that's there for your, for those staging servers that might have that authentication required. So that is all you need to do to set up a proof from a URL point of view. So if I hit next, it takes me to the very familiar page proof proof setup screen where you can set up some details over on the left-hand side about the proof, deadlines, etc. The right-hand side, you can set up and choose a workflow, add a checklist. So if you have made a checklist for website proofing, you'd attach that special checklist to your website. And one thing I just want to point out here, a tip, which is if you're doing lots of different websites that you want inside of a collection, up the top of the screen, you'll notice there is the ability here to just click and then just go another website URL and another and another and another. And that will put all those different proofs, those website proofs into a collection so you can send out multiple at once. So just take note of that little option there. Okay, let's go back to the file dropper. And take a look at the second option, which is to choose from my computer. I want to upload a file directly from here, which might be a zip file. So if you click on the zip file and then go to the proof setup screen, you'll see that that just comes in, loads the zip file into PageProof, and this is a very familiar interface for going through and setting up your zip file. Now one thing I will point out here, for a microsite, you can just take that in as a zip file with all of your HTML content in it. So all your CSS, your JavaScript, your images and everything all inside that zip file. But if you are doing banner ads, we do have a trick which I'm going to show you the article for here. So this is a help article on help.pageproof.com. And this is displaying multiple banner ad sizes in a single proof. And this is a great feature which enables you to put in your different banner ad sizes, and we show you how to structure your zip file. So just go through this article and it will show you, hey, how to put all of the different banner ads into these folders for the different sizes. You download this index file from PageProof and you just drop it in to the same folder as your banner ads, zip it up, drop it into Page Proof, and we'll take a look at what that looks like in a moment, actually, so you can see the outcome of that once we get past this piece about uploading. Okay. And the last option, this is doing an email proof. So we mentioned you could— we support an EML file and an MSG file. You drag and drop those as you normally would if you're doing any sort of proofing. But there is an option here which says Email. If you click onto this, it takes you to the proof setup screen, and it's given us a unique email address at the top of the screen here for this proof. So I can copy that just by clicking on Copy. And now I can go over to my email templating tool, and I'm able to paste in that email and send it in to this address. What happens then is PageProof grabs hold of that test email and makes a proof out of it. So this is a really, really great way of getting feedback and routing your emails that are coming from your email templating tools. And again, if you're doing something like A/B testing on a couple of different email varieties or different styles that you're trying to work with, just remember that you can come up to the top here and do another email from inside of here. And what that's going to do is create a collection where you will have multiple emails inside that one collection for things like A/B testing of different varieties of your emails. So that is how you set up a proof from those other email systems that you might use for your templating. Okay. Now, we'll take a look at what those look like, but I just want to just take a little bit of a segue before we take a look at what the proofing screens look like. And that is to look at the browser extension. So PageProof does have a browser extension for enhancing your HTML proofing. So this is something that you would, if you were viewing certain types of proofs, your clients were viewing certain types of proofs, you'll be prompted to install the PageProof Browser plugins. So there's a browser plugin for Chrome, there's one for Firefox, and there's one for Safari as well. So we support the three major. And by saying Chrome, I also mean Microsoft Edge as well. So I didn't mean to leave Microsoft Edge out. But yes, that is also supported in here as well. Now this browser extension is required for one type of proof.. And that is your URL proofs. So those are the ones where you've made the proof from a website or a Figma link or a Google Doc. That is the only variety of proof that you need the PageProof browser extension for. Zip file proofs do not need the extension and email proofs do not need the extension. However, the experience is better if they do have it. So that's a note for anybody who is wondering about the browser extension for viewing proofs. Okay, so let's take a look at putting some markup on a proof. So I'm going to jump in and take a look at a proof that I sent out earlier, which was a URL proof, and it was one of the Rolex websites. So we sent this out just by putting in the URL, and when we go into the— click onto the proof, pops up and shows us the Rolex website with PageProof wrapped around the outside of it. And you'll notice this is a fully functioning website. So you can go through and browse through all the content, all the JavaScript and transitions, and everything works exactly as it would if we were looking at the Rolex website right now outside of PageProof. So this is showing us what this would look like on a responsive website. So you can see down the bottom it's actually said, hey, we're in responsive mode. So if I make this browser wider, smaller, etc., the website inside there would change as well. But what we do have here is at the bottom you'll notice that if you click onto where it says responsive, it pops up and says, hey, do you want to look at this on different screen sizes? So I'm thinking, hey, I wouldn't mind knowing what this looks like on an iPad. So if you choose iPad from the menu, we force the HTML into the size of an iPad screen. Now we're not emulating the iPad's browser. We are just literally pushing the sides in and making the website respond so you can make sure that the layouts still work on an iPad, for example. And same thing if you were going for a phone. So if we change that to a phone-sized display, you can now see here's how the phone works. And you would have noticed that now the menu has popped up to the top. So Rolex obviously have a responsive site because it's now showing different menus and different display for the phone. So this is how you can check the responsiveness on different screen sizes simply by using the menu at the bottom of the screen. Now commenting. I'm just going to go over and grab the commenting pen. I guess a lot of you have already used the commenting features in PageProof. HTML commenting is different than PDFs and other media types. In that when you click onto the comment tool, we take a snapshot of the website at that point in time so that that is preserved inside the comment. And I'll show you why that's a great thing in a moment. But I'm just going to come in here and say, hey, this piece here, can we make this blue? I'm sure Rolex wouldn't appreciate that, but let's just do that anyway. And you'll notice that the comment pane rolls away straight away and it's taken us back to the website so we can continue to comment. Now, by looking at this comment, by clicking into it, you'll notice that it's showing us, yes, okay, there's the piece of markup. There is also three dots inside this comment. And when you click on those three dots, it brings down this information that we've captured at the same time the comment was placed. And this is really useful for your website developers because the website developer is typically going to ask you questions once you give them the changes, they're going to say, well, which browser were you using? And what screen size were you on? And those sorts of things. Well, PageProof has captured that, put it into the comment for you. So you can see it right here. So I've got the devices being the iPhone screen size. This is the browser version that we were using. There's the scroll position on that page that we were. And then down the bottom here, as you hover over the top of that shortened, it gives us the full URL. So the website developer has everything they need in order to reproduce what you're seeing on screen, and they're able to then make those changes and do what they need to do. Okay, so this is how the website proofing markup features work inside of PageProof. Now, some of the other tools that you would typically use in proofing also exist here. So down the bottom here, we've got the measurement widget. We've got grid lines and rulers in here. So you can actually still bring in the— turn on the grid lines, and you can pull these grid lines in. And make sure things are lining up the way you'd expect. So you've got the options for doing that. And of course, the ruler tool is here as well. So if you want to measure elements on this page, you can just click and drag with the ruler tool and it'll give you dimensions for certain images and things that you want to do as well. So those are available from that measurement widget. And of course, they're also in the magic tools here so that you can use those if you need to. So some of the things that you can see inside the HTML proofing screen. Now let's jump out of here and look back at a couple of different options that we were talking about earlier. So the one that I was mentioning was when we uploaded that zip file which contained the banner ads. And, you know, I took you to that article that showed you how to lay out the content of that zip file so you could get banner ads showing up on the screen. And what happens is that when someone clicks onto that proof, it's going to open up that zip file of all the banner ads and they're going to show up in this galley view by default. So you can see here are all the banner ads that we had inside that zip folder all showing up and you can see all the sizes and you can see they're all animating. So they're all HTML5 banner ads. They're all animating. So you can go through and look at those if you want to. If you prefer to see those as individual banner ads, at the top of the screen, there's a button here that says View Individual Banners. If you click onto that, we now go into a single banner ad by banner ad view so that you can then click on this menu and jump to the banner ad that you want to look at. So that's the other way that you can view them as well. Now, a tip when it comes to looking at some of your HTML content, particularly banner ads and sometimes emails, is making sure that you don't have your ad blocker on, which may block some of the imagery inside your proofing. So if you're creating ads and you've got an ad blocker on, sometimes your ads can get caught up in the ad blocker and they won't display inside of the PageProof HTML proofing. You can just go up to your ad blocker and just say allow whenever it's on PageProof, and this will stay out of the way. And if you do have clients or other people that are going to be looking at these, maybe just make a note for them as well. If they don't see the ad or they don't see an image inside the ad, it may be their ad blocker that's getting in the way. So a great way of getting feedback on banner ads using the zip file that we spoke about earlier. Now, going back, I'm just going to take you to have a look at what an email proof looks like. So when you send a test email into PageProof using that unique email address that PageProof gives you, this is what you're going to see. It is going to put the email up into the center of the screen, and you've got the options here for viewing that email in different screen sizes. So you can check the responsiveness. Of your email. You can scroll through the email, view all the content here. These buttons and links and things are all live if you want to click them. But there is also a shortcut here, which means that you don't need to do that. Over on the left-hand side, under that little measurement widget, if you click onto there, you'll see that there's an area here called Links, and that is the link checker that's built into PageProof's HTML proofing for email. If you click onto here, it's going to show you all the URLs, and generally they're all going to be okay. But if there is a URL going to, going nowhere, that will show up here with a red dot. So the link checker will give you a bit of a heads up that, hey, one of your links is not going to a location that's going to serve content. So this is the link checker built in. You'll also see up here it's got the sender and subject line as well. So you can see the subject line if you want to read it. That information is is in this little widget over on the left-hand side of the screen. Now, as you remember, we did also say that you can upload an EML file. Now, the difference with an EML file is that you're taking literally a piece of email out of your Outlook or Apple Mail or whatever email client you're using, and you're putting that in through PageProof. So that looks a little bit different. It's going to show you up the top the information about that came from Outlook on the delivery and all that sort of thing. And then of course you're going to see the rest of the email just like we saw with the previous version. So all of that content is inside of here as well. Okay, so those are the 3 types in terms of, you know, what is it like to view those HTML content on screen. What we're going to look at next is going to be about managing those comments. So you're going to have people that are going to leave a lot of comments on your work, and you want to be able to manage those comments and view these in the best way. So let's just jump in here and take a look. This is the Mercedes-Benz website. And you'll notice over on the right-hand side, I have 7 comments from my colleagues. They've come in here and they've made a bunch of comments about the things that they would like me to do. Now, one thing you will note With PDF and other formats, you can see all the comments on top of the PDF as soon as you open the proof. That's the same on images. It's the same on Word documents. It's the same on video. But when it comes to HTML proofs, all the markup is not showing all over the proof. And the reason for that is because the view of the HTML content changes. It can be a phone view, a tablet view, or responsive view. So we can't show you all of the markup at exactly the same time because some of the comments may be only for mobile, some of the comments may only be for tablet. So what you can do here is you're able to click on each comment and that will go and retrieve the feedback. So it brings back for us that screenshot that we said it takes and shows you the markup on here. So by clicking into each comment, we will retrieve that for you and show you so you can see exactly what it is that that person referred to. And you can roll down these three dots here to see more information, including the URL that it refers to as well. Now a tip. When you're looking at a comment, you have the ability to actually look at the snapshot that was taken at the time the comment was placed. And you can look at the live website as it is now, and you can toggle between the two. And the way that you do that is that when you click into a comment, that will bring back the snapshot. You roll down the three dots here, and you can see that up the top you've got two icons. One is the snapshot, and that will show that. And if you click onto the second one, which is restore the webpage view, This will take you to the live website and actually restore that view for you in the right size and in the right scroll location. So you can say, well, what does it look like when we took the comment? What does it look like right now? And this is great when you're working with a live website where changes are immediately being applied and you can now compare essentially what was taken at the time that the comment was placed and what it looks like right now. So you've got the two that you can toggle between. Now, in order to kind of wrangle these comments in a much more manageable way, if you think about making changes, you want to put these in some sort of order so that you can go through and make the changes in a way that suits you. So up the top of the screen, you'll see that we've got in the comment area here, there is page, there's a device and a search. And if you click onto page, it shows you all the, the pages that the comments refer to. And you can click onto a certain page and it will shorten the comments to just the comments that refer to that page. So for example, if I wanted to look at just the comments to do with the Mercedes-AMG page, I would click here. And it shortens the comment list just to the comments that refer to that URL. So now I can set about doing those changes on the files that refer to that particular URL. So I would add the word Instagram here. This one here, they want me to put another car in the scene over there. So go and do that. And for some reason, that over there is not quite in perspective. Okay, Photoshop that and fix that. So you can go through now and make the changes on that one page. Then click again. Now I want to make the changes for this page. So you can go through and you can sort, if you like, the comments by page, which makes it easier to get through your comments. The other way to look at this is actually I'd like to work on these by device screen size. So the second icon in there is showing you the device. So I can say, well, I'm in the mode at the moment of working on the mobile view. So if you just choose mobile, it's going to show you the comments that are related to the mobile view. So you can now go through these comments and make the changes based on mobile. Alright, so you have got the options here to just go through and make sure you're getting the things targeted for the work type that you're going to embark on right at that point. You can clear the filter from here. There are some other filters I want to point out over on the right-hand side. You can also, you know, view it by— you can order on the side. So these— this is ordering, ordering by who commented, by comment number, date, last reply, etc. So you've got also the ability to change the order that this displays as well. And if you want to see the comments by one particular person, little tip, just click on their avatar here. That'll pop up and say, hey, this is this person. And then down the bottom there, it's got this button that says view comments, and that'll just shorten the list just to the comments for that particular person. So that's how you do that inside of here. Alright, so these are some of the strategies you can use to go through and order your comments and make sure that they are viewing in the way that you want them so that your teams can go through and go through page by page. You can go device, different device screen sizes, and you can also change the order of these so it makes more sense for you to use the platform. All right, so those are the main pieces hit off. If you have any questions, please do reach out in-app inside of PageProof. And in the bottom right-hand corner, we've got the help icon there. Click and ask questions of our team, and we'll be certain to help you out. Thank you very much, everybody.