March 2012

Make google refresh the site preview screen shot

I believe you need to have your site working with Google Webmaster Tools to manually do this. So make sure you are setup with that first of all.

Login to the Google Webmaster Tools.

Choose your site from list of sites.

On the left, click "Labs".

Click "Instant Previews" which is a sub of "Labs".

Click "Compare"

That will do your root site, then type in urls and click "Compare" as needed.

This forced the cached screen shots to reset for me.

If you've made major changes you can also click "Diagnostics" (on the left above "Labs").

Click "Fetch as Googlebot"

Leave the text input after your site empty so that it fetches your home page.

Click "Fetch"

Once complete, click "Submit to Index", then choose the radio for "URL and all linked pages", click "Submit".

Note that you can only fetch pages 500 times and submit them to the index 10 times.



How to Make a Website Mobile Friendly and Responsive

This is how to make your website mobile friendly and what is known as responsive. Also known as Responsive Web Design.

Do this.

Add this to the <head> tag:

< meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable = no"/ >
< link media="handheld, only screen and (max-width: 1024px), only screen and (max-device-width: 1024px)" href="PATH_TO_CSS/mobile.css" type="text/css" rel="stylesheet" / >

If you don't want the mobile style sheet to take over when the window (or viewport) is 1024px wide, just change the values to when you want it to take over...

MAX-WIDTH is when your computer screen will let the style sheet rules apply and

MAX-DEVICE-WIDTH is the width that your iPad or iPhone will let it take over at.

So you could have different style sheets for horizontal and vertical modes on your iphone, ipad, android, etc...

Now all you need to do is create a mobile style sheet (mobile.css). This is what mine looks like for this site.

#nav ul li {
	float: none;
#header .inner {
	width: auto;
#nav ul {
	width: auto;
	margin: 0;
	padding: 0;
#nav ul li {
	margin: 0;
#content .inner {
	width: auto;
	padding: 10px;
img {
	max-width: 100%;
	height: auto;

#why #nav ul #why-page a,
#pricing #nav ul #pricing-page a,
#contact #nav ul #contact-page a,
#clients #nav ul #clients-page a,
#blog #nav ul #blog-page a,
#print #nav ul #print-page a
	color: #fff;
	background: #000;

textarea {
	max-width: 75%;
.fLeft, .fRight {
	float: none;
* {
	width: auto !important;

#topper #see {
	float: left;
	width: 25% !important;
#topper #em {
	width: 25% !important;
#topper #why {
	width: 25% !important;
#topper #kay {
	float: left;
	width: 25% !important;

#blog-body {
	float: none;
	width: auto !important;
	margin: 0;

#blog-side-nav {
	float: none;
	width: auto !important;
	padding: 10px;
	font-size: inherit;

Mainly I just disabled a bunch of floating elements and things that were statically sized

width: 1000px;
I changed to
 width: auto; max-width: 100%; 


That was really useful for things like images such as my header image.

So after you put this code in, resize your browser. Make it skinny make it wide.. Test it out!

Go ahead! try it out right now on this site, make your browser wide, then make it skinny. Cool eh?

$2 Complete Wedding Announcements

No limits on quantity. Includes the Announcement, an Insert, an Envelope, and a Stamp! Call Travis at 801-810-5759

  • Announcement
    Full Color Front and Back
    High Quality Heavy Card Stock
    5" x 7"
  • Insert
    Full Color Front and Back
    3.5" x 2"
  • Envelope
    White with a Pointed Flap
    Names and Addresses Printed
  • Stamp

How to get the next and previous object from a list of objects or queryset

So I came across something the other day I figured I would share.

With django's help, I made a photo app. Each photo can belong to multiple Projects. I can get a list of photos for a Project and display their thumbnails. When I click on a thumbnail it pops up the large version of the photo in a nice div on the screen. I wanted to be able to click "next" or "previous" and get the next or previous photo in the project, and not the next or previous photo from the entire list of photos that is returned by my manager.


I determined I would need to figure out where the current photo was in the list of photos for that project. So I needed the current photo's index. Then I just needed to take that index and +1 or -1 for the next or previous photos.

Here is how I did that:

New Branding for 2012

GravityMAD is now offering full print services so I decided to print me off a fresh batch of my new business cards. :)


business card front

Business Card Back

Current Designs for Envision Wraps

Here is a sample of the designs I've been working on lately for Envision Wraps.

Envision Wraps


Solve your BMW 3 series false tail light warning

EDIT: I received a notice from BMW the other day letting me know they've issued a recall for this. El-yay! BMW is finally owning up to this problem!

The only materials and tools you need are:
- a 0.25" blade receptacle (available in Radio Shack, Home Depot or any electronics shop)
- a 5" strip of size #18 or larger wire
- rubber or vinyl electrical tape
- utility knife
- pliers


1) Release the taillight housing and lay it on the trunk.

2) Release the connector by pressing on the sides then pulling. Take note of the circled tab. That's the point we'll connect to later.

3) Cut a 5" piece of wire and strip one end about a quarter of an inch.

4) Insert the stripped end into the blade receptacle and crimp using any pair of pliers. Try pulling out the wire afterwards to make sure it's tight.

5) At the connector, the ground wire is the brown one. It's noticably thicker than the other wires.

6) Using a utility knife, carefully strip half an inch of insulation on the brown/ground wire 2"-3" from the connector.

7) Strip half an inch of the other end of the new piece of wire and wrap neatly (mine wasn't too neat in the pic) around the exposed ground wire.

8) Wrap tightly with electrical tape.

9) Plug in the connector again and insert the blade receptacle into the tab.

10) YOU'RE DONE!! If you've been having that annoying intermittent bulb-out problems and all bulbs seem to be ok, this is I think a more permanent solution. Replacing just the connector like what's done at the will just bring back that problem after a few years. The problem is that the connector pin for the ground is too thin to carry all that current to the bulbs reliably. So eventually the pin builds up electrical resistance and will melt in some cases. Running a parallel connection using a thicker connector will solve it.


THANK YOU TO SSM199! for this original post seen here...


Greeting Cards :)

Just got the templates setup for 5 x 7 Printed greetings cards. The project is