HTML5 is currently being developed by the Web Hypertext Application Technology Working Group (WHATWG) for the W3C who recommend the standards for web browsers.   Although the latest versions of Firefox, Safari, Chrome and Opera have started supporting certain elements of the BETA HTML5, it won’t be until 2012 when they have something ready for the W3C to consider for candidate recommendation.

It is also predicted that we will have to wait until 2022 at the earliest until everyone will be using HTML5 as standard. 2022 is long way off! China will have taken over the world by then, Pandas will be extinct,  Venice will be flooded and I will be the ripe old age of 35! Plenty of time for Flash to get it’s act together.

So, how will HTML5 improve the way we view websites? The primary reason for it’s creation is to remove the need for people to constantly have to update plugins like  Adobe Flash, Microsoft Silverlight, and Sun JavaFX. The new <video> and <audio> tags will allow content to be inserted without all the extra laborious code that is required in XHTML to pull outside sources.

This will mean that sites should load faster which will benefit users, and of course is likely to be looked on favourably by search engines.

The aim of HTML5 is to standardise how websites are rendered across all browsers – at the moment without careful testing sites often look vastly different even in the popular browsers.

As a web designer, I am delighted to know that HTML5 is on it’s way – even if it may be quite some time before it’s launched.  I certainly won’t miss the trials and tribulations of getting websites to work in all browsers!

Image credit: Justin Insomnia

If you can’t make it along to our Online Marketing for Profit knowledge session fear not – you can still view the presentation right here

Flash was released in 1996 by Macromedia as an animation tool for the web and was later bought out by Adobe. It was rebranded as an Adobe product in the CS3 generation of software updates. It retains the timeline structure of an animation program, but still uses its own programming language, Actionscript, to power dynamic and interactive content.

Traditional Flash animation sites like Weebls-Stuff.com use vectors which for a long time were the best way you could stream animation to people. That all changed when Adobe introduced the FLV video format. You could then stream high-quality video over the internet much faster that any vector based animation could. Flash FLV powers YouTube and almost every video sharing site on the internet.

Not everyone, however, is a fan of using Flash; even here at Gravytrain we are divided.  Apple has taken the bold move to deny users of any iPad or iPhone the use of Flash. Although iPhone and iPad users can’t see Flash; the devices still allow users to view YouTube videos using the YouTube app.

The main problem with Flash is; even though some of the text in .swf files can be indexed by search engines, not all of it is. Google indexes flash text, but gives preference to text that can be read without the use of Flash.

Most people who use Flash use it to display video, animate a button or show an image gallery.  Apart from video, there are javascript and ajax alternatives that will do those jobs just as well, and make the web page easier to view more in most browsers. Sites like Miniclip.com allow users to play games that are rich, interactive Flash-based experiences; that can’t be replicated any other way.

I personally love the range of rich interactive experiences that you can create in Flash; such as the growing genre of interactive film.  Survive the Outbreak is a typical example of how Flash can be used to give users an experience that they have control over. You watch a film from the perspective of the protagonist, and at the end of each scene you choose the direction the film takes. Through your choices the narrative takes different turns; leading many potential endings. This is a very engaging experience in comparison to the passive experience of watching a film.

I wholeheartedly suggest you consider looking for an alternative every-time you want to use Flash on a webpage. Can you use a gif animation instead of Flash? Can Java be used to make that image gallery? But, if there is an instance where Flash would give you the best choice; such as a killer opening animation, go ahead and use it!

Photoshop CS5: This is the undisputed Daddy of image manipulation, there is no other comparable piece of software that even comes close to it’s functionality. The only area where Photoshop gets competition is via paint effects, where historically, software such as Corel Paintshop have had the edge.  To try and monopolise this area; Adobe have drafted in John Derry – pioneer of digital painting and one of the original authors of Corel Paintshop to develop further Paintshop-like features into Photoshop. The most stand out new addition being; a much more comprehensive list of  brush types.

Another big improvement over CS4 is vastly improved edge detection; allowing for quick and easier masking of complicated images like animal fur.

