CIO Magazine

Challenge

Clone a magazine home page and article page for a marketing pitch showing that the Méthode web publishing platform can deploy a website that is a 1:1 equivalent to an existing web product.

Solution

In this fast turnaround project, I built static clones of CIO Magazine home page and article page from scratch. To do this, I reconstructed the website using HTML, Javascript and CSS. Then, I componentized the home page sections and made the article page into a template, so that content and articles could be dynamically added, updated, and deleted using Méthode.

Learnings

This was an exercise in front end coding. I was able to scrape and piece together some of their CSS and lay my own CSS on top of it so it could function correctly. Also, I noticed that CIO Magazine used jpg files for some of the UI components so I took the opportunity to build them in HTML so that they would render more clearly.

Full Page

Below is a screenshot of the full CIO replica page. The repeated article is a placeholder that would be dynamically updated from articles written in the browser-based Cobalt CMS and publication software. The full content of articles would be injected in copies of the empty Article Page Template (above), and linked to on the homepage (below). Excerpts from the articles and metadata like the headline, author name, and image would dynamically populate in the appropriate section.