Category Archives: Blog

Find your Latitude and Longitude

While I was experimenting with Yahoo Pipes for the Flickr photo display mashup I made the other day I found another mashup which could potentially be very useful.

It is simply called “Find Latitude and Longitude” and does pretty much exactly what it says.

You are shown a big map which is pulled from Google Maps and you can subsequently navigate the map just like on Google Maps. The latitude and longitude of your cursor is shown below the map, and if you click on a location, that latitude and longitude is stored below the map along with the address until you click on another location.

The interface for locating a latitude and longitude on http://www.findlatitudeandlongitude.com/
The interface for locating a latitude and longitude on http://www.findlatitudeandlongitude.com/

This makes it very quick and easy to find the latitude you are looking for. Unfortunately, it doesn’t have an address search option, but if you know where it is and how to use Google Maps, you can quickly navigate to the locatino you are after and grab the latitude and longitude for it.

Uses

This is something that has a lot of potential use for in web site development for determining geocodes for the geolocation tags of a web site. An option, such as a copy to clipboard button that copies the longitude and latitude in a single string could be a nice extra feature for this purpose that isn’t currently available.

Obvious other uses are mashups such as the Flickr mashup I mentioned earlier which I used the latitude and longitude for.

Aside from that I’m not sure that there are a significant number of other uses, aside from just general curiousity or needing to know the latitude and longitude of places for planning say a hiking expedition.

Final comments

The interface is very simple but effective, the design could perhaps be spruced up a bit to make it a nicer site, but I don’t think it’s really necessary.

I think adding the extra clipboard functionality would make this tool tremendously more valuable than it already is, and it isn’t something that would take that much more to add I don’t think, after all the information is already being printed, it’s just a matter of some JavaScript on a button to store it in the clipboard, ready to be pasted.

What do you think? What else could you or do you use it for?

Triplify – Search Google, Yahoo and Bing all at once!

The Triplify search box
The Triplify search box

Triplify is a mashup that is highly useful to me as a web site designer, especially when looking at search engine optimisation.

What does it do?

Triplify is a search engine front end that takes your search query and then passes it on to Google, Yahoo and Bing. Those 3 search engines return the search results to Triplify, and it collates and displays them to the user.

By default it sorts the results based on their position in the results of each search engine which is great for quickly seeing where a web site is ranked in each search engine without having to go hunt through them all separately. If you aren’t in the first 16 results though then you are out of luck as Triplify does not currently appear to have paged results available and so only 16 results for each search engine are given. So what you get is something like this:

The first 6 results in a Triplify search for "brisbane web designer"
The first 6 results in a Triplify search for "brisbane web designer"

What do the colours mean?

Google is shown in blue, Yahoo in Red and Bing in that yellow/green colour. I’m not sure that these are the best colours as they don’t really symbolise those search engines. I was thinking while I was using it that the colours aren’t the best choices, in my opinion, Yahoo should be yellow and Bing should be blue and Google red. I’m not entirely sure why though, after all, the Yahoo logo is Red and Google uses blues as well as reds. Blue seems to better suit Bing, after all, blue is very much a Microsoft and Live colour, and Bing is related to both of them. The others I’m really not 100% sure about though. I associate yellow with Yahoo, and I’ve been trying to figure out why for a while now. I think it’s because of the smileys that used to be on their home page in that strong yellow colour that were part of the Yahoo Instant Messenger branding. I used to use YIM quite regularly, so that may be it. Upon thinking about it further, the colour choices are good, they are just not the colours that I associate with each of those search engines.

What else can it do?

If you only want to show the results from two of the search engines, or even only one, just uncheck the boxes below the search box of the ones you don’t want and voila, they are gone! Need them back? Just check the box again and they will reappear.

If you want to sort the results by search engine, or any of the other column headings (though search engine seems to be the only other particularly useful one to me), just click the column heading, for example, click “Title” and the search results will be shuffled into alphabetical order. Click “Engine” and the results will be grouped by search engine.

There is also a handy “Add Triplify to your browser” link at the top of the page which, if your browser supports this feature, will add Triplify as a search option to your browsers search box.

Quirks and nuisances

Unfortunately at the moment, there doesn’t seem to be any way to sort in descending order rather than ascending, this isn’t a big thing, but it would be nice!

The main issue I have is that the sorting is affected by whichever sort you used previously. This can be a handy feature, but it can result in unexpected behaviour. For example, if you are viewing with a position sort, then you sort by search engine. The results will be shown in order of their search engine ranking. Now sort by title, then sort by search engine again. They are now sorted by search engine, but in alphabetical order instead.

