How to create a simple responsive HTML advert for Pugpig Publish editions

We provide a Full Page Image content type in Express which lets you upload and display a single image on a page in your Pugpig app. Print based full page institial adverts are typically 4:3 aspect ratio (A4 in size), these fit well in a Portrait device orientation. In a landscape orientation we currently handle the image/advert by scaling the image to fit the device height and letterboxing around it so it can be clearly seen in it's entirety. Whilst this may be fine for most of your adverts, responsive design and multiple device screen sizes mean that to get the most out of your adverts, making advert artwork for specific for multiple screen sizes proves to be another solution.

Here is a straightforward way to create an advert page (uploaded as a HTML Zip) that lets you set six images so you can target a different image more appropriately sized for Portrait and Landscape as well as small, medium and large devices. Specs are also provided below:

Step 1

Download the below zip and open.

Pugpig Advert Template Zip

Step 2

You will find 6 jpg files in there:

• large-landscape.jpg | 2048px (width) x 1536px (height), 72 resolution
• large-portrait.jpg | 2048px x 1536px, 72 res
• medium-landscape.jpg | 2688px x 1242px, 72 res
• medium-portrait.jpg | 1242px x 2688px, 72 res
• small-landscape.jpg | 1334px x 750px, 72 res
• small-portrait.jpg | 750px x 1334px, 72 res

(Large will be displayed on tablet devices, small on phones)

You can use these JPGs as size guides to create your advert. Once you have your landscape and portrait advert images complete, save them with the same naming structure, and replace/overwrite the images in the zip. Ensure the name and extension .jpg match (.png or .jpeg wouldn't match).

Step 3

You now need to open the index.html file in a text editor (Sublime is a good free tool).

Look for the below (around line 25) ...

 <a href="http://pugpig.com/" class="link">
  <div class="image"></div>
 </a>

Replace http://pugpig.com/ with the URL you wish your advert to link to, leave everything as is including the quote marks that wrap the url. If you do not want your advert/image to link anywhere you should delete the entire first line <a href="http://pugpig.com/" class="link"> and the third </a> so you end up with:

...
  <div class="image"></div>
...

Step 4

Save your index.html file, rename the folder file and zip it back up.

Voila, you are ready to upload your advert! You can follow our Express guide on how to upload HTML Zips here.

Not what you're looking for?

We offer more advert options on our github page here including a non letter-boxed page for an image where it fits to device width allowing any 'height' and you scroll to view the whole advert.