Posts Tagged 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

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

Backend Layout (Grid View) Feature of the New Typo3 4.5 LTS

For anyone who has ever used Typo3 as a CMS, they would be well aware of the limitations associated with the layout of a page (backend layout) in the administration area.

Without hacking or using third party extensions such as TemplaVoila, it was pretty difficult to get anything more than the Left, Normal, Right & Border columns to add content elements to your website. For someone familiar with Typo3, it wasn’t a major problem, but as soon as you put the administration system in front of someone who was about to use it for the first time, it created nothing but confusion.

With the release of Typo3 4.5, Typo3 developers now have the ability to make a more user friendly admin page for content editors through their new core feature Grid View (Backend Layout).

With ease, we can now give the Typo3 user a more user friendly and intuitive admin page just by creating a few simple backend layout views that only helps people make a better association with the websites design.

I found it very hard to find any decent information online about how to implement the Backend Layout feature, so I’ve decided to put together this little tutorial on how you can get started.

Step 1 : Create Backend Layout
The first thing you need to do is create a system folder to store your backend layout templates.

Once you’ve created the new system folder, choose List (on LHS) > the System Folder > Click the “Create Record” button at the top of the RHS page. Then from there, you should choose “Backend Layout”.

On the next screen that loads, enter your Title (used to easily identify the layout) and click the Grid Wizard icon (pencil and notepad) beside the Config field. It is also a good idea to associate a simple graphical icon to help you identify the layout visually.

 

The Grid Wizard allows you to design a layout, in our simple example we use a Top Left, Top Right and Bottom style layout.

 

One thing to note here is that you MUST enter a Name and Column number for each column of the layout grid. If you don’t do this, you will get a “not assigned” error in the admin page.

The Grid View wizard creates the config code required to make it all work!

E.g.

backend_layout {
colCount = 2
rowCount = 2
rows {
1 {
columns {
1 {
name = TopLeft
colPos = 1
}
2 {
name = TopRight
colPos = 2
}
}
}
2 {
columns {
1 {
name = Bottom
colspan = 2
colPos = 3
}
}
}
}
}

Once you are happy with your layout, you can now begin to apply the layout to the backend page.

 

Step 2 : Apply Layout to Backend Page
This step is very simple, all you need to do is access the page properties of the page you would like the Backend Layout applied to. Choose the “Options” tab and at the bottom of this page, you should see the icons (if you’ve applied one to the layout) of the layout options you have available. If not, you can simply choose your layout from the drop down menu.

 

Step 3 : Apply to Front End Template
Nothing hugely changes much from a front end perspective. We all have our own ways of doing this I’m sure. But here’s a simple example of what we would do:

Layout.html File

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>

<html>
<head>
<title>Untitled</title>
</head>

<body>

<!– ###DOCUMENT_BODY### –>
<div id=”topLeft”>
<!– ###TOPLEFT### –>
TOPLEFT of page
<!– ###TOPLEFT### –>
</div>
<div id=”topRight”>
<!– ###TOPRIGHT### –>
TOPRIGHT of page
<!– ###TOPRIGHT### –>
</div>

<div id=”bottom”>
<!– ###BOTTOM### –>
BOTTOM of page
<!– ###BOTTOM### –>
</div>

<!– ###DOCUMENT_BODY### –>

</body>
</html>

 

TypoScript Set Up
page = PAGE
page.typeNum = 0

page.10 = TEMPLATE
page.10.template = FILE
page.10.template.file = fileadmin/layout.html

page.10 {
workOnSubpart = DOCUMENT_BODY
subparts.TOPLEFT< styles.content.get
subparts.TOPLEFT.select.where = colPos = 1

subparts.TOPRIGHT< styles.content.get
subparts.TOPRIGHT.select.where = colPos = 2

subparts.BOTTOM < styles.content.get
subparts.BOTTOM.select.where = colPos = 3

}

One final thing to do is make sure that you have included the CSS Styled Content in your statics!

That should be enough to get you started with this great new feature! Enjoy!!

Tags: , , , , , , , ,

9 Comments

Was 2010 the year for eCommerce? Will Irish retailers begin to smell the coffee?

Supermarket check out, London January 2005 Aut...
Image via Wikipedia

