Archive for category Web Development

Creating a search engine friendly one page website

With the slow demise and declining support for the once mighty Adobe Flash, web designers have found an alternative solution to creating interesting websites. The increased HTML5 support and improved JavaScript engines from the major browsers has meant that using HTML and JavaScript to create dynamic and engaging websites is no longer something that requires an additional browser plugin. The power, speed and performance of the top modern browsers allows web designers to create hugely interesting animated websites that are much more interesting than your typical text heavy website.

What seems to be the new trend in creating the coolest and funkiest website is to build a “one page website”. This basically means that all the content of the website is on one page, but the designer has created it in such a way that it looks like a normal website with really interesting navigation and animation. But of course, the problem with this is that designers are compromising their search engine rankings just to be “cool”. This too was a problem with Adobe Flash websites in the past.

Fortunately, unlike Flash, because we still use plain old HTML, we can make our one page websites search engine friendly! It just takes a little bit of planning and well thought out user flow.

How To Do It
As mentioned above, the idea with most of these one page websites is that all the content is on one page. Of course, we don’t want to do this since we know that Google (and other search engines) want to lots of pages of content. So basically, we want all the links on our website to link to an absolute URL that the search engine spiders can crawl, instead of the default home page (or one page).

To achieve this, we need to create an individual page for each and every section that we plan to include in the website. Instead of  using the standard method of one page websites to link to each key section of the website using anchor links (e.g. /#aboutus) we aim to link to a fully formed URL (e.g. aboutus.html).

On each page, we will need to specify a DIV that will contain the content for every page to be loaded within the One Page Website. We will then use jQuery to hijack the clicked link and AJAX to load the contents of that called DIV into our page. This may sound a little confusing, but if you take the example below – it will probably become a whole lot clearer!

index.html

<html>
<head>
    <title>Tom Doyle Web Design</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        loadPage();
      });

     function loadPage(url) {
         if (url == undefined) {
            $('#container').load('index.html #header ul', hijackLinks);
         } else {
            $('#container').load(url + ' #content', hijackLinks);
         }
      }

    function hijackLinks() {
      $('#container a').click(function(e){
         e.preventDefault();
         loadPage(e.target.href);
      });
      $(document).ready(function(){
      loadPage();
    });

   function loadPage(url) {
       if (url == undefined) {
         $('#container').load('index.html #header ul', hijackLinks);
       } else {
         $('#container').load(url + ' #content', hijackLinks);
       }
   }

  function hijackLinks() {
     $('#container a').click(function(e){
        e.preventDefault();
        loadPage(e.target.href);
    });
  }

}

</script>
</head>
<body>
    <div id="MyHeader"><h1>Tom Doyle Web Design Page</h1></div>
    <div id="container">
          <div id="content">This is the new web design page. View
          our about us page - <a href="AboutUs.html">click here</a>
          </div>
    </div>
</body>
</html>

AboutUs.html

<html>
<head>
    <title>Tom Doyle Web Design</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        loadPage();
      });

     function loadPage(url) {
         if (url == undefined) {
            $('#container').load('index.html #header ul', hijackLinks);
         } else {
            $('#container').load(url + ' #content', hijackLinks);
         }
      }

    function hijackLinks() {
      $('#container a').click(function(e){
         e.preventDefault();
         loadPage(e.target.href);
      });
      $(document).ready(function(){
      loadPage();
    });

   function loadPage(url) {
       if (url == undefined) {
         $('#container').load('index.html #header ul', hijackLinks);
       } else {
         $('#container').load(url + ' #content', hijackLinks);
       }
   }

  function hijackLinks() {
     $('#container a').click(function(e){
        e.preventDefault();
        loadPage(e.target.href);
    });
  }

}

</script>
</head>
<body>
    <div id="Title"><h1>About My Company</h1></div>
    <div id="container">
          <div id="content">This is the about page
<a href="index.html">Load the homepage content</a></div>
    </div>
</body>
</html>

In the example above we’ve only used the “onclick” event to load content, but you can use this approach with other events and get the same results. I hope this gives you some ideas as to how you could create your one page website to be search engine friendly. 

You can also check out this website that I was involved in building a couple of years ago with a similar approach www.shooteditor.com

If your looking for some inspiration on creating your own One Page Website – check out  www.onepagelove.com

Tags: , , , , , ,

