Posts Tagged website design

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

Need a web designer? Things you should look out for…

In the past, when fax machines were in mass use… if your business didn’t a fax number, no-one took you seriously. Nowadays, the same can be said about a company without a website. If any company is serious about succeeding, they must have a website. Unfortunately, web design is a lot more complex than plugging in a fax machine and waiting on it to ring.

It is essential that your business website conveys the correct message that will help with the promotion of your business. Whether that is just a simple brochure website that details your services, phone number and opening hours or if you require something a little more advanced like a fully blown eCommerce system, at the very least, it should add value to your business. And the best way to make sure you are getting the best from your web presence is to find the right web designer.

I think it’s fair to say, Web Designers are a strange breed. Everyone seems to know one and has had OR heard of a bad experience with a web designer. Web designers are notorious for falling off the face of the earth, never to be heard from again. Many leave businesses stranded with websites that they can’t even make the simplest of changes. Others are left with designers who charge the sun, moon and stars for the tiniest of changes to a web page. Well unfortunately it is a very common situation. But there is a common reason for this.

In many cases web designers are highly under valued in terms of the work they do. The reality is that most people don’t actually understand how long it takes to make changes to a website. Although many changes are a simple task (to someone who knows) – most of the time, they are still quite time consuming tasks.

If you ask an electrician for an hour of his time to get your electricity back on, you’d probably be happy to spend €90 for this privilege. But with a web designer, someone who sits at a computer screen all day and “presses a few buttons”, paying them €90 for this seems quite outrageous. Especially when as far as you can see, you just want them to move an image to the other side of the screen.

The reality is that many web designers have plenty of work and can’t be bothered working for someone who refuse to value the work involved in getting your “small change” done. A lot of these cheap web designers come straight out of college or initially started working for you as a nixer. Getting that extra bit of cash is great in the early days. But as soon as they try and make a living out of it, they quickly realise that it’s really not worth it. It doen’t take long to realise that the time spent on your project, would be better spent working for McDonalds, because quite simply, they’d earn a lot more money and get more respect from people enjoying that Big Mac meal than having to listen to constantly justify the bill for the work they have done on your website.

If you are only starting out on the road to web success, you should really read this article to get an idea of the typical situation a web designer endures on a near daily basis : http://www.27bslash6.com/p2p.html – if you think you will easily be able to find the best web designer for your website for next to nothing, think again. The good ones simply don’t come cheap!

Here’s another few tips on choosing the right web designer for your business.

  1. Don’t judge the book by its cover
    The first thing most people do when searching for a web designer is look at the company’s portfolio. Although this will give you a good idea of what kind of work they produce, a lot of a web designers work is client driven. Web designers tend to work on the edge of the latest design fashions. They create websites every day and are therefore ahead of most clients taste in terms of design. Generally speaking the clients drive the style they want and most web design companies will give the clients exactly what they want (to a certain extent!).

    However, good web designers will work with the client and help them understand how best to interact with your website visitors. If you find navigating websites on their portfolio to be poor, chances are that they are too.

  2. Clear Communication
    We come across a lot of disgruntled customers who were unhappy with their last web designer. Not because they were bad at their job, but because they didn’t listen to the client and understand their requirements. A lot of web designers have a clear idea of how a website works and believe one size fits all, which it clearly doesn’t. If your web designer doesn’t share the same vision as you, it’s unlikely to be a good working relationship – so don’t waste your time trying to convince them to your way of thinking. Get someone on the same level.
    There is also a major we like to call “feature creep”. This is where the initial brief for the project changes as the project progresses. In most cases they are minor and a lot of the time the web designer will take the hit without any complaints. However, if these requirements grow or change on a number of occasions, that can seriously dent the web designers motivation to complete the project and therefore the the relationship can become soured. To avoid this, make sure you are 90% clear from the outset as to what you’d like to achieve and let the web designer advice you on the best possible way to approach the rest.
  3. Listen & Learn from their experience
    There’s nothing worse from a web designers perspective than to hear “I read that… so we should really do this”. If the web designer is worth their weight in gold, they would have been around the block and heard this numerous times from their clients.

    This doesn’t mean that you shouldn’t question your designer – in fact, it’s the quite opposite. You should constantly ask your web designer for their advice. They will be glad to give it as they will feel happier that they can put their ideas into action and use your website as a great portfolio example.  They work everyday in this business and they have seen what does and doesn’t work.

    Always remember that a lot of what you read is already out of date in terms of web design and web marketing. A good web designer will be ahead of the curve and so detailed in his approach to design that he wouldn’t bore you with the details. But he would get great enjoyment out of explain the reason he used a particular font in a particular part of your site! So my adivce to you is to USE your web designers knowledge as much as possible – but make sure you are prepared to listen and change your mind.

At the end of the day, there’s nothing more a web designer really wants from you other than repeat business and a recommendation to potential clients. It is very much in their interest to make your website a success. It’s the successful clients that recommend them on for more work, which in turn puts food on their table.

The right designer will be passionate about every project they are involved in, to ensure its success. If you don’t feel the passion, don’t use that web designer. Find someone who is – but be very careful, like every industry, there are a lot of fly-by-nights. These web designers just want to make a quick buck from you and they never want to hear from you again. They don’t care if the site succeeds, they are making enough quick cash not to care about repeat business.

At this stage, it’s probably best to wish you all the success with your web project and don’t forget that our company offer web design and web development services – so get in touch if you’d like to discuss your web project with us!

Tags: , , , , , , , , , , , , , ,

2 Comments