Headphone Design & Branding project

The brief Headphone Design & Branding project

You will design a new brand of headphones to be launched through high street retailers and online.

You will design several new pairs of headphones (any style or shape)

You will design all related packaging design for the headphones.

You must identify the target demographic through your designs, targeting the following groups -

  • 9-14 year olds - these will be mostly bought as upmarket 'stocking filler' presents for an Xmas period launch through trendy high street retailers, so must compete with other 'shiny goods'. Cost around £50
  • 14-30 year olds, - this is the main product, aimed at a professionally employed demographic who appreciate design and are image conscious. They will be priced in the £80 to £300 range, depending on model.

This was the brief given to Caseyj and I. My role within this project is to create the advertising for the new headphones.

Research

The main research to be carried out will include finding out more about the demographics and the different types of adverts that are already used.

Plan of action

  • Detailed understanding of each demographic
  • What adverts exist for headphones
  • Differentiate between different brands adverts and what they are advertising about the headphones
  • Create a few sample adverts for each demographic
This is a schedule created by myself to ensure both parties knew what they were doing and when. The blue table is a joined timetable. The red timetable is mine and the purple timetable is Caseyj's.

The main challenges

Working in collaboration with another student

  • There should be a lot of communication
  • There will be additional deadlines between us where by I can get the information that is needed to be able to complete adverts to a high enough standard in time for the overall deadline
  • explore the possibility of helping each other with ideas in both areas to aid the speed of development in the project

Meeting the timescales and deadlines

  • As there are two of us working on the same project but different stages there will be a challenge in being able to come up with more deadlines so that we can

Concept designs

Not having the headphone style/design immediately

Emulating demographic adverts correctly

Physical and computer based adverts

Skills ordit

Rebecca - HTML,CSS, Adobe Illustrator, After Effects

The HTML and CSS will become useful for creating the moving adverts and in understanding how to code in HTML5 and CSS3. Being able to use Adobe After Effects will come in useful for creating another moving advert, also to then use a plugin to change the file into code. Illustrator will be useful for mocking up ideas and possibly a bit of Photoshop to be able to edit photos to go into the adverts.

Caseyj - Adobe Illustrator, Photoshop

Adobe Illustrator will be useful for creating basic designs for the headphones and looking at the shapes of the headphones. Then Photoshop will come in useful for being able to create a more finite detailed final design.

What to look at and do

  • Current trends
  • The most popular assets (sound cancelling, colour)
  • Packaging
  • Colour schemes
  • What makes them individual
  • Popular website
  • Developments and initial ideas
  • Mood boards

Branding

The definition of branding from the businessdictionary.com is; The process involved in creating a unique name and image for a product in the consumers’ mind, mainly through advertising campaigns with a consistent theme. Branding aims to establish a significant and differentiated presence in the market that attracts and retains loyal customers.

In layman terms this means creating an individual image that possible customers can easily recognise, mainly through adverts which carry on the image created and show it clearly. It aims to be different, stand out and keep customers.

What makes a company

Three key aspects that are vital for creating successful companies and products are included in the competitive advantage through ‘Barriers to entry’, ‘Name recognition’ and ‘Price leadership’.

Barriers to entry – large fixed costs, associated with heavy manufacturing and long-term research and development costs, found in pharmaceutical or computer software industries.

Name recognition – Kleenex and Coke have become synonyms for their products, can be hard to achieve however provides a long-term relationship between a company’s product and the customers.

Price leadership – whether in a boom or bust there is always demand for low prices, being able to provide consistently low prices can fill a niche (hole) in the market, in turn attracting customers over a longer time period, this needs to be sustained to fend off other competitors.

A relevant aspect for creating a new brand of headphones is lengthily research into other products that exist to be able to create a competitor with even lower costs with providing all of the benefits offered by other headphones. Another appropriate aspect is being able to deduce a catchy, advantageous name to be associated with headphones.

Global market success

The internet

  • Vital 24 hour platform
  • Has given smaller companies more access to relevant technologies and information to be able to compete better with the progression of competitors
  • Small companies can also entice and maintain more customers and keep costs down
  • Distance managing is also possible which is useful for smaller and larger companies

Ease and cost effectiveness of international travel

  • The place where the products are going to be made needs to be taken into consideration to allow for a cost effective business that can prosper
  • Is the marketplace going to make people want to travel there and will it be possible

