October 25, 2009

Google Map with tabs & no code

Google Maps are an excellent way to show information - especially case studies. And now, you can create a map that updates from a simple spreadsheet, without even needing to know about AJAX or Javascript.

Here's an example of some information I downloaded in spreadsheet format, and had published in a webpage half an hour later. The markers on this map are members of a certain political grouping, courtesy of a file published by WikiLeaks.

Here's how to do it:

1) Start a new spreadsheet in Google Docs (create a login, if you don't already have one)

2) Create 4 columns (the minimum):

- the first for the title of the marker
- the second for the address
- the third for the information to go in the first tab
- the fourth for the information in the second tab

(The heading you use for the columns of the 2 tabs will be the title of each tab)

Additional Tip: You can use the =Concatenate function to string together information of different cells, as well as include HTML, for example:

If E2's contents are "Uncle Hester" and F2's are "Dunroamin Cottage", you could make this all one sentence, wrapped in a <h2> heading by:

=concatenate('<h2>',E2,' ',F2,'</h2>')

Anything other than cell numbers needs surrounding with quotation marks - between E2 and F2 we want a space, hence the '[space]' in the calculation above

3) Now it's time to publish the data, so that a Google Map can read the data:

- click the "Share" button in the top right hand corner
- choose "publish as a web page"
- select "Automatically republish when changes are made"
- under "Get a link to the published data" choose "Atom"
- copy the numbers in the link that it gives you
(the important bits you'll need are in red in this example - http://spreadsheets.google.com/feeds/list/tAArQLUbx2_wKsxzOqyAAAA/od4/public/basic)

4) Geocode the addresses. If you haven't got the geocodes - Google have a Geocode Wizard that'll do it for you

Copy the Lat and Long data that the Geocode Wizard gives you into 2 new columns on your spreadsheet

5) Now - make the map... Again, Google have a Tabbed Map Wizard that does all the hard work for you. Put in the info of your spreadsheet as required, play with the options, and the Wizard will create the necessary code for you

6) Sign up for a Google Maps API key - put the following into the <head> of your web page:
<script src="http://maps.google.com/maps?file=api&v=2&key=YOUR-API-KEY-HERE" type="text/javascript"></script>

7) Change the opening <body> element to <body onLoad="load()" onUnload="GUnload()">

8) Copy the code from the wizard from the line with CDATA in it onwards, not including the final </script>

9) Paste into a blank .js file and save it - then link to this file, after your API key link in the <head> of your document

10) Copy the code from the top of the wizard, from <div style... down to the closing <div> tag 6 lines down, and paste the into the <body> of your document, where you want the map to appear

And you're done... Now, all you have to do is update the spreadsheet (including the Geocoding), and the webpage that you've created will automatically update

Labels: online-marketing, tutorial, web-design

October 18, 2009

Simple SEO Tips #3 - On Page Optimisation

This is a regular series of SEO tips that anyone can use to improve the ranking of their website. It's designed for those with a little time - and less money - to dedicate to getting more business through search engines.

#3 - On Page Optimisation

OK, if you've followed the series to date, that means you've:

- done your keyword research
- prioritised which keywords / phrases to target, and allocated them to pages on your website
- recorded the current <title>, <meta type='description'>, <h1> (and other headings) and text within general <p> HTML elements

So now it's time to make sure your HTML is structured & populated with keywords, in a way that clearly tells the search engines what your page is about. I'm assuming here that you know basic HTML (if you don't, it's easy to learn - start by looking here: http://www.w3.org/2002/03/tutorials.html#webdesign_htmlcss)

1) Look for the <title> element in the <head> section of your page. Change this to feature your main keyword / phrases.

Additional tip: place your keywords at the beginning of the <title>, and keep it succinct (under 65 characters, less if possible)

Good <title> = Widgets | Buy UK Widgets Online
Bad <title> = Homepage for OurCompanyName, we sell many varieties of popular Widgets here

2) Look for the <meta type="description" content="xxxxx'> element, again in the page <head>. Change this to a phrase (under 200 characters long), that would convince someone to click through to your site.

This is because the meta description doesn't influence your ranking - but it's what the search engines often show in their listings. So for the meta description, think "click through".

3) Within the <body> section of your page, look for the <h1> heading element. If you don't have one, add it in. If you have more than one, change all subsequent versions to another heading type (eg <h2> or <h3>)

Again, use the main keyword / phrase here, and keep it succinct.