A feature debuted in the animation package After Effects CS3 that allows you to pin point joints on a flat image, that then can act as pivot points on a character’s movable limbs, has been brought forward into Photoshop CS5.

Two other new features include the ability to auto-fill an area of generic texture, and a feature that helps you manipulate a building structure easier.

Flash CS5: The biggest gripe with the iPhone was it’s lack of support for Flash. The newest version of Flash will allow developers to create Apps for the iPhone by automatically generating the code that the iPhone can recognise. Flash CS5 will also let those who are not completely actionscript savvy to develop with Flash Catalyst in a Photoshop like design interface.

Dreamweaver CS5: Formally created by Macromedia; a company brought out by Adobe a few years ago. Dreamweaver bridges the gap between designer and developer by allowing you to see what the page looks like visually simultaneously as you edit the code view. With CS4; this is not a perfect feature as you can’t see how a PHP or database driven website would look like until you made it live on the internet. No matter what a developer says; they will never get a site looking as good as it possibly could if you can’t see what you are working on looks like. You wouldn’t commission a blind folded artist to paint your portrait.

Dreamweaver CS5 integrates with Adobe BrowserLab, one of Adobe’s Live online services. BrowserLab lets you preview the website that you are working on locally to see how it will look in different browsers.

Illustrator CS5: The biggest new gimmick they are pedalling is the option to draw shapes and scenes in accurate 1-,2-, or 3-point linear perspective to create the look of realistic depth and distance. Knowing that Illustrator is a 2D drawing tool Adobe have always been trying to bridge the gap between 2D and 3D. 3D has been about the only computer design area that Adobe has left untouched and by allowing users to replicate 3D look. The big boys of the 3D industry like CAD and Autodesk won’t be kept up at night as Adobe are yet to let users design truly accurate complicated 3D designs.

Other features include the ability to let you edit the individual pixels of vectors, new manipulable bristle effects on brushes and greater integration with other CS5 software packages.

Overall: Adobe never disappoints us with each new software update and I can safely say I am looking forward to procuring CS5. The greater integration between software packages and quicker rendering of large files will allow me to increase my work flow speed ten-fold.

I just hope Apple will hurry up and announce a newer version of their Mac so I can use all of these great new software packages to their fullest.

1. Validate the Page

The first thing you should always do when you create a new site is put in the DOCTYPE validator into the top of any page. What this does is tells the browser what kind of markup to render the page in. Most newer browsers can guess how to show the site if the Doctype validator is mistyped or non-existent. Although,  those browsers on devices with limited memory like phones  will not display as well without a correct validator.

To get a list of different DOCTYPE validators go to www.w3.org. If you are developing the website in Dreamweaver it will insert the following code automatically every time you start a new blank HTML page.

2. Test it in all Browsers

I make sure to test the site in all the most popular browsers before I make the site go live – just to make sure it displays correctly. Every browser has it’s nuances with how it formats different code types. With all these different browsers come different versions, and the headaches begin! There are many sites like Browsercam.com; that allow you see how your site will look in different browsers on different operating systems.

It’s also useful to know which browser versions people are using. To find the most up to date statistics on browser usage see: www.w3schools.com.

Don’t forget about Flash! When I am creating a new Flash Video FLV file it gives me the option to select which versions of Flash I want the FLV to work in. Having it compatible for older versions of Flash will allow more people to see it but will limit the functions that newer versions can format. For example to make the FLV viewable in full screen mode needs at least version 9.0 to work. Those without that version or newer will not allow that video to be viewed in that mode.

3. Make the corrections

Once you find an offending piece of code you will want to search the Internet for tutorials and forums that will help you solve your problems. You can find useful help on common problems with cross browser compatibility at westciv.com.

The lines are now closed and the votes are in…  Let’s see how the people chose…

Most people chose A.

The official site to complete an ESTA on is D. If you completed a form on D it would of been free and would be guaranteed to be processed. If you completed a form on any of the other three you would of had to pay approximately £30 – £40. These 3 sites are typical of many that are charging people to complete ESTA forms.