Money transfer

  • How easy is it to set up
  • How easy is it for the customers to use
  • How fast it works - could gain more business

Choice of online marketplace

  • Some of the biggest - Amazon and eBay
  • The bigger the marketplace the wider range of products offered which could in turn could make it harder to find your product
  • Product information management is vital, a good way to communicate with customers is to have a real time inventory update - can show popularity of the product and keeps customers on side when they know delivery of what they want could be longer than expected

What needs to be considered for

Customers

  • Convenience
  • Choice
  • Clarity

Suppliers

  • Promotion
  • Productivity
  • Practically

List of all to consider

  1. New experiences vs. status quo
  2. Economical advantages vs. status quo
  3. How the technology adds value
  4. High fragmentation (buyers/sellers)
  5. Size or the market opportunity
  6. Potential to expand the market
  7. Frequency (higher = better)
  8. Payment flow
  9. Network effects (is the experience for customer N + 1000 better than for customer N directly because of 1000 extra participants)

Marketplace attributes

  • Thick
  • Uncongested
  • Secure
  • Easy to use (responsive site)
  • Feedback loop

Successful product

http://venturycapital.com/10-tips-to-ensure-a-successful-product/ Suggest that any successful product needs to address and answer these questions;

  1. Does it have unique features?
  2. Does it have mass appeal?
  3. Does it solve a problem?
  4. Is there a powerful offer with a supportive cost of goods?
  5. Can you explain how it works?
  6. Is there a magical transformation or demonstration?
  7. Is it multifunctional?
  8. Is it credible; are there any testimonials?
  9. Are there proven results?
  10. Can you answer the questions the viewer is thinking?

Our answers:

  1. Can place multiple designs on the headphones
  2. Yes, the majority of people use headphones
  3. Yes, the problem is there are no entirely unique headphones for an individual. We provide this through the ability to change the pattern/design on the headphones. Another problem is sound cancelling headphones are not good for children, they can put them in danger when they are out and about, to solve this there is a noise limit on children's headphones
  4. Not sure
  5. The headphones plug into a phone, laptop, computer, iPod etc and are a medium which allows an individual to listen to music without everyone around them hearing
  6. Changing patterns on headphones in advertisements to show they can be changed
  7. Not sure
  8. Not as of yet it is in the design stages
  9. Not as of yet it is in the design stages
  10. Not sure

Marketing plan

Reasons for why products fail

  • Poor alignment with the market
  • Technical issues
  • Insufficient marketing effort
  • Bad timing (other similar products being bought out at the same time)

To be successful

  • The product must benefit users
  • Planning needs to be done before developing
  • Think global from the outset

A powerful story goes a long way so narrow down market and geographic focus to build trust in the brand

GIF’s

Examples of the type of movement that can catch the audiences attention. It also gives ideas on how text could move within an advert.

This is a falling text video which represents the GIF that was found, because GIFs cannot be imported. The link for the GIFs are shown below.

https://web.njit.edu/~turoff/coursenotes/IS732/book/chapters/falling.gif

http://i.imgur.com/gl7wB.gif

The link to the GIF below shows the idea of a count down that I had for within an advert.

http://tjejkraft.se/wp-content/uploads/tumblr_mmykcxlB131roniego1_400.gif

Why are certain adverts successful

How important are colour schemes

Seasonal branding

Research why prices are never exact

Branding trends

Lifestyle

The Cambridge dictionary's definition: someone's way of living; the things that a person or particular group of people usually do:

  • He doesn't have a very healthy lifestyle.
  • She needs a pretty high income to support her lifestyle.
  • an alternative lifestyle

Psychologists have boxed our behaviours off into the Big Five personality traits. These describe how we perceive the world internally and how we interact with others. You are an individual, totally unique in every way from the strands of hair on your head to the skin on your little toe. But despite all that, we are surprisingly easy to categorise, too.

Building on research in the late 19th century, the Big Five is taken from a personality theory formulated by psychologists Robert McCrae and Paul Costa in 1990.

