Categories
Ads Portfolio

Expandable Retail Ad

I had this idea for a long time, to build an expandable retail ad. An ad that can show more than one product on one page with one ad call.

300x250_retailadI built it to a point where I can demonstrate how it works. Imagine you are a retail shop, but you cannot decide which product you want to advertise, what about if you could advertise all your products, won’t that be nice.

This ad will allow you to upload as many products as you like, I built it making use of html, javascript and JSON (JavaScript Object Notation) to load the products dynamically.

Going forward I would like to make use of a Google Spreadsheet to upload all the products which will make it easier to update the ads going forward.

Let’s assume you will be uploading this ad in Google AdWords, by the way I am working on this, and you hit publish. In a weeks time you would like to change the products as it’s not on special anymore. No problem, all you will need to-do is open your Google Spreadsheet, update the details of the new products and that is it, your ads will then automatically update without you updating Google AdWords.

The last bit is what I will be working on next, but feel free to take a look at my example on GitHub.

You can also view the live demo here.

If you would like to play with the code yourself, you can download it by clicking on the link.  Expandable Retail Ad

 

Categories
Portfolio Websites

Competition pages rebuild

Our commercial team at 24.com approached me asking if we can rebuild our competition pages so that user can enter competitions on their mobiles too. My first thought was to make it responsive.

At that stage Twitter Bootstrap 3 was released and I saw this as the perfect opportunity to make use of Bootstrap. I looked at all the elements that was required and which devices we should be supporting.

Because we did so many competitions I had to come up with a plan how I can build the template so that it can be easily styled for other new competitions and again I thought of using SASS and building it in PHP.

It took me about a day to complete the project and also to test it. Luckily we had a mobile lab setup which made the testing much easier for me. We also used software called Ghostlab which helped speed up the process.

After completing this project I had to get it ready for a Nigeria competition. So I had to make sure that it worked on very low end devices. It was a big success as we had a lot more entries from this market than ever before.

Link: https://ericdekock.com/mywork/24com/competitions/index.php

Categories
Portfolio Websites

Micro-Sites and Animations

We created Micro-Sites and Animations for UCT, a well know university in Cape Town. UCT wanted us to come up with a advertising strategy for their new courses they had to offer.

As digital swiss army knife I helped with the front-end coding of some of the micro-sites and created some of the animations. This was a very fun project as I enjoyed the animation very much. We created the animations in Adobe Flash and added the music in Adobe premier afterwards.

I added the Youtube channel so you can take a look at all the animations.

Youtube link: https://www.youtube.com/channel/UCbyXGl_wrhnxXUBA4AXBGIw

 

 

Categories
Ads Coding Portfolio

Native Ad for DoubleClick for Publishers

One of our clients asked if we could create a Native Ad for DoubleClick for Publishers template for them.

Native Ads for Apps in DoubleClick
Picture from DFP

Now DFP (Double Click for Publishers) was working on a solution but the ETA was unknown. To give you and idea what it is, you can take a look at the DFP article.

We looked at our clients requirements and I started working on the creative. I had to create something that I could manipulate the dom once the ad tag has rendered on the page. I also had to make sure that this creative can be seen under user defined templates in the creative library and that the client will be able to make custom edits to each new ad.

I first had to detect a few things,  the width of the parent node in which this native ad will be rendering and while doing this I also needed to find the parent node class name so that I could apply additional styling to it, for example width and height which is being set in DFP. I pass all the DFP related values via DFP macros into my code.

You will also notice in my code that I am setting the height of the banner ad as the content resizes smaller, making sure that the content will still fit.

If you are not sure how DFP works and DFP tagging, please let me know, I will assist you with the setup.

You can download my code on github.

Categories
Portfolio Websites

Micro-site Templates

Micro-site templates was one of our responsive projects we were requested by product to create. Product wanted a template that can be duplicated and styled very quickly for a new micro-site.

We made use of twitter bootstrap as the frame and added our own custom styling. We made use of SASS which helped speed up the process. We created variables for certain css value that we needed to change all the time for new micro-sites.

The first master build took us about 2 weeks to complete, this includes front-end and back-end development. All future micro-sites onward took us no longer that 2 days which included QA.

This was a very exciting project as we could use new technology (SASS) which saved us a lot of time.

I was involved with the front-end coding of the master template, the development team consisted of 5 back end developers and one front-end developer and one designer.

Link: http://www.fin24.com/budget/.

Categories
Portfolio Websites

Know your party

Know your party started out as a hackathon project which we designed and developed in 2 days.

The team consisted of an editor, UX/UI designer and a developer. Between the 3 of us we came up with the idea of know your party and started developing it.

Know your party wireframeI started with the wire-frame to get an idea of all the screens and the flow of this app while the editor researched the parties and worked on content and the developer started preparing the development environment and building the structure of the database.

Once we got all the content, wire-frames and database ready we continued looking at the design look and feel, the developer added all the content to the database and the editor cross checked everything.

Know your Party first DesignNow it was time to style the front-end, making sure it looks like the design and as I finished a screen the editor tested it to make sure if works as expected and the developer was working on all the logic at the same time.

Know your party turned out what you as a voter knew about each party and if you still want to vote for what your party stand for. It would be interesting to see if people changed their votes after going through the app.

We showed know your party to commercial, they love it so much, they felt we should make take it live before the election started in South Africa.

Link: http://www.news24.com/elections/knowyourparty