GORUCK, LLC - Blog

Corporate Blog Design & Development

GORUCK is an e-commerce company that specializes in tactical military style gear and team-building endurance events led by Special Forces Cadre. I redesigned their corporate blog. I kept the design inline with their newly created website.

My Role: Web Design, Front-End Development in a Responsive Framework and Wordpress custom theme.

Languages and Software:

  • HTML5
  • CSS3
  • JavaScript
  • jQuery
  • Photoshop
  • Illustrator
  • Wordpress
  • PHP

The Plan & Process

Design

The design aesthetic for the blog redesign was to coordinate with the newly redesigned main GORUCK website. Large featured images and a magazine-style layout provide a consistent aesthetic and a visually engaging experience for the end-users. Navigation was improved by pre-defining categories and tags for custom category and single page templates. Additional navigation was achieved through the use of tag archives and author pages.

Front End Development

I followed the design plan and comps in coding the HTML, CSS and JavaScript. Attention was focused on hand-coding the front end with clean, standards compliant code. Two different single post page templates were created to allow for a "longform" blog post and a standard single post with a sidebar. I also created a specialized author template for the main blog contributors, such as the CEO, and a generic author page template for all other authors. A responsive grid was also to be implemented.

WordPress

I converted my HTML, CSS and JavaScript files into a custom WordPress theme; integrating the front end code with PHP and the WordPress loop/functions. In the theme, I developed individual author pages for the featured GORUCK authors, custom post types, custom fields and functions to modify the WordPress Admin portal to provide authors and editors with additional functionality. Plugins were utilized sparingly and selected based on reviews and their update history to mitigate the risk in them breaking the blog as newer versions of WordPress are released. The main plugin utilized was for the image gallery.

Responsive

The project plan required that the website be responsive as to better engage customers. I chose Twitter Bootstrap as a CSS framework to create the backbone of the responsive grid. Additional fluid containers were created as needed. I further utilized media queries to fine-tune the site for tablet and mobile devices.