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