El Chango Media

Google Fonts Gives Web Designers Variety

Mike — Thu, 16 Feb 2012 17:36:39 +0000

For years, designers have complained of only being allowed to use Times New Roman, Arial, Verdana, or Courier as marketers and web developers forced the usage of web-friendly fonts for usability and search engine optimization. The idea of these four fonts being known as the web-friendly fonts is quickly becoming extinct.

In 2011, Google Fonts was officially released, moving from an experimental phase to becoming one of Google’s services, and designers finally discovered that they could go beyond the basic limitations of web-friendly fonts. In fact, not only could they go beyond but their marketing and web developer colleagues were also excited as Google Fonts also met their usability and SEO requirements while being simple to implement and opening up a new world of design possibilities. Plus, all the fonts are Open Source and can be used free of charge!

It sounds too good to be true but it is true. Let’s take a look.

Choosing Which Google Fonts To Use

A complete list of Google Fonts can be found at http://www.google.com/webfonts and the list can be filtered by four font tyles: serif, sans-serif, display, and handwriting. Designers can download the fonts to their computer for use in Photoshop or Illustrator by choosing the fonts, adding it to their Collection, and then clicking the Download Your Collection button.

Implementing Google Fonts Into Your Website

Web Developers like Google Fonts because it’s as simple as adding just 2 lines of code to the website, one line in the of the page and another in the CSS file referencing the font family being used. For example, if we were going to use the script (handwriting) font called Herr Von Muellerhoff, the following code would need to be added:

Between the of your HTML document:

In the CSS Stylesheet (example: making all H2 headings into Herr Von Muellehoff):

h2 {
 font-family: 'Herr Von Muellerhoff', arial, san-serif;
 }

Actually, what the above does is it makes the H2 tags display using the Herr Von Muellerhoff font but if that isn’t available, it will use Arial, and if that’s not available, it will use a san-serif font. Of course, Arial and the sans-serif font look nothing like the script of Herr Von Muellerhoff!

To use mutliple Google Fonts on a page, you simply have to add another font to the code in the by separating the fonts using the pipe character (ie. vertical bar). For example, if we wanted to use the font Tangerine with our Herr Von Muellerhoff, we would need to use this line of HTML in between

Simple but effective!

Search Engine Optimization and Google Fonts

With so many fonts styles to choose from, the benefits of using Google Fonts for SEO should improve because developers can now turn custom headings with graphics into web-friendly fonts, all of which can be read by Google’s Spider. Before, tricky headings would have been converted into a graphic and the search engines would never have known there was text on that image.

The only negative side is the load time is increased slightly as the font has to be downloaded and displayed on your computer. However, this is usually a minor speed difference is Google’s serves are very fast and reliable. Obviously, the more fonts you use, the more intensive the load time, however most web designers only use a few fonts for the page,maybe 5 fonts but it’s rare to see more.

Summary

Using Google Fonts is a win-win situation for designers, marketers, and web developers as this service makes it easy to expand the number of web-friendly fonts to be used on your site. With Google funding the designing of new fonts, we should see a significant increase it options in the coming years.

The 5 Useful Benefits of Using Dropbox

Mike — Tue, 24 Jan 2012 18:22:43 +0000

I have been using Dropbox for the better part of a year now and have found it an effective service in my everyday business activities. I started by using the free 2GB account for the first few months but as I got used to the service, I found myself using it more and more and upgraded to a larger account. Here are the 5 reasons why Dropbox has become an essential tool for my work:

1. Ease Of Use

Since Dropbox is software you install on your computer, it is simple to use and doesn’t require the extra hassle of having to go through a browser to transfer files. I am easily able to copy files to the Dropbox folder on any of my computers and it all syncs with other computers in my office and other locations. This allows me to have access to important files wherever I am, as long as I am connected to the Internet.

