For those who doesn’t know, we are going to explain as well as we can, the difference between web design and web development.

They might seem  to be the same thing but in reality they aren’t so lets break apart what and how.

Web Design, involves the basics of a website design which includes:

The well known HTML code (Hypertext Markup Language – the main programming language of the web),
CSS for styling and layout (Cascading Style Sheet),
Graphics to make up the look and feel of the website itself.

A professional web designer can create a very pleasant website, which can take your breath away with the quality graphics and a well-balanced layout.
The next step is the functionality of the website and that’s where a Web Developer steps in.

A web developer is the one responsible for how the website performs based on the user / visitor interaction, making sure the right context is displayed at the right time and makes the website responsive and sticky.
I have seen very large businesses having a very poorly performing websites which instead attracting customers, drives them away.
As a website is the business image on the World Wide Web (www), a poorly performing site could mark your business as unprofessional.
Is that what you are looking for? I don’t think so.

A web developer skills involves:

Server Side Scripting Language (PHP, ASP, ASP.NET, etc)
Client Side Scripting Language (JavaScript)
SSI (Server Side Include)
Database Design(MySQL, MS SQL, etc.)
CMS (Content Management System) which allows the owner of the website to keep the content up to date.

An e-Commerce website is a great example.
If you have 1000 products that you would like to have it displayed on your website, just imagine having to pay a web designer to create those statuic pages, while a web developer can do all this with just one page.

Why is that?
Because a web developer will advice you on the best solution available by creating a database that will hold all your products.
Then he creates a page that will interact with the database, displaying these products one by one based on the user request.
They can be sorted and grouped into categories, type, make and model, which will make it a lot easier to find what you are looking for with just few clicks.

When the website is designed based on a database, your content / product can be found using a search form.

Recently we re-designed 2 websites that were created by some “web designer“.
The customer came to us due to the fact that he cannot be found in any search engines.
Both websites were more than a year old and only one of them had few pages in Google Search Engine.
When we took a look at them, both were inaccessible in FireFox, due to bad javascript code used to create the navigation menu, and one of them had more than 1400 html errors.
There was more errors on the page than the content itself.
It took us few days to clean up the code but in the end both website were more user friendly, more pleasant without the need of heavy graphics, and few times more responsive.
We created XML site-map for each website and submit it to Google and in just a matter of few days both should start coming up in the SERPS.

In conclusion, do your homework when thinking of getting a website done.
Should you be looking for a web designer or a web developer?

Our latest project (still work in progress) is Take1Menu.com

This project will be an online directory of Take-Away, Restaurants, Off-Licence, Bar, Pubs, Sandwich-Bar menus from Ireland, that will also include an order calculator, business ratings and business reviews (the latest 2 available only to registered user).

Options to save an order is also made available for later retrieval.

The plan is to make it possible to place an order online or by SMS, but that will be available in the near future as we need to make sure all businesses have Internet or SMS access to confirm to the customers that the order has been received and ETA if available.

Any comments or suggestions are more than welcome, so fire-away if anything comes to mind.

One of the members on Irish WebMaster Forums asked for help in creating a simple dependent select menu and the most obvious option is by using Ajax, so I decided to put up this post with step-by-step instructions.

First, create a new PHP page (as we are going to use php for this) and name it “page1.php“.

On this page we are going to add the following javascript code, which will take care of our XMLHTTP request.

<script type="text/javascript" language="javascript">   

var ewd_domain = 'http://www.eire-webdesign.ie/'; //set domain   

var ewd_loading_img = ewd_domain + 'images/loading.gif';//set image path   

var ewd_loading_msg = 'Loading Data…';//set loading message   

var xmlhttp_obj = false;
//create the XMLHttpRequest
function ewd_xmlhttp(){   

 if (window.XMLHttpRequest){ // if Mozilla, Safari etc   

  xmlhttp_obj = new XMLHttpRequest();   

 }else if (window.ActiveXObject){ // if IE   

  try{   

   xmlhttp_obj = new ActiveXObject("Msxml2.XMLHTTP");   

  }catch (e){   

   try{   

    xmlhttp_obj = new ActiveXObject("Microsoft.XMLHTTP");   

   }catch (e){   

   }   

  }   

 }else{   

  xmlhttp_obj = false;   

 }   

 return xmlhttp_obj;   

}   //get content via GET   

