CSS 3D Transitions: An Introduction

Posted on Tue, August 13, 2013 in Web Design by Kevin Carpenter

On the web there are already several solutions for 3D capability: Flash; three.js in <canvas>; and, eventually, WebGL. Also, front-end developers have our own three-dimensional tool: CSS 3-D transforms.


Just like the 2d transition module released by Apple in Safari, 3D transitions initially were only supported by Safari. Since the release all of the major browsers, and IE10, everything either partially or fully supports 3D transitions. Take a look at the most up-to-date compatibility chart.

Please keep in mind that you still need to use Modernizr to ensure that you are...

Read More

Using Git: Taking the Pain Out of Version Control

Posted on Thu, August 08, 2013 in Web Design by Mark Middleton

I love elegance, purity and simplicity

In the 90’s as a rookie developer, I spun my wheels… a lot. With no true version control, we would update the production server directly. Then, weeks or months into the project, we would spend the time to set up a dev server. Our team would do their best to wrangle the process of developing locally, updating a dev server, and when everything was tested we would update everything on the production server and pray everything was put into place correctly. But we often wrote over each other’s code and our only saving grace was a nightly server tape...

Read More

Getting a quick Shopify or Wordpress site done well

Posted on Wed, August 07, 2013 in Business Strategy, eCommerce Tips, Web Design by Alum

At GRAYBOX we will often get requests for a simpler site with the need for a quick turnaround. Here is what that process looks like. The kind of site we see come through with these needs are Informational and eCommerce. Pretty much any kind of website that you might need. This is how we do it.

  1. Clear Communication from start to finish
  2. Themes (Wordpress for informational sites and Shopify for eCommerce)
  3. One Site Review before testing (content edits and minor structural changes)
  4. Deadline Integrity

Clear Communication

This is all about expectations and deliverables. We like to get all of...

Read More

Tips for Designing Successful Landing Pages

Posted on Fri, August 02, 2013 in Internet Marketing by Paul Weinert

Great landing pages are critical for effective inbound marketing campaigns — they distill your message down to one key action, thus simplifying it and boosting engagement. But reduction in design is hard — how do we get down to the essential elements to make the sale more effectively? Our marketing team can help you boost your conversion rates and make your landing pages perform better.
To start, let’s give you a few tips.
1. Start with a theory, test and measure that theory, and repeat — A/B (also called Multi-variant) testing is the key here. Start with a baseline control and...

Read More

Interview with Gary Vaynerchuk on Social Media

Posted on Wed, July 31, 2013 in Business Strategy, Internet Marketing by Alum

Earlier this year, part of our GRAYBOX team had an opportunity to take Gary Vanerchuk up on an offer he made to his almost one million twitter followers that he was doing an interview a day.

At GRAYBOX, we’ve enjoyed learning from Gary for over a year now through his website, tweets, instagram, Facebook, Pinterest, Google + and his books Crush It and The Thank You Economy. We got to ask him a few questions that we’re working through as we try to utilize social media better.

Q: We’ve heard you downplay the obsession with Return on Investment (ROI) when it comes to marketing. Is...

Read More

IE Background Images

Posted on Tue, July 30, 2013 in Web Design by Kevin Carpenter


A very handy CSS property is the “background-size” property. For background images, and images we need to cover an entire div we can simply apply “background-size: cover;” or “background-size: 100% 100%;”. Doing so stretches the background image to the entire width and height of it’s containing div. But that’s not it. I wish that was the case, according to W3c the background-size property is only supported in the following browsers: IE9+, Firefox 4+, Opera, Chrome, and Safari 5+.  Although our hate for IE as developers grows with every project we complete, it’s...

Read More

Vertical Accordion Menu

Posted on Wed, June 05, 2013 in Greatest Hits, User Interface, Web Design by Kevin Carpenter

Vertical menu’s have recently become the newest rave in the Web industry. They are responsive, save space, and look great on any device.

Let’s get things started by putting in place our HTML and add the underlying structure to the menu:

Vertical Navigation Menu: CSS3 Coded

<div id="wrapper"> <ul class="menu"> <li class="item1"><a href="#">Friends <span>340</span></a></li>
li class="item2"><a href="#">Videos <span>147</span></a></li>
li class="item3"><a href="#">Galleries <span>340</span></a></li>
li class="item4"><a href="#">Podcasts <span>222</span></a></li>
li class="item5"><...

Read More

Hover Animations

Posted on Fri, May 31, 2013 in Web Design by Kevin Carpenter

With the addition of CSS3 transitions and keyframe animations it can be easy to overdo animations on your website. However, adding certain effects to main content areas can greatly enhance the experience your visitors receive.

A popular trend on the web these days are “content boxes”. These were first found on a lot of sports and news sites mainly, but have since made their way to every category of web pages. Plain, generic content boxes are effective in dividing areas of content, but can be boring if there is nothing present to visually please the user.

So lets spice those generic...

Read More

Getting Value with Google AdWords with a tight Budget

Posted on Fri, May 31, 2013 in Internet Marketing by Alum

You may think you need a huge marketing budget to start benefitting from paid advertising online. There are a lot of factors  at play when assessing that, and most of the time there is a very real benefit to starting even if you start small.

Do you have a niche business?

If so, it may take only $200 a month or less to see your ads show up for low competition keywords that are specific to your niche business. Usually you will have the ability to try this for a month and see how it goes. Also, Google is pretty good about giving you $50 to start out so that you can see how valuable running...

Read More

Getting started with Google Products for Shopify

Posted on Wed, May 15, 2013 in eCommerce Tips, Web Design by Alum

Getting your product feeds accepted on any platform can be a nightmare. Some recent work we’ve done on a Shopify website inspired us to share a bit of that process to be a help to those doing the same kind of work. The fact is there are quite a few hoops to jump through and a lot of information to have just right.  Here are some quick helps to get you on your way with Google Products.

Get your Shopify site setup in a Google Friendly way

For starters, make sure you setup your Shopify account well. Once you import all of your products, make sure that the titles and product descriptions...

Read More



Tell Us About Your Project

Invalid phone number