Voltage New Media has had a great 2011 which is quickly coming to a close. We have had the pleasure to work with many new clients on a wide range of projects from your standard business website, complex e-commerce sites to major SEO campaigns.

Oh Yeah…We have recently won a Design Award  -  Thanks Guys!

“Voltage New Media has been awarded and recommended as a top rated Web Design and Development Company by Web Hosting Search, a leading company in providing best reviews for top hosting sites and reliable resource for web development.”

Must See: HTML5 Web Design Animation Examples HTML5 vs Flash

There are thousands of HTML5 blog posts out there, I didn’t just want to post html5 websites I wanted to post ones that are simply amazing and unique. Each has its own style and I wanted to post the variety of animation styles that are available with HTML5.

If your like me, and dont like flash at all (hate it almost as much as IE) I’m sure your eager to see what can be done for web design with HTML5 and CSS3.

I have gathered a few sites that I think are visually incredible…enjoy and be sure to share!

iPoe Collection
Great HTML5 Lighting Animation

I find the lighting effects off the candle on this website stunning, it adds so much to such a basic site and really sets it apart and makes it what it is.

The Art of Flight
Awesome HMTL5 Scrolling Animation Effects

Not only is this the best snowboarding video I have seen their website is pretty cool as well, it has all the awesome HTML5 scrolling effects you could ever imagine, check it out its a must see!

Ben The Bodyguard
HTML5 Interactive Animation

This is one the coolest ‘html5′ sites I have seen, its interactive animation that really shows what you can do with html5/css3. When I first saw this I could of sworn it was flash…

birrificioirpino.it
Awesome flash like website, interactive and highly animated HTML5 website

Again here is another example of a awesome HTML5 website, there are many sites like this out there but they are all FLASH its cool to see a fully animated website all flash-less!

Digital Hands
Animated HTML5 Mouse-over effects

This is a nice clean portfolio site, I really like the way they used HTML5 here its clean and simple and adds some ‘pop’ and uniqueness to the site. Nothing overboard, simple and clean.

Nike – A Better World
Stunning HTML5 Scrolling Effects 

This is probably the first HTML5 site I saw and I still think its amazing, lots have attempted this “scrolling html5 animation” but I still dont think anyone has nailed it this good. This is a must see.

Lamborghini Aventador
Scrolling HTML5 Effects and Mouse Overs

This site has a little bit of everything in it, a good example of a ‘simpler’ html5 style site. I love this site probably because the Lamborghini stands out so well on the black background, couldn’t of done it better in my opinion.

Moods of Norway
Flash Style HTML5 Website

Here is another flashlike HTML5 website, the backgrounds are very unique and work well with the styling.

Falling Leaves
Clean and simple HTML5 animation effect

Super simple but it works, for a mini site or a landing page (if you still use those) why not use an effect like this rather then flash.

Well thats it, if you like what you saw please comment and share!

How To Get a Canada Post Merchant ID for your Online Shopping Cart Canada Post Module or Plug-In

I thought I would write a short blog post on how you can get a Canada Post Merchant ID so you can setup your online e-commerce shopping cart. Since I did not find the process to easy, after getting transferred back and forth for an hour and jumping through hoops I finally managed to get my merchant ID.

You will need a Canada Post Merchant ID Number for shopping cart plug-ins or modules such as the OpenCart, LiteCommerce and in my case the Shopp wordpress plugin. The Canada Post Modules or Plug-ins are used for online stores to calculate shipping costs in Canada with Canada Post’s services.

This service is completely free.

Step 1: Setup a small business account

Call Canada Post’s Venture One Small Business Department:
1-877-262-5762
Ask to setup a small business account. They will give you an Account/User ID#, be sure to write this down. A business account also gives you better rates on shipping so your business can save some money.

Step 2: Visit Canada Post’s Business website:

https://www.canadapost.ca/cpid/apps/signup?execution=e1s1
Select the top option “My business has an existing relationship with Canada Post” Once there Create a User Name, Enter your Account # that you got in Step 1 and then create a password.

