Zimmerman Advertising Work Documentation

Description

Introduction

The following websites were provided as a set of images and/or PSD's that I have constructed into a functional webpage. All of the code including HTML, CSS, Javascript, XML, and PHP are written by hand for each website below. Each site unless otherwise noted is a fully responsive design meaning the same code is delivered on desktop and mobile with changes to the layout activated by CSS media queries and JavaScript.

Extended Stay America Digital Cookbook

Extended Stay America needed a way to bring their unique in-suite recipes in a digital format that was both easy to manage and would work across a wide range of desktops, tablets, and hand held mobile devices.

The site layout has several wiget areas that are configurable from the Wordpress admin area. Using a CMS engine like Wordpress allows the developer to make a more dynamic site layout that can be updated by users with little or no HTML, CSS, or Javascript experience.

The Wordpress admin allows easy entry of the recipes displayed on the site and in lists such as the categories. Using a common backend and content engine ensures that items added will automatically appear in the various areas where that content is pulled in.

Mobile

The mobile experience maintains all the functionality of the desktop experience with updated visual items to help facilitate navigation between the various pages without consuming valuable mobile realestate. This is accomplished by creating menus that expand when clicked or tapped on by the user and dropping less important items below content that is more prominent.

Party City The Finals Sweepstakes

This microsite allows users to enter their contact information for a chance to win the sweepstakes. Users may refer other users with each referred signup gaining them an additional 5 entries into the contest.

Mobile

Items in the header are placed using percents for both size and positioning with media queries picking up the slack. The form fields automatically break down and are eventually lined up vertically once the page hits a particular break point.

Join ADT Dealers

ADT needed an easier way to collect dealer recruitment contact information that worked on both desktop and mobile platforms. A video popup was created that implements the HTML5 video player in browsers that support this feature and as a fallback will play the video using flash. Previously to get to the form a user had to click through several sections of the ADT recruitment site, these information tabs were placed underneath the form so users can refer to this information at their own choosing.

The signup form was simplified and then broken up into 3 sections that would drive the user to complete each step instead of inundating them with a single page with many fields. The form captures the users input at each step so if they didn't complete the last step and wanted to return all they need to enter is their email and the system picks up from where they left off. This is useful for remarketing to the users who didn't complete the form but did give their email address and to prevent duplicate signups.

Mobile

All of the features present on the desktop version are available on the mobile version. The biggest change is that the tabs go vertical and stack on mobile versus being horizontal and side-by-side on desktop. The form field names are placed on top of the fields and stacked vertically.

Firehouse Subs Media Landing Page

This microsite serves as a landing page for social and media promotions launched by Firehouse Subs. Included is a custom store locator driven by google maps that is activated automatically in browsers supporting the geolocation API. Users may also enter their location in any of the popular formats if their browser does not support the geolocation API or they wish to see results in other areas.

Mobile

Responsively speaking this site presented the challenge of multiple tiling background layers. Overcoming this was easy by reversing the typical wrapper model, the main elements such as the header and locator are declared in the root of the body tag with each containing an inner wrapper. This allowed the site to have a tiled background that extends the width of the monitor while also scaling responsively for the browser dimensions.

zTrac - Zimmerman Total Retail Accountability Center

This tool allows Executives, Financial Officers, and Account Executives to view instant results of various media campaigns with hundreds of reports in one convenient tool. Completely redesigned with modern screen widths and charting options zTrac now provides a more consistent user experience across its many formerly disparate systems.

Once logged in zTrac greets the user with an overview of the most commonly accessed charts in a condensed view to quickly identify trends in data. Utilizing a tree based menu system it is possible to effectively navigate sets of links that may number in the hundreds on a single tab.

Powerful reporting control allows the user to find the essential data they need without sifting through the data they dont need. Common searches can be saved and accessed in the future allowing the creation of custom reports that can easily be printed or saved as a Microsoft Excel document. When a report is shown the tree menu navigation automatically hides on the left and can be shown again by clicking the black sliver on the left hand side of the screen. This helps to maximize screen space while not dropping any functionality.

Bill Bone Pro Am

Bill Bone Pro Am is a fully customizable website integrated into Wordpress. This gives the site administrator the ability to add/manage race events, pages, photo galleries, and customize the widget areas. Each page offers several content blocks that either auto populate with posts or allow static text to be placed.

Logically in wordpress you have pages and posts and generally a given page is a combination of other sub pages and posts that exist. In this wordpress we have setup a custom post type for events (races) that show up in a list on the Races page and includes the details such as the location and schedule when viewing the post directly.

More custom page and post types were created to display photo galleries powered by jQuery Masonry, adding images is as simple as adding them to a post's main content block. Overall standings are generated via data imported into a custom section of the site's database with options to drill down on specific events and categories.

Mobile

Party City Cares

The Party City Cares site is reconfigurable for various media campaigns that Party City wishes to promote. Included is a custom implementation of the Arktan social media application allowing users to login using various platforms such as Google+, Facebook, Twitter, etc. Streams are pulled in using RebelMouse giving those in charge of running the promotion easy access to the content that shows up in these areas.

Tackle Hunger

Go Red For Women

Caring for the Community

Florida Blue Grassroots Timeline

This project was designed to be a platform similar to The Camry Effect where users could share their stories as they related to BlueCross BlueShield and healthcare. The header shows uploaded images or video thumbnails from the various stories and events added or uploaded to the site. Users can browse through decades and eventually drill down to individual months using an intuitive timeline bar.

Utilizing jQuery Dialog boxes users could add events and invidual stories for those periods in history. Using Facebook Connect we are able to grab a users profile picture in the event they do not wish to upload a photo on the site.

Mobile

The mobile presentation of this site differs so drastically from the desktop view that many functional elements are duplicated in the HTML with CSS media queries and JavaScript which hides and shows the appropriate elements and code which copies HTML, text, and current state info between desktop and mobile. This ensures that Ajax calls only fetch the needed data once that is stored in HTML structures accessible at a time of our choosing.

Bikestreet USA

This site loads as a single page which never reloads in the browser when loading sub pages. Using smaller HTML files that are loaded via Ajax its possible to create a seamless experience with many animations and effects. Bikestreet USA is the first responsive website I have ever created and is no slouch when it comes to responsive styles.

Sub pages are setup easily by creating a new HTML file that contains only the formatting neccessary for the content itself, usually consisting of paragraph tags for text and unordered lists for pages like the store locator.

Mobile

When the site is loaded on a mobile platform the images inside the content container are disabled making the actual information the user is looking for easy to find. The navigation links are replaced by a dropdown which has the advantage of using the built in select menu navigator on mobile platforms such as iOS and Android.

Zimmerman Work was created by Travis Brown, email: WarriorRocker@gmail.com.