Good <h1> = Buy UK Widgets Online here
Bad <h1> = Welcome to our website

4) Check through the rest of your page's headings & paragraph text, and work in your priority keyword / phrase, plus overalapping phrases, throughout the text.

Remember that your website's fundamental objective is to communicate with people, not search engines - don't make the copy sound clunky, repeat the keyword / phrase to often, or make it sound unnatural.

5) Make sure any links you have on your page, either to other pages on your site, or other websites, don't contain your main keyword / phrase. This effectively says to the search engines, "there's a better place on the web for this keyword", which is the opposite of what you're trying to achieve.

6) Have pages on your site link to other pages, using the keyword they are targeting.

Eg: Page 1 is targeting Widgets. Page 2 is targeting Blimps.

Have a link on Page 1, pointing to Page 2, with the text of the link containing "Blimps".
On Page 2, have a link to Page 1, using the word "Widgets" as the link text.

Do this for all the pages you have included in your Keyword Prioritisation & Allocation.

Next time, I'll go through the off-page things you can do, to improve your ranking in the search engines.

Labels: search-engine-optimisation, SEO-tips, tutorial

October 02, 2009

Simple SEO Tips #2 - Prioritisation & Allocation

This is a regular series of SEO tips that anyone can use to improve the ranking of their website. It's designed for those with a little time - and less money - to dedicate to getting more business through search engines.

#2 - Prioritisation & Allocation of keywords to pages

So, you've done your research and know what keywords & phrases are relevant to your business. You also have an idea of how competitive it is for each one. Now you can look at your own site, and decide which keywords you can target with which pages.

1) Open a new excel spreadsheet. Create a separate worksheet for each page on your site (if it's a large site, concentrate on the pages with the most PageRank), and name it accordingly.

2) For each page, look at the theme of the page & its content. Then go through your list of keywords that your targeting, pick out the ones that fit with the page theme and allocate them to your page. Have a list of Primary & Secondary priority keywords for each page, 2-3 Primary & 2-3 Secondary. If you're targeting longer phrases, just have 1 or 2 for each.

Additional Tip: Your homepage will almost always be the strongest on your site, in the search engines' eyes (use the PageRank toolbar - linked to in the previous post - to check). Use your Homepage to target the highest volume keywords & phrases - the most competitive ones - and other pages to target lower volume, less competed keywords.

You now have a spreadsheet with worksheets for each page in your site, with targeted keywords allocated to all your pages. Now you'll want to record "baseline information", from which you'll track ranking changes and page alterations - the cornerstone of any optimisation is testing and learning, so you can do more of what works (and make sure you don't repeat the less successful changes).

4) Go through each worksheet, making a dated record of your current rankings for keywords, and note which page ranks for it at the moment (if any)

5) Make a note of the key HTML elements on each page:

- the page's URL
- the page's <title>
- the page's <meta type="description">
- your main <h1> heading
- your page's copy (copy & paste the page's text into the spreadsheet), including any words or phrases that are in bold or italics
- the alternative text for each image
- the text that other pages use to link to this page (either in the navigation or copy)

You should now have a spreadsheet that looks something like this:

And now you'll be ready to start optimising your website - next time, I'll go through the simple on-page changes you should make to optimise your site.

Labels: search-engine-optimisation, SEO-tips, tutorial

September 18, 2009

Simple SEO Tips #1 - Targeting

This is going to be a regular series of SEO tips that anyone can use to improve the ranking of their website. It's designed for those with a little time - and less money - to dedicate to getting more business through search engines.

#1 - Targeting.

There's no point optimising your site, until you know what you want to optimise it for.

Spend an hour looking at the words people search for, in relation to your business:

1) Use Google's AdWords keyword tool at
https://adwords.google.com/select/KeywordToolExternal

2) Make sure you've selected "English, United Kingdom" and unchecked the "use synonyms" box. Choose the "descriptive keywords or phrases" option and in the box to the right, put in the obvious keywords for your business - eg for a solicitor, "solicitor", "solicitors", "solicitors in [location]"

3) Download each run into excel - both the related and suggested lists.

4) Look through the list, pick out additional keywords & phrases that strike you as relevant - and put them into the keyword box again, so that you're discovering more words related to your business. Again, download the resulting related & suggested lists of keywords.

Additional Tip: make sure you use location variants of your main keywords; single & plural variants; and action verb variants, eg "buy...", "find...", "sell..."

