Sometimes you get emails from customers that just make you go "Awww...shucks..I'm just doing my job!" - not to say they aren't appreciated - completely opposite - but I'm not very good at taking compliments - never have been.

David Deane-Spread - ex Military Special Ops performance specialist and now Founder of Executive Leadership company Metattude - sent me this short but sweet email last week when we launched his new WordPress website - its not often we toot our own horn but hope our readers will forgive us this one...

"Hi Bianca,

Just letting you know that I'm delighted with the work you've done and the service you've given in getting the Metattude site upgraded...

Your work is brilliant and I'll always recommend you as the go-to person for web design and related work.

Your service is a wonderful role model for anyone in business.

Best wishes and kind regards,

David Deane-Spread ι founder ι chief education officer"

Check out the new Metattude website and if you are a leader looking to optimise your corporate performance, David comes highly recommended. We'll be posting a case study on Mettatude within the next few weeks as well (Thanks David!).

You can add basic SEO (Search Engine Optimization) to your home page with a little effort. That way whatever Google does with their algorithms, your site will be SEOd. It takes just a little awareness of content, keywords and meta tags.

Keywords are how people search for you. For example, if you're a photographer in Sydney, photographer in Sydney is a keyword. A prospect will search using that phrase. Create key-phrases with a tail and keep them local. Eight keywords are all you'll need. Keep them closely related to your business. If you run an auto repair shop, avoid using Central Coast Mariners as a keyword just because it's searched for a lot.

Meta Tags are viewed by search engines but they do not appear on your website. There are two:

• Title (60 to 70 characters)
• Description (150 to 200 characters)

For title, ask your website person to use Photographer in Sydney for example. Use common search terms up to the number of characters.

The description is a sentence on what you do, its benefit and call to action. It might read: Call Kim's Photography, an exceptional photographer in Sydney, for the best pictures in Sydney. (Note, there are three keywords in this one sentence.)

Blend your keywords, the meta title and description tags into the content on the home page. Place the keywords in the beginning, middle and end of the page. The description can go at the beginning of the page. However, all of the content needs to be written with a natural flow.

This week we've been working on a project to optimise the W3C standards validation of one of our customer's websites and I thought it would be a good time to write a post with some tips and tricks on how a company might approach this same task.

What are W3C standards?

The World Wide Web Consortium (W3C) is an international organisation that develops (through extensive industry consultation and involvement) and manages web based standards that are aimed at improving website development and website design.

Within their saddle bag, W3C have a range of standards classified into:

• Web design and applications
• Web architecture
• Semantic web
• XML technology
• Web of services
• Browser and authoring tools

Typical organisations that are interested in ensuring their website conforms to W3C standards include government agencies, medium to enterprise businesses and organisations with strong standards and ethics policies. Of course this isn't to say other organisations don't implement these standards - just that these groups are the more likely to.

W3C Markup & CSS Standards

To help organisations conform to the standards, W3C have a number of free validators to check your website including:

• Markup Validator - checks for issues with the way the HTML (etc) has been coded
• Feed Validator - checks to ensure your RSS feed has the correct syntax so it can be understood by feed readers
• Mobile checker - checks for mobile 'friendliness' of a website
• Link checker - checks your website for broken links
• CSS validator - checks the CSS (styling code)

The two key ones we'll focus on in this post is the Markup and CSS (and we'll follow up this post with a discussion on accessibility standards).

When you start assessing the validity of Markup and CSS standards the key issue is assessing all the pages on your site and understanding which changes affect which pages (so you can subsequently test the fixes).  The tools above let you check a single page at a time - not the best use of a developer's time! Enter the W3C Validator Suite...

Using the W3C Validator Suite

There are a few different tools we've tried in the past to analyse how well a website conforms to the W3C standards however W3C themselves have recently developed a cloud based service called W3C Validator Suite (which is in BETA) so I was keen to try it out and see if it simplified the analysis/change/test process somewhat.

The pricing starts at USD$50 for 250 pages through to USD$190 for up to 5000 pages.  In our case we wanted to run a test across a website with about 2000 pages so we ponied up USD$110 to kick the process off.

After you purchase the appropriate service plan, you're taken to the Jobs page which has automatically commenced the analysis of the website you specified during purchase, as shown below:

When we ran this particular test (for a large 2000 page Joomla website) we started it at 8:45am and the service had finished checking almost all the pages by 9:45am.  However it then took another 4 days before we could access the results!  The reason was the W3C server crashed and started giving out '504 Gateway not found' errors - not great! But I guess it is in BETA so you have to expect an imperfect service at the moment.  However when I contacted the support team they were fairly quick to get back to me (considering time zone differences) and they were nice enough to offer us free credits for use in the future to compensate (thanks!).

When we finally were able to login, the results were well laid out into three core areas: HTML/XHTML Validator, CSS Validator and I18n Checker.  We were most interested in the HTML and CSS results.

At first it might look like there are a huge number of issues to fix, however one key thing you need to remember with content management systems (CMS) is that although the error might appear on every page, it is usually just one file/line that needs to be modified to fix it for all pages. This is obviously one of the 'pros' of using a CMS - if we had to edit 2000 pages it would be a nightmare!

What we also noticed with the tool is that although it certainly tries to group all the same errors together, it doesn't completely succeed - for example:

In the image below you can see the same error reported twice but just with different values - what might be an improvement on the tool is grouping pages into the overarching error (Property -moz-border-radius doesn't exist) and then by value (5px, 4px etc)

However the tool does provide the ability to group errors by resource (e.g. you can see all the errors in the file mydesign.css) or by message (as shown above).  The view 'group by resource' shows you exactly which css element and line numbers need to be edited to fix the issue - nice!

Another feature which would be very handy is the ability to export reports to HTML (for saving locally) and PDF.

Overall though this tool is a great timesaver - time to send my devs the report so they can get stuck into assessing and resolving each one - good luck boys! ;)

Best Practice Tips

I've got three quick tips for anyone else running this type of analysis:

1. Run the validation before you start securing pages to specific users and after you add all the content pages - otherwise the tools won't generally be able to capture all the pages and configurations.
2. The more plugins and extensions you add to a content management system (CMS) the more potential for issues to fix - keep these to a minimum and try to choose those extensions which have been tested for W3C Markup and CSS validation already.  This is pretty difficult with an open source CMS (as the quality of extensions varies extensively!) however what we usually do is build a 'template' site which contains the common extensions and resolve any W3C issues on it, then use it as the basis for future customer websites (so essentially each customer starts with a standards compliant website and we don't have to keep repeating the same fixes over and over again).
3. Some errors or warnings will be specific to a browser vendor or CMS - don't just willy-nilly remove or adjust them without understanding what they might 'fix' for a website to be viewed in a specific browser.

Joomla 3.0.1 is here! With the speed up between releases for Joomla, it seems like just yesterday we got Joomla 2.5!

Any release x.0.0 is a major release bringing in major changes and so is the case with Joomla release 3.0.0. In this post we’ll look into what’s new in version 3.0 and how it will impact website development.

One big change: UI/UX change

UI for User Interface and UX the abbreviation for User Experience. Basically a change in User Interface (UI) is a result of the need for a better User Experience (UX). Joomla version 3.0’s biggest offering is the change in UI. This new UI is based on the Bootstrap HTML/CSS/JS framework from Twitter. (Twitter Bootstrap is a free collection of tools for creating websites and web applications.) The Bootstrap framework is based on the jQuery JavaScript framework. Accordingly, as part of this change, Joomla 3.0 includes jQuery. MooTools will also be included. The reason this is being done is to facilitate developers (Joomla extensions and templates) to work with a standard set of UI widgets from the same set of markup standards. This ensures that templates created are compatible with the extensions being developed for Joomla.

But this also means that HTML markup for the core extensions will also change. Therefore templates written for version 2.5 will have to undergo modifications to work with version 3.0. Sometimes these changes will be minor but alternatively if Bootstrap is backward portable then we could create templates written for version 2.5 to work with version 3.0 on the fly.

As a result the Admin backend, an subsequently the frontend experience, has been completely overhauled making it a more user friendly and streamlined experience for developers and website administrators.

Of course the big benefit of using Twitter Bootstrap means that by default Joomla 3.0 will be mobile friendly!

What else?

Other improvements include better Smart Search (e.g. you start typing into the search box and it suggests matching content for you) and support for PostgreSQL (Joomla 2.5 already supports MySQL and Microsoft SQL).

One big plus in particular is the ability to style a site with 1 CSS file. Currently when you install Joomla 2.5 or below you potentially have a gazillion CSS files - which makes it super flexible but extremely annoying and sometimes time consuming to manage. In Joomla 3.0 this hassle can be removed. We're testing this functionality now by building a Joomla template for version 3.0 from scratch so we'll keep you posted on how realistic this is.

Should I migrate my website to Joomla 3.0?

Some of our customers may be wondering, “Why is Joomla being released at such a rapid rate?”. The answer to that lies in the time-based release cycle agreement adopted by the Joomla group in January 2011. Consequently releases have been steady in coming over the years or should we say months.

In theory we can see this is a benefit for improving the quality of Joomla extensions. Currently there are thousands of developers creating extensions for Joomla and they vary greatly in quality, security and maintenance. So with more frequent releases, the developers that create an extension and then never update it will quickly fall into obscurity creating a higher quality, better maintained set of available Joomla extensions.

Currently most of your extensions and templates may not be Joomla 3.0 compatible. This is also the reason why Joomla releases what is called as the LTS (Long Term Support) version. Version 1.5 - still being used by several thousand websites - was first released in January 2008 and was supported till March 2012.

An LTS version is supported till three months after the next LTS version is released. In the case of version 1.5 it was supported till March 2012. As the next LTS version, 2.5 was released in January 2012. The next LTS version, after 2.5, i.e. 3.5 is due for release in September 2013.

If you are on Joomla 1.5, 1.6 or 1.7 we would recommend it is time to start planning your move so you don't end up with an insecure platform that no longer has security patches and updated extensions. If you are on Joomla 2.5 - relax for now and get all the benefit you can out of your current deployment. A great UI and improved mobile support aren't generally good enough reasons to move to the latest version given the costs of migrating/testing/implementing but a lack of security patches and support is!

In our previous two posts (Part 1 and Part 2) we introduced you to HTML5 and its capabilities. In this post and subsequent ones, we'll look into some examples of useful and good HTML5 applications and websites. You'll be surprised at what we found. Here are our picks from the cream of the crop.

The Wilderness Downtown

This website has to be visited to be seen and experienced. So surreal is this website that we can also call it the best HTML5 site we have seen so far. Please! Please! Do visit this site. Move your mouse cursor across the image and you will be immensely surprised you did. Enter an address in the address field, click Search and wait for the magic to happen. Proudly mentioned on the home page that this is done in HTML5, this is the work of people behind Google Chrome and so this website should be opened in your Google Chrome browser.

Digital Hands

There is a beautiful use of HTML5, Javascript, CSS and digital photography on this very creative site. Just point your mouse on the image and move to feel the truly amazing 3D like depth and movement on the image. Digitalhands are a company based out of Turkey.

Web Typography for the Lonely

Another WOW website that demonstrates how creative you can get with HTML5, Javascript, and SVG (Scalar vector graphics). Each template is showcased in the marquee and moving your mouse on each image (briefly explained using what technologies were involved for each one) will delight your visual senses in what each image can do, particularly the images shown above for the SADNESS template. One of the templates, COOLINATE was purely a HTML5 Canvas based one. At the bottom of the page are the various templates. Click a template to view it in another page and obtain details on how each of these templates was built.

Universeries

When we took a look at this site we did just one thing, drop our jaws wide! The beautiful site is a work of art. Using the data visualization capabilities of HTML5 the makers of this site have created a reference site about television producers and shows that is not only visually so appealing but also a comprehensive online library of shows, actors and genres grouped and classified very well. We couldn't believe how static information can be presented in such an interesting manner. Honestly, if you love TV and would like to find out more about your favorite shows there is no more entertaining way to do so online. Not to forget the beautiful background music. It adds to the surreal beauty of this site.

Toyota Prius Projects

This site demonstrates what an immersive experience a website can deliver, all possible using HTML5. The site, the Toyota Prius project, apart from celebrating the first 10 years that the Prius has been available also allows users to envision what is coming in the next 10 years. The site interactively demonstrates by highlighting changes in the world made over the 10 year time span of the hybrid car.

Golden State of Mino

This site is all about events and happenings in California. Just by scrolling the wheel of your mouse visual effects come into play to display content using the latest in HTML5 technology. The site is purely visual content based and has little textual or printed content. View source reveals http://html5shim.googlecode.com/svn/trunk/html5.js, the HTML5 enabling Javascript, being used. The simplified HTML5 DOCTYPE tag is seen here too.

Mobigeni

This is the website of the Dutch company that builds iPhone, iPad and Web apps with emphasis on usability, design and visual appeal. For the website mobigeni is using a HTML5 template populated via JQuery.

Rome

This is also another project from the Google Chrome team and therefore needs to be viewed in Google Chrome for the full experience. A beautiful site, where users can interact with the video that is playing and even create their own videos. For the first time you will get a feeling of not only being inside the video but also manipulating the video. Extensive use of WebGL has been made. WebGL is a context of the HTML5 canvas element that enables hardware-accelerated 3D graphics in the web browser without a plug-in. In other words, it enables your browser to show some really beautiful visuals all without expensive and other Software.

Android Apps Developer

This company based out of India creates apps for the Android platform. Extensive use of JQuery, Javascript and HTML5 has been made to give the website an artistic and futuristic look showcasing the company's abilities in these fields of technology.

Agent 8 Ball

We not only couldn't help admiring this site but also couldn't help playing this addictive game of billiards, all just using the buttons of your mouse. You position, move and click and you are off with the game. A look into the source code reveals ample usage of Ajax, Javascript, JQuery and CSS not forgetting simplified DOCTYPE of HTMLS5.

From Crayons to Concept

When you are learning design and art what better way to showcase your newly learnt skills than create one such a website. The beautiful website literally replaces an art gallery. Designs and artwork are grouped well and can be easily accessed via filters, all neatly and graphically presented without having to enter any data. View source reveals use of JQuery and Javascript and we think this site has already made its transition into HTML5 pretty well.

After our review of great examples of HTML5 websites in Part 3 (and introducing HTML5 in Part 1 and Part 2) we'll now review some great examples of HTML5 apps.

SCRIBD

Your favorite online book reading site just got better. No more slow pages to read, no more additional downloads of the latest version of Flash or other plugins and add-ons to download as the entire site has been converted using HTML5. Scribd serves millions of free books online and books for a subscription to read online (yes much before Kindle appeared on the scene). However one long complaint was the slow delivery of pages and even more slower was skipping to pages and searching for content. All that has changed now and Scribd explains why they have moved to HTML5. Now you don't even need Flash to view the books (a boon for iPads and iPhones).

Unlike before where you actually needed a reader in your browser to read the pages of a book, this time the web page itself delivers pages without any additional software and use the browser's native functions to zoom in/out, search for content, scroll pages and select text on a page of a book. Another reason why Flash was previously used was due the various fonts it could support. Fonts not supported were converted to images. Heavy images were a problem too. A webpage using HTML5 now need not have any such worries as all those fonts supported by Flash are not supported in HTML5. The same goes for image-heavy pages, and all these universally delivered across mobiles, laptops and desktops.

Sketchpad

Worried that you don't have drawing or image-creator software on your computer? Just visit this site and you're set. With easy to use controls, a plethora of options for color, style, font thickness and more you will realize how addictive this application can get, almost ditching the free MS Paint on your computer for good. Heavy use of HTML5's canvas functionality is evident here, as well as offline storage (a previous feature of HTML5 that has now been moved out of the specification into its own).

Flickr Browser

A beautiful web application that searches and displays flickr photographs, all done using HTML5 technologies.

Hootsuite

If you manage social media you have undoubtedly heard of Hootsuite (or use it yourself). Available for both free and paid versions this is a classic example of how HTML5 has come to stay as a future-ready component of websites and webpages today.

CSS 3.0 Maker

What a handy site for developers and designers. If you want to generate CSS3 code and want test it then look no further than this cool site. The online application created using HTML5 even tells you how compatible the generated code will be on various browsers.

Twimbow

Twimbow is a web application that helps any social media user to engage their network of friends more effectively, by organizing and enriching their conversations online through the extensive use of colors. Colors make it easier for people to interact with their friends, filter groups of users, catch important tweets among the others and distinguish different type of messages. Twinbow uses HTML5, JQuery, CSS3, PHP and the node.js Javascript file for managing live connections. A blackberry version is in the offering.

Citicles

Our last example is an experimental site using HTML5. Citicles collects basic information about a city and displays it in a simple circle design. Each circle represents one of the city's population, temperature, time, elevation, latitude and longitude as displayed in the legend. Nice!

In our second post about HTML5, we'll cover how HTML 5 HTML5 is used for mobile application development and how it compares in terms of features and capability with native applications for mobile devices such as iOS apps.

HTML 5 comes with handy tags and attributes that will help one design webpages for the mobile market with ease and comfort. Following are some common ones for mobile use...

Typically when you view a website designed for a desktop computer on a mobile phone, the mobile phone's screen the site would be zoomed out and it would appear very small and one would have to zoom in to view the details. HTML5 conveniently offers the viewport attribute that can conveniently size the screen for you automatically for the mobile device.

A typical usage would be as follows:

In the above example the webpage is automatically adjusted to the size of the device's screen. The user-scalable = no option ensures that zooming is disabled. This helps if the user were to accidentally zoom out and distort the User Interface. However it is can sometimes be advised against using this zoom disabling feature as the zoom function is a very useful one.

HTML5 provides better caching facilities to help viewers view websites where Internet connections are poor or where connections have dropped off. This is made possible using the manifest and CACHE MANIFEST attributes. This is very useful in mobile environments.

Typical syntax:

As an example, the files that should be cached starting with the CACHE MANIFEST are:

And these are the files that will be available offline. The trick is to tell the server not to cache the cache manifest so that the most recent copy is downloaded and to use JQuery templates to build pages dynamically. For this the JQuery template plugin is also required. These may tend to look technical but system administrators and techies should be able to understand and fix these easily. Basically one defines a template, then the collection is defined and finally tell JQuery to populate the page with the template.

The other notable feature is enhancing client-side storage and the associated plugin for enabling this feature is the JQuery-Offline plugin. These are just few of the most important features that are good for development of webpages for the mobile apps, referring to apps for the iOS and the Android.

Another important functionality of HTML5 (not exactly another functionality but a separate specification) is the geolocation API using which one can develop apps that provide details about addresses, maps, latitude, longitude etc.,

As mentioned in the previous section the other features of HTML5 very suited for app development on the iOS and the Android platforms are the Canvas drawing, audio and video streaming support, advanced forms support, web storage, CSS3 and 2D animation.

Numerable apps are being created using HTML5 for the iOS and Android. Some of the best iOS apps include the following:

• CANVAS – A simple drawing board that automatically adjusts to the size of one's drawing. It is great to jot down an idea, make quick sketches and can be saved as images too.
• Geo Meter – Provides information about latitude, longitude, speed, altitude etc.,
• Google Voice – Known as the app to have disrupted the Google-Apple friendship this is a must have app on both the iOS and Google with loads of features used in Telephony.
• Google Latitude – Locate friends on a map and how far they are from one another, publish one's location or set up alerts, integrate with Google Talk and more.
• OpenAppMarket - A marketplace for mobile HTML5 web apps. The service lets a user subscribe to free and paid HTML5 web apps. Point one's mobile browser to OpenAppMkt.com and add it to the home screen to start browsing & using mobile web apps.
• Checklist – An easy to use HTML5 web app for creating quick to dos or shopping lists, keeps a running total of all items and tells how many are remaining as one checks them off one by one, can also email lists of remaining items to others
• YouTube – iOS and Android version of the popular video sharing site.
• Color Mail – create great e-mail templates for the iOS mail app
• ParkingAssistant – Displaying all the vacant parking slots to park vehicles
• PocketMarket – Keep track of all the prices of the latest commodities,

SAP, the ERP giant has also announced HTML5 versions of its SAP store for iPads. As of this writing more and more iOS apps are being created using HTML5.

Stay tuned for part 3 of this series where we cover some great examples of websites and applications that use HTML5 right now.

Alright - here goes another series of blog posts - this time on HTML 5. We're going to try to explain it in plain english but sometimes we just have to veer off into geek-land with more in depth explanations that you - if you're not code-inclined - can pass off to your resident geek (or ask us to explain further!)

First up - a bit 'o background: HTML5 is a markup language for structuring and presenting content for the big triple W. HTML is basically a core technology of the Internet beginning with release version 2.0 and currently in version 4.01. HTML5 is the fifth revision of the HTML standard with the oldest version created in 1990 and standardized as HTML4 as of 1997. HTML5 is the still under development and will also replace XHTML1 and DOM Level 2 HTML (two more geeky standards). In this post we'll look at what's new in HTML5 and the pros and cons of using HTML5 to create websites and webpages.

Why do we need HTML5? Why not XHTML 2.0?

First of all let us understand that HTML5 is not a complete re-invention of the wheel replacing HTML4 (though the specifications ran into 900 pages, twice that of HTML4) but that it attempts to address several inadequacies of HTML4.

So the question is why not move to the next version of XHTML instead of the next version of HTML. The answer to that lies in the beautiful backward compatibility of HTML5 with HTML 4.0 and previous versions - which is not the case with XHTML.

Also earlier specifications i.e. those written for HTML4 and earlier versions were vague about badly written code. Error handling was not given proper priority and previous specifications left error handling to user agents (the browser you use). XHTML 2.0 tried to address this by using a draconian error handling method. The result was devastating. XHTML would stop rendering a page as soon as an error was detected. So realistically not a good solution!

HTML5 on the other hand has detailed algorithms to parse valid syntax (i.e. the structure of a piece of code that tells your website how to run) and how errors should be handled and become a more capable, mobile and web authoring tool.

So what's new in HTML5?

Support for the latest multimedia – The new tags help play video and audio without resorting to third party players or flash. Why is this good? Because the more third party plugins in a website the more stuff you have to update seperate to your core website and the more testing needs to be done (= $$$).

New semantical elements (i.e. some code that explains better to the search engines what part of the webpage actually does) and attributes, such as

• article
• aside
• figcaption
• figure
• footer
• header
• hgroup
• mark
• nav
• section
• timelike

These tags gives page better structure and meaning, and these are particularly helpful for blogs in particular (as well as other apps).

Built-in api's to assist in building applications ("API" stands for 'Application Programming Interface' which, to put rather simply, is a method of allowing connection with applications for the purpose of extending their capability to your specific requirements).

Local storage to help advanced browsers remember what we type even after the browser is closed (although for developers, note that this is now separate from the HTML5 specifications).

The canvas tag to actually draw on a canvas, using Javscript. Plain english: a picture that can be updated dynamically.

Some other new notable features include:

• A simplified DOCTYPE tag
• The figure tag which when combined with the figurecaption tag semantically associates captions with their image counterparts
• No need of using the type attribute while using Link and Script
• No need to wrap quotations within quotes
• Usage of the contenteditable attribute that lets a user edit the contents of an element
• hgroup attribute to group headings together
• required attribute that validates fields with an input that is mandatory
• Option to preload videos and display controls, sliders etc.,

Currently a lot of Javascript and third party plug-ins are being used by browsers for increased functionality (i.e. make them look ultra modern and give cool interactivity). HTML5 tries to address this by bringing much of this functionality to the browser and thereby reducing the need for third party plugins.

OK - so what are the benefits?

The biggest benefit of HTML5 is its backward compatibility with older HTML systems, the advantage of a now-and-future-ready code for websites and the ability to do away with a lot of third party plugins and add-ons. Many of these add-ons and plugins need to be constantly monitored for compatibility over the years requiring more extensive testing and security patching than a 'native' solution (like those found in HTML5). HTML5 also increases the interactions between Javascript and the browser.

The cons: HTML5 is only classed as "in development" so not all browsers are using HTML5 in its entirety (in fact many older browsers won't support most of its new features). For instance all browsers do not support the various audio formats and using the audio tag will only throw up a red flag if one were to use incompatible audio formats. So acceptability and adaptability are the major noticeable cons so this needs to be taken into consideration when planning a new website based on HTML5 - i.e. who do you want to support?

Stay tuned for the next post where we discuss HTML5 for mobile development.