10 S.E.O. does and don’ts for Web Developers

There’s no point in having a website if cant be found. Here are 10 basic tips for developing a Seach Engine Optimised Site in the form of 5 dos and 5 don’t. Here we deal with the more technical side of SEO, the basics that its important to get right before we can start thinking about targeting keywords and content

Do

1. Make your domain name as descriptive as possible
Your brandname if your brand is somewhat established to the point where people will search for it. If you trying to build your brand try something like the service you are offering and the location e.g. webdesign-cork.com . This will give you a head start with user searching for webdesign ini the Cork area.

2. Use Propper HTML formatting
Make sure to use tags where applicable. Do not use tags to format heading text. This will not be recignised as a heading by Google, this will also involve including CSS in your html file which is not ideal, as we will discuss later.

3. Meta Tags and Title
The title tag is very important, it is the first piece of content that the spyder sees. This should included your targeted keywords and be less then 60 characters long. The next most important tag is the meta description, this should be a brief decription of the site in less then 160 characters and should also include keywords where posssible. The meta keywords can contain as many keywords as desired seperated by a coma (,)

4. Use Descriptive URLs
Use search engine friendly URLs with a well laid out site. Each page has its own URL with the page title contain within it. E.G. a who we are page located under an about us page should have a URL like so webdesign-cork.com/aboutus/whoweare.html

5. Include an xml sitemap
xml-sitemaps.com will generate an .xml site map for your site for free. You can then upload this to your root folder where Google will see it when it comes to spider your site. This make life easier for Google and as a reward for your cooperation Google will rank your site higher then those without sitemaps.
Don’t

1. Use Flash
Flash will be seen as large blocks of code by Google, it will not be considered as relevant content. It will also make your page slower to load and will not work with ipads or iphones both of which will hurt your page ranking with Google.

2. Use images in place of text
Try to use html text as much as possible and css to style the text as desired. You can overlay text over images with CSS to give the effect of text within the image while still being readable by Google

3. Include JS and CSS in the webpage
Link all CSS and JS files in the head of the document and keep the body free for content. Google sees script and styling as irelavent rubbish that it has to sift through to get to the content. Keep your .html file as content dense as possible

4. Stuff
Do not stuff your content area with a list of keywords you think will help get you found. Using unrelated keywords will negitivly effect your search ranking. You may think that using popular keywords will help you but this is not the case. If you write an article about local tourist atractions and you include keywords like iPhone this will not help your ranking as the spider will see it as unrelated.

5. Forget your copyright footer
Include a copyright footer on everypage, including © symbol (Hold down Alt and type 0169 on the number pad). This protects your content legaly and lets Google know that the page is original content giving it the edge over non copyrighted conten.

We have covered 10 basics points to remember when developing a Seach Engine Optimised Site. These are the basic steps taken to ensure that a site can be seen and understood by google. The next step is to target keywords and tailor your content to get seen for the keywords you want to be found for.

My Conversion to JQuery

I have been using JQuery on a regular basis for the past 6 months or so. Before this I had been of the opinion that I didn’t need JQuery to do what I wanted to do with JavaScript but when I started my new job I was working on sites that had been built with JQuery and I quickly realised the best thing I could do was to go with it.

After over coming the first basic learning curb I started to understand that JQuery was saving me a hell of a lot of time. I had written my own JavaScript animations before and they served there purpose and worked quite well. The problem is that I could spend hours trying to fine tune my animation loops to get the perfect transition but as the only front-end Developer in a company that turns over on average 2-3 website a month time is not something I have in abundance.
The right JQuery plug-in can give nice fluid transition in image sliders and drop downs that can be tweaked to perfection if desired but also look pretty slick out of the box.

A couple of weeks ago I really got to see the full power of Jquery.  I was handed a design for a homepage. This page featured four boxes with that would pop open when the user clicks the “see more” link in the bottom left hand corner of the box. I was determined to do this with as much code reuse as possible as I knew it would be something that I would be asked to do again. Also, not knowing how many boxes would appear on the page meant that using there unique IDs to target them individually would be quite ham-fisted and not very upgrade friendly should more boxes be required in future. So the divs(boxes) would have to be targeted by class. That way you could add as many boxes as you like and they would all act in the same manner.

So now I had a link that would be selected via its class, the function called would then show/hide a table above it all within a div that would expand once the table was visible.
To make this happen I would need to use JQuery’s this keyword to ensure that only the box clicked would open and not all boxes that used the class on the page.
The next challenge was to display the table above the link. This would requires some serious DOM tree traversal. Luckily JQuery has seriously powerful selectors that can make this happen. It required not one but 2 of these selectors to target the desired table and set it be visible.  My DOM tree looks like this…

<div class=”content holder”>
      <table class=”content”>
            This table will not be visible when the page loads
      <table>
     <div class=”tablefoot”>
           <a href=”#” class=”showlink”>Show Content<a>
     <div>
<div>

Next, the 2 lines of JQuery that handle the selection…

var parentDiv= jQuery(this).parents(‘.tablefoot’);                                jQuery(parentDiv).prev(‘.content’).slideToggle(0);