With the ease of use, I have found it has changed some of my computing habbits. For example, when I travel, I dump all my photos and video from the camera into a Dropbox folder and leave the laptop on all night at the hotel, uploading all the content to Dropbox. This gives me the confidence knowing I have a backup. Plus, when I get home, all the photos are downloaded and available on my desktop computer for processing.

2. Sharing Folders with Colleagues

Dropbox allows you to easily share folders with another person (by email address). Sharing a folder can be done by right-clicking on the folder to share and choosing “Share” from the Dropbox menu. A page will open in your browser where you will be able to add the email address of the person(s) you who will have access to this folder.

I have found this has changed some of my working processes as colleagues that I work closely with will share files with me and we will edit and save those files straight to Dropbox, which will then upload and sync the updated files to everyone’s computer immediately. The down side is you have to be careful not to have more than one person working in the file at once as Dropbox does not provide a service for file checkins / checkouts.

3. Publicly Accessible Content

Dropbox includes “Public” and “Photos” folders where you can upload content and make it accessible to anyone. The Public folder is used to send files via a link to people without Dropbox. By simply placing a file in this folder, right-clicking, and choosing Dropbox -> Copy Public Link, you will have a link that you can paste into an email where others can download this file. The Photos folder works in a similar way but also generates a photo gallery. Create a folder in the Photos folder, copy some photos to it and once they have uploaded, right-click -> Dropbox -> Copy Public Gallery Link will give you a link to a photo gallery that you can share with others.
These features are rudimentary in comparison to services like Flickr but the point is sending a large file or creating a simple photo gallery can be done very quickly with Dropbox.

4. Built In Intelligence

Dropbox includes an Undo feature where your file is saved for up to 30-days and you can access it if you realize that you did not want to delete it. Some other built-in intelligence includes a function where copying a file from one Dropbox folder to another will not require the file to be uploaded again, saving lots of time when managing your files. This type of functionality improves the speed of your work flow and is far less cumbersome than with a browser based cloud system.

5. Dropbox API

Like many of the popular web services, Dropbox offers developers an API to tap into their service and build their own custom apps. The API is still being developed, however a useful tool that I came across recently was the Dropbox Uploader developed by Amit Banerjee where users can upload files through a form on your website and the files will be placed directly into your Dropbox account. This type of application can be handy for businesses like Printers or Copy Centers, where their clients can upload files to be printed through their website and the files will appear on Dropbox on the company’s computers, removing the added step for staff to have to download files from an FTP service. This is only one example of the usefulness of the Dropbox API as there will be many more as more features are added in future versions.

To summarize, Dropbox is a great tool for those needing access to files in multiple locations, anyone who works between an office and home office, or collaboration on projects with others. There service is free for up to 2GB and reasonably priced for larger amounts of storage or business services.

Google Adsense In Your City: A Learning Experience

Mike — Tue, 06 Dec 2011 00:06:28 +0000

Last month, I traveled to Las Vegas to attend the Google Adsense In Your City. Since launching Vancouver Trails in 2007, the Google Adsense ads being run on the website have been the primary way of generating revenue from that site and this event offered a good opportunity to catch up on what I was doing right and what needed improving.

The event was supposed to be split into 2 parts, the first being a group class with tips on optimizing Adsense Ads on your websites followed by a 20-minute sit down with a Google Adsense expert who would go through your site and Adsense account, offering direct feedback on your website. Due to another event happening nearby, the group session wasn’t held but fortunately, it was the 20-minute sit down that I really came for.

Once the friendly Google employees loaded us up with candy and other sweets, the 20-minutes started. Here are some of the highlights of how to optimize Adsense Ads that I picked up:

Preferred Ad Formats

The best performing Ad Formats are:

300×250 Medium Rectangle
728×90 Leaderboard
160×600 Wide Skyscraper

These sizes are most popular with advertisers, thus increasing the pool of ads that could be displayed on your site. The increased demand bids the cost of the ads up, giving you an increase in revenue. Advertisers have become accustom to designing ads these sizes and that’s why they are the most popular.

Opt-in to Text and Image Ads

