Hub

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.