Archive for category Online Marketing

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

Sencha Touch, Admob & Phonegap

Android Market

Image via Wikipedia

I recently created a small Android mobile app using Sencha Touch & Phonegap. The app was always going to be free as it does  little more than give website owners the ability to check how their website is performing from a SEO and Social Media point of view.

I thought I might as well try and make a few bob from the app (oh the app is called My Web Performance and is available on Android Market) so the obvious option was sponsored adverts. And no place more obvious to use for sponsored ads, that Google. Google offer a program for mobile developers called Admob. Admob works pretty much along the same lines as Google Adsense in that you place Google Adsense on your website and you earn a % of the amount the advertiser is paying to place their ads on Google. Admob does this for mobile websites and applications etc.

The dilemma was that I couldn’t find out how to get this to work with Sencha Touch and Phonegap. I figured out a little hack in the end that seems to be working out for me so far. So for all you Sencha Touch users, here’s how I did it…

  1. Admob Set Up
    In Admob – when adding a site, choose “Smartphone Web App”. This will present you with Javascript that we can use later.
  2. Sencha Touch
    Ok, the idea is to basically create a new toolbar that uses an iFrame to pull in a separate html file that contains the Admob code. So firstly, create a new HTML file called adverts and paste your Admob code into it.Then in your Sencha Touch application js file add the iFrame code where-ever you think it will sit best. My panel looks like this:

            var content = new Ext.Panel({
                fullscreen: true,
                id: 'content',
                scroll: 'vertical',
                dockedItems: [{
                    id: 'status',
                    xtype: 'toolbar',
                    dock: 'top',
                    title: "My Web Performance"
                	},
    				actionPanel,
    				{
    					title: 'The Latest',
    					html: '<iframe src =\"adverts.html" width=\"100%\" height=\"48\" frameBorder=\"0\" scrolling=\"no\"></iframe>',
    					id: 'feedTab',
    					border: false,
    					dock: 'bottom',
    				}
    			]
            });


  3. Phonegap
    There’s really nothing out of the ordinary to do here – follow the usual steps and you should be laughing!

Enjoy!

 

Enhanced by Zemanta

Tags: , , , , , , ,

11 Comments

SEO : the biggest con of the 21st Century?

It seems like an age now since Eoghan McCabe of Contrast wrote his controversial “SEO is Bullshit” blog article back in 2008. That article was followed up a few weeks late with an article titled “SEO is Still Bullshit” which included discussions and comments from some of Ireland’s most respected SEO experts.

At the time, Eoghan’s article and subsequent comments irked me quite a lot. He, like every other SEO sceptic totally ignored the value and definite “need” element of SEO and focused purely on the usability issues that were generated by poor techniques used by most SEOs in order to get websites ranked in the Google search results.

In hindsight and after many more years in this business, seeing the rise (and fall) of (too) many so called SEO expert individuals and companies; I’ve finally woken up to the fact that SEO is in fact total bullshit.

Yes that may sound quite alarming coming from someone who has sold the importance of Search Engine Optimisation for over a decade. But the simple fact is that SEO has probably one of the biggest cons of the 21st Century.

I say this with complete sincerity and assure you that this is definitely not an article designed to create linkbait as was suggested at Eoghan’s reasons for his original article.