Official Sites Versus Unofficial Sites

The results here reflect reports that more people are paying to complete ESTA forms from unofficial sites. It’s important to note that the people who complete the forms and end up paying for them are not stupid. They are victims of well worked campaigns combined with efficient design.  Here are some design related reasons I believe people are paying to complete forms on the unofficial sites rather than for free on the official site:

Colour Schemes/Look & Feel

A lot of the unofficial sites appear have utilised ‘American’ colour schemes (reds and blues), flags and American imagery:

Whereas the official site is prodominently green which most would not immediately associate with America:

It’s possible that some people are electing to use the ‘unofficial’ sites as the appear to have more synergy with the USA, and therefore people think that they look more official.

Calls to Action & Usability
There are clear calls to action on the unofficial sites. Well placed and noticeable buttons labelled:  Click Here, Instant Download, ESTA Form or Continue, help make it easy for the site visitor to complete what they want to do, in this case fill out an ESTA form.

The buttons and links are placed in a combination of places some at the top of the web page, some at the bottom but they all have at least one call to action that appears on screen as soon as the page appears on screen.

However, the official site has no clear call to action; you have to work really hard to discover what you have to do next.  In fact (as illustrated below) you have to scroll about 1600 pixels down the page (i.e. well below the fold – if you consider that the average screen displays 1020 pixels) before you even see the apply button! Ordinarily we’d recommend that calls to action appear both above and below the fold.

It’s possible then that some come to the official site, but lose confidence as it’s not immediately apparent what they need to do.

Assurance and Confidence
Here, both the official and unofficial sites do pretty well. Most of the sites in this example use checklists or step by step examples . Each help to give an impression of transparency and encourage confidence in the site.

Example1:

Example 2:

Conclusion

One of the most important things to learn from this example is the importance of call to action and usability. Although  27% chose the official site based on a snapshot. Had the test been based on visiting the sites it may have been even less, seeing as visitors have to scroll down nearly twice the length of the screen to even find the apply button.

Every site needs a call to action whether it is to fill out a form, generate a phone call or submit a vote. The clearer the call to action is, the better the site will convert.

Similarly, consideration needs to be given to site look and feel. Use of colour and imagery, and theming to meet visitor’s expectations of how a site should look are key.

Suggestions for the Official Site

If I was tasked with redesigning the form on the official site, I’d look specifically at the following areas:

1. The essential difference between the official site and the others is that it is free to complete the ESTA form. Yet this is not mentioned on the the official site . The first thing I would do is alert the visitor that the form is free to complete on this site.
2. I would also address the call to action. I would place an apply now button close to the top of the page with enough white space around it for it to stand out.
3. I would also look to address the design / colour scheme in order to reflect an outsider’s perception of “America”

SEO

If like me, you think link building is the toughest part of any SEO project, you’d do well to read Garrett French’s post via Search Engine Land on how to research, create and distribute highly linkable content.

Still focusing on the link building theme, Shaun Anderson of Hobo-Web talks about reciprocal links, and whether or not they should be avoided.

PPC

Get some great tips from PPC Hero on PPC landing page optimisation - sterling work from Amber there.

Social Media

Over at Econsultancy, Patricio Robles asks does social media lead to better financial results for companies? As he quite rightly points out, correlation is not necessarily causation – essential reading.

Also well worth a look is the A-B-C’s of Social Media - not least because as Dr Pete said, they’ve come up with an ‘x’ which isn’t xylophone

Aaaannnnd Finally, Friday’s Thursday’s Funny

This brilliant picture is from passiveaggressivenotes (click the link to see it in it’s full glory). Hat tip to Rob - genius  

‘Thursday’ image credit adamwilson

What is a redirect?

A redirect is a command which automatically sends visitors to an alternative web page rather than the one they typed into their browser.

Why do you need to use redirects?