These traits have been used by psychologists to categorise people, but also by businesses in order to manage a large number of people effectively.

  1. Conscientiousness -This relates to your work ethic and organisational skills. Those with this trait plan ahead and aim high. They may also take a great interest in one topic, rather than a passing interest in many. In turn, those who do not score highly as conscientious consider this type of person as obsessive and stubborn.
  2. Agreeableness - Friendliness and compassion are among the characteristics of an agreeable person. They are also more trustworthy. Agreeableness is also used a measure of how even-tempered a person is. Those who score low in this may be argumentative, challenging or competitive.
  3. Extraversion - Those who score highly for this trait thrive interacting with others. They are extremely talkative, energetic, assertive, and are not fazed by being the centre of attention. On the contrary, a person who scores low on this my regard an extrovert as attention seeking and overly dominant.
  4. Neuroticism - A person who scores highly in this area is likely to react negatively to a situation or potential scenario, and will feel more anxious, angry or vulnerable than others. Such behaviour can be interpreted as a sign of insecurity or unstablily by those who get low marks in this area.
  5. Openness to experience - If you fall into this category you have a voracious appetitive for learning about new things, are intellectually curious, highly creative and imaginative. Those who are "open to experience" thrive on spontaneous lifestyles over rigid routines and seek out intense moments. On the other end of the spectrum are those who pragmatic and seek help in data.

Overall, your personality can be a huge indication for what lifestyle you are more likely to follow.

Lifestyle typically reflects an individual's attitudes, values or world view.

In the 21st century , the definition of lifestyle has changed. The whole look has changed a lot. What the lifestyle was about 20 years before has changed a lot when comparing with today's lifestyle. Lifestyle is the way a person or a group lives. It includes patterns of social relations, consumption, entertainment, and dress.

In the modern scenario , we can basically classify the lifestyles of people around us. This may not be a strict and well-defined categories, there may be considerable overlap between many of them and an individual may identify as belonging to, or enjoying the activities associated with, more than one group. In addition, many of these categories themselves contain subclasses and subcultures. These are listed below:

  • Income or occupation based lifestyles.
  • Consumption-based lifestyles.
  • Lifestyles based on social and political issues.
  • Military lifestyles.
  • Sexual lifestyles.
  • Lifestyles based on spiritual or religious preferences.
  • Lifestyle classifications used in marketing.
  • Musical subculture lifestyles.
  • Lifestyles based on recreation

Adverts that are good at showing lifestyle -

  • Car comercials
  • watches/jewelry
  • perfume (abstract)
  • Apple, Mac
  • John Lewis

Advertising Theory

The 2016 article on http://www.marketing91.com/advertising-theory/ explains the complexities of advertising and how even big companies can get it wrong.

Advertising has numerous objectives which includes communicating with potential customers as well as persuading them to adopt a particular product or develop a preference towards the product for repeat purchase which ultimately results in brand loyalty. Advertising Theory or theories therefore try to explain how and why advertising is effective in influencing behaviours and accomplishing its objectives.

There are numerous theories on advertising. Most theories of advertising generally propose that the effectiveness of advertising is dependent on the main practices being carried out including more exposure towards the brand or repetitive advertising.

In other words, most theories sugest that if you want a consumer to like a product or a brand continously then simply expost the consumer to a product or brands advertising such that there are certain feelings and expectations attached towards the rand itself. Advertising theories also make use of content specification, Specific message and media characteristics, consumer characteristics, product/service characteristics, and competitive actions.

As it is often said that ‘half of all advertising doesn’t work,’ aiming to understand and apply the many general and specific principles forming advertising theory may potentially do much to increase the likelihood that any particular advertising campaign or advertising strategy will be effective and accomplish its intended objectives. Marketers must therefore seek to understand the factors that influence advertising’s effectiveness and ineffectiveness relative to intended objectives and particular contexts to be able to judiciously apply such knowledge. Even experienced firms can make advertising missteps, such as allowing the firm’s ad agency to create an advertisement that is memorable and consistent with some elements of advertising theory (e.g. persuading with emotion for a low-involvement purchase) but not fully realising until after it has aired that the ad runs counter to other principles associated with advertising theory (e.g. emphasising those emotions that are desired to be positively associated with the brand).

This has helped me understand how there needs to be a relationship between the supplier and consumer, whether it be through lifestyle which I have looked into or emotions which is less relevant to a headphones advert.

Headphones

Advertising Research

Beats headphones