Perhaps some explanation of how this works would make it clearer to understand to the new user, it took me playing with it for about half an hour before I realised that it sorted by both the current and previous sort option. My initial assumption was that it should sort Title, Description and URL alphabetically, then search engine should show pages in their ranked order, not in Title, Description or URL order. I do admit, it is useful, but unexpected.

In hindsight, the motto “Search, compare and sort!” does actual indicate that you should be able to do some sort of advanced sorting such as what is available, and if you go to the about page it does explain how the search sorting works, but the about page is hidden in tiny text down the bottom of the page and isn’t exactly the first thing you think of when trying to figure out how to use it. Maybe a more prominent link at the top of the page, such as “Help” on the right hand side underneath the existing tools navigation box that is there.

Final thoughts

I think Triplify is something that is going to play a very important part in my future search engine optimisation efforts. I don’t see any particular appeal in it from a general search point of view because the search results are not as easy to understand as they are in any of the search engine interfaces, but it will save a lot of time determining if a web site is ranked in the top 16 results or not and checking on it’s progress.

It is only in beta, so no doubt the things that are unclear may be cleared up once a 1.0 version is released.

Have you found an interesting use for Triplify? Share it in the comments!

How to create a Flickr photo feed through Yahoo Pipes

I have been experimenting with mashups, in particular utilising Yahoo Pipes as part of my studies at university at the moment, and one of our initial exercises is to create a mashup that takes 30 images from Flickr that are related to “QUT Kelvin Grove”.

The most logical way to do this to me seemed to be to simply use the Flickr module in Yahoo Pipes.

This was really straight forward, it’s basically just a matter of:

  1. Drag the “Flickr” module onto the screen from under the “Sources” tab on the left.
  2. Enter the number of images you want in the “Find” box.
  3. Enter a search query in the “images of” box.
  4. Enter a location in the “near” box.
  5. Join the pipe output from the bottom of the Flickr module to the pipe input in the top of the Pipe Output module.
  6. Save your pipe.
  7. Run your pipe.

You should have something in the pipe editor that looks like this:

The Flickr Module in Yahoo Pipes being used to output 30 images of QUT Kelvin Grove.
The Flickr Module in Yahoo Pipes being used to output 30 images of QUT Kelvin Grove.

I have entered the name of the location “Kelvin Grove, Brisbane” in the “near” box, but you can also enter a latitude and longitude, for example 1532727 will put you in basically the same area as what I used. However, just the suburb name “Kelvin Grove” did not return anything, so you do need to be fairly clear about where it is.

You can check it out at the Pipe page, or you can see the end result here:

Experimenting with Landing Pages

At TerraMedia, I am currently working on an interesting project. That is, I am working on pushing the website up in search results for a number of different regions.

One of the ones I am working on at the moment is users searching forĀ  web site design and related services in the Byron Bay region. If you do a quick search in Google for “web design Byron Bay” or “Byron Bay web design” or similar, TerraMedia cannot be found on the first page of results. The home page of TerraMedia is visible on the second page in the case of both those queries, but we would like it high up on the first.

There are a couple of places to start here, the first is to update the home page to more specifically target Byron Bay, or, to create a landing page which is optimised for Byron Bay searches. We don’t really want to adjust the home page too extensively as it is currently placed quite well for a number of other regions, so we decided to begin with landing pages, starting with Byron Bay.

To start off with, I have setup a new page on the TerraMedia web site that has all of the keywords we are looking for in both the page title and the page address. The page that I have set up is located at http://terramedia.com.au/web-site-design-services-byron-bay and uses some new copy that is based on copy used in other sections of the website combined with some newly written information to help target potential Byron Bay clients.

A sub-domain or domain that is specifically relevant to these terms may be easier to rank higher, but at the same time, they would lose the benefit of being on the terramedia.com.au domain and could confuse the user in the case of a completely different domain name. Wouldn’t you be confused if you went from say “websitedesignservicesinbyronbay.com” to “terramedia.com.au”? That domain is an exaggerated example and is much too long, but I’m sure you can see how it could get confusing.

Now that the page is created I will be developing links to it and marketing it through our Facebook page and Twitter account.I want to get twitter followers for our page to see how it goes. The aim is then to push this page up in search results specifically regarding web site design in the Byron Bay region.

Search Engine Optimisation for a WordPress Client