From time to time you may need to either delete a page, or change it’s URL. If you just go ahead and do this without a redirect, any visitor to the page will get a 404 which can be bad for users and for SEO (see our really rather good guide to managing broken links and 404’s and  for more information).

Why are they important?

Redirects help users by automatically taking them to an alternative page, or indeed the same page if you’ve simply changed the URL. Likewise, redirect also tells search engines that the page has moved.

Plain English Definitions of those Pesky Numerical Wotsits

What’s the difference between a 301 and a 302? What’s a 404? How’s a 404 differ from a 500? Be confused no longer:

301 – Permanent Redirect: This tells the search engines that the page has moved permanently. Over time authority from the old page will pass to the new version.

302 – Temporary Redirect: This tells the search engine that the page has moved temporarily. As such no authority from the old page will pass to the new version.

404 - Error Page/File Not Found: This tells the search engine that the web page cannot be found

500 – Internal Server Error: This means there is a problem with the code which is affecting the server. This may have been caused by incorrect coding or command set up. 

To 301 or 302… Which Redirect Should I Use?

1. 301 – A permanent redirect should be used if you’ve changed the URL permanently. For SEO purposes it rocks as it helps maintain your natural search listing and indexing by the search engines (NB you might see a drop in rankings initially, but they should recover).
2. 302 – A temporary redirect should be used only in the event that it’s a temporarily URL change. For SEO purposes it sucks as it passes no authority – therefore you might find that your lose rankings.

How do you set up redirects?

1. Open Notepad to create a new document.

2. Insert one of the following commands into notepad with your website URL address.

Temporary redirect
redirect 302 /old-webpage.html http://www.website.co.uk/new-webpage.html

Permanent redirect
redirect 301 /old-webpage.html http://www.website.co.uk/new-webpage.html

3. Save the notepad file as an HTACCESS file. You can do this by saving the file with the name .htaccess.

 4. Make sure to select ‘All files’ in ‘Save as type’.

5. Open your FTP for your website. (Note: You will need to open the file in SFTP to be able to upload your HTACCESS file. You may need to enter a password to be able to log into the server.)

6. Upload the HTACCESS file to the root of your server. This is usually in the www folder on the server.

7. Test the web page to see that it is redirecting. (If the web page redirects from the old address to the new address, then the redirect is working.)

Having problems?

I’m still seeing the same web page even though I have uploaded the htaccess file. Have I done something wrong?

The redirect to the web page is probably incorrect. Check that you have put in the correct web page address. Also check your slashes ‘/’ and the web page language extension – htm, html, php, asp, aspx etc.

I’m receiving a 500 internal server error. What did I do wrong?

There is probably incorrect formatting in the HTACCESS file. Check the file for spacing and typing errors.

Hopefully now you’re good to go, but of course if you do have any queries please let me know via the comments.

Image source: Lumaxart

You need to complete an ESTA (Electronic System for Travel Authorisation) form in order to travel to the States. You don’t know the official site, so you type esta form into your favourite search engine. Below are four screen shots taken from the top sites that appeared on Google for esta form:

A)

A

B)

B

C)

C

D)

D

Now without cheating (i.e. don’t go and find out which is the official site) please select the one you would choose to submit your ESTA:

I’ll publish the results of the survey, reveal which is the official site and examine why choosing the wrong one of these four could prove costly next week…

Therefore we thought that it might be useful to create a ‘how to’ post to act as a guide for those installing and customising Wordpress.

We’d love to hear your thoughts on this post, and if you’ve any other hints and tips to share please let us know via the comments.

Installing Wordpress

There are two ways to install a WordPress blog:

The easiest way, (if  it allows you to) is to install the blog through the control panel for your site. In the control panel click on the fantastico deluxe button, then on the left hand navigation under the title blog, click on the WordPress link, now click the new installation link that will appear on the page and follow the instructions provided on screen.

If you don’t have a control panel that allows you to automatically install a WordPress blog, you can manually install the blog. Instructions for this can be found on http://codex.wordpress.org/Installing_WordPress