No Comments

Include latest article list on non WordPress website

Recently, we needed to develop a website that used a blogging system – but didn’t necessarily want to use the blog to power the full website as we had other plans for that.

In a nutshell all we really needed was to be able to include a top 10 latest articles list from our WordPress blog on the home and left handside of every page.

In the past, we probably would have used a RSS feed parser to include the latest list, but this was never very clean for us. After much searching on the web we eventually came up with a combined solution and here it is forever embedded on my blog so we don’t have to search the next time round:

<?php
      require('pathto/blog/wp-blog-header.php'); // change this to fit your path
      query_posts('showposts=10');
?>
<?php while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

<?php endwhile; ?>

Tags: , , , , , ,

No Comments

My response to your emails about Web Design & Development Costs


I recently turned our Google Adwords campaign on to get 2bscene out there and drum up some more business. It’s not that we’re not busy, but more the fact that I’d really like to see us grow this year after being too worried about consolidation last year. The more business I get in, the more staff I can employ and the feel good factor of that would be just amazing with all the doom and gloom that fills our lives because of the recession.

My Google advert states clearly “Professional Web design from just €1,499”. There are a number reasons we push that price. The main one is that it’s a very competitive price for a professionally designed, custom website and the other key reason is to stop people that aren’t serious about their web presence from contacting us.

I’ve outlined in detail many times before how we cost our websites and why they cost the price they do. But for some that message doesn’t seem to sink in.

Now, more than ever before, we get the “is that really how much it costs? You know we’re in a recession don’t you?” response when someone is presented with an estimate or proposal on the costs involved in developing a website.

The reason for this is simple. Most people just don’t fully understand what is involved in designing and developing a website. The work a professional company puts into designing a custom designed website is not comparable and cannot be compared to a website that costs €300. They are just two totally different things – it’s like comparing apples with oranges.

Some sad person is so ridiculously consumed by it all, feels it’s his duty to inform me that websites can be purchased for as little as €300.

Already he’s filled in the form on our website twice to let us know how he feels about our charges, the economy and how backward he thinks we are. Yet unfortunately, both times he has left non-existent email addresses, which means we can’t respond to him.

We’re pretty confident we know who this person is, I just hope he reads this… so I can let him know that I understand my business, the market place and that we don’t and don’t want to compete with those cheap and nasty web design firms.

Tags: , , , , , , , ,

1 Comment

BlackBerry overtakes Apple in Mobile Web Browsing Wars

Hot on the heels of my article yesterday – Mobile Website Design – Is it time to offer a mobile version of your website?, StatCounter Global Stats have released a press release with some interesting news.

As expected, Google’s Android platform is seeing a significant growth in it’s usage, with an increase of over 290% on last year. Android is now accounting for 23.8% of the Mobile Web usage market share.

Interestingly, in the US Apple’s iPhone has fallen from a high of 51.9% last year to just 33% this year. This means that Blackberry’s 34.3% share in the US makes them market leaders in terms of mobile Internet usage.

This trend however isn’t replicated worldwide, with the current statistics leading with Symbian OS leads with 31.9% followed by Apple iOS (21.9%), BlackBerry OS (19.3%) and Android (11.6%).

So I guess it’s safe to say that targeting just iPhones in terms of your mobile website, is not a good idea!

You can read the full StatCounter report here : http://gs.statcounter.com/press/blackberry-overtakes-apple-in-mobile-wars

Tags: , , , , , , , , ,

No Comments

IEDR to give 10 SME’s a €10k Website Grant

.ie: Ireland's official Internet address
Image via Wikipedia

The Irish Domain registry, the IEDR have created a €100,000 fund to help boost SME e-commerce. The idea of the fund will be to identify 10 SME’s who can take advantage of a €10,000 grant to to build an eCommerce website to help grow their business online. In an age where online buying continues to grow significantly, only 21% of Irish companies with websites have the ability to handle transactions online.

I’m personally delighted to see this incentive from the IEDR and it’s something that the government really should take note of. This incentive by the IEDR will help 10 businesses start to trade online and see the true potential that the web can bring their business.

I don’t say it often about the IEDR, but “Well Done” on this one – great idea!

As of now, I’m not sure how one goes about being included in the process for being selected, but when I find out I’ll post it here.

Tags: , , , , , , , , ,

No Comments