The first line uses the .parents selector to locate the div with class .tablefoot in a list of parent element of the current div. This is then saved as parentDiv so it can be operated on further.

Now that this is selected to us the .prev selector is used to locate the .content table from a list of previous elements on the page that are located on the same level in the DOM tree (This could also be thought of as a list of siblings, but only “younger siblings” or one that appear on the page before our current element).

BOOM we have located the table and now it time to show this mother using the .slidetoggle() method.

A few more lines of JQuery were used to change the text in the link to “close” when the box is open and change back to “show” when it is closed.

So that’s how I did it. It’s a few lines of JQuery that I will definitely be using again. If you have read this far I hope I explained it well and you understood it. There are heaps of resources on the JQuery website if your looking for some more light reading.

Next time… Front-end dev for Safari on the iPad! Somethings to take into account…
Bye!!

New Website!!

Hi!

I just completed the first build a my new website. Its online now and can be found here.

I have pasted in my first 2 posts from this blog and from now on I’ll be posting the same posts on both sites simultaneously until such a time as I feel that my website is up to scratch. The site is built using HTML and CSS3. I though it best to get the basics right before messing around with JavaScript animations and stuff. It looks best on Safari and Chrome as they both have full support for CSS3.

The two CSS3 features I used were rgba color and border radius. The first (rgba) allows the user to define the transparency value of the color(a) as well as the red, green and blue(rgb) values. This feature works on Safari, Chrome and Firefox but not IE! This left me with a problem! The text was unreadable when viewed on IE. IE doesn’t recognise rgba so the result is no background color at all. A quick a google led to a simple solution! This was done by using normal rgb in the CSS file before the rgba like so:

{
background-color: rgba(255, 255, 255, 0.4);}

So now a browser that dose support rgba will first set the rgb color, this will then be superseded by the rgba color. If the browser dose not support rgba it will display the rgb color. This means that the website looks quite different when displayed in Internet Explorer but at least the text is now readable.

The second feature is boarder radius. It allows the user to create curved edges on the boarders around different divs. It is supported by Safari and Chrome but not Firefox or Internet Explorer. As a result the boarder edges appear square in these browsers. A possible solution is to create .png images to be uses as backup backgrounds for the different divs. This is something I might get round to in the future but hopefully I wont have to if Firefox and Microsoft get there act together!!

I hope to use JQuery to add some nice effects in the coming weeks and I also going to look into linking the site up to facebook/google.

Later!

Neal

Leaf Blower

In October 2009 I received a project spec. To build a 2D game for iPod Touch. I was assigned to partners to work on this project with me. 
This would require coming up with a game concept and implementing it using Xcode’s iPhone OS3 SDK. At the time I only had limited experience with C programing and not even the faintest clue as to how Object Orientated Programing worked. With iPhone OS programing done mostly in objective C, I knew we had a lot to do. For the first 3 or 4 months we  played with different ideas and researched our options. Then in February 2010 I received the news that my 2 partners had dropped out. With loads left to do and only a brief outline of what the game was going to be I consulted my project supervisor who suggested to going down the path of producing a web application. Something which the iPhone OS is ideally suited to. He handed me a book called Safari and Webkit Development for iPhone OS 3 which proved to be invaluable.
And so I began. With my partners out of the picture I changed the planned game! The original idea of snakes and ladders was chosen because it seems as though it would be easy to implement. The new game would have to be something that would use JavaScript animation to manipulate images on the screen. These images would be placed in named div tags which could be moved around the screen my mean of JavaScript animation loops. I came up with the simple idea of a game where a leaf blower was used to steer falling leafs on to a pile. The game would then time how long it takes the user to put 10 falling leafs on the pile before advancing to the 2nd level where….wait for it, they are confronted with the daunting challenge of two leafs falling at the same time with a target of 15 leafs to collect. Once this is done the user is presented with there final time for both levels. 
The game serves as a proof of concept. The game can be played at this link and works best on safari for Mac/ Windows or mobile safari on iPhone/iPad/iPod Touch. 
My full and final report can be viewed here (right click and save, .docx format). It includes all the code and graphics used and explains how to do it yourself. There are certain features which I was unable to implement, for different reasons, such a HTML5 offline cacheing. I also had a look at phonegap.com , a website that offers tools to allow developers to port web application to run natively in several different mobile platforms, including android, iPhone OS and blackberry.
Have a look at the game, take a gander at the source code, download the report for more info. Anymore questions feel free to contact me at neal.heneghan@gmail.com
See ya later!!

My first Post

Hello,
I have started this blog as a way of keeping track of my current software and web development projects. Over the coming weeks and months I will be writing about projects I have completed in the past as well as current project and areas of interest to me. I also hope to eventually port this blog to my own .com web address and display it on a website entirely designed and built by myself. I hope to take advantage of HTML5 CSS3, JavaScript as well as PHP to build a very cool interactive interface, explaining how the new features work as I add them. I hope to able to reach out to other like minded people to work on innovative projects in area of web and mobile development. I would welcome any ideas that anyone may have for iPhone / Android applications. I cant wait to get started! I will be writing about software Design and Development project within the next week. The project which was titled: A 2D game for iPod Touch.
Chat to you soon,
Neal