These two adverts by Beats give the impression that by having Beats headphones you are athletic and cool. The adverts are portraying a lifestyle that the headphones suggest they can provide for the customer.
This advert is simply showing all the different styles of headphones that are available from Beats. What is noticeable is that the same colour theme is used throughout the advert, apart from the last set of headphones. This difference of colour in the last image could arguably draw attention to the advert however for such a big brand that is very well known there is not a lot of need for this and it does not look right in this advertisement.
dr. dre is well known, by using him in their adverts Beats are drawing in a wider audience. This is also to show that dr. dre has his own line of headphones within Beats to make the consumer more willing to purchase a pair to have something by a celebrity. Comparing the adverts there is a clear link that if you have Beats headphones you are closer to the music and the artist. Using Elvis in one of the advertisements with the words "The King" below the Beats logo gives the impression that Beats are the King of headphones because they can make you feel part of what you are listening to.
This is a very interesting advertisement as it does not even have the logo in apart from on the headphones, showing that there is such a strong brand that they do not even need to put any more than the product in to sell it.
Here it can be seen that there is a simplistic design that gives the customer the impression of being able to be an individual.

Sony headphones

Designing Ads for Social Media

https://designschool.canva.com/blog/how-to-design-facebook-ads/

According to this year’s Social Media Marketing Report, the area most marketers (68%) want to learn about when it comes to content is how to create original visual assets. One reason for this could be the explosive growth of Facebook advertising. While most businesses on Facebook have seen a drop in reach and engagement, the smart businesses are advertising and profiting.

Adobe’s Social Media Intelligence Report points out that Facebook has achieved a double digit increase in both click through rate (CTR) (20%) and ad impressions (41%), quarter over quarter. To give those statistics some context, earlier this year total ad revenue hit $2.27 billion, up 82% from a year ago. That means Facebook ads are working.

However not all businesses are taking advantage of this growing advertising channel. Of the 25 million small businesses active on Facebook, only 4% are running Facebook ads. What a huge opportunity lost for small businesses not to mention Facebook itself- that’s a lot of potential advertising revenue laying dormant.

With 70% of marketers looking to increase their use of visual images in 2014, the ability to create original visual content is a critical skill. It’s time to give every marketer and small business owner the tools and know-how to design Facebook ads that get results.

*The focus of this post is on design and specifically News Feed ads, however the principles can be applied to all Facebook’s ad options. Just keep in mind that targeting your ad at the right people is super important. It’s advertising 101 – decide who you’re targeting before you start designing!

1. CAPTURE ATTENTION WITH GRAPHICS

When designing ads for Facebook it’s important to keep in mind the principles of any advertising. That is relevance, value proposition and a single call to action. Creative graphics can help you achieve all these things. Whether it’s adding text to an image, an icon or logo, graphics play an important role in capturing attention- and capturing attention is the first thing you need to do with any ad.

In the examples below, both brands add creative text graphics. These graphics stand out and fit the style of each brand. The good news is you don’t need to be a graphic designer to create ads like the below. That’s why we exist.

2. INCLUDE A CALL TO ACTION

You can have the best looking ad in the world but if users are not sure what to do or don’t understand what’s in it for them, your ad fails. That’s why adding a call to action (CTA), value proposition or incentive to your visual content is critical. Consider the ads below. Adding a call to action and/or value proposition to these images does two things.

1) It let’s you know the what’s in it for you.

2) It let’s you know what you need to do.

Maybe you’re selling an expensive product so rather than display the price, you might prefer to promote how much consumers will save. That’s what Neff did with Facebook ads like the one below. By adding a strong discount incentive, Neff saw a 38% conversion rate and 20x return on Facebook ad spend.

3. THE POWER OF OVERLAYING TEXT

Facebook’s 20% text rule limits the amount of text you can feature in your ads, so it’s important to make the most of the space you’re given. When users scroll their News Feed, your ad needs to tell them why they should stop scrolling and investigate further. This is where adding some copy to your image is powerful.

If anyone knows how to advertise on Facebook, it should be Facebook. In their ad below they overlay text to enhance their advertising message. A picture may say a 1000 words but adding text reveals the message.

4. LOGOS & ICONS

With the limited space you have for text in Facebook ads, consider using logos and icons to convey your message. In the example below, we know which sport teams are playing and where we can watch them play. A great example of saying a lot with logos and icons.

In the examples below, both ads feature logos within the images to help the product resonate with the brand. When you see an ad on Facebook your eyes gravitate toward the image first- it’s the most valuable real estate of your ad. Just remember, when adding logos it’s best to keep them clean and minimal as not to detract from the image and messaging.