Click on Fantastico, then on WordPress

Once WordPress is installed it will appear in a folder on your remote server (where the site is hosted). Download this folder to your computer.

For ease of explanation I have created a rudimentary template which you can view on www.gravytrain.co.uk/blog-test/

Example

Branding your Blog

You can then add your branding to the blog using the following URLs:

Logo:

http://www.gravytrain.co.uk/blog-test/wp-content/themes/default/images/logo.jpg

Banner:

http://www.gravytrain.co.uk/blog-test/wp-content/themes/default/images/banner-image.jpg

Customising a WordPress Blog

The folder containing the files you need to edit can be found using the following path from the blog folder: \your-blog-folder\wp-content\themes\default\

1. Open style.css in a text editor and replace everything on it with the code below.

2. Open header.php in a text editor. Below is the code that should replace the code between the <body> tags.

3. Now in the <header> section delete any styles containing kubrick.jpg or similar eg: #page { background: url(“<?php bloginfo(’stylesheet_directory’); ?>/images/kubrickbgwide.jpg”) repeat-y top; border: none; }.  Take care not to delete anything that isn’t a style as it may break the blog.

4. At this point, if you wish, you can edit the images and styles to suit your site. You will notice that the styles have been written inline. This is for example purposes, so you can and should move inlinestyles to the style sheet when you are happy with the look of the header.

5.Open single.php and add <?php get_sidebar(); ?> above the line containing <?php get_footer(); ?> (this ensures that the side menu appears when viewing a single blog entry which it doesn’t by default.)

6. If you wish you can edit the side menu and footer. Open sidebar.php and footer.php and have a play around. It is advisable to make a back up copy of these files if you are going to experiment.

That’s the look sorted, but there are still some other areas that need to be looked at.

SEO Considerations

For starters when you write blog posts the default URL extensions are not search friendly e.g. /page=2.php

This is unfriendly because it doesn’t display any information relating to the post. Search friendly WordPress URL’s will insert the date as well as the post titles instead. Example: http://www.gravytrain.co.uk/blog/2009/04/09/where-art-meets-web-design/

To check this, open a browser and sign into your blog, click on settings, then on perma links and select the option that gives the following url example: http://www.yoursite.co.uk/blog-test/2009/04/sample-post/

Now the post you write will generate search engine friendly URL’s.

Unfortunately this fix has now created another problem. If you have any previous posts and try clicking on them, you will see that they appear as broken links.

Don’t panic, here’s the fix:

Open or create a .htaccess file and paste the following code, make sure you change the word ‘blog’ if you used a different title for the folder you installed it to.  Type the correct URL where ‘yoursite’ is written:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /blog/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /blog/index.php [L]
</IfModule>
Options +FollowSymlinks
RewriteEngine on
rewritecond %{http_host} ^yoursite.co.uk [nc]
rewriterule ^(.*)$ http://www.yoursite.co.uk/$1 [r=301,nc]

The second part of the code (rewrite) isn’t strictly to do with the blog but it helps with the SEO of your site.

Save and upload the .htaccess file to the root folder.

OK, just one more consideration and we’re there. This consideration is also SEO related. Depending on the installation of  the blog, it will sit on either a http://site.com/blog address or a http://www.site.com/blog address.

Ideally you want the blog to sit on http://www. with rest of the site.  This can be checked by looking at the address bar of  your blog and seeing if there is a ‘www.’ infront of the domain.

This is called canonicalisation – you can read more about the effects of this has here .

To move the blog to a http://www. location you have to open functions.php and paste the following code just after <?php at the top of the page. Again replace ‘yoursite’ with your own domain.

update_option(‘siteurl’,’http://www.yoursite.com/blog/’);
update_option(‘home’,’http://www.yoursite.com/blog/’);

Now upload it. Once you have checked it works delete the lines you just added, save and upload again. I know it sounds a little strange but it is important and the redirect will continue work.

Now you have finished and you can go sup your pint in the pub while basking in the glory of creating a customised blog!