function ewd_getcontent(url, containerid){   

 var xmlhttp_obj = ewd_xmlhttp();   

 document.getElementById(containerid).innerHTML = '<img src="' + ewd_loading_img + '" />' + ewd_loading_msg;   

 xmlhttp_obj.onreadystatechange=function(){   

         ewd_loadpage(xmlhttp_obj, containerid);   

         }   

 xmlhttp_obj.open('GET', url, true);   

 xmlhttp_obj.send(null);   

}        

function ewd_loadpage(xmlhttp_obj, containerid){   

 if ( xmlhttp_obj.readyState == 4 && xmlhttp_obj.status == 200 ){   

  document.getElementById(containerid).innerHTML = xmlhttp_obj.responseText;   

 }   

}      

Now will create a simple form with two select menus and a submit button:

<form name="select_m" id="select_m" action="<?php echo $_SERVER['REQUEST_URI']."?".$_SERVER['QUERY_STRING'];?>" method="get">      

<select name="sel1" id="sel1" onchange="ewd_getcontent('page2.php?sel1='+this.value, 'span1');">   

    <option value="">select...</option>   

    <option value="1">first</option>    <option value="2">second</option>   

    <option value="3">third</option>   

   </select>   

   <span id="span1">   

   <?php   

   include_once("_page2.php");    

   //this is the page that will create the second select menu   

   ?>      

   </span>   

   <input type="submit" name="submit" id="submit" value="Go..." />     

  </form>

Now save page1.php and create a new page “page2.php“, where we are going to create the second select menu which will change its options based on the GET request:

<?php   

$txt = "";   

$qs = $_GET['sel1'] != "" ? preg_replace("#[^0-9]#","",$_GET['sel1']) : "1";//I use preg_replace to sanitze the get request   

//which in this case must be numbers   

//this is manually created but it can be easily populated from a database   

if($qs != ""){   

 if($qs == "1"){   

  $txt .= "<select name='sel2' id='sel2' style='font-size:11px;'>   

     <option value=''>select...</option>   

     <option value='11'>first-first</option>   

     <option value='12'>first-second</option>   

     <option value='13'>first-third</option>   

    </select>";   

 }elseif($qs == "2"){   

  $txt .= "<select name='sel2' id='sel2' style='font-size:11px;'>   

     <option value=''>select...</option>   

     <option value='21'>second-first</option>   

     <option value='22'>second-second</option>   

     <option value='23'>second-third</option>   

    </select>";    

 }elseif($qs == "3"){   

  $txt .= "<select name='sel' id='sel2' style='font-size:11px;'>   

     <option value=''>select...</option>   

     <option value='31'>third-first</option>   

     <option value='32'>third-second</option>   

     <option value='33'>third-third</option>   

    </select>";    

 }   

 echo $txt;   

}   

?>

Save the second page, and using your preferred browser navigate to “page1.php”, make a selection and see how the second menu will change its values.

How it works? Simple.
We have the javascript code that will take care of our XMLHttpRequest.
As you have noticed we have added a span id html element that will hold our second select menu, which is passed to the Ajax code to replace its content with the html received from the “page2.php” using the innerHTML function:

............
document.getElementById(containerid).innerHTML = xmlhttp_obj.responseText;
............

We’ve added “onchange” function to the first select menu that will execute our javascript function, passing its value to the the second select menu for filtering the data, and also the span id to tell the function where the magic has to be executed.
Just in case javascript is disabled in the user browser, we’ve added a submit button as well so the form is still functional.

Few minutes of work and voila you’ve done it.
It wasn’t that hard was it?

You can see an working example here: Dependent select menus

Ajax technology, everyone is talking about it, but it has it’s own drawback.
Few advantages for using Ajax on your website:

1. Better and more responsive website and web applications.
2. It uses existing technology that are available in most browsers.
3. It can be use with any server-side language (ASP, PHP) + JavaScript, already in use by many web developers.
4. Ajax integrates perfectly with existing designs and website functionality.
5. Enables immediate tasks like server-side form validation without refreshing the page.
6. Creating simple suggest functionality like Google Suggest.