Over the Christmas you probably noticed a lot of retailers out on various news reports complaining about poor sales (as they like to at Christmas) and in most cases with great reason too. I personally still find it hard to believe how many of the retail outlets in Ireland are still in business. The double blow of the recession and the god awful snow that engulfed Ireland and the UK for nearly 3 weeks certainly didn’t do anything to help their falling sales. But, for many reasons, I just can’t bring myself to feeling 100% sorry for these retailers.

It’s not that I am a cynical and bitterly twisted man that makes me feel this way. And I am certainly not a hardcore socialist who would sticks two fingers up at all retailers and say “ha, you should have treated your staff better!”. No, I’m just someone who has worked in the Internet for over 10 years now and have seen so many Irish retailers ignore the great benefits a properly prepared online web strategy.

“Fail to prepare, prepare to fail” is the phrase mentioned by one Irish great that sticks out in my mind when I think of how Irish retailers have ignored such a valuable resource to their business.

In the UK, it’s been reported that 44% of their population upped their online spend this Christmas compared to 2009. The total amount spent online in the UK was £2.8bn !! Another interesting fact is that 86% of UK consumers logged on to the Internet on Christmas and St. Stephens day a 10% increase on the previous year. 62% of those consumers shopped for sale items over those two days!

John Lewis say that their online sales in the 5 weeks to January the first accounted for £500m. And I guess it’s no surprise that the leading retailers online (after Amazon & eBay) were Argos, Next and M&S.

When you see figures like this, it amazes me to think that Irish retail businesses still don’t take their online business serious enough.

Let’s take a list of Irish retailers and see how they compare with their UK counterparts…

Harvey Normanwww.harveynorman.ie
Although it appears to be sitting on an eCommerce system, namingly Magento – there is no option to buy online. Maybe they need the footfall to generate some cross sells – but there are other ways of getting people into the store – and not many people were venturing out in the snow! They don’t seem to have a UK site (if they are even there!)

Curryswww.currys.ie
Much the same as Harvey Norman – display lots of products, but don’t allow you to buy (from what I can see). You can buy online from their websites in the UK.

River Islandwww.riverisland.com
River Island have a nice website and you can purchase online – albeit in sterling and not 100% sure if you can get it delivered to Ireland (or pick up in store!)

Boots www.boots.ie
I don’t know about you, but if I could have bought items online through the Boots website I would have! Anyone who has ever tried to buy perfume through somewhere like Amazon knows that they simply won’t deliver to you. A golden opportunity for someone like Boots to make a few quid online. And can you imagine those great 3 for 2 offers… oh I wish… of course, you can do this online if you live in the UK.

Dunnes Storeswww.dunnesstores.ie
A great Irish brand with, it must be said, a visually appealing website – but no you can’t buy online. A place I would have definitely bought online over the Christmas period as I desperately searched for 2 turkeys for Christmas Dinners!!

I could easily go on and on but I won’t…

There are of course some exceptions to what appears to be the rule. You will find some retailers with decent enough websites, but by on large they just don’t exist.

As usual, it tends to be the smaller, lesser known retailers that appear to take their online presence more serious in Ireland – but even those are far and few between. When we have a country next door to us spending nearly £3bn online at Christmas it seems ridiculous that there aren’t more retailers taking a serious look at trying to grab a piece of this with a proper online marketing strategy.

The Celtic Tiger as we know was really good for Ireland, but the current lack of interest in making a serious online effort to generate business is an indication of how well we actually had it. “Ah sure I don’t need to sell to online, sure there’s plenty of business already….”

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

2 Comments

Online Marketing has gone to the dogs

It’s been nearly 8 years now since I started online marketing company 2bscene. At the time, there weren’t many dedicated online marketing companies around. Most companies offering online marketing services were either web design or advertising agencies trying to cash in on what was clearly going to be a massive growth area of business.

Search Engine Optimisation was still pretty much in it’s infancy and I had built up 4 years experience of search engine optimisation of websites before I started 2bscene. God, in those days it was a hell of a lot easier to rank than it is today.

Of course, Google Adwords wasn’t around then, so there were fewer online marketing opportunities. We did have a number of online advertising options, but they were limited generally to banner advertisements and advertorials.

There was nothing as popular, nor as effective as Google Adwords is today. Banner advertisements were beginning their steep decline in click through rates and search engine optimisation was hardly heard of.

