The fastest way to create multi-shape HTML5 banner ads.

July 11, 2017, written by Connor Worden

Here at Localstars, we have the latest technology to help you generate high CTRs with our fully responsive HTML5 banner ads. Everyone that has seen the latest release of our new HTML5 banner maker has been blown away at the speed of how quickly ads are built.

Throughout our development process of building the templates, we’re constantly checking for differences in browsers to make sure that not only does the template perform well but it works for all browsers.

Whether you’re a salesperson or a design expert, the platform works for everyone. Our online banner maker has the tools for you to edit images, text, colours, and fonts making it perfect for matching a template to your brand.

Why should I be using HTML5 over Flash?

It all boils down to one factor, cross-device support. Most modern mobile devices don’t support Flash anymore so your ad would not work.

You also receive the added benefit of performance. Our HTML5 banner ads use CSS keyframes to animate so we don’t have to add anything to make the template work, it’s already in the browser!

Our HTML5 ads are ‘retina ready’ meaning that your ad will always look super sharp on any display

Take a look at our insight piece to learn more about what moving to HMTL5 means for your publications

Why should I be using digital advertising?

Our digital ads are responsive to any screen size, something you don’t get in print but more importantly; digital advertising is fast overtaking outdoor, cinema and television advertising and now totals 33% of all advertising. It is no longer competitive to just advertise in a newspaper.

For every £7 lost in print, £1 is earned – digital advertising isn’t only competitive, it’s cost effective.

If you’re already a platform user, login and start creating beautiful ads.

 If you’re not a platform user but would like to start making your own stunning ads, get in touch with our team!

The black art of designing templates

March 28, 2017, written by Connor Worden

My name is Connor. I joined Localstars less than a month ago; I’m the HTML5 Template Designer here. I’ve been in the web development/design industry for over 2 years, working for various companies ranging from a scrap metal company to an IT Support business. Today I’m going to take you through the black art of designing templates.

My introduction to Localstars.

This is my first job working in a streamlined application development environment that employs best practice processes and tools. We use a ticketing system to assign tasks throughout the team based on prioritised stories. Each task is carefully considered and specified and allocated to each developer, ensuring that they are the right person for the task.

The reason this works so well is we’re always playing to our strengths to get the job done to a pristine standard. We also pair program with our colleagues so I’m always learning new things. This environment is fast paced but not too stressful on anyone.

When I was first being introduced to the systems in place, I did think that it may be a mountain to climb, but after only a few weeks I really feel that I’ve a firm grasp of the it.

So what actually makes a good template?

Templates can be tricky to design; too complex and it’s difficult to build ads with; too unique and everyone cottons on that it’s a template; too simple and no one will use it.

To strike the right balance needs careful consideration.
You need to think about:

    • How much a customer can change the template to suit their brand?

    • Are elements of the template too flashy that it can become recognisable?

    • Does the template actually get the point across?

    • Finally, does the template catch your eye or is it just screen fodder?

    • How do I turn my really cool design into an HTML template?

You could be the Picasso of template design but if you don’t have the knowledge of HTML and CSS, it’s as good as a box of rocks. (If you don’t know any CSS or HTML I recommend using Codecademy; it’s where I started from and it’s interactive with every piece of code you write).

The way that you should think when you’re designing the template is to think of it like you’re building a house. Pretend each of the elements of the template is like a room in the house whereby each room serves a purpose and has a context. For example, you wouldn’t have your kitchen in your bathroom, likewise, you wouldn’t have your teaser image to entice interest hidden away at the end of the animation.

After you’ve thought about the structure of the design begin to write down what would be contained inside of an element. So, for example, a basic layout would be like this:

Header

  <div>Here is your header content.</div>

Image

  <div>Here is where your main image would go.</div>

Footer

  <div>Here is where your footer content would go.</div>

Then after you’ve done this begin to style it with CSS. I’m going to use inline styles here to keep things simple although I highly recommend, as good practice, to use classes (.myClass) or IDs (#myId).

Header

<div style=”background:red; color:white; font-family:sans-serif”>Here is your header content.</div>

Image

<div style=”background:white;color:black; font-family: sans-serif”>Here is where your main image would go.</div>

Footer

 <div style=”background:lightred;color:white; font-family: sans-serif”>Here is where your footer content would go.</div>

You’ve now started to begin to build your template in HTML and CSS! Each of the elements inside of the div should follow what you designed. That said, sometimes there might be a few issues with browser compatibility, text, for example, might have different rule sets in Chrome than it does in Firefox, Internet Explorer might lower performance than every other browser so animations may slow down and begin to chug.

The best way to combat this is to keep your template basic with mature and well adopted CSS functions, so it is supported by as many browsers as possible.  Also, don’t write a thousand lines of code for something that could only be a few lines, and Google everything you don’t know, there’s no point in reinventing the wheel.

For more information or to see a demo of how you can use our ad templates, please get in touch with the team.