Allen Johnson - Sample Work

Anna Elise Johnson 2014

Anna contacted me after discovering that she was to be featured in two upcoming art shows in Houston. She needed an artist web site URL to hand out during the show openings. She wanted to feature photos of her artwork, divided by year and medium, as well her curriculum vitae (CV).

I stressed the importance of making the new site responsive, so that it would behave well on mobile, tablet, and desktop. I chose to use the Twitter Bootstrap 3 front end framework, given the short time-frame of the project and the importance of a responsive layout.

The image galleries are responsive in that the image sizes and number of images per row adapt based on the viewport width. And at smaller widths, the sidebar is hidden to save space, while the user can still access all of the sidebar links from the dropdown menu at the top.

Here are some screenshots from desktop, tablet, and mobile:

Desktop:

Tablet (iPad):

Mobile (iPhone):

Summit Bodyworks 2013

At Commerce Kitchen, one of my primary roles was to act as the resident Magento e-commerce developer. One of my projects was to upgrade the online parts and accessories store for Summit Bodyworks, a division of Transwest, from Magento 1.3 to Magento 1.7, and to re-theme the store to better match the design and style Commerce Kitchen had developed for the main Transwest corporate site.

Here are some screenshots of the original Magento 1.3 site prior to the upgrade and re-theming:

Here are some screenshots of the upgraded and re-themed Magento 1.7 site which was launched after my changes:

Intela 2012

At Intela, I was lead UI developer and UI Team Scrum Master. One of our primary activities was developing landing pages to collect lead information from users, which would be passed along to advertisers either sponsoring the landing page or having their offers included in the path following the landing page.

Here are a few sample landing pages we developed for a couple of our major brands. Included are links to the live sites, as well as thumbnails linking to screenshots from those sites.

Prizes.co.uk

PremiosParaTi.es Oktoberfest

Predict2Win.co.uk Audi Instant Win

Highmark 2009

One of my primary roles at Highmark was to completely rewrite the CSS for their main website. I began with an extremely sloppy, overgrown CSS file, which appeared to have been authored by someone with a very limited understanding of CSS. The HTML presented by the JSPs and the custom JavaScript were very messy and did not follow web standards. We created much cleaner and more semantic HTML boilerplates to represent the structure and content of the site, and removed purely presentational code from the JSPs. I then wrote entirely new CSS to position and style all of these semantic elements. My layout was grid-based, flexible-width, and cross-browser. I took much better advantage of inheritance and the cascade. I also took charge of cleaning up and testing most of the JSPs using the new CSS.

The two attached CSS files represent the original CSS (1-global_BEFORE.css), and the much cleaner CSS which I developed to replace it (2-cosmic_AFTER.css). The new CSS is not yet live in production.

I have also attached an HTML boilerplate, which was created as an example for developers of a correct HTML hierarchy for a Medicare page (3-medicare_boilerplate.html). This should be viewed as Source.

I then included two screenshots of the new layout, not yet finalized, with sidebar (4-Three-Column-with-Sidebar.jpg) and without sidebar (5-Two-Column-no-Sidebar.jpg).

Finally, I included three screenshots of pages in the old layout for which I wrote the CSS for the content area only (6-Raising-a-Family.jpg, 7-Raising-a-Family-Detail.jpg, 8-Not-Sure-of-Best-Plan.jpg).

Fireman Creative 2009

Home page and portfolio site for Fireman Creative, where I was Senior Web Developer for two years. I developed the overall concept for this site, including the tagging of projects by Category, Client, and Keyword, allowing a visitor to explore our portfolio in limitless ways. I also created and fully implemented the Featured Project functionality on the home page. The PHP development, MySQL database integration, and CSS styling were performed collaboratively with two other web developers. The portfolio featured many projects in which I played varying roles, including Jaadu and Agewell.

"Survivor Bingo" & "Dead or Alive Bingo" 2008

The Survivor Bingo project was developed almost entirely by me while at Fireman Creative. I did all of the PHP programming, MySQL integration, HTML, CSS styling, and the large majority of the graphic design work. I also created a comprehensive password-protected administration section allowing me to track all aspects of the game, including users, cards, contestants, and winners. I also set up a game statistics and charting feature, which was accessible to the client, and I integrated the game into the client's existing website. The game ran for two seasons of the Survivor television show. I later created a similar online bingo game in which the user guessed whether the famous figures on their cards are alive or dead.

Inside Laurel Highlands 2008

This WordPress site I developed at Fireman Creative serves as the centerpiece of a social media campaign we launched for the Laurel Highlands Visitors Bureau. I developed everything except the original Photoshop concept for the home page, including all image slicing, integration into WordPress, and CSS styling.

Pine Grove Housing Group 2008

While at Fireman Creative, I converted the completely static and overgrown website of this home manufacturer into a fully dynamic PHP/MySQL site with a complete set of custom content management administration pages to make the site far easier for the client to maintain and update. I performed all PHP and HTML coding, relational database design and population, and CSS styling. I was somewhat limited in what I could do visually, as we were stuck with the original images, logos, and floor plans. However, this site should serve as a good example of a fully dynamic, functional site.