In fact organic search engine optimisation was the only real option for many businesses to get found online, yet little knew about this little secret never mind recognise it’s potential.

I have to admit, I didn’t come from a marketing background when I started 2bscene. I naively opted to study music and live my dream rather than contemplate choosing a college course that would enhance my career! However marketing was something that always interested me greatly.

I had gained significant marketing experience (and interest) in the companies I had worked with before setting up 2bscene and felt I could effectively build and grow a company selling online marketing services. Online marketing was a new and exciting way for businesses to promote their brand and there were very few companies offering the service in Ireland. Therefore the only thing I could be judged on was the results I achieved.

Fast forward 8 years and oh how the landscape has changed.

I had many reasons for setting 2bscene up as a solely online marketing services company. One of the main reasons was to distinguish my business from other web design companies.

At the time web design companies were popping up all over the place, everyone you talked to knew someone who was a web designer. Of course, you could still only count the good ones on one hand, but the surge in growth of these cheap and nasty web design companies was rapidly helping to deteriorate the web design market. From students working from their parents bedroom to the fly by night web designers who have disappeared off the face of earth, they all did little to enhance the reputation of a “web designer”. In fact, they did the complete opposite.

I get it all the time from new clients “we had a falling out with our web designer” or “we can’t get in touch with our web designer”. The perception of a web designer followed through in many advertising campaigns with the likes of IBM featuring web designers off snowboarding while their was a disaster taking place at the office. Web designers became a breed of people who could simply not be trusted to be there in a time of need.

The student type web designer brought web design to a level where a lot of people expect web designers to work for free or next to free. In their naive approach to business, they’d undertake to do a job only to realise they would bore with the client and their requests quite rapidly. In some cases, they thought the best solution was to do a huge amount of work for free in order to get the client off their backs. And of course, there were those who simply said the job is too big for me and disappeared, never to be contacted again.

Now the same thing seems to be happening with the online marketing industry. In fact, everyone wants to be or claims to be a search engine optimisation expert nowadays. I’ve never in my life encountered so many people in any other industry I’ve worked in, that claim to know more than the expert they have hired to do the job for them.

A times it can be a major struggle to have a reasonable discussion with a client/potential client about how best to market their website. There are a lot who feel that they are near experts in search engine optimisation because they have done “a lot” of research on the subject. A little knowledge is probably the most disruptive of all.

It doesn’t help much when businesses like “Snap Printing” decide that they are all of a sudden web marketing and web design experts because they now offer these services to clients. Pretty much all of our clients have been approached by UK online marketing companies offering to get their site listed at the top of Google for €x per month which is clearly a total scam. Yet, clients still question and compare the work we do, to what these shower offer.

Look let’s face it, search engine optimisation is not rocket science and is not hugely difficult when you know what to do. Anyone who has done even the most basic research on search engine optimisation could possibly rank a site for a non competitive keyphrase, that’s fact. But there is one key skill to search engine optimisation that I feel is the most important strength and that is… experience. Because search engine optimisation is changing all the time, having the experience to notice the changes that have occurred and why makes the job a whole lot easier.

Google Adwords and other pay per click solutions are similar. Pretty much anyone can get an account set up and get your site listed in the top results, but the value add from a professional comes in when they help you get the most bang for your buck. Experience is what makes the pros stand out from the rest.

I find it incredibly sad that the industry has come to this as I feel like the bubble is about to burst on the whole industry. In the past, there was a massive burst bubble for the web design industry. Web designers admittedly charged well over the odds for a simple website that never had a chance of generating a return on the investment. This led to many businesses believing that having a website was not a worthy investment for their business and opted not to have one at all. Web designers in the past year saw a massive rush by the companies without websites finally realising that the web was the way to go, but again a lot opted for the cheap option rather than choosing a true professional to do the work.

When I look around at the new so called experts that are leading the industry today, I find it hard to see any real quality. It seems to be the same old faces who you can rely on and trust. The problem with that is that a lot of these are too busy to handle the smaller clients and therefore the smaller online marketing companies are picking up the pieces and doing a pretty woeful job.

A recession is no better time to weed out the poor companies, but I just hope it doesn’t take too long for these guys to get found out!

Related articles

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

4 Comments