Project: GameStar site build for IDG
Date: 2017
Involvement: I was the principal front-end developer on the initial site build, as during my time as a senior front-end developer at IDG. James Kocik was responsible for UX and comp design for this site. The structure of the site is based off other sites in the IDG portfolio, eg. TechConnect. Mostly my work was on the homepage; the articles and category/tag index pages retained the look of other IDG sites. As a clone of an existing site, no back-end work was required.
Description: GameStar was created as IDG US’ first game-focused site, using a recognized brand name from IDG Germany. The design was based off the contemporaneous design of TechConnect (which no longer uses the same design).
The top of the page shows a typical three-article hero of featured content, slottable by IDG editors. The content list below it is populated in reverse chronological order. This “crawl,” as we termed it, uses CSS Flexbox to display 2-3 columns of equal height boxes. Each box presents the title, description, and primary image for that article; the primary image uses CSS cropping to display the images at a 3:2 aspect ratio, allowing them to maintain their native ratio but remain a consistent height.
An integrated ad unit is also included in the flexible design, as well as a sidebar with a list of recent “DealPosts” (affiliate revenue-generating posts).
Technologies: HTML, CSS (including Flexbox), JavaScript, JQuery. On the back-end, Java, JSP, Struts, running our custom in-house CMS.
Status: I no longer maintain this, but the site is still live with the same design and codebase.
The top of the GameStar homepage, showing the hero and an ad unit. 
The homepage body of GameStar, showing the content list. 
The top of a GameStar article, showing the headline, dek, and social sharing buttons, as well as a sticky ad unit. 
Body of a GameStar article, showing a sidebar ad unit and the GameStar color palette