5. IMAGES WITH FILTERS

If you use Instagram you already know the value of photo filters. Filters can make a dull image look great, change the mood of a image or even make an image emotive. Maybe more valuable than that, filters can help your ad capture the attention of your target audience. In the examples below, ordinary photos are enhanced with a filter to be more eye-catching.

If you’re wondering which filters perform best, the research varies but perhaps lighter images are better than darker images. In a study of over one million images on Pinterest, Curalate found that repins for images of medium lightness is 20 times higher than for images that are mostly black, and eight times higher than images that are mostly white. According to Be Well South Dakota the same rule applies on Facebook with their ad campaign below performing best. The result was 2700+ Facebook Page Likes and 200 pledges!

6. MULTIPLE IMAGES

While single images are effective, using multiple images can help your ads perform better, particularly for e commerce brands. In the examples below, DressLily showcase the one product in a variety of colours to appeal to more men, while Tobi reminds you they have a range of products available.

Fashion retailers MyDress and Ministry of Retail use multiple images really well. In it’s first month using Facebook ads, Ministry of Retail saw a 3x increase in sales and 2x – 3x return on advertising spend by showcasing product shots from multiple angles. While MyDress saw a 10X increase in average return on ad spend and a 33% increase in site membership in 3 months using similar adverts.

The other cool thing multiple images allows you to do is tell a story. In the example below Second Floor Cafe in Taiwan saw a 20% sales increase at two new branches within a year using storytelling Facebook ads like the one below and now have 125K Likes. Not bad for a cafe.

7. PEOPLE LIKE PEOPLE

If you look at the ads we have showcased, a lot of them feature people. This is not to say you must you use people, there are plenty great examples that don’t. But according to agencies we spoke with such as Klick Communications who manage Facebook ads for a variety of clients, photos of people, preferably people we recognize do really well.

Of course not everyone has access to a celebrity, but that’s ok because social proof works when we view others as similar to ourselves. So if you do decide to use people in your ads, use people that represent your customer like Jetstar do in the ads below. You can segment your ad by demographics so male customers see a male and female customers see a female. That’s the power of targeted your ads and why Facebook advertising is growing rapidly.

CONCLUSION

If you’re a business with an active Facebook page, we suggest you experiment with Facebook advertising. Plenty of brands are profiting from this growing ad channel and there is no reason why should miss out. With the examples above, you can see what’s working and what the bigger brands are doing.

Now it’s your turn.

You don’t need to spend thousands of dollars on your ad creative. You can use our design platform to create amazingly simple graphics like all the examples above. We even have new Facebook templates to help you!

HTML5 and After Effects

HTML5

http://www.techradar.com/news/internet/web/html5-what-is-it-1047393

When Steve Jobs refused to allow Flash on iOS devices, he argued that HTML5 could do everything Flash did. He wasn't being entirely honest - the reality distortion field was strong that day - but ultimately Apple won and Adobe didn't; HTML5, not Flash, is the technology that's transforming the web. HTML5 is still being developed to be able to perform all of the functions that Flash did.

What is HTML5?

HTML5 is the latest version of Hypertext Markup Language, the code that describes web pages. It's actually three kinds of code: HTML, which provides the structure; Cascading Style Sheets (CSS), which take care of presentation; and JavaScript, which makes things happen.

What's so great about HTML5?

HTML5 has been designed to deliver almost everything you'd want to do online without requiring additional software such as browser plugins. It does everything from animation to apps, music to movies, and can also be used to build incredibly complicated applications that run in your browser. You don't need to pay royalties to use it. It's also cross-platform, which means it doesn't care whether you're using a tablet or a smartphone, a netbook, notebook or ultrabook or a Smart TV: if your browser supports HTML5, it should work flawlessly. Inevitably, it's a bit more complicated than that. More about that in a moment.

What does HTML5 do?

We've come a long way since HTML could barely handle a simple page layout. HTML5 can be used to write web applications that still work when you're not connected to the net; to tell websites where you are physically located; to handle high definition video; and to deliver extraordinary graphics.

Do I need a HTML5 browser?

You've probably got one already. All of the big name browsers - Internet Explorer, Firefox, Chrome, Safari and Opera, Mobile Safari and Android's browser - support HTML5, but they don't all support the same things.