plus a lot more…

Some of the disadvantages using Ajax:

1. Because pages does not change while it still brings new content or checking a form, can not be easily bookmarked.
2. Search engines may not be able to index all pages available on your website.
3. Back button in browsers doesn’t work as with a normal page.
4. Javascript can be disabled in some browsers client-side making your application non-functional.

Today we will be discussing the solution for creating friendly URLs, using Ajax technology while keeping the functionality for users that have Javascript disabled, and also allow search engines to index your page content as well.

So lets go ahead.
A standard link to another page normally looks like this:

text

while an Ajax link is formatted as below:

text

The problem with the Ajax formated link is that search engine can not follow it and if javascript is disabled on the client-side, the link is useless.
A simple way to make the link working no matter what, is by creating a new page that will include your content you were going to load into the existing page, and change your link structure as in the example below:

text

Adding “return false;” to the “onclick”, if javascript is enabled, the browser will fetch the content into the page section specified without refresh, but if javascript is not available the user will be brought to the new page you just created.

This is just one of the solutions available to make sure you keep the functionality of your website, search engines will index your content, and having a responsive web applications where Javascript available.

Good luck!

One of the first steps in search engines optimization is keywords research.
Say you have the website ready, it is probably already listed in search engines (type in Google search box “site:www.website_name.com“), but it doesn’t rank very well at the moment, so you start looking on the web for a solution then, you come across the SEO term which stands for search engines optimization or optimisation.

There are many tools available at the present for example: http://inventory.overture.com/  now owned by Yahoo or Google Keyword Tool, but myself, I  don’t find them very useful for a website that targets the Irish market.

A better approach for the moment, until new tools are made available is to sit down and write on a piece of paper a few sentences that would describe your business.
At the end of the day, nobody knows your business better than you do.

Now sit back and read them over and over again, until it sinks in, then try to get the meaning of one sentence at a time in just 3-4 words and write them down.

Why 3-4 words? Because if you are in a tight competitions, 1 (never recommended) or 2 words ranking are a lot harder to achieve, and more than 50% chances are that you will never get the results you are looking for.

E.g. – trying to optimise your website for just “insurance“, would be a mistake and you will have a very slim chance of making it into the first 10 results out of 414,000,000 found (default number of results Google returns per page), but if you are going for “car insurance” with only 79,500,000 results or even better, “car insurance ireland” with just 2,810,000 , you have a better chance.

Unless 2 words are more than 75% relevant to your query, search engines will try very hard to give you the right results.
Have a look at the example above, searching for “insurance ireland” could mean anything related to insuring something but what, a car, a house, valuables, etc….??? 

Now if you are looking to insure a car, and as usual you go to a search engine like Google.ie, what are you going to type in the search box?
More than likely, you will type car insurance and if results returned are not to your satisfaction you will add Ireland.
Don’t you?

Basically the point is that: the longer the phrase the greater the chances are for your website to rank well.

Getting back to our “ships”, make a list of as many short phrases you could come up with, then go back over them and try to make the list shorter like 10 to 15.

Now that you have the list, open your browser, go to a search engine and start your search for the phrases you have on the paper one by one. Look at the results returned and navigate to the first 3-5 websites that are on the first page, but not the ones listed as “Sponsored Links“.

Does the business profile of those websites relates to your business?
If yes, keep the phrase but if not ask yourself, are this the right keywords for me?
If I am looking for something related to my business, what will I be searching for?

Repeat the last step for every phrase you have, but don’t forget that search engines ignore words like: is, in, from, for, and, etc..

Eventually, you should be left with probably less than 7 phrases, and going over them again should tell you if they are the right phrases for your website or not.

Now navigate through your website and compare the list that you have with the text available on the home page.
Are any of your most important keywords in your Page Title?
What about the body text of your page?
Are there any headings that contain your keywords?

If your answer is No to any of the questions above, then you need to make changes.

Now remember, trying to conquer the search engines and get the “Google Love“ for a long list in one go will be a mistake, so keep it short and to the point.
You can always create new pages later and link them from your website home page.