Archive for the 'Web Development' Category

When to use AJAX… and when not to!

A client recently approached us with the plan to render most of their website in AJAX (otherwise known as Asynchronous JavaScript and XML), a web development technique used in online forms and other interactive web apps.

For Responsive Webpages and Forms

AJAX is designed to make web pages more responsive - it allows for a page to be ’seamlessly’ refreshed with new data without requiring a reload and effecting the look and speed of the interaction. It’s fantastic in application forms where instant feedback or additional details may be required.

AJAX - Handle with Care!

But AJAX should be used with care. It can have a negative impact on a site’s search engine optimisation (SEO) and can prove problematic for disabled users. So here’s a quick breakdown of what AJAX is good at and what it’s not so good at…

What AJAX is good at:

  • Delivering small blocks of content - for small quick changes it works well.
  • Reducing the number of steps in a process - it’s great for forms with options (like application forms).
  • Delivering instant feedback such as validation of form fields and quick feedback on from submissions.

AJAX is not very good at:

  • Making content visible to search engines and any device that is not JavaScript enabled.
  • Bookmarking - once you’re some way down an application process in an AJAX rendered environment, you cannot bookmark individual steps like you could if each stage of the app is delivered in standard HTML.
  • Providing content for disabled users - the blind and vision-impaired are not able to access AJAX rendered content (and can have legal ramifications as in this example with Target in the United States and with the Sydney Olympics Website).
  • Providing speed benefits to users with slower machines as it puts the processing onus onto the user’s machine.
  • SEO: a typical implementation of AJAX is invisible to search engines. As you can replicate AJAX functionality with HTML, you’re better off using the latter for web content if you’re concerned about ranking on search engines.

To see an example of AJAX functionality, play around with the flight booking engine on Bezurk.com

Top 5 tips for developing for SEO

Making a website that ranks well with the search engines is a process that has to start from the foundations of the site. Stuffing a badly designed and built site full of keywords isn’t going to help, and is a waste of money.

There are numerous ways to make a website more accessible to search engines, and each has additional, tangible benefits to the website owners and visitors.

Presented below are my top 5 tips for developing a website to help make it an SEO success.

Design for search engines, enhance for humans

Search engines are very much like blind humans in the way they ’see’ a website. They read the page in the way the source is ordered, they do not see images, they have to make a ‘mental’ representation of the page by using semantic clues built into the page by the developer, and use that representation to make sense of the relationship between possibly disjointed blocks of information.

First step then is to design your page with no style, formatting, or other behavioural enhancement. A clean, semantic, well ordered page of data should be the goal. Once the textual content of the page has been laid out, you can start adding styles, images, and behaviours that will give the page visual appeal.

Lighten the code

Search engines have limits to the amount of data on a page they will index, depending on the size of the page. Using excessive amounts of code to display your content is therefore going to have an effect on what the search engines will do with your page. The goal then is to develop your page using the least amount of markup possible to achieve the required visual appearance. Using semantic markup certainly goes a long way to helping with this goal, and the natural added benefit is that your pages are lighter, meaning faster download times for your visitors, and less bandwidth/storage charges for you.

Images are for pictures, not text

OK, so your marketing department have put together a beautifully crafted piece of collateral, and they want you to replicate it online. No problem - convert the piece to a web optimised image and paste the darned thing, easy.

But remember in item 1 where we identified the search engine as a ‘blind’ visitor. He can’t see the image, and therefore cannot read the beautifully crafted message your marketing department has spilt blood to create. What a waste!

Any textual message should be displayed using text - simple. Everybody then gets the same message, whether fully sighted, sight impaired, or search engine. Once the textual message is available it can be enhanced using a variety of techniques, depending on the final visual requirements.

Images can be text too

What? Didn’t you just say images are pictures. Have you been at the hooch again?

No, there are times when an image is used in your page to support the text. Without the image, the text wouldn’t be complete. In these cases the image element should have an alt attribute applied to it. The alt attribute is used to provide alternative, textual content to the image, and it should describe the image. This alternative text will replace the visual image in cases where the image cannot be displayed or seen.

Don’t be shy, let your content shine

An all too common mistake is to develop your site using methods and technologies that essentially hide the content from search engines.

Simple mistakes like using forms for navigation, Javascript for links, Flash for navigation, or whole sites (unless the Flash has been developed using accessibilty settings). All of these will stop a search engine, and many visitors, from accessing your site. Not what you want after spending possibly thousands of dollars on your shiny new site.

So we loop back to item 1. Make the site for the search engine first, then progressively enhance it for visual users, and indeed visitors with greater processing capability.

Is there anything else?

The above tips are quite generic, but form a really solid base to work from. Any developer worth a fraction of the money you are thinking of spending with them should be developing to these standards. And that word brings me nicely to my conclusion.

Develop to Standards

The beauty of the Internet is that anybody can build a website and get it online. The horror of the Internet is that anybody can build a website and get it online.

Although we are working in a very young industry, there are global Standards that have been developed and put in place to ‘regulate’ the way that web technologies should be used. The big daddy of the web standards world is The World Wide Web Consortium (W3C). The W3C work on developing specifications, guidelines, software and tools for every aspect of online activity, and their published standards are what every developer should be working with. Sure, cousin Joey can knock out a website in a weekend with his laptop in his bedroom, but if you’re serious about making any kind of impact with your site, cousin Joey isn’t the best man for the job.

Hopefully this quick introduction has given you an insight into the foundations of developing for SEO. Please feel free to leave your comments regarding this post below.

If you have any request for future articles you can leave those in the comments as well.

Blasting the Myth of the Fold

A very interesting article from Milissa Tarquini of AOL on how the long held rule of the “fold” is being de-bunked by web analytics and user testing, as well as how this will impact design and development processes based on screen resolution and browser compatibility.