Archive for category Web 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

Don’t change the business model! Make it work!


I recently attended the Nielsen Norman Group Usability Week in London and although I took quite a bit from my time there, one episode left a bitter taste in my mouth. My core focus when I arrived at the Usability Week was on the one day event called “The Human Mind & Usability: How Your Customers Think”. This was something that I felt could be really beneficial to me and a number of clients and therefore was very much looking forward to it.

The day course was presented by Marieke McCloskey, a user experience specialist with Neilsen Norman Group. As the day started, I really felt it was a good decision to choose this presentation as Marieke came out with some really interesting facts and case studies on user tests she had run in the past. All was going really well. Of course a lot of what she had to say were things that I would have come across a before – but it was the little gems that I hadn’t that I really wanted to get from this.

Throughout the presentation, Marieke referred to a certain website quite a lot and in the afternoon session this website was going to be our focus of attention for discussing all we had learned throughout the day.

“Brilliant”, I thought. Finally we’ll get to see Marieke in action. We’d get to see what she would do when presented with a real world situation. I was looking forward to seeing how she would tackle issues that us web designers tackle on a daily basis with clients that come to you with a problem and want you to solve it.

So what was this website? Well the website in question was Ramenbox.com.

Ramenbox.com is a website that basically sells Ramen – Ramenbox.com’s unique selling point is that you can bulk order a custom selection of Ramen and have it delivered to your door. They are the world’s first sellers of customisable box of Ramen (according to their website).

Ok, so I hadn’t got a clue what Ramen was before I went to this event and I certainly couldn’t tell you if people would be interested in buying a full box of Ramen, but that shouldn’t be an issue. We’re here to discuss how we can build a website to help this company maximise its chances of success right? Well so you would think.

If you have a look at Ramenbox.com – you’ll see the process is quite complex, never mind the fact that the website designer clearly didn’t spend much time user testing the website before launching it. The website’s from page starts off well, with 1-4 step instructions on how it works. The problem is, they don’t really give you clear instructions on how to get started. The wording, the layout and the complexity of the choices to even get one item into your shopping cart is enough to turn you off filling in a complete box of Ramen. I would imagine that Ramenbox lose quite a lot people in the first one or two clicks. If you do have the time to play around with that website and figure out what you have to do – I think most people eventually get it – but it will still feel too cumbersome to continue with their order.

Anyway, this website to me was an absolutely brilliant case study – it has everything you could wish for. A totally complex business model, a website that had not taken the cumbersome process of ordering into account and we have a usability expert to tell us how we could solve it! Or so I thought…

After lunch Marieke split us all into groups so we could discuss among ourselves what we would do with the website and how it related to what we had discussed throughout the day. Brilliant I thought again – this is the type of stuff I love! Solving problems with a user centred and practical approach to design. I was part of a lovely group – we all agreed on a process and what we’d change to make this website work as best it can. I personally felt we had a solution.

So next step was opening it up to the floor to talk about what our groups had discussed. Straight away the guy that had been loudest all day (you know the ones, they’re always at these conferences) – we’d change the business model – it just doesn’t work. In fairness to him, he had a point. The whole process was just so difficult and complex that there were better ways of approaching the business model. But that’s not what we’re here to discuss right – we’re here to discuss how we can make a complex business model work online aren’t we?

To my dismay, Marieke agreed with him, but she opened it up to the floor for more ideas – I thought, “now’s our chance to show how we’d do it”. Again, another loud attendee is ushered to voice his opinion on what he’d do. Again, he comes back with another way to change the business model. Again, Marieke agreed. This then started the floodgates of how everyone in the room would change the business model. Even those in our group seemed to move with the idea that changing the business model was the best way to solve this problem. A classic example of the “Solomon Asch Conformity Study” that we’d spent sometime discussing earlier in the day.

I hoped against hope that Marieke would come back with how she would tackle the problem by changing things on the website – but no – she finished the session with how she would get the client to change their business model. I nearly cried. Why could she not see a solution to this problem – even one – other than redesigning the business model?

Can you imagine if we turned around to every company we deal with that has a complex way of doing business to change their business model? It just wouldn’t happen. We do of course suggest to clients how they can simplify their model to make it work online, but in some cases it’s just not possible – OR – the client is hell bent on doing it in that particular way.

If a company employs us to help them succeed online – we take their idea and present it as best we can to get a maximum return on their investment in time and money. We give them the very best advice and spend time figuring out how they can actually achieve their goal, but with realistic targets and constant suggestions on where they can improve.

Maybe I’m just being pedantic – but it really left a sour taste in mouth. Telling Ramenbox to change their business model is not a usability solution to this problem, it’s a cop out in my opinion.

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

Cool Sites : Nike Better World & Ben The Bodyguard

So much for keeping up the planned “Cool Site of the Week” section on my blog eh? I haven’t posted anything since the 10th of June 2009 no less! Well in fairness, that’s because I rarely see anything that seriously impresses me enough to do a blog article.

Over the last couple of weeks that has changed though. I have found not one, but two seriously cool websites.

Both sites use the same “scroll down” interaction, but one in particular just blew me away the first time I saw it.

Yes that was the Nike Better World website (www.nikebetterworld.com) – now I know this site certainly isn’t the best way to approach web design from a usability point of view, but you can’t but respect what the creative team at Nike have achieved with this website. Not only is the vertical scrolling a pretty neat effect, the parallax effect just blows your mind the first time you see it. Technically it needs a well thought out vision of how it should work in theory, but coming up with the idea in the first place is just amazing.

Another good site on a similar theme is the Ben the Bodyguard www.benthebodyguard.com website. This has been around longer than the Nike Better World site as far as I know and it too is pretty impressive in it’s concept and delivery.

Both sites are using nothing else in terms of plugins – which makes it hugely impressive.

Check them out now, you won’t be disappointed!

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

1 Comment