Let’s look at the very basic facts surrounding SEO.

  1. Ranking a website is easy!
    Yes believe it or not it’s quite easy to get your website ranked on Google or any other search engine. Granted, the more competitive the key phrase wish to rank for, the harder it is to rank.

  2. Google wants to find Good websites with relevant content
    A very simple fact of the matter is that Google wants to rank websites that are relevant to the search being performed. Searching on Google would be a waste of time if the sites it ranked in the top results were not relevant to what you were searching for. A simple rule of thumb is to build a website that a user likes to visit and is easy for a search engine to find relevant content. That’s not rocket science is it?

  3. SEO is not Rocket Science
    I’m sure you’ve been there before, discussing search engine optimisation with a so called expert and he/she talks in riddles and makes SEO seem extremely complex. Well it’s not – there can be quite a lot to it if you are targeting a competitive key phrase, but in most cases it’s pretty straight forward.

  4. SEO only drives traffic!
    One major misconception I come across with people who know a little about SEO is that they sell SEO as a way to drive business through your company. Well the fact is that all is SEO does is drive traffic. Of course with more traffic, it should in turn produce more sales – putting more effort into focusing on building a website site that will convert as many visitors to your website as possible will in the long run be more useful than having a website that only a search engine can understand.

  5. SEO does not Educate!
    A lot of SEO’s sell SEO as the holy grail in terms of marketing your business. The fact is that SEO only targets people who already know about a service or product you provide. If you have a brand new concept or product that n0-one knows about – SEO will not help you get in front of the people that are likely to buy your product or service.

  6. SEO is just Good Web Design
    Every website we build now includes FREE on-site search engine optimisation – we just call it building search engine friendly websites. A lot of SEOs like to class themselves as elite God like beings that are more important than Web Designers themselves. But they’re not and the reality is that you should be thinking about making your website search engine friendly from the time you start building your website. I used to be shocked at how little HTML knowledge a lot of SEO experts actually have. Iif you don’t understand how a website is built under-the-hood, how the hell can you really understand SEO??

  7. SEO Forums / Blogs aren’t always right and are often taken out of context!
    One of my pet hates is discussing SEO with someone who has read up a little about SEO and automatically assumes that the information they have read is the Bible truth. If you happen to be reading an SEO article online, please check the date the article was published. Chances are the information you have is incorrect or well out of date.Also, please ensure you are taking everything in context and not just jumping at conclusions without testing. SEO is all about trial and error – NEVER assume anything!!

    For a classic example of how unconfirmed theories send shockwaves through a whole industry, read this article – a prime example of an out there theory… http://econsultancy.com/uk/blog/7594-is-email-reputation-now-a-google-ranking-factor

  8. Matt Cutts is not an SEO
    Yes I’m sorry Matt lovers, but have you ever seen any websites that Matt himself has personally performed a search engine optimisation job on? Well I haven’t, but that doesn’t mean he hasn’t of course! 

    Yes, one thing he has got over us all is that he has inside information. How much is questionable as he rarely seems to throw out anything more than the obvious.

    He’s constantly being taken out of context, with a lot of people taking what he says as “fact”, without reading into the actual meaning of his comments in the overall picture of things.

SEO? The bottom is that anyone can can do it. That sole reason is why we now have a market saturated with SEOs that claim to be God’s gift to Number 1 rankings on Google.

The SEO industry has become one that preys on vulnerable companies who will never truly understood how the web nor search engines work, but believe the hype that is discussed at length at nearly every business seminar across the country.

There’s no doubt SEO is important, but its value in most cases has been greatly over exaggerated. For any website to be a success, you must create a search engine friendly website at the very least – whether you should go further depends very much on the competition in your field.

SEO is in the gutter as far as I’m concerned – from the companies that offer you “guaranteed No. 1 spots on Google” to companies who offer “link building services” from websites with little or no value. And of course we have the SEOs who think 301 redirects are the solution to all your problems, it just gets more ridiculous as time passes.

Maybe Eoghan saw all this long before the rest of us, one things for sure… he certainly seen it before me.

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

13 Comments

Google Keyword Tool goes mobile

Google announced last month that over the past two years, mobile searches have grown five-fold. An even better indication of growth in the use of mobile devices for searching is that in the third quarter of 2010, mobile searches jumped again by another 130%. This is a clear indication of the massive and rapid growth of the mobile internet.

I have in the past discussed how I feel it’s time to get your website mobile to make it easier for users to use your website, but more importantly, it’s probably time to start optimising your website to be found in searches by mobile device users.

Google are already a few steps ahead of us all and have added a new key feature to their much loved Google Keyword Tool. You can now use the Google Keyword Tool to build keyword lists for targeting mobile users. As part of the new feature the have given the ability to search for keywords searched for by “mobile WAP browsers” and “Mobile devices with Full Internet Browsers” or of course, just any mobile device at all.

Google Keyword Tool Mobile Search Options

Without doing proper analysis, I can’t tell you for sure if there are many differences in how people search by mobile device compared to a PC. I’d assume there are some significant differences and plan to do some proper research over the coming days.

One things for sure, it’s time to take mobile seriously….

Tags: , , , ,

2 Comments