Firefox generally supports the widest selection of HTML5 features, with Chrome and Safari following shortly afterwards, but as we said HTML5 is an evolving standard and the latest versions of each browser more than cover the basics. If you'd like more detailed information on browser support, the excellent Caniuse.com provides a detailed breakdown of what supports what.

Will HTML5 replace Flash and Silverlight?

In some ways it already has: iOS devices don't run Flash, and many video websites have either moved from Flash to HTML5 video or at least offered HTML5 as an option. However, as HTML5 doesn't include digital rights management (DRM) technology to prevent copying, many content owners prefer proprietary, DRM-friendly formats such as Flash or Silverlight. For example, UK video site LoveFilm is dropping Flash - but instead of HTML5, it's moving to Silverlight. Although Adobe has announced that it will stop developing the Flash Player for mobile devices Flash is also used for considerably more than just showing video, so it's not going anywhere in a hurry.

What tools do I need to create HTML5 websites?

Purists would say that you don't need any tools - you can write HTML5 code with a biro and a bit of paper if you wish - but others prefer tools such as Adobe's Dreamweaver, which gained an HTML5 pack in 2010. Adobe is also readying Edge, a dedicated HTML5 animation tool that promises to make it easy to create Flash-style animation.

Where can I see some HTML5 demos?

The cunningly named HTML5demos.com has some good demonstrations, along with a key showing which ones work in which browsers, while the excellent HTML5rocks.com has both demos and code samples for designers and developers. Google has put together an HTML5 video player for YouTube , and Apple has put together an HTML5 showcase on Apple.com. Our favourite, though, is the interactive film Chris Milk made for Arcade Fire's We Used To Wait.

Creating moving adverts with HTML5

http://matthewjamestaylor.com/blog/responsive-banner-ads

Responsive web design is a major leap forward for the internet. Now the internet can adapt to fill whatever space it has available from mobile phone screens to massive cinema displays. However, websites often have banner advertising and traditional banner ads are not flexible. Both flash and animated gif banners come with fixed pixel dimensions so they are not compatible with todays responsive layouts. We need a new way to do banner advertising, using responsive banner ads.

The only way to make banner ads as responsive as our HTML5 layouts is to make them with HTML5 too. This might at first sound like a crazy idea but I assure you it's not. Actually there are many benefits to making ads with HTML.

  • HTML ads are fully accessible and semantic markup makes them screen reader compatible.
  • Text, Images, Video, Javascript, and forms can all be used within an ad just the same as any webpage.
  • Banners can use dynamic server-side scripting and databases if required.
  • Changes can be made to an ad after it has been deployed just like any webpage.
  • HTML ads can be very small in file size.
  • Banner serving is essentially the same as web hosting.
  • No new technology for web developers to learn - its the same as normal web development.
  • HTML5 ads can be made adaptable to any size with CSS3 media queries - this is exactly what is needed for responsive banners

How is one made?

Firstly, an ad is created as a responsive HTML5 page. We add any text, images, and links to the page that are required within the ad and style it with CSS. Secondly, the ad can be displayed on any website using an iframe. The only trick is making the iframe dimensions dynamic via CSS3 media queries.

A new convention for banner sizes

Responsive layouts require page elements to have variable widths so banners must follow this convention now too. The height of a banner doesn't really matter in responsive design so we can use any height we like. But choosing a height doesn't mean our ad is stuck at that height.

To maintain backwards compatibility, responsive ads should use the same pixel heights as traditional banner sizes. We could in theory create responsive banners that work with any width or height but that's not practical to build or test. It is suggested to stick to a minimum width of 88 pixels and have the following set of standard heights:

  • 31px "micro" - micro bar (88 x 31)
  • 60px "button" - button 2 (120 x 60), half banner (234 x 60), full banner (468 x 60)
  • 90px "banner" - button 1 (120 x 90), leaderboard (728 x 90)
  • 125px "small rectangle" - square button (125 x 125)
  • 250px "medium rectangle" - vertical banner (120 x 240), square pop-up (250 x 250), medium rectangle (300 x 250)
  • 400px "large rectangle" - vertical rectangle (240 x 400)
  • 600px "skyscraper" - skyscraper (120 x 600), wide skyscraper (240 x 600), half-page ad (300 x 600)