Back in 2007, I only displayed text ads on Vancouver Trails as advertisers were not using images as much at that time. In late 2011, more advertisers are using images and opting into both gives you a greater possibility for higher cost-per-click ads to be displayed on your site, thus increasing your revenue.

Use Custom Channels so Advertisers Can Target Areas of your Website

I originally setup custom channels in a way that made it easier for me to update the website. I had channels called Right Column, 2nd Paragraph, and Content Bottom. Instead, the proper way to set these channels up is to choose areas of your website that are popular and maybe desirable for advertisers to place their ads. For example, the Homepage maybe a good place to have a custom channel so advertisers can go and bid to have their ads placed directly on your homepage. If your homepage is a desired location to advertise, advertisers will bid for placement on the Homepage Channel that you create, thus pushing up the cost of the ad and giving you more revenue. I’ve also picked out some high traffic pages on Vancouver Trails and will be setting up custom channels on those specific pages for advertisers to target.

Ads Above The Fold

The Google Adsense expert pointed out on a few templates that I should move ads slightly higher so they appear above the fold, or high enough on the page where the ad will be visible upon page load. This has always been a challenge for me. While I see the need for revenue, I’ve always wanted the focus of the website to be the content which drives visitors to use the site. I did move a couple of ads up higher while trying to not to make ads the central focus of the website.

Summary

Besides these tips, they also recommended using their complimentary services in Google Analytics and the Google +1 Button, which I had already implemented. The expert followed up by sending an email summarizing all the recommended tips.

The 20-minutes flew by but I found the tips about the Custom Channels, Preferred Ad Sizes, and some other general conversation made attending the event worthwhile. It also made me realize that I had setup Google Adsense in 2007 and hadn’t really kept up on some of the changes, both in the system and in the evolution of online advertiser’s behaviour relating to display ads on my site. The real test will come in seeing how much of an increase in revenue these changes will lead to, something that probably won’t be accurately measured for a year due to the seasonal shifts of traffic on Vancouver Trails.

Search Google Using an Image

Mike — Thu, 17 Nov 2011 01:29:55 +0000

Google Images now offers a feature where you can search the Internet for similar images. To do try an Image search:

Go to: http://images.google.com/
Find a photo on your computer in your Explorer (Windows) or Finder (Mac).
Drag that photo to the browser and drop it into the Search Field on the Google Images page.
Wait for the photo to upload and voila!

Here’s a screenshot of the Google Image page that shows the sample Starry Night image being dragged to the search field:

How can I use this?

This is more than just a cool feature as there are several business applications this can be used for.

Copyright: If you have photos on a website you run or on Flickr, try search with one of those photos and see if any other websites are using your photo that maybe did not ask for permission. You might be surprised!
Designing with Stock Photos: If you simply do not have photos for your website and need to buy stock photos from a service like iStock, try searching the web with that stock photo to see what other companies are using that same photo. Discovering that a competitor is using the same photo is like wearing the same outfit to a party as your friend.
Partnerships / Linking: Sometimes websites put a logo of your company on their site but don’t provide a link to your website. Try searching with your logo and see what comes up. This may present some opportunities to follow up for link building.

It’s widely known that one of the methods Google’s algorithm ranks sites on is unique content. Will this content start to include images? Or maybe it does already.

Google+ Launches Business Pages

Mike — Sat, 12 Nov 2011 03:48:52 +0000

The Google+ social network has finally launched their Business Pages where companies can now create their own profiles, similar to Facebook pages. While still in its infancy, Google+ Pages allows a company to include a brief description of themselves, their website, photos, contact info, gain followers, and send status updates to those followers.

While this just seems like a splash-in-the-pan compared to all the features Facebook Pages offered, businesses should setup a Google+ Page because more features will be rolled out in the next year and these pages will become part of Google’s search algorithm. In other words, there will be a positive SEO value to setting up a page and doing so sooner may keep your business ahead of the competition.

