This course has been archived, the content is no longer up-to-date or relevant to most students.

What Counts Against File Size in HTML5

This lesson is exclusive to members

Course contents
SECTION: 6
Warnings & errors 1:10
SECTION: 7
Width tool 5:23
SECTION: 14
Project 9:34
SECTION: 15
Buttons 12:14
SECTION: 17
Bone Tool 6:53
SECTION: 18
Stop looping with JS 1:45
SECTION: 22
Conclusion 1:37

Questions

0

Course info

53 lessons / 5 hours

Overview

This course is for visual, creative people who need to start making HTML5 banner ads. I made this course for people that are struggling to get their heads around the new world of HTML5 advertising. This course is step by step with exercise files. I’ve saved a copy of each Adobe Animate file after every video so if you get lost you can compare your files to my completed files. At the end you’ll be able to create, test and upload standard banner ads.

This course is perfect for people completely new to the digital advertising world. We’ll cover all the basics. It’s also great for people who previously worked in Adobe Flash to produce SWF advertising.

Because this is such a new industry I’ll be around to help you with any questions. Use the forums on the pages and I’ll respond.

Thanks for considering my course. If you’re not sure if it’s right for you. Simply sign up, try it out and if you’re not happy I’ll refund you no problem. - Dan.

What are the requirements?

  • You'll need a copy of Adobe Animate CC 2015 or above. A free 30 day trial can be download from Adobe here.

  • No previous Adobe Animate or digital advertising knowledge is necessary.

  • If you're not sure if this course is right for you. Email me what you’re trying to do and check if you’re on the right track.

What am I going to get from this course?

  • 53 lectures 3 hours of content!

  • Forum support from me. 

  • How to build banner advertising

  • How to keep file sizes down.
  • Firm understanding of the publishing process for ad networks like Google Doubleclick, Adwords, Simek etc. 

  • Professional workflows and shortcuts. 

  • A wealth of other resources and websites to help your new career path.

What is the target audience?

  • YES: This course is for beginners. For people who prefer not to work in code. Visual people. Creative people. Graphic designers. Marketers. Past users of Flash.

  • NO: This course is not for developers. This course will cover standard animated banners. Not dynamic banners like expanding banners, video banners or game banners. 

Course duration 5 hours + your study.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Transcript

Hey! It’s real me again, in front of the camera, awesome. So what were going to do now is were going to cover file sizes, in this case, what gets included in your file size. So there used to be, the limit was 40KB, 40KB was how big your file used to be, and it was really easy to understand, you produced your file and it was something called an swf, and at the end of it you went how big am I and if it was over 40KB you had to go back and try and make it smaller and if it was under you were fine.

So what happens now with html5 file sizes, there's a little bit of varying things that go along. So let me explain a bit. So because your document is actually a combination of html, JavaScript, images, sound, videos, those sorts of things. They all come together to form your final file size and generally, say the ad networks, they test the file size based on the zip that you upload, so all unpacked it might be one size but if you zip it all up, so you select them all, right click them, zip them, well do that in the publishing part, its that final file size that actually counts and generally, 150KB is our new standard which is amazing. Its still not very big but its better than 40KB, which is what it used to be.

So when it comes to your file, as in getting it checked, some people just check the zip and the file size of it. That’s fine, other ad networks actually dig into that zip file and have a look. And they have something where they’ve got an initial size, a load size and then they’ve got a total load size so they might say, the rules are it has to have an initial load size of 35KB and then a total file size of 150. What that means is that its pretty much just the html component of your ad. Its going to go and check that and make sure that is not more than 35KB because that’s the initial load, that’s the thing if somebody is going to a website and it loads, it loads the html first and then when its ready it calls down to javascript and the images and everything else afterwards. So that’s one of the things you need to be wary of, that sometimes its not just the 150, it’s the initial load size and its just the html file. So that’s something you can go check easily. Where you go to your publish files, just right click the html file, is it more than 35KB, then you might have a problem. So that’s one thing to check, initial load size versus total load size.

One of the other varying things that come along with it are some of the libraries that get used, were going to talk about them more in publishing but most html5 banner ads use a premade library to help make things easier. Adobe animate is no different, it uses something called create js, and that is a premade, it’s a library or template that adobe animate uses to make sure everything works nicely across all the browsers. And some ad networks consider that part of the file size and its quite big so they include it and other ones, like I know the work that I've done with Google double click, they don’t include it. They say, the 150KB is all of it except don’t worry about that create js file. Were not going to include that in the total file size, so you’ve just got to check, there's so many ad networks out there, you’ve just got to check what their specs are and find out. And work within their boundaries.

Alright, lets go and do another video, lets start doing image compression, this is the holy grail of file size reduction.

  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025