TerraMedia has recently been contracted to work on fixing up a WordPress website, specifically looking at improving usability and search engine optimisation.

There are a few key things that I will be doing on their website as part of this job.

The first thing I have done is to implement Google Analytics tracking code so that we can begin to get an idea of how people are finding the website. This will track visits while I am working on other sections of the website so that we can get a few weeks worth of results without having to wait idly for them.

There have been reported issues of the navigation not functioning correctly in all browsers, particularly Internet Explorer. As the navigation is vital to accessing website content, it is important to get this working correctly as soon as possible.

Next up I will be updating and modifying the template to help meet both of the criteria by ensuring the markup makes semantic sense, including adding in hierarchical header tags to each page. At the moment, while these are used, each page lacks its own heading, meaning that it is harder for search engines to determine the relevance of individual pages and their content, and users cannot easily see what each page is about.

Once I’ve got the code cleaned up so that is more search engine friendly and the front end more usable, we will start focusing more heavily on getting more traffic to the website from both search engines and other sources, more customers is the primary goal after all!

I will be installing a WordPress plugin called the All In One SEO Pack, which will allow us to specify page titles and meta tags for each page and blog post individually, allowing the keywords and descriptions to be optimised for each page. It also gives better control over the overall meta tags, and tags for archives, categories and so on.

They currently do not have any introductory text on their home page, this means that the root page of their domain name (arguably one of the most important pages of a website from a search perspective) doesn’t really tell search engines anything. It has photos, events, a logo and the navigation. So what we will be doing here is writing up a paragraph or two of highly optimised copy. By this point we should have about a months worth of results from Google Analytics so once this is implemented we will be able to clearly see the difference this text will make and subsequently tweak it as necessary.

To keep the home page fresh and keep the search engines checking it regularly, we will also be having the latest blog post displayed on the home page. As part of this, the client will also begin using WordPress’s blogging functionality to keep the website up to date with the latest news and special offers. They currently do not utilise this functionality, which is a big opportunity to keep their potential customers up to date.

Finally, we will be implementing a sitemap which will be submitted to search engines on a regular basis so that new blog posts and updated pages will be updated in their indexes as soon as possible.

By this point, we should be seeing quite an improvement in search engine rankings and subsequently in website traffic. In order to capitalise on this increased traffic, we will be adding in a static widget that shows the contact details on every page of the website and provides a link to the contact form. This will make it as easy as possible for potential customers to get more information or to make a booking. We will also be making the RSS feed a prominent link on each page to encourage visitors that use an RSS reader to subscribe to the latest updates and specials, and subsequently draw visitors back for potential future and/or repeat sales.

It’s overall a simple but interesting project that will pretty quickly show the difference a well optimised website that is regularyl updated can make. From here, we will start looking at building up links in directories and other relevant websites to continue to improve search rankings and visitor access points.

Template Work

As I am currently working on the new WordPress template for this blog, the design is quite regularly becoming unusable with numerous broken sections as I am testing.

Please feel free to continue browsing the website, and please bear with me in the mean time, once it’s all finished it will look very schmick, just like the template designs I put together previously, but with some new refinements to make it even easier to use, and look even better. To maintain a reasonable level of usability as much as possible, I will be switching back to the “Classic” WordPress theme when I am not working on the template.

Thanks for your patience, have a good one!

Narfstuff – Review

Website address: http://www.narfstuff.co.uk/

It isn’t immediately clear as to what Narfstuff actually is, there are lots of clues to indicate, but at a first glance, it gives the impression of being a personal website of some sort, due to the laid back, informal appearance to the graphics and site design.

The Narfstuff blog and portfolio is very relaxed and inviting
The Narfstuff blog and portfolio is very relaxed and inviting

Despite this initial uncertainty, it quite quickly becomes clearer when we look at the navigation items that this is a portfolio and blog site.

When we look at how customised Narfstuff is, it maintains a stereotypical blog layout with a main column for blog posts and a right hand column for the blog category and archive navigation. Despite this though, the blog has been quite well created in a unique way using a great deal of custom imagery to create the appearance of a clipboard on top of numerous other items on a literal desk. This makes it seem fairly personal, but the added touch of flowers to assist in the creation of a border between the clipboard and navigation shows us a little bit more of the creator’s personality. This personalisation makes the website memorable, though it does not incorporate any “fancy” functionality such as the scrolling effects of WeBleedDesign.