One thing to keep in mind is that Google+ Pages can only have one administrator at this time, so make sure the right person sets up the account for your company.

Here’s an introductory video from Google:

Customizing A Shared Page On Facebook: Use Open Graph

Mike — Sat, 10 Sep 2011 00:15:16 +0000

Whenever you share a link on Facebook or you paste a link into your status update, you’ll notice that it displays a title and sometimes a description and photo. To change what information is displayed when a page on your website is displayed involves using Open Graph, or simply placing a number of Meta Tags in the of each page on your website with customized content to display in Facebook.

Here’s an example of what the Meta Tags would look like:

For the image property, use a link to an image on your website that is at least 50px X 50px, an aspect ratio of 3:1, and in the PNG, JPG, or GIF format. The type property can be chosen from a list of examples. http://developers.facebook.com/docs/opengraph/#types

How To Determine Your Facebook User_ID

To determine your Facebook USER_ID, add your username to end of the following URL: https://graph.facebook.com/

For example, if your username is “chimp”, then you will load the URL https://graph.facebook.com/chimp/ and it should return a screen with the information below where you can simply copy / paste the “id”:

Facebook Won’t Display My Image or Open Graph Data

Sometimes Facebook doesn’t see the updates you’ve made in the Meta Tags right away due to its servers caching old content. Try the following steps to see the update image or open graph data:

Use Facebook’s Debugger Tool – Formally called Facebook Lint, this tool will reload the open graph content from the URL you enter and reset the page information, providing you with details of what’s in your Meta tags and what you are missing. Click here to go to the debug tool.
Login Again – If you tried the Debugger tool above, logout of Facebook and back in again. Sometimes the page information is cached in your browser and logging in again seems to clear this.

Responding to Negative Online Feedback

Mike — Sun, 28 Aug 2011 21:34:09 +0000

Many major websites now provide areas for users to comment on products and services being sold. Added to this, Google allows users to comment on companies through their Places page and import comments from other popular sites, all of which end up showing up in their search results. As a consumer, this can be very helpful in making a purchase or choosing a certain company who provides a service. As a company, this can be great, until you receive a negative comment.

Here are some tips for dealing with negative online feedback:

If there is a mechanism to respond to the comment, do so and respond honestly. If you refunded the customer, explain this in the response. If the customer is just venting, respond honestly and in a positive tone to the events that happened. Web users are more and more accustom to seeing feedback and they realize that not everyone can be satisfied. If you are honest and you maintain a positive tone to your response, people who view this feedback will recognize that.
Ask some of your best and frequent customers to leave positive feedback about your company. It won’t look so bad if you have 50 positive comments compared to a single negative one.
If the negative comment is abusive, threatening, or contains profanity, report the comment to the website administrators. Chances are they will remove it. If the comment is just “unfair”, don’t assume it will be removed from the website. It doesn’t hurt to ask but, again, take a positive tone in your email to the website operator and explain the situation honestly.

The Best Offense is a Good Defense

Encouraging customer comments on industry specific sites and in common web directories, such as Google Places, should be part of your online marketing strategy. Staying on the offence by doing a bit of work on this each month and getting positive feedback can save you a lot of hassle in the long run when you do get a negative feedback.

In addition, Google displays its comments in their search results and there is no doubt that positive and negative feedback on your company factors into search engine optimization. With this in mind, include online comments and feedback as part of your online strategy before somebody leaves you a negative response and you find yourself behind the 8-ball.

Dealing with UTF-8 Character Encoding In PHP and MySQL

Mike — Fri, 26 Aug 2011 01:21:50 +0000

The other week, a colleague of mine sent an interesting article about UTF8 encoding through the web stack. The post talks about how you have to force each part of your web application and software into UTF8 as they fight to default to their own default encodings. Most of the time, we think that setting the charset of our tables to UTF8 in the database and then declaring the HTML document as a ecoded in UTF8 is enough, however you should also specify that data transferred between your application and the database is also encoded as UTF8.

Here’s a summary of the points to be aware of:

1. Code Editor Preferences – Make sure the code editor that you are using is opening and saving your code files in UTF8. A lot of editors default to native Windows or Mac encoding, which can cause characters to appear differently.

2. Create MySQL Tables set to charset=utf8 and to collate=utf8_unicode_ci – MySQL by default collates to Latin1 so you will have to define both the charset and collate when you create your tables.

3. Tell MySQL that .sql File is UTF8 – If you are using the SQL pane in something like PHPMyAdmin, you may not have to worry about this step, however if you are using MySQL’s command line or a different 3rd party MySQL client, you have to tell MySQL that the .sql file is encoded in UTF8. If you don’t tell MySQL the .sql file is UTF8, it will default back to Latin1 and corrupt your data. For a command line example, refer to rentzsch’s post.

4. Exporting Tables – If you’re transferring tables between two databases, make sure to set the default-character-set=utf8 when using mysqldump.

5. Specify the Database Connection in your Application – A lot of developers forget to include a line of code to tell their web application to connect to the database using the UTF8 encoding. In PHP, you can use the mysql_set_charset functions like:

$link = mysql_connect('localhost','username','password',TRUE);
mysql_set_charset('utf8',$link);

6. Specify Encoding in HTTP Headers – Include some PHP code at the top of your application to specify the HTTP Headers:

header('Content-Type: text/html; charset=utf-8');

7. Specify Encoding in HTML – Include a Meta tag in the of your HTML documents that defines the encoding as UTF8:

8. Specify Encoding in HTML Forms – If your application is using forms that Insert or Update data in the database, you should also specify accept-charset=”UTF-8” in the form tag:

Dealing with character encodings can be a very tricky, especially if your web application uses different languages with different character sets (ie. Japanese), however if you ensure your encoding is set in each step, it can save you a lot of headaches down the road.

Thanks to rentzsch for their informative post on How To Use UTF-8 Throughout Your Web Stack.

What Is Google+ and Do I Need It?

Mike — Mon, 25 Jul 2011 19:56:34 +0000

A visual representation of Circles in Google+.

Google+ Shows Promise but Where’s the Support for Businesses?

Mike — Sat, 23 Jul 2011 19:31:30 +0000

Google rolled out it’s social networking equivalent to Facebook, called Google+, this summer and the initial features look promising. Google+ organizes your Friends into Circles, or custom named groups that you can add your contacts to. Many Facebook users have become Friends with family members, work colleagues, old high school buddies, etc. and find it challenging to update their statuses with personal opinions or photos knowing that they might risk one of their co-workers seeing private messages. Google+’s Circles enables you to organize each of your contacts into a different category and choose which updates and content those people see.

Google+ has done a great job of implementing a system that is easy to use and navigate. Even though the system has nowhere near the number of features that Facebook has, it’s a great start and it seems that updating certain things is easier to find compared to having to dig through menus in Facebook.

Now What?

After experimenting with Google+, the common reaction has been “Now what?”.

The big piece of the puzzle missing from Google+ is the ability for users to setup Pages for their Businesses, Organizations, Bands, Political Groups, etc. and for users to be able to follow those pages that they are interested in. Businesses have been itching to include their brands on Google+ but Google has been slow to respond.

In early July, Google announced that business accounts would be coming soon but then followed up with a message several days later asking businesses to stop making new accounts. This past week, several of the most popular companies who were able to setup Google+ Pages were removed without warning, including Mashable and Sesame Street.

Google should have probably waited in rolling out Google+ until the capabilities to add businesses to the system was ready. We have become so accustom to services on the Internet being accessible immediately and on demand that we don’t have the patience to wait for, what seems like a basic system, to be implemented. Google should have recognized this.

Still, Google will have all of these tools for businesses shortly and will continue to integrate their services with Google+, such as Maps, Places, and Calendars. Most importantly, the features on Google+ will tie back into search results since, after all, Google is all about “Search”!