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.