The content is reasonably professional, but has a more personal blog style of writing than a formal document. The website has not been updated regularly for some time, but it does appear that it is becoming more regular, and includes items that may be of use to the professional community such as free graphics packs. This assists in developing a more professional appearance, despite the informal writing style.

The website loads relatively quickly and functions on a number of different browsers without any hiccups, so it is quite accessible and the navigation is easy to use. The navigation with roll over effects also form the only interaction available with the website. One thing that can cause confusion though is that the portfolio section of the website changes in appearance quite dramatically to the rest of the website.

The changed design for the portfolio section on Narfstuff
The changed design for the portfolio section on Narfstuff

Not only does the design change, but all the functionality and navigaition items have become different as well. This is a bit off putting especially as there is no clear way to return to the other section of the website. The only similarity is the colours and the vines with flowers that are used to create borders.

Despite this lack of consistency though, a contact page is available in both sections of the website. However, no contact details are available, there is only an inquiry form. Similarly, there is no reference to any other social media, such as Twitter or LinkedIn which could be useful in developing further leads or clients.

We Bleed Design – Review

Website address: http://webleeddesign.com/

We Bleed Design, created by Bryan Katzel is a unique and interesting way of displaying an online portfolio. It is initially fairly clear that it is a design portfolio. This is done through the name of the website itself, “We Bleed Design”, and the use of prominent headings such as “Design, Illustration and other Digital Keepsakes”. The thing that isn’t clear initially, is what sort of design Bryan actually does.

The screen you first see when loading WeBleedDesign
The screen you first see when loading WeBleedDesign

Straight away, Bryan tells us it’s his portfolio and has links to more information about himself, and to email him.

When we follow the navigation item to his work it becomes more clear that most of his work is print based, but that he also does web based design.

Clicking any navigation item takes us through a very unique automated scroll which runs over a transparent PNG to create a rather memorable experience with a seemingly animated page. The same “animation” occurs when we click on other navigation items, some run for longer than others though, depending on how far down the page we go. Alternatively, we can manually scroll through the page and see the animation at our own pace.

The seemingly animated background seen as a user scrolls through WeBleedDesign
The seemingly animated background seen as a user scrolls through WeBleedDesign

The downside of this customised functionality, though highly unique and memorable, is that the navigation does not follow the user, it remains at the top of the page. In order to get back to it, one of the many “Up” buttons must be clicked. These “Up” buttons are plentiful, but they do not really stand out and unless the user knows they are there and what they do, it leaves them without navigation. If the user does know they are there and understand their function, it makes for a slow navigation experience as the user must wait for the reverse scroll to occur before they can then navigate to the next section. This does have a negative effect on usability, despite making for an interesting response to user interaction. It is excellent to see though that this functionality is accessible on numerous browsers and platforms, and so the functionality isn’t lost for certain people.

Bryan has included a blog on his page that seems to be updated, but not regularly – only 3 times in the past year. Despite this, and the heavy use of cartooning in the design, the content does come across professionally. It would be fairly easy to effectively incorporate a Twitter or Flickr stream into the design and maintain the existing theme and aesthetic without detracting from it. It is unfortunate though that he hasn’t utilised these or any other form of social media or networking to allow users to interact with him and his website.

In all, We Bleed Design is very unique and personal, and it certainly sticks in the users mind due such a high level of customisation and unusual features, however, this does make the usability of the website a little poor. The accessibility of this website is excellent and the interaction is unique but it is not regularly updated and there is no links to other forms of social media. The contact information, while present, is not prominent, and many of the portfolio items say “coming soon”, giving the impression of incompleteness, which detracts from the overall professionalism of the website.

KIB216 Top 10 Portfolio Requirements

As part of our tutorial today, we have determined our top 10 criteria for reviewing a portfolio website. As a class, we have established that the following 10 are very important in any portfolio:

  1. Clarity
  2. Customisation / Personalisation / Your Style – In other words, it doesn’t look like a generic blog.
  3. Networking / Rabbit Holes / Professional links – Such as LinkedIn, Twitter etc.
  4. Content – Professional and correct.
  5. Usability – Is the portfolio complicated or easy to use and find your way around? Does it load quickly?
  6. Interaction – What does the portfolio do when you interact with it?
  7. Memorable / Unique – Does it stand out and make you want to send it to other people?
  8. Accessibility – Does it work on multiple browsers and platforms?
  9. Updated / Maintained – Has it been updated recently?
  10. Contact information – Are the contact details readily available and easy to find?