Step 3: Request a Merchant ID Number for online shopping cart.

Call Canada Post’s Sell Online Help Desk:
1-800-277-4799
(Prompts: 1 for English, Enter Account Number followed by the # key, Dial 2/option two, follow prompt to talk with an operator)

Mention you are calling to setup a Sell Online Account so you can receive a Merchant ID# which you need for the online shopping cart module/plugin.

That’s it, hope I saved you some time, if you need any help or have any questions/comments please leave a comment below!

5 Of the best websites and free online tools for web & graphic designers – Part II:

Well here is as promised another 5 great resources. Im sure if you are a web or graphic designer you have heard of some of these, hopefully I will post some new ones for you. I use all of these links on a weekly basis.
Feel free to share your favorite sites/tools by commenting below!

Delivr QR Code Generator:
Not just your average QR Generator

I must of spent over and hour and passed through two dozen QR generator websites until I found one that had all the features I wanted. Delivr has by far the best (IMO) QR generator out there. I like the fact there are so many different formats you can use for a QR code and I love the fact that you can download them as .png or .eps which no other site that I know of has! The main feature I wanted was a “memo” for a VCard/Contact Information QR Code, that way when someone scans the QR code with their iphone lets say, it will automatically fill in all my contact details, website, email, address etc as well as have a memo where I can say something like “thanks for scanning me, enjoy 10% off my services.” If you sign up for a free account there are other goodies that come with it as well, like an API and tracking!

Subtle Patterns:
Great free photoshop ready tillable patterns

We are always wanting some quick patterns for projects. I personally love photoshop for laying out websites etc and the best thing about this site is you can download all their patterns in one .pat (photoshop pattern) file. All their patterns are great because their subtle, as the name says. They add a lot to areas on a design that feel like they need a little more pop or texture, I generally use them as a pattern overlay then tone down the opacity to about 20% so they are barely noticeable but add a nice feeling to a normal plain color block.

ViewLikeUs:
Test websites in a rage of resolutions

Surprisingly there are not many good resolution testers out there, most of them simply just reduce the size of your browser window to simulate a lower resolution which really does not work well. You can choose from a number of the most popular screen resolutions to test what your website will look like to those on higher or lower resolutions and it even has Iphone and Wii resolution testers!

Google Page Speed Labs:
Optimize your website for speed & SEO

If you dont already know of it, google has a great tool that you can enter your website and google will give it a rank out of 100 based on speed, which we all know plays a part in SEO. It will suggest what files should be compressed or optimized, and it ranks them by priority and even shows you how much they should be reduced in size by. To help you compress and optimize your images, the quick, painless and easy way read my next tip!

Image Optim (MAC/OSX):
Optimize & compress your images

To relate to the above Google Page Speed Labs, This is probably one of my favorite tools and a must have! Simply drag images onto the programs window and it will compress the image without a loss of quality. There are so many of these tools for windows users but none for mac. It works for all image types but really excels in PNG files. PNG are by far my favorite format to use on websites because they have transparency and generally look 10X better then a jpg. On average this tool will save you about 10-15% per image, which is huge and thats even after optimizing in fireworks.

To optimize my site what I did was simply download all the images from my images folder used on my website, dragged them all into ImageOptim then simply re-upped them and my site ranking via google page speed labs increased from 60/100 to 85/100.

Well there you go, another 5 great resources for web/graphic designers. Check back soon, or follow me on twitter to keep up to date on MY LIST of the best websites and free online tools for web & graphic designers.

To say thanks please Re-Tweet & Share this post and/or leave a comment below!

Keep your WordPress wp-admin safe. The best wordpress security tricks, tips and plug-ins that all wordpress users should know.

Updated Nov 30, 2011: WordPress is becoming more then a great blog its becoming in my opinion the best CMS out there. Its open source and there are thousands of themes, plugins and modifications.

The only downfall is since its so popular it is also targeted and very popular by hackers, spammers and bots who are trying to gain access to your WP-Admin or post spam on your site. I wrote this article on what in my opinion are the best tools, tips and plugins to keep your wordpress site/blog safe from hackers and keep them out of your wp-admin. Now before you start with my tips I suggest taking a backup of your wordpress site, if you are careful and know what you are doing chances are you will not have any issues but its always a good idea. The best plugin for this I would say is the BackUpWordPress plugin, located here on the wordpress site.

This guide is for users who at least know how to edit files and access a FTP, but to make it easy I have included .zip files of the modified codes so you can just drag and drop. Enjoy!

Newbie to wordpress? Dont have time to make all these manual changes? See my Automated method of protecting your wordpress install [here]

Tip #1 – Keep your wordpress up to date! -or- Remove the Version Number

Wordpress is constantly getting updated, and in most cases the updates are for security. Bots and hackers will search for outdated versions of wordpress since they will be easier to hack. So keep your wordpress up to date!

If you cant find time to do this, there is a trick to removing the wordpress version from your site. First login to your file manager/ftp and access your current theme folder (/wp-content/themes/yourtheme) then find the file named ‘functions.php‘ save that to your computer and edit it, copy and paste at the top this code:

remove_action(‘wp_head’, ‘wp_generator’); 

Tip #2 – Remove ‘admin’ username

90% Of the attackers are relying on the fact that you used the default ‘admin’ user name for your admin account. From now on when you install wordpress instead of having the default name/login as admin change it to something more discrete even your name. This way now the attackers will not only have to figure out your password but your name. If you are already using the admin as your login go to your ‘users’ in your dashboard, create a new user and assign them as an admin. Once complete erase your old ‘admin’ user but make sure you assign all posts/topics to your new user or they will be erased!

Advanced Method: If you know phpMyAdmin there is a better way. Login to your phpMyAdmin, locate your WP installation, and click on the SQL tab, then run the query (change ‘New Username’ to your desired name):

UPDATE wp_users SET user_login = ‘New Username’ WHERE user_login = ‘Admin’;

Tip #3 – Make sure you have a strong password

Make sure your password is strong, this is a obvious one but so many people do not have strong passwords. Your password should have letters & numbers, upper case & lower case as well as special characters in it. A tip for making it simple is I use geek type. Such as “temppassword” can be made very strong by changing it to “Tempp@$$w0rd” for example. Replace a’s with @’s and o’s with zeros and s’ with $’s for example. I just find this a lot easier then remembering random special characters, I make a word out of them. To test the strength of your password check out this link here, it should be rated as strong at a minimum.

Tip #4 – Add index.php files to your directories (help protect your “uploads folder)

I have a ‘index.php‘ file in each of my admin directories such as the ‘wp-content’, ‘uploads’, ‘themes’ & ‘plugins’ folder. The reason for this is to again make it more difficult for potential hackers to find what plugins/themes and what wordpress version you are running also makes it difficult to browse any files. This is super simple to do just create a new text document, copy and paste in these lines of code:

<?php // Nothing to see here. ?>

Then save the file as ‘index.php‘ and upload it to the folders I mentioned above. If you are feeling lazy click here to download the .php file I made, just unzip the file and upload it!

Tip #5 – Check your chmod & file permissions

First if your asking your self “ch what?” check this link to explain file permissions and chmod settings. When first setting up plugins or editing files you might have to change the permissions to 777 (read, execute and write), make sure you change them back to 644 (read only) or what ever they were or you are just leaving your site open to anyone and everyone. When ever possible try not to leave or set any folders to 777, lots of people will just chmod everything including files to 777 when trying to solve an issue, this is the wrong way, you should go file by file and permission by permission working your way up to 777, lots of the time chmod setting 755 (read and execute) will suffice and this is OK. If the worst case scenario does come up and the only option is setting the permissions to 777 make sure you have a index.php file (as above in tip #3) in the folder where you made these changes, that will make it so that people cannot browse and view/download all the files in that directory potentially finding a way to hack into your site.

Summary of WP CHMOD/File Permissions:

• All directories should be 755 or 750.
• All files should be 644 or 640. Exception: wp-config.php should be 600 to prevent other users on the server from reading it.
• No directories should ever be given 777, even upload directories!!! Since the php process is running as the owner of the files, it gets the owners permissions and can write to even a 755 directory.

Tip #6 – Create a wp-admin .htaccess file

This is probably the best and most important method in my opinion. Since we are trying to keep hackers/bots out of the wp-admin area why not just not allow access from anyone but your self? Yes we can do that, and its quite easy! Again open a text editor, create a new file and insert these lines of code:

AuthUserFile /dev/null AuthGroupFile /dev/null AuthName "Example Access Control" AuthType Basic <LIMIT GET> order deny,allow deny from all allow from 25.73.284.129 allow from 24.16.123.129 </LIMIT>

What this is doing is denying access to the wp-admin folder and when someone trys to access it via (www.yourdomain.com/wp-admin) it will give them a 404 error screen unless their IP is added to the ‘allow from‘ line. Now you need to figure out what your IP address is (use this link to help) copy and paste your IP and replace the fake ip that I have put in the file. If you access your wordpress site from multiple computers you can add more then one IP as you see above in a new line, if you only access from one computer erase the second line. Once you have done this save the file as ‘.htaccess‘ and upload it to your ‘wp-admin‘ folder. Your done. Again If you are feeling lazy click here to download the .htaccess file I made, just unzip the file and upload it! If you cant see the .htaccess file click here.

Tip #7 – Protect Files with .htaccess – Protect your WP-CONFIG.php File

You can protect files and directories with your .htaccess file in your root, but the most important is the wp-config file. Your wp-config file is the “brain” of your wordpress installation. If someone gained access to this they could take down your entire site. To protect your wp-config.php file the best route again is with a .htaccess edit. Simply add the following code in your roots .htaccess file:

# SECURE WP-CONFIG.PHP <Files wp\-config\.php> Order Deny,Allow Deny from all </Files>

Tip #8 – Install the Invisible Defender Plugin (Best Anti-Spam Plug-in Period)

This is an awesome plugin. This plugin protects your registration, login and comment forms against spambots. Not only does it protect your files and login from hackers/bots it is also the best spam protection that I have ever used for wordpress. This is the only protection I use on my sites for spam and it works flawlessly, I have never had a spam message posted (knock on wood) by a bot. What it does is it adds two hidden fields that spam bots or scripts will fill in, then its trigged spam and they cant post, a normal visitor would not see these fields there for they would not fill them in, allow the message to be posted. It does the same for the wp-login and wp-admin sections of the site. It also shows you how many attempts it has saved. Download it here. Install it like you would any other plug-in.

Tip #9 – Install the Stealth Login Plugin

If you have already completed the steps above this is not necessary since we already have implemented a method to keep users out of your wp-admin section (the .htaccess fix). If you want to be extra safe why not, what this plugin does is changes the url of the login. So instead of having www.yourdomain.com/wp-admin you can have www.yourdomain.com/getinthere or something discreet that people will not guess or you can even use www.yourdomain.com/login to keep it simple for clients or yourself.  What this now does is again 90% of the time they are targeting your /wp-admin login page, but it will not be found since you have changed it. Click here to go to the wordpress site to download the plugin.

Tip #10 – Test the security of your WordPress with WP Security Scan

There is a great tool (once you have completed the steps above) this will test your installation of wordpress to make sure its secure. It Scans your WordPress installation for security vulnerabilities and suggests corrective actions. Click here to go to the wordpress site to download the plugin. Again just install it as you normally would then access the “Security” button from your dashboard.

Green means good, funny thing is this scan pretty well tests lots of the tips mentioned above. So once your all done give this a try.

Automated Alternative Method:
Best WordPress Security Plugins
Quick and Effective Route That Anyone Can Do
Secure WordPress Plugin & BullettProof Security

I always think doing manual edits as my tips above is by far the best way to protect your wordpress installation. Of course doing all the tips I have provided is a great idea (I do them) it might also be a bit excessive. Chances are hackers are going to target those sites that are out-dated, or are fully open (777 permissions) so even if you keep your site updated and dont have any files set to 777 you should be ok as hackers wont bother spending time getting around your site UNLESS they really want to.

Another method is to use a plugin to make some security changes to your wordpress site. This is an automated system, so it might not always work 100% and also keep in mind hackers have access to this plugin so they know all the edits it makes. But again like I said above if you even take any steps to secure your site it makes the job more difficult for potential intruders causing them in most cases to move on to the next (easier) site.

Secure WordPress Plugin:

This plugin will beef up the security of your WordPress installation by removing error information on login pages, adds index.html to plugin directories, it also hides the WordPress version and much more.

BullettProof Security Plugin:

This is a great plugin, it does automatically lots of the steps I suggested to manually do above. The BulletProof Security WordPress Security plugin is designed to be a fast, simple and one click security plugin to add .htaccess website security protection for your WordPress website.

Thats it, relax, your wordpress site is now secure. Remember to take backups!

If you have done the steps above we have now gone 4 layers deep protecting your wp-admin from bots, hackers or other attackers who might try to gain access. We have not just relied on plugins, but also created some very good manual security methods. Now you can relax knowing your site is up to par on security and you can enjoy blogging away. Please note that you should still take backups of your site on a regular basis. The best plugin for this I would say is the BackUpWordPress plugin, located here on the wordpress site.

If you have some to add or need help, or have comments please reply below.

To say thanks please Re-Tweet & Share this post and/or leave a comment below!

5 Of the best websites and free online tools for web & graphic designers – Part I:

I am going to try to start blogging more, and I hope to do this series at least once a month since I have over 100 bookmarks of great resources and free tools for web designers that I have collected over the years.

Im sure if you are a web or graphic designer you have heard of some of these, hopefully I will post some new ones for you. I use all of these links on a weekly basis.

Feel free to share your favorite sites/tools by commenting below!

Best Free Online Invoicing | Billing Boss

I Have tried at least half a dozen online billing services, then I found Billing Boss, which I signed up on and have been using for 2 years. Nice thing is it has a mobile version of the page so you can send and review invoices on the go. It is also free but is very basic. It has all you really need if you don’t mind your invoices not being super ‘pretty’ and best of all there is no upgrade feature so everything comes with it.  You can customize your email, add a business logo, and choose from a number of invoice templates and best of all you can download the invoices as .pdf or even have them attached to the email, which gets sent to your client with the online invoice link.

http://www.billingboss.com

Best site to find free fonts | DaFont

There are hundreds of free font sites online. I still find my self using DaFont all the time, they have many awesome fonts on there for all purposes, the live preview is also a nice feature that allows you to preview your text in the various fonts without downloading it. The sub categories are all setup nicely so you can find just the font you want for your next logo or branding project. Organized from Top 100, Fancy, Foreign Look, Techno, Bitmap, Gothic, Basic, Script, Dingbats, and Holiday font categories each with up to 20 sub categories it makes finding the perfect font easy.

http://www.dafont.com

Another great font site, but its not to find fonts | Wordmark.it

Cant remember what fonts are on your computer? Wish you could preview them all easily?

If you are like me, I download fonts on a regular basis per project that I am working on. I always remember the name of my favorites but sometimes I cant quite remember the name of a font that I am looking for…that I know I have…somewhere?! Wordmark.it is great for this, what it does is loads up all the fonts on your computer and displays them, but the best part is you can type what ever you want and it will generate a preview with all the fonts loaded on your computer. Awesome eh?

http://www.wordmark.it

The best 100% Free .PSD Graphics, Backgrounds and Patterns | psdgraphics.com

Again there are hundreds of sites for free graphic work, but psdgraphics.com has to be one of the best.
ALL of the submissions are quality, modern web 2.0 look, properly layered in photoshop. Best of all its free, lots of the graphics on here are awesome, the best part is they are easily modified because they come in a complete photoshop file ready to go.

I can spend all day on this site.

http://www.psdgraphics.com

Best SEO Tool to check your google position | tools4google.com

I have a entire folder of SEO sites and tools but this is one that is on my bookmark toolbar because I use it daily. There are many other sites that do the same thing, but in my opinion not as well as tools4google.com. If you have been working on SEO you can see how you are doing quickly and easily. This tool will display where your sites position sits on googles results.

All you have to do is type in the URL, and Keyword that you are targeting, you can also select other features like Geo Target (Canada etc). The only downfall is it only allows you to do 3 searches a day. But another awesome feature is it stores your previous searches so you can see how the site is climbing the google results.

http://www.tools4google.com

Well that’s it for this week, I don’t want to put all my eggs in one basket (HAPPY EASTER btw) so check back next week, or follow me on twitter to keep up to date on MY LIST of the best websites and free online tools for web & graphic designers.

To say thanks please Re-Tweet & Share this post and/or leave a comment below!

New 2011 Adwords/Adsense Coupon Credit Promotion Codes (Valid as of Feb 1, 2012)

Google is at it again giving out a free $75 credit for adwords/adsense. Get a free credit added to your new account by signing up with the link below.

For your credit voucher just follow this link: http://services.google.com/fb/forms/yourbusiness/

I believe this is valid in the US and Canada only. You should see this page (screen-shot) when you go there. If its not working for you please leave a comment & note your country.

You can setup multiple accounts for each campaign that you are running, so feel free to setup a few accounts to take advantage of the $75 credit which will automatically be attached to your new adwords account if you follow the link above.

*GIVEAWAY* as of Sept 7th 2011:

I have three ad-words coupons to give away (2x $100 and 1x $75)

Just leave a comment below why you deserve them and I will email the winners Sept 12th/2011! Those that already entered last contest will be automatically entered this one as well. Good luck.

Here are some $100 adwords codes:

Expiration date: July, 15th, 2011 & Applicable on new USA accounts only:
36TH-2N4P-U5HQ-WCUJ-HL2
5LZL-XYNJ-9JCH-LXDE-EZ32
5LZL-XYKL-JE6K-AVPT-YC8A
DHYQ-8C5S-N5GN-TSHN-3Q2
5LZL-XYHD-P3S2-JPCM-927S
5LZL-XYE6-NT7D-3CLP-BQVS
5LZL-XZ3U-BBPZ-XBRC-YTUA
5LZL-XYZ5-SB25-MTZS-P4VA
5LZL-XYWY-69ZJ-UM7H-PY3S
5LZL-XYTR-VP3Z-XVL6-QV9A

**Codes above are all used up, I will try to post some more codes soon. Also check out our comments below as people will post coupon codes from time to time**

To say thanks please Re-Tweet & Share this post and/or leave a comment below!

If you have coupon codes please feel free to post them in the comments below and I will put them up here.

Burling Builders was in the process of starting up their construction company. They were in need of Branding to give their company a face, they explained some elements they wanted in a logo and we went from there. We created a logo, business cards, letterheads, and magnets for their trucks.

Services: Branding, Logo Design, Print Media

We donated a Website, Hosting & Logo to Super Heroes of Victoria a non profit organization that puts on fundraisers for BC Children’s Hospital. They wanted a site that is not only functional, easy to navigate and update but also FUN. We added some colorful elements and images to spruce it up. Keep your eye out for their fundraisers, feel free to stop by and say hi.

View the website: Super Heroes of Victoria

Golf-R-Forums.com is the #1 Community dedicated to the VW Golf R. The site is created in wordpress and the main feature is the blog, the major feature of the site are the community forums, which were built in SMF and synchronized with the feel and look of the website.

Services: WordPress Customization, Graphic Design, Web Development, SMF Customization, SEO.