The best thing about responsive ads is we have just reduced 14 conventional banner sizes down to only seven heights, and all of these can be displayed by a single HTML5 ad! Not only that, but my demo ad comes in at less than 25k for the whole thing (HTML, CSS and the JPG image). This is smaller than the maximum file size for a single small banner!

Resizing iframes with CSS media queries

Sometimes you may want a responsive height for an ad, to do this you need to change the iframe size via CSS media queries. I find the best way to do this is to set the iframe's width and height to 100% and put it inside a div with specific dimensions set in CSS. Here's what this looks like:

<div id="ad">

<iframe

src="ad.html"

border="0"

scrolling="no"

allowtransparency="true"

width="100%"

height="100%"

style="border:0;">

</iframe>

</div>

And here is the CSS:

/* default height */

#ad {

height:60px;

}

@media only screen and (height:90px) {

/* 90 pixels high */

#ad {

height:90px;

}

}

@media only screen and (height:125px) {

/* 125 pixels high */

#ad {

height:125px;

}

}

Tracking impressions & clicks

The best thing about HTML5 ads is they can be tracked with Google Analytics just like normal websites. This actually gives you a lot more data than traditional banner serving systems. Not only can you reliably track impressions but also referrers, browsers, screen resolutions, mobile devices, popular countries and cities.

It's also a trivial task to track clicks on your ad by using one of the many free URL shortening services. bit.ly is suggested to be a good one. If your ad has multiple links you can track them individually. Just remember to use a target="_top" on your links so your ad busts out of the iframe and the link fills the full browser window.

Recording banner sizes in META tags

Responsive ads can be made to support any number of sizes but rather than trawl through the CSS to discover what heights are supported I suggest we record them in a META tag. Here's an example:

<meta

name="displayheight"

content="31, 60, 90, 125, 250, 400, 600" />

This is good because META tags are computer readable. Your browser might need to know alternate sizes to display an ad in some situations.

In summary

We need variable-width banner ads for our responsive layouts and I think HTML5 is the best way forward. With a little CSS3 trickery we can create a single ad that adjusts to fit all the common banner sizes in use today. Below is a responsive banner ready to put in a blog or website:

<div id="ad" style="width:100%;height:90px;" >

<iframe

src="http://matthewjamestaylor.com/responsive-ads/ad.html"

border="0"

scrolling="no"

allowtransparency="true"

width="100%"

height="100%"

style="border:0;">

</iframe>

</div>

After Effects plugin - bodymovin

http://lesterbanks.com/2016/04/bodymovin-after-effects-html5/ Gives a point by point guide on how to use the plugin.

BodyMovin is not just a grooving song by the Beastie Boys, it is also an extension for After Effects that will allow you to easily export your AE animations to HTML5 Canvas. Its creator, Hernan Torrisi, has recently updated BodyMovin, which is something that he has been working on for quite some time.

Already up to version 4.1.8, BodyMovin is an After Effects plugin that lets you export animations to HTML + JS, SVG, Canvas. What’s more is that the extension can be installed as just that. Using the new(ish) Adobe Add-ons site, you can install the HTML5 animation exporter, at the click of a button. From there, the extensions can be found by navigating to the Windows menu in After Effects, then Extensions, Bodymovin.

  • Open your AE project and select the bodymovin extension on Window > Extensions > bodymovin
  • A Panel will open with a Compositions tab.
  • On the Compositions tab, click Refresh to get a list of all you project Comps.
  • Select the composition you want to export
  • Select Destination Folder
  • Click Render
  • look for the exported json file (if you had images or AI layers on your animation, there will be an images folder with the exported files)

There are a few tips to exporting animations with BodyMovin. If you have images or AI layers, they should be converted to shapes, so they get exported as vectors. You can easily make use of the “Create shapes from Vector Layers” command from within Ae.

Theres also the concern of performance, as we should be thinking about playback of realtime rendering. Hernan Torrisi notes that although the output is optimized, it will always help if you keep your Ae project to the necessary components.

Music how it's meant to sound

Credits:

Created with images by tobiastoft - "Marcin's window" • lorenzocafaro - "programming computer environment"

Made with Adobe Slate

Make your words and images move.

Get Slate

Report Abuse

If you feel that this video content violates the Adobe Terms of Use, you may report this content by filling out this quick form.

To report a Copyright Violation, please follow Section 17 in the Terms of Use.