5) Keep going round until you're happy you've got a comprehensive range of keywords & phrases.

6) Copy & paste all your downloaded words into one excel sheet, and use the "de-dupe" funtion to remove duplicates:
http://office.microsoft.com/en-us/excel/HA010346261033.aspx

7) Sort the list by volume, and go down the list deleting the ones you think aren't relevant.

8) Go onto Google, and do a search for the terms you're left with - noting the PageRank of pages in the top 10 (this isn't the be-all of ranking, but it does give you an idea of what you're up against). Compare this with the PageRank of your own website (http://toolbar.google.com/ can show PageRank), and get an idea of where you can compete - for example, if you have a PageRank of 3, it's not worth targeting a search where the top 10 results are all PageRank 5+.

9) You're then left with a list, in order of search volume, of the keywords & phrases you've got the chance of ranking for..

Next time, I'll go through the simple optimisation steps that uses this targeting.

Labels: search-engine-optimisation, SEO-tips, tutorial

July 04, 2009

Using Twitter and jQuery to keep a website fresh

A website with fresh, relevant content helps visitors see a business is active & has expertise - and is therefore worth working with.

But creating new pages for your site - even blog posts - can be time consuming and costly (either in money or time spent).

In this quick tutorial, I'll show you how to use Twitter to keep your website fresh, with only a beginner's grasp of HTML and graphic design - and how to use a little bit of beginner's level jQuery to enhance the visual experience.

On this site, you'll probably have noticed we have a "thought bubble" coming out of the logo, which is updated regularly (usually every day). This bubble pulls in our latest Twitter post - we use Twitter to post short messages & links related to web design / SEO / online marketing.

Hey presto - fresh, relevant content for the site that can be posted from the office, or from a train, or even from a boring meeting...

I'll now walk you through the HTML to put in your web page; how we created the thought bubble; how to make the thought bubble resize to fit your post; and how we make it fade in.

Step 1 - the HTML:

Twitter have badges available for Blogger, MySpace etc. We use a (simplified) version of the Blogger one to pull in the Twitter post to display in the "thought bubble". First, put the following HTML wherever you want your Twitter update to appear:

<div id="twitter_div">
<ul id="twitter_update_list">
</ul>
</div>

Then, put the following javascript just before the closing </body> tag:

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/TWITTER USER NAME.json?callback=twitterCallback2&count=1"></script>

Just make sure you put your Twitter username in the second .js script, where it says, er, TWITTER USER NAME.

(The javascript needs to go at the end, so that the rest of your page can load first - Twitter can be slow to respond, you don't want that to harm your visitor's experience).

2. Create the "thought bubble" (or whatever background you want)

We used Fireworks to create the thought bubble, and the sizes here allow it to fit into the "visual grid" for our site - yours can be different, of course.

- Draw out a rectangle 230px by 100px, with a 1px outline. Set rectangle roundness to 20. Select "Linear" gradient, going from white to the colour of your choice (I use some opacity variants, too)

- Draw out three or four circle, holding down 'shift' to keep them round, using the same Linear gradient as the box, and position them to the top left to create the "thought bubble" effect.

- Adjust the gradient so that the effect finishes just above the line of the lowest of your circles

- Crop and save the thought bubble twice - once from the top to just below the lowest circle, saving it as twitterBgTop, once from the bottom to just below the first circle, saving it as twitterBgBottom - to the relevant images folder on your site

3. Use CSS to style

Here, I'll explain how we've used CSS to make sure the bubble adjusts in size to fit your Tweets (as we know Twitter is at most 140 characters, we created the 'bubble' so that it's bigger than even the largest Tweet - we'll use CSS to make sure it resizes)

- For the wrapper div, set the 'global' styles like text size / colour and the positioning of the bubble (here we use absolute positioning for precision positioning on the page, and give it a high z-index to appear above the 'contact' collapsible panel)
- Set the twitterBgBottom image as background, positioning it to the bottom with no-repeat

#twitter_div {
background-image: url(http://www.willsonwebdesign.co.uk/images/twitterBgBottom.png);
background-repeat: no-repeat;
background-position: center bottom;
font-size: 10px;
color: #8494B6;
line-height: 1.4em;
text-align: justify;
width: 270px;
position: absolute;
top: -14px;
left: 430px;
z-index: 20;
}

