James' Blog

Sponsored Links

Definition

“A keyword advertising system in which ads appear as “sponsored links” on the Google results pages as well as the results pages of Google’s partners, such as AOL and Ask.com. The advertiser chooses keywords and a short one- or two-line text ad, which is displayed on the results pages when the ad keywords match up with the search keywords”

PCMag.com

The Beginnings and the History, Google,

1998 – Google was born, originally named as “Backrub” Google was created by two students from Stanford University, Larry Page and Sergey Brin.

2000 – Google introduces AdWords, keeping in the trend of others like ASK by listing them in the right hand side under the banner of “Sponsored Links”

2008 – Google started to factor in the loading times of the main landing pages of those ads/links that appeared in the searches. The over all quality score of the ad/link also influenced the position of the ads/links on the Google pages in addition to the calculation of the keywords minimum bid.

2010 – Google Renames the “Sponsored Links” to “Ads” it is rumored that this change from Sponsored to Ad’s increased the CTR (click through rates) by approximately 11.4 % – http://goo.gl/7gg8j Monday, November 15th, 2010 by Alec Green

2010 – Google’s total revenue from AdWords was rumored to be in the region of 28 Billion US Dollars (“Financial Tables”. Google Investor Relations. Retrieved 2008-01-31.

How It Works

Google’s search engine works on the criteria that the user query’s it with, these search criteria will generate what Google call “MOMMENTS OF RELEVENCE”

http://www.google.com/about/company/

The Google Adwords service allows webmasters to search for keywords that will enable the products, services or sites to appear in the sponsored links/ads sections. Google provide a simple web based program that will help and enable webmasters to find keywords or phrases with very little difficulty in order to find the keywords that will increase the sites exposure.

Considering the keyword choice is a factor that can improve the quality scoring of a site, which in turn can reduce the costs of the adverts.

The Auction.

Google uses a system to display Sponsored Links/Ads, this operates similarly to an auction, the sponsored links that are due to be served up to the user searching, are entered in to a bidding process where a number of factors are taken in to consideration, the primary one is based up what known as a quality score.  Some of the criteria that affect the quality score are, The relevance of the advertisement to the search criteria, i.e. Hats on a search for Cakes shaped like hats, The relevance of the keywords to the Sponsored Link/Ad, the relevance to the landing page to its Sponsored Link/Ad, historical Pay Per Click (PPC) Click Through Rate (CTR) of the Sponsored Link/Ad.

Figure 1. Google Auction cycle, http://goo.gl/e0jxm

The Costs of Poor Keywords in Quality Scores.

The cost to company’s that use a poor keyword strategy is that they could find that the quality score that they receive is very poor. An example of poor keyword selection would be along the lines of the following, A Cake shop that wants to sell cakes used the keyword “Cakes” isn’t going to do very well, however if the webmaster was to use “Popping Candy Christening Cakes” this would. If this Sponsored link/Ad was to appear in the top of the page the person is more likely to click on this as it is more specific to their search and because of this it could convert to a purchase.

Google Recommendations

1. Use keywords 2-3 words long, – try not to be too specific,
2. Use negative keywords, – don’t include the ad if some one was to include the word cheep
3. Use the Keyword tool – the free tool provided by Google.

What’s the Cost?

How much will it cost, who gets paid! It is important for the Webmaster to understand the costs per click (CPC) made on any sponsored link/ad that is displayed and clicked on as this is what is going to cost the owner of the site actual cash. The Owner of the site is able to set the levels in what they are prepared to pay for every click through that is made, this can be set through the Google Adwords account that the webmaster and owner has access to.

The CPC option available allows the Webmaster to enter a “Maximum CPC bid” this is representative of the highest amount that will ever be paid for a click through made.

Google’s Helping Hand

The associated cost implications for the PPC (Pay Per Click) can be a deterrent to some small business, however Google are very helpful and offer to people/companies the sign up a £60.00 credit in their account to try the system out.

The Final Result

Once the auctions have been won

Organic Links Vs. Sponsored Links

What are Organic Links? Why use Sponsored Links over Organic? The previous questions are what most people new to optimizing their web performance results ask.

The organic listings are based around the content and use of keywords related and contained within the content, the uniqueness of the content, the frequency of update’s made to the information on the site, the number of inward bound links to the site.

Obviously this takes time for a new site to achieve and therefore move up the listing on a search engine, especially Google. Over time, yes this is very important top achieve but for a new site it is harder, especially when establishing the inward bound links between sites.

The cost of the organic listings are low as this is more about time invested rather than actual pounds shillings and pence, whereas sponsored listing are

Yahoo Sponsored Links

Yahoo like Google offers the facility of having a sponsored link. Yahoo operate a very similar system of displaying the ads/links to the visiting/searching user but with one difference, Yahoo use three areas of displaying sponsored links and ads this is spaced above the organic listings (similar to Google) to the right of the organic listings (again similar to Google), but however Yahoo unlike Google place sponsored links and ads at the bottom of the organically listed results. This increases the opportunity for the company’s that have used the service to be displayed on the results pages. However this could lead to a negative result as this will mean that there is more competition on the sponsored results and organic results. This would also mean that the webmaster on implementing this service would need to carefully select “Killer Key Words” to enable the pages to be listed often to give a more substantial chance of receiving a click through.

Yahoo’s steps for creating a sponsored link is as follows, (as recommended in the instructional video supplied by yahoo)

1. Selection of “Highly Relevant Key Words” to the site.
2. Creation of the ad which consists of a Title, Description (this is a short description that best matches the company’s products and services) and finally the URL (Uniform Resource Locator)
3. Set the price for the ad, this is the PPC amount, which is the maximum that the Webmaster is prepared to pay.

As with Google, Yahoo do not charge the owners of the sponsored ads if they are displayed on the results pages of some one searching for a particular item, they only get charged if the user clicks on the ad.

Not Just Yahoo!

The service supplied by Yahoo doesn’t just relate to Yahoo! Yahoo are in partnership with Bing and other search engine, this enables the Webmaster and the client the ability to cover a number of popular search engines and services that are used.

How It Works

As mentioned before the Yahoo system uses ad’s that comprise of, Title, Description and Url, and these are served to the person searching based on the keywords used in their search. However the ad that is served can change from time to time as the web master can create “ad groups” the Webmaster can create upto 20 unique ads that meet the guidelines, these ads will then be rotated for the keywords that related to that ad group. One option available to the Webmaster is that the most successful ad from the group be displayed more oftern. Another option availble is that the bidded keyword that featured in the users search criteria be dynamically insterted in to the ad that is dispayed, in its title and or description.

Not as Clear as It Seems

Yahoo’s pages relating to the sponsord links are not very intelegable for any prospective Webmaster or client, this could be inpart due to the colaboration between Microsoft and Yahoo and the links between the systems. After doing some searching it appears that you have to sign up through Microsoft, once registered the screen below is presented to the Webmaster.

This is very similar to that of the Google dashboard allowing the user to create their own campaigns and use tools to search and test keyword popularity.

And again, as with Google, Yahoo allow the Webmaster to set their own budget requirements for each ad and campaign.

Evaluation

To evaluate the Sponsored link/Ad topic, these systems will enable the client/organization to market themselves and their company through the strategic selection of keywords relating to their product and services and connecting these to created ads and sponsored links that will be positioned on search engine results pages.

Though this system small and new business’s can improve their corporate presence on  the internet and increase their market brands to new and potential customers and suppliers.

There are many systems available, such as Google Adwords and Yahoo’s Sponsored Search, both offering similar schemes but with some differences. It would be suggested that to raise an organizations image and brand that the Webmaster would use both these systems as this would cover a extremely wide range of individuals that use these search engines, as they are in the top 5 of those used.

I think i actually love this site its full of quality ideas and how too’s!!

http://www.webdesignshock.com/

i have been playing around on the internet looking for a chat system like the one that we use on the forums, and i found a few interesting ones that are easy to impliment and others that were absolute pains in the ass!! i started off with the Comet Chat, and i have to say this is my most favored of those that i played with but because of the costs i thought id carry on the search for the freebies!! and i found AJAX IM, which was very interesting as one of the installation requirements was “Node.JS@ which popped up in our day of informative chats,  specificaly the mozilla talk on the APIs that HTML 5 has and is able to impliment and use. i did struggle with this so i have put a pin in this to revist later.

I then found my way on to www.plugChat.in the simple inclusion of three lines of markup and a little styling and some JQuery i could have the ability to search my pages from the home page and amend the chat window theme, so i went for this option.

All this investigation is semi relevant to an idea that i would like to possibly use as my thesis project next year or as a site for impimentation at work to help my students  on thier course.

The idea is to create a site that my students can upload there web pages to in order to meet the assisment criteria that they have on a BTEC but also to market their abilitys.

And this idea gave birth to

WWW.MyStudentSite.co.uk

I have finally managed to impliment the google adsence on to the site!!! I found that i was getting issues regarding “Language” so if you get this you may need to create another google account and register your page from another site that you have done, this worked for me. it is striange because your account gets locked if you have something that google doesnt like.

Web Design through the weeks

I wanted to create an personal reflective review to the unit now we are at the end it and look at the bits and bobs that I learned along the way.

We were first presented with the understanding about design and how we use a tiered structure in order to separate the 3 elements in to their own sections. These 3 areas are,

The Structural layer= the markup (HTML)

The Presentation Layer = Styling (Cascading Style Sheet)

The Behavioural Layer = Actions (JQuery, Java)

Our goal was to separate the structural layer from blending in to the presentation layer.

We then went on to understanding the “Semantic Web”

Semantic Web=”Using Markup to add meaning to content”

We also then reviewed the naming conventions and why we might use these, this was very interesting as I have been using unconventional naming previously.

The way in which Google catalogs the files in which we upload to our host, Google would catalog the following  file (“green_ford_fiesta.jpg”) as only one name “green_ford_fiesta”.

Where as the use of hyphens (“green-ford-fiesta.jpg) instead of the underscores google would catalog the following as “green”,”ford”,”fiesta””green ford fiesta”,”green ford”,”ford fiesta”.

Moving on to the Presentation Layer

<ul> can as a container – think do I need a <div>?

a <ul> class.name will focus on all elements in the container and will allow a minimal css entry.

We then looked at the clear:both option in CSS we found that the way a ul list is layed out if a float left/right selection is not cleared would stager the lists items incorrectly.

By doing a clear:both the markup will look to insert the object be it text/image into a clear area.

We then looked at the use of an alternative style sheet, when using an alternative style sheet you if you don’t want the page to inherit the styles for the other style  sheet if switching between them it needs to be set to none.

Moving on to Images and Colour’s.

We reviewed the 4 most commonly used web format images.

JPEG 24 Bit True Colour

GIF 8 Bit 256 colour (Index Colour Pallet)

PNG 8 Bit 256 colour (Index Colour Pallet)

PNG 24 Bit True Colour

We were then shown an image of an apple that wasn’t sharp and the colour were slightly out from the original.

Dithering is when a 256 colour pallet DOESN’T have enough Colour to put another colour in so it puts another colour in from the pallet it has.

PNG (24) = not lossy

JPEG = lossy

JPEG compression can leave artifacts

Wherever possible be semantic, however at times this isn’t right, i.e. 20 images on a gallery example we need to be “pragmatic”

We were then shown the spite position change, this used 1 image that had 2 images in it, but with a clever bit of CSS the position of an image can allow it to be positioned so the other part of the image is viewable.

Typography

When choosing a font you need to think about the user that doesn’t have your font style installed, so an option could be to use a web based font. Google fonts are useful as the font is stored online and the use will pull the font down from google.

Other services available are Font Squirrel this is a free service.

A serif font is difficult to render as the screen resolution. Smaller text will struggle to show the serifs on the font. Serif fonts are used as headings as the serifs will show up.

We looked at the “x” height which looks at the height of the lower case x in any font.

We then looked at the “counter” which is the space inside the letters.

What units do I use?

PX or Pixels = Absolute

Em’s & Percentage = Relative

Page Layouts

12 column grid systems using 960 px

a good method is to set layout using the DIV’s and then rationalize the code and remove where possible.

Improvements Made on the Biscuit Project.

During the critical review process of all the designers in my group I found my self constantly saying “that’s a good idea, and so simple” and at times some interesting feedback was given that made me think, hum I did that.

When it came to critically reviewing my project I was give the following bits of advice and suggestions.

Typography – It was suggested that the fonts that were selected weren’t as sympathetic to the design of the overall page.

Navigation colour’s – The original colour of the navigation was mustard yellow, with a darker colour for the hover over.

I decided to remove this navigation and implement another, as the original one appeared “blocky”, so when looking for ideas for navigation I stumbled across a simple hover over tabbed that allowed the user to see that they are hovered over a button. The colour scheme that I decided to use on the navigation and footer bar was intended to be sympathetic to the colour on the tablecloth on the background of the site.

Search results below the fold

Personal Improvements

I would like to implement a recipe of the month on the home page, this would be linked in to a PHP date check that would generate a SQL query on the works Christmas, Easter, Anzac Day and Halloween amongst many others.

A small amount of shadow on the navigation bar giving each tab more definition.

Implement a stylish search bar on the banner of the site.

Create an admin page that will enable the owner of the site to add, update and remove recipes that contributors have added to the site.

Alternative stylesheet, I would like to enable the user to select a style of layout that they would want the look like, the designs would be contemporary decorative fancy elegant fonts and the alternative would be a classic table cloth kitchen recipe book style.

I would like to include a twitter tab with a live feed on the site in the right hand corner. Giving all users the ability to join the community that the site is all about.

Reviews on Fonts and the sites that use them.

Nestlé

The font used on the Nestle Website gives the impression like the chocolate of quality, the heading tags continue to use the joined calligraphy style with the main content using a heavy gold capitalized only font.

I like the main content font this is easy to read and grabs your attention

Harrods

The Harrods site continues my investigation in to sites with good typography. I have navigated through this site and feel that the fonts used are well suited to the regality of the brand name. The font used for the navigation bar is very strong and clear. The spacing between each of the capital letters and the font used gives each navigation option a presence on the page.

The use of the Serif font on the center caption again brings an element of class a quality to the site.

Gardeners World

The choice of fonts used in the Gardeners World site is bold and shapely. The site uses a san-serif font that is almost bubbly on the navigation area and for the titles of the individual sections the font used give the feel an authentic garden project book that is asking to be read.

Poor Design

UBI Soft

During my search for some Christmas presents I navigated my way on to the UBI Soft website to look at some reviews of the games that are coming out. When in go on to this site I instantly decided that id be using this site as a example of poor font selection.

The text is very much bunched together and the biggest issue I had was that it was extremely small, the advertising is the most eye catching thing and only after a lot of scanning around the site you get to the information that you want and then its hard to read because its small.

The page to the user that it they have navigated on to the Game Listings as this is big and almost imposing on the page. In my opinion this is too large.

KFC

On my search for examples of poor use of Fonts I must have been a little pekish as I started looking through fast food sites and came across the KFC site. When I started looking through the site I found that there were areas of text that had a dimond with a question mark on it, clearly the font that was intended for me the visitor wasn’t supporting certain characters. I did start off liking the font usage on this site initially but because of the unfortunate missing characters I had to move it in to my poor example.

Nando’s

I was upset when I thought about using Nandos in this homework, as I expected big things from their site, but I was left disappointed.  This site is very gimmicky one, but on visiting it there is no clear indication of it being the home page of the Nando’s chain as the isn’t any corporate branding, but when it comes to the text and fonts used in the site I was given a similar problem as the UBI soft site, the text is very small, but, this site is using a handwritten font which combined with the small size of the text led to me squinting just to make out what it actually says. On the design side of things the navigation also uses clickable images that are NOT obvious.

Assignment Two – Website Redevelopment.

For this assignment I was asked to select a site in which to suggest improvements with the eventual goal of redesigning. The site that I choose was  www.Biscuit-Recipe.co.uk

I then went to work on evaluating this site, my aim was to look for both good and bad points on the site. Bellow are my findings,

Upon Navigating my way on to the site my initial impression was that I had found my way on to the biscuit index page and not the homepage.

The Navigation bar appears to have padding between its links, my initial feeling on this was that this was the design but looking closer it appeared that they images used had a gradient on them and that the bar was actually intended to be a complete bar. After I review the navigation bar I looked at its links, the bar was made up from a number of links.

When clicking through the navigation links I found that the tips footer was different to the index version and that the blog theme was completely different to the site leading to a feel of navigating away from the site.

On moving down the page I noticed a rather random placement of the RSS Button.

Once in the main area of content I found that the main content was contained within a table and that the advert on the left hand side was as big as main content.

When I eventually reached the footer of the site the copyright showing as 2008 gives an impression that the page hasn’t been updated since 2008.

When clicking through the navigation links in the footer I found that the Legal, Privacy and About link were a broken links to ASP pages, which were not available, however the html were actually available.

I at times found that I had navigated from a working page on to a 404 page and once I realized that I was on this page I used the back button to get back on to the site, the 404 page used the standard browser 404, novice visitors may not understand and think that the site is broken.

I then went about navigating through the pages for all the recipes,  means any change to the footer would require changing all 65 pages

My suggested improvements.

Using PHP to allow fast and effective updates on navigation and on the footer.

Use a MYSQL database to log all recipes

Create a “Become a member section” – this will allow member contributions to the site, even giving credit.

Change the Theme of the site to a more kitchen, cooking feel.

Add a scroller of biscuits to capture the visitors attention.

Add a speech mark quotation from the founder of the Site.

Simplify the menu reducing the initial options.

Add an accordion for the recipes, as there could be multiples from the search results.

Fonts, fun and formal – quotations and recipes in a hand written style and formal for the recipes- this will allow for clear reading.

Add a PHP script to update the date, giving the impression of annually updating the site.

Add a quick search to the site from all pages to display a recipe.

Create an advanced search facility to enable the used to search by country, difficulty.

Look in to Trade doubler as another way other than Google to generate revenue.

Alternative styles sheets to give a “Traditional Theme” and a “Contemporary” .

Font Suggestions are Astigmatic – Just another hand.

Create a Recipe of the month – Add a PHP script to this to do a date check and then deliver Christmas, Easter or relevant recipe.

Customized 404 page as a way to ensure to keep people on site even if they fall of the live pages or navigate to a dead/ non existing page.

Addition of Google tracking to monitor unique visitors and other data related to the site.

What a difference a week makes!

The phrase “you cant see the wood for the trees” comes to mind. Durring last weeks website review i found myself thinking, thats a great idea, and so simple and effective, everyone in the group had clippets that i would like to intergrate in to my project, so, here we are a week on and the improvements i have made from my last presentation are.

The Big Apple

Change the orginal apple image as it was not fresh looking and was too big. To extend the image to fill the white space below the navigation(this was done but upon doing this it looked like an element was missing so i removed this space alltogether).

First Capital Letter

It was the intention from the outset to include the first letter in the styling and make it bigger than the paragraph text, however this wasnt ready at the previous review, but it is now. This was also played around with in the creation and implementation of the site, originally i was going to use the Quatril google font but decided that i would go with the Ubuntu Condensed google font for the headings.

TwitBook

This is one of my biggest things i took out of the reviews, the inclussion of social media in and on the site(Facebook and Twitter). Once i thought about this i decided to try and keep the site colour theme running through these logo’s. i achieved this and this can be seen through the site.

Picture Perfect

When demonstrating the site in the review i noticed the fact that the images were loading slowly, part of the problem being the upload speed from my server, but also the size of the images themselves, i hadnt adjusted the images to the size that id stated in the markup. I have now altered these and now the load time is and has been improved.

Validation, Validation, Validation

Now that i feel that the site is at a place where it is presentable to my “client” i put the pages through the W3C validator, i was happy that the pages only had at most 8 errors. The errors that i encountered were simple, rangeing from improper nesting on an element, which impacted on the elements contained, to more advanced and still present Google map iframe errors. I have all pages now validated apart from the location page which is due to the google map.

My CSS document is showing as having 4 errors which are due to the implementation of transparncy set on the navigation ul elements, however there is the optional CSS page available which meets the CSS Compliance. When Validating review the www.jamesfarrington.co.uk/smiths/css/main.css & www.jamesfarrington.co.uk/smiths/css/optional.css

See for yourself

Anyway the site is up and now, have a look and tell me your thoughts.

www.jamesfarrington.co.uk/smiths/index.html