Posts Tagged ‘Google’

Another Reason to Prettify Your Website Now

November 12th, 2010

In the blink of an eye, web surfers make nearly instantaneous judgments of a web site’s “visual appeal.” First impressions can affect subsequent judgments of perceived credibility, usability, and ultimately influence our purchasing decisions.

Today, Google rolled out the Google Instant Preview today.

As Google states,

Click once on the magnifying glass in the search result to instantly see a preview of the web page.

First impression even without visiting your website!

In additional to giving you a quick preview of the website, the preview will highlight text relevant to your search terms – a very handy feature when you’re trying to find a specific term on a page that contains thousands of other words. Another case where Instant Previews comes in handy is people or product search: by using Instant Preview, you can quickly scan the page and find out if the page is about the person or product you’re looking for.

We did a search on “Doteasy.com” just to test it out:

Instant Preview is not about speeding up the actual search process, but rather the decision-making process of choosing a result and helping you find what you’re looking for on the pages you visit.

This Google feature will become available to all users across the globe within the next few days.

You can read up more about the Google Instant Preview on the Google Blog

So, maybe it’s time to pick up that way-overdue website revamp project.

Is your website mobi-friendly? (Part 2)

September 1st, 2010

Here are more free tools and services to mobilize your website:

3. Mobilize by Mippin (for WordPress)

Once you have installed and activated the Mipping Mobilize plugin, visitors accessing your WordPress blog from a mobile phone will be automatically redirected to a mobile version of your WordPress blog. Photos are scaled to fit the dimensions of a phone screen and videos are converted to the 3GP format, commonly used on most 3G, 2G and even 4G phones.

4. Mippin (for RSS-driven site)

If you want to mobilize an RSS-driven site, you should check out Mippin. Although it falls short on the level of customization as MoFuse and other paid-tools, it is quick to use and the result looks great – your site will be optimized to work on various mobile devices and the service is completely free.

5. Zinadoo

With Zinadoo, you can easily create, publish and share your mobile website. In addition, you can create a guestbook, comments page, and much more.

Is your website mobi-friendly? (Part 1)

August 30th, 2010

The number of people who browse the Internet with their mobile devices is on the rise. However, the majority of websites on the Internet today is unsuitable for mobile viewing.

Creating a mobile-friendly version of your website is actually quite simple and there are a number of free services and applications you can use.

In addition to the WordPress iPhone plugin we have introduced in an earlier post, here are more free tools and services we’ve found:

1. mobiReady

Before you begin building your new mobile-friendly website, it’s always good to know how mobile-UNfriendly your current website is. You won’t be able to create a mobilized version of your website on mobiReady, but you can enter your URL and press “Go” and within seconds, you will receive a free report, detailing how well your site displays on mobile devices as well as the potential problem areas.

2. Google Mobile Optimizer

Go to http://google.com/gwt/n, enter your site URL and a lightweight version will appear. Although it is completely un-customizable, it can be used as a bookmark for your phone.

Google Font API on Your Website

August 25th, 2010

Anyone who’ve designed a website would agree that one of the most frustrating aspects of designing a website is fonts – the font you choose needs to be already installed on your visitors’ computer or device, and yet the selection of the web-safe fonts is quite limited: Arial, Georgia, Verdana, etc. If you want a fancy font for your title, you’d need to convert it into an image using Photoshop or applications.

Then, in May, Google launched the Font API and Font Directory. To get an idea of what you can expect from the Google Font API, check out the Google Font Preview.

The Google Font API lets you use the web fonts that are in the Google Font Directory, currently over 25 fonts. With the Google Font API, you can now add high quality open source fonts (fonts that work all major browsers) to your website. Best of all, it’s easy to use and it’s free!

Exciting, right? Definitely!

Let’s try implementing it onto a website.

There are two steps for using Google Font API.

1. Reference the CSS stylesheet you need within your HTML file, with the tag inside the tag. This reference should be in all web pages that will use the font(s).

It’ll look like this:

<head>
<title>Home Page</title>
<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=FontName”>
</head>

Replace the “FontName” with the font you wish to use from the Google Font Directory.

If you are using WordPress, you can simply add the code to your header.php file, inside the head tags.

2. Use CSS to specify how you want to use the font. For example, you want to use the font on all h1 header tags, you would use the following CSS:

h1 {
font-family: ‘FontName’;
font-size: 18px;
}

Styles

By default, you will get the normal style of the font. If you want display another style, such as bold, you add colon (:) at the end of the font’s name followed by the style you want. If you need more than one style, simply separate them with a comma (,) like this:

<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=FontName:bold,italic>

To see the Font API in action, check out Smashing Magazine’s website. They have relaunched their site using the open source Droid font hosted by Google.

Multiple Fonts

If you want to use more than one font, you don’t need to make multiple references. Instead, add the additional fonts in the same reference, separating with a | symbol, like this:

<link rel=”stylesheet” type=”text/css” href=http://fonts.googleapis.com/css?family=FontName:bold|AnotherFontName” >

SEO Implications

Google Font Directory is more SEO-friendly because it replaces the fancy title images you have been using – not only does it load faster, the text styled is also searchable.

Another advantage of using Google Font API – the font file is served by Google, not you, guaranteeing uptime and speed. If a user has already visited another website that uses Google Font API, they might already have the font you need in their browser’s cache, further speeding up the page response time.

For more information on using the Google Font API, including the offical Get Started guide from Google, visit Google’s website.

Google officially announced that Page Speed is now a factor in its search ranking algorithms

July 5th, 2010

In April, Google has announced that Page Speed is now a factor in its search ranking algorithms. So, the faster a website loads, the higher it will rank in Google’s search results. In the next few days, we will share some tips with you on how to improve your Page Speed.

First of all, you’ll need to install Page Speed. This will tell you how fast your page loads. In order to run this tool, you will need to do the following:

• Use Firefox as your internet browser
• Install a Firefox add-on called Firebug

Currently, Internet Explorer is not compatible with this tool.

Firebug helps website developers to inspect HTML codes, and modify website styles and layouts in real-time. In addition, it enables users to analyze network usage and performance.

Page Speed is a web tool that evaluates a website’s performance and provides suggestions on improvement. This open source add-on program will give you a score out of 100 for your website’s loading speed. The higher the score, the faster the website will load. Along with the score, Page Speed will also list out some recommendations for improving the website (the descriptions beside the exclamation marks in the below image). Making the suggested changes will significantly improve the website’s loading time.

Page Speed can only be run under Firebug (please refer to the below image).