- Style the UL which contains the posts so that there's no bulleting, and give it padding to sit the text within the bubble: here it's 50px left padding because the side of the bubble is 40px in from the left of the parent #twitter_div, which along with the 10px right padding gives 10px 'padding' within the bubble.
- Set the twitterBgTop image as background, positioning it to the top with no-repeat

#twitter_div ul {
list-style-type: none;
background-image: url(http://www.willsonwebdesign.co.uk/images/twitterBgTop.png);
background-repeat: no-repeat;
background-position: center top;
padding-left: 50px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
margin: 0px;
}

- Style how links that are posted will appear to fit with your site's link scheme (it will inherit, so if you have global link styles, you don't need to do this)
- By setting 'display' to 'block', this ensures the "updated xx hours ago" appears on a separate line

#twitter_div a:link, #twitter_div a:visited {
color: #DF7889;
text-decoration: none;
display: block;
}
#twitter_div a:hover, #twitter_div a:active {
text-decoration: underline;
}

And you're done. The only issue remaining is that, whilst waiting for Twitter to answer the call, it can look a little ugly:

But there's a very simple way of solving this - jQuery.

4. Using jQuery to improve the visual experience

We're already using jQuery on this site to provide the "lightbox" effect for showing case study work. So, let's make the most of jQuery by using it to fade in the 'thought bubble' once it's loaded and ready to show.

First, set the #twitter_div CSS "display" property to "none".

Next, load in the jQuery library. You can either host it yourself (download it from http://jquery.com/), or call it from Google (the way I do it on this site), and link to it from the document <head>:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Then, put the following jQuery function in the <head> of your page. Make sure it comes after the link to the jQuery library.

<script type="text/javascript">

$(document).ready(function () {
$('#twitter_div').fadeIn(3000);
});

</script>

(You can also put it in a separate .js file, and link to it from the <head> of your page.)

What is this doing? When the document it ready, jQuery executes the "fadeIn" function on #twitter_div, which as part of its function resets the CSS property "display" to "block". You can alter the speed of fadeIn by changing the number, as 3000 represents milliseconds, so for example a quicker fadeIn of 1 second would read

$('#twitter_div').fadeIn(1000);

This isn't an accessibility issue - we're calling the Twitter post with Javascript anyway, so having #twitter_div set to display:none by default isn't denying content to any of our users with their browser's Javascript disabled.

So there we have it - an easy way to keep a website fresh and show visitors your expertise, or personality, or even both...!

Labels: tutorial, web-design

June 12, 2009

Using Blogger as FTP for your own site

-- UPDATE 2/2/2010 --

Google has announced that they're stopping the FTP option for Blogger. See this post on Google stopping FTP for more details

-- END OF UPDATE --

Google has made Blogger much harder to use for publishing a blog to your own, existing website - but only by 'hiding' the options you need. Here, I'll show you how to set up Blogger to publish via FTP to your own site.

(Why have Google changed things? Probably because they're now pushing the 'register your own domain with us' option, to make some more money, but that's only supposition)

Blogger doesn't have the reputation of the likes of WordPress, which is much more customisable and now with myriad, and high quality, free templates on which to base your whole site, rather than just a simple blog page.

But that's where Blogger still fits in - if you've already got a website and want to integrate a blog, but don't want to pay someone to rebuild the whole site, Blogger's the quickest and simplest way of doing it.

Blogger runs on even the simplest of hosting, and writing posts is easy, if a little dull, using the post editor. You can get a web designer to set up a blog that fits into your own, existing site in a couple of hours at most, giving you a blog that's exactly the same in format as the rest of your site (because you aren't tied to Blogger templates, you can simply use the code from your own site as a template).

Anyway, here's what to do (this assumes you've already got your domain name and hosting package bought, and just want to use Blogger to publish to that site):

1) Sign in to Blogger using your Google account (create one if you need).

2) Choose 'create a blog', and fill in the 'blog title' and 'blog URL' with whatever you like (it doesn't matter with what - the title can be changed later, and the URL won't be used)

3) Choose any template, and click continue - it'll tell you 'your blog has been created', so click 'start blogging'.

4) Go to the 'Settings' tab, and chose 'Publish', where you'll see that the 'FTP' option is no longer visible. But don't panic - click where it says 'use a Classic Template'.

5) This takes you to the template screen - scroll to the bottom, and click 'Revert to Classic Template' (you might get a dialogue box - don't worry, it's OK to say yes)