Your website’s page speed is of the utmost importance.

If your site doesn’t load fast enough, your potential customers and conversions are at risk. With our instant gratification culture of today, any page on your web site that takes more that 2 seconds to load fully will be abandoned immediately.

There can be a myriad of reasons that your site doesn’t load quickly. From not optimizing your images before uploading them, to improper server settings, your page load time can slow to a crawl. But, you’re in luck.

Below is a short list of my favorite resources for testing and addressing site page speed.

Free PageSpeed Test Tools:

GTMetrix.com

Pingdom.com

WebPageTest.org

Google Page Speed

Each of the page speed testing sites above will give you vital information on speeding up your website for optimal results. I use each of the urls above just a bit differently. GTMetrix is my favorite of the four. On your results page, they give you a breakdown of what’s causing your issues and give you guided hints on how to address and correct your page’s speed issues.

One of the biggest, and most common, page speed issues is Leverage Browser Caching (generally means that you can specify how long web browsers should keep images, CSS and JS stored locally).

Here is how to address Leverage Browser Caching on your site.  Add the following code to your .htaccess or httpd.conf file, dependent on your server type:

## EXPIRES CACHING ##
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
## EXPIRES CACHING ##


Setting your leverage browser caching is one of several ways to improve your site’s page speed. A fast website will undoubtedly improve your visitor’s overall experience and catch those potential sales or conversions.

47% of consumers expect a web page to load in 2 seconds or less. (1)

PageSpeed Solution for WordPress Installations

I’ve also found this little gem for your WordPress blog or site. Speed Booster Pack WordPress Plugin address many, if not all, of your page speed issues for your WordPress installation.

Download the plugin for your WordPress site here.

Test, test, test and test some more to get your money making website to reach its fullest potential and as fast as possible. A slow site will kill your conversions and lose you potential sales and leads. Take the time to address every issue you possibly can related to page speed and show your website and visitors some love.

In a previous article, I posted on the benefits of using the pen tool in Photoshop to create quality cutouts of people or object on a complex background.

With there being many different ways in Photoshop to achieve this effect, I personally have found that using the pen tool is the best tool to use in this situation. You can refer to that blog post here.

Expanding on that post, here, I’ve created a video tutorial on using Photoshop’s pen tool for making precise, quality cutouts of shape and images on various backgrounds.

Although, you may have your own preferred method for making cutouts in Photoshop, this method I have found to be the best at creating high quality cutouts for use on other projects or design.

Thank you and I hope this tutorial video on Photoshop’s pen tool is helpful and informative.

Here I’m going to show you how to convert an Illustrator file/document to one color. This is mainly used (from my experience) for screen printing purposes but has many other applications.  I’ve had may clients ask me to put 30 different logos of varying colors and design, to all be one color to send to the printer.

This can be achieved very simply with just a few clicks in Illustrator.

The video below is a quick tutorial on just how to do this.

STEPS:

Open you artwork in Illustrator and select all the artwork. You can click and drag to select everything or use Ctrl ‘A’ keyboard shortcut.

Once all of your artwork is selected chose: Edit > Edit Colors > Recolor Artwork.

From the dialog box that pops up you can start the magic.

If the artwork contains black which you want to alter as well….. Click the little pref icon next to the “Preset” drop down menu. This will bring up the Color Reduction Options dialog.

• choose 1 from the colors drop down
• uncheck the “Black” item under “preserve”
• if “Grays” is checked, you’ll want to uncheck that as well.

If the artwork does NOT contain any black, simply choose 1 under the color drop down in the middle of the dialog window.

You can now double click “NEW” to edit the color or drag current colors to the new pane and adjust accordingly.

Be sure the “check” Recolor Art so that you may see you edits live.

Click “OK” and you are set.

I hope this helps.

This is by far the best way to cut out anything that you may come across in Photoshop. I do this almost every single day when cutting out people, shapes, buttons, you name it. It is clearly and by far the best method for your intended results.

I see so many people try to use the magnetic lasso or the polygonal lasso and this is just a mistake. I’m even guilty of trying to shortcut with the lassos when I was a junior designer.

Bottom line, the pen tool will out perform the array of lassos any day of the week. You have control of each point, line and curve. God forbid if you make a mistake with one of the lassos… BOOM, you have to start all over again.

With the pen tool, you can even close the document you’re working on and pick up that exact path at a later time with no consequence.

So the lesson here, PEN TOOL for CUT-OUTS  in Photoshop.

I will be posting video tutorials soon on my site. They will include Photoshop tips, Dreamweaver practices and other general design tips and tricks. I’ll be doing this with a screen capture software named “Camtasia.” I’ve noticed that sometimes when I’m searching for solutions on Google, it can take so long to find what I’m looking for and when I do find it, I always think to myself, “I could do that better.” So I’m putting my money where mouth is and going to make my own tutorials. Check back regularly to see what’s new.

This is a great tutorial I’ve used to fight back again spam on some of the website that I design. Most site use a captcha system to deter spam but that can kill your conversions sometimes. With the method in this tutorial, you can set up a spam-free contact for without captchas. It uses simple css, javascript and html. You’ll need to have a basic understanding of all three of these to complete this tutorial.

How to build a spam-free contact form without captchas: Read More…

javascript window.open function

Thewindow.open()function creates a new browser window, customized to your specifications, without the use of an HTML anchor tag. In this example, we will be making a function that utilizes thewindow.open()function.

<head>
<script type="text/javascript">
<!--
function myPopup() {
window.open( "http://www.google.com/" )
}
//-->
</script>
</head>
<body>
<form>
<input type="button" onClick="myPopup()" value="POP!">
</form>
<p onClick="myPopup()">CLICK ME TOO!</p>
</body>

Display:

This works with pretty much any tag that can be clicked on, so please go ahead and experiment with this fun little tool. Afterwards, read on to learn more about the different ways you can customize the JavaScript window thatpopsup.

javascript window.open arguments

There are three arguments that thewindow.openfunction takes:

1. The relative or absolute URL of the webpage to be opened.
2. The text name for the window.
3. A long string that contains all the different properties of the window.

Naming a window is very useful if you want to manipulate it later with JavaScript. However, this is beyond the scope of this lesson, and we will instead be focusing on the different properties you can set with your brand spanking new JavaScript window. Below are some of the more important properties:

• dependent– Subwindow closes if the parent window (the window that opened it) closes
• fullscreen– Display browser in fullscreen mode
• height– The height of the new window, in pixels
• width– The width of the new window, in pixels
• left– Pixel offset from the left side of the screen
• top– Pixel offset from the top of the screen
• resizable– Allow the user to resize the window or prevent the user from resizing, currently broken in Firefox.
• status– Display or don’t display the status bar

Dependent, fullscreen, resizable, and status are all examples of ON/OFF properties. You can either set them equal to zero to turn them off, or set them to one to turn them ON. There is no inbetween setting for these types of properties.

upgraded javascript popup window!

Now that we have the tools, let’s make a sophisticated JavaScript popup window that we can be proud of!

<head>
<script type="text/javascript">
<!--
function myPopup2() {
window.open( "http://www.google.com/", "myWindow", 
"status = 1, height = 300, width = 300, resizable = 0" )
}
//-->
</script>
</head>
<body>
<form>
<input type="button" onClick="myPopup2()" value="POP2!">
</form>
<p onClick="myPopup2()">CLICK ME TOO!</p>
</body>

Display:

Now, that is a prime example of a worthless popup! When you make your own, try to have them relate to your content, like a small popup with no navigation that just gives the definition or explanation of a word, sentence, or picture!