• Client login
  • Work for us

All the latest from the team...

Wednesday, 16 September 2009

multi-Internet Explorer testing... a solution?

we just stumbled across this:
http://www.my-debugbar.com/wiki/IETester/HomePage

And on initial testing it looks like we may finally have a solution for testing in multiple variants of Internet Ignorer!! Yay!!!

Let us know if you spot any issues with it but we're loving it at the moment.

Now to find FireBug for Internet Explorer and we're truly laughing :-)

Labels: , ,

Wednesday, 6 May 2009

Super Preview from Microsoft

Microsoft has finally done a Chris Tarrant and given us all a lifeline with Super Preview... This handy little toy let's you test your webpages in multiple versions of Internet Explorer without all the hacks - and yes it does include IE8... We're testing it now so will update soon with our thoughts.

In the meantime check it out at the Microsoft Expression site and let us know your thoughts!

Labels: , , , , , , ,

Thursday, 9 April 2009

CSS coloured bullets in lists

We've been playing with some CSS and we've commonly used spans to colour bullets… i.e.


<li><span>red</span></li>

<style>
li{
color:black
}
li span{
color:red
}
</style>

Well we’ve come up with a better way all by accident whilst playing with expressions and here it is…

<li>red</li>

<style>
li{
color:black
}
li{
zoom: expression(
this.innerHTML = (typeof this.processed == "undefined" ? "" : "") + this.innerHTML, this.processed = true, this.runtimeStyle.zoom = "1"
);
}

li:before{
content:'• ';
color:red;
}
li span.before{
color:red;
}
</style>

Note that in the li:before the bullet should be a rendered • NOT character encoded.

Expression is for Internet Ignorer (nee Internet Explorer) and :before works for all other browsers.

this.processed is required or Internet Ignorer keeps on rendering them


Enjoy!


PS. Sorry it's been ages since our last post - but we've been very very busy people!!

Labels: , , , , ,

Monday, 23 February 2009

Connecting with the Flickr API through PHP

Here at Code Required we've been playing with a lot of the Social networking apps over the months... Years and have started to think about the potential of putting them all together and seeing what comes out the other end...

We'll be posting samples of what you can do here and would love you guys to post your samples too!

Anyway to kick off here's how to get a list of your photos from Flickr using the phpFlickr class:

$f = new phpFlickr("YOUR_API_KEY");
$i = 0;

// Find the NSID of the username inputted via the form
$person = $f->people_findByUsername('YOUR_USER_NAME');

// Get the friendly URL of the user's photos
$photos_url = $f->urls_getUserPhotos($person['id']);

// Get the user's first 36 public photos
$photos = $f->people_getPublicPhotos($person['id'], NULL, 1, 8);

// Loop through the photos and output the html
foreach ((array)$photos['photos']['photo'] as $photo) {
echo "
<a href='".$f->buildPhotoURL($photo)."'>";
echo "<img width='43' style='margin:4px' border='0' alt='$photo[title]' ". //
>
"src='" . $f->buildPhotoURL($photo, "Square") . "' />";
echo "</a
>";
$i++;
// If it reaches the sixth photo, insert a line break
if ($i % 4 == 0) {
echo "
";
}
}


You can get your Flickr API key here and explore more cool stuff in the Flickr API Docs

Have fun!

Labels: , , , ,

Busy busy busy & our adventures with Google

Wow things have been hectic for me over at Code Required recently so apologies for the lack of posts since early December - ouch!

We've been doing some really cool stuff with the Google API recently and have spent several hours geeking out with the guys down at Google HQ in London - which has been great fun and a steep learnign curve for us!

We'll be publishing some articles on Google Apps, Google Sites and the Enterprise Search application in the next few months so watch this space! We must admit we're very very excited about the Google Sites stuff so suggest you all check it out and post your samples back here as we'd love to see what everyone is doing!

Anyway - we're still alive so watch this space!

Labels: , , , ,

Tuesday, 2 December 2008

ASP.net C# ordering files returned by GetFiles

A very quick post today to share a bit of a moan about ASP.net and the Directory.GetFiles Method which most of you will no doubt know only returns a list of files order alphabetically. Now whilst we've been developing a system for a client we've had the need to order by date last modified - which I'm sure is a common request for many of you reading this. Well with no further ado here is a very simple class so you can sort the array returned by the GetFiles method...

public class FilesDescendingComparer : IComparer
{
#region IComparer Members

public int Compare(object x, object y)
{
return DateTime.Compare(((FileInfo)y).CreationTime,((FileInfo)x).CreationTime);
}

#endregion
}

To invoke this method is very simple too...

Array.Sort(theFiles, new FilesDescendingComparer());

Where theFiles is the result of your GetFiles call.

Happy coding!

Labels: , , , , , , ,

Tuesday, 18 November 2008

More charity fundraising for Macmillan with the Amateur Transplants

Hi all, another unrelated topic I'm afraid but of infinitely more importance than the usual technical/marketing/seo/web stuff...

A friend of mine over at the Amateur Transplants has re-released a very funny, slightly explicit, song about the London Underground. He’s selling it on iTunes and ALL proceeds, yes 100%! is going to be donated to Macmillan Cancer Support (the same charity me and Pat chose to sponsor this year).

I know most of you have already given kindly to our sponsored parachute jump but just another 79p won’t hurt will it? Go on let’s help get it played on the radio and in the charts while saving money for a very worthy charity…

Buy it here

Labels: , , , , , , ,

Sunday, 2 November 2008

Open Source content publishing methods

Recently we've been exploring more open source CMS solutions and a couple of e-commerce sites have also come into the Code Required workflow.

We've looked at loads (I mean dozens and dozens of them!) and there simply are so many options we've decided to drop further development for Roots and start working on building components and extensions for some of the applications that already exist.

I mean... Why fix something that isn't broken? Our site currently runs with a combination of Blogger feeds (you're reading one now!) plus some static pages and some dynamic php stuff too... But we've been playing with WordPress recently and have started to be swayed from Blogger over to WordPress in fact we've also started to developed a few extensions for Wordpress already! We'll also be looking into some Dreamweaver plugins to add development of themes.

Most of you reading this also know of our preference to working in LAMP based systems - hence the mention of WordPress, Blogger and a couple of others we like in SilverStripe and Magento for commerce based sites but the Open Source solutions come in a mass array of formats - recently we've used DotNetNuke which is an ASP.net CMS solution... We've also been made aware of the rather exciting option of Umbraco recently.

We certainly won't write off commercial systems (Microsoft Sharepoint, for example, is often something that we are asked to develop on/for) but with so many great solutions out there why re-invent the wheel? Why waste time developing something when we can enhance an existing solution?

We'd love to hear more about your experiences with Open Source solutions so please email us and let us know of your experiences with any of the aforementioned or indeed an exciting new CMS you've been developing!! ;-)

Alternately if you are interested in hiring Code Required to work on your website, be it implementing a CMS, full ecommerce solution or just a spring clean do get in touch!

Labels: , , , , , , , ,

Monday, 22 September 2008

Google helps make your 404 pages more useful

Here at Code Required we're always trying to make the user experience the best it can possibly be for the sites we develop and we've just discovered Google's new custom 404 widget.

Basically this little snippet will analyse the url which returned the 404 and display close matches from Google's listings... Awesome - certainly saves us writing custom handlers and pattern matching for the urls!!

Check it out... Google's new custom 404 widget

Labels: , , ,

Tuesday, 16 September 2008

Internet Explorer and elements named "description"

OK I'm not entirely sure why I've never come across this before but it's a classic "Internet Ignorer" bug...

When doing Javascript validation on a form recently we had a field named (& id'ed) "description"

<textarea name="description" id="description"></textarea>

Subsequently we attempted to validate the value of this field in JavaScript...

if(document.getElementById("description").value!=""){...}

Well it turns out that this returns the meta description tag for Internet Ignorer ("undefined" for the value)... Marvellous! Well there is a workaround, either rename your field or, simply override the nativeGetElementById method for Internet Ignorer... Check out Sixteen Small Stones

Labels: , , , ,

Monday, 15 September 2008

Charity Skydive update: Thank you to everyone who sponsored us!

Well we've done it and we survived - so all those hoping that we didn't - tough!

We just want to say one big final thank you to everyone who sponsored us, to everyone at Headcorn Parachute Club in Kent and especially to everyone at MacMillan Cancer Support for all the great work they continue to do.

You can still sponsor us upto and including the 13th November 2008 so if you haven't... Do so now at http://www.justgiving.com/patandjon!

Finally if you fancy a laugh check out these links...
Jon's video on YouTube
Pat's video on YouTube
Pat's pictures on Flickr
Jon's pictures on Flickr

Now what can we do next time I wonder??? Mmmmm....
(ideas on a postcard please!)

Cheers
Pat & Jon

Labels: , , ,

Thursday, 14 August 2008

Code Required Summer Break

Please note that Code Required will not be accepting any new clients until 1st September due to developers on summer vacations and extremely busy workload for the interim period.

If however you would like us to tender for projects after that period please contact jon@coderequired.com.

Many thanks
Jon

Labels: , , ,

Monday, 11 August 2008

Code Required's Desktop RSS Reader

Hi Code Required fans... (All 2 of us according to Technorati but I'm sure more of you love reading our ramblers than that... Well I hope so anyway).

We've created a Yahoo Widget so you can view all the latest news and views from Code Required directly on your desktop.

You can download our desktop rss reader here

Labels: , , , , , ,

Semantic content: images with alt attributes vs plain text? The CONCLUSION

For any of you who have been tracking our quest to see if semantic markup truly does have an effect on natural search engine rankings we can confirm we now have a pretty concluisve set of results.

We ran three different versions of content: (H1/P are the tags used to mark headers)
  1. "Frank"
    (H1: image with alt and title)
  2. "Fred"
    (H1: as plain text)
  3. "Roger"
    (P: as plain text)
The analysis...
Roger was the clear loser on Google and failed to get indexed after initially ranking quite high (second to Fred for much of the experiment).

Roger was however the first to be indexed by Google, Yahoo AND Altavista. So if it's quick wins you want Roger is your man.

Frank ran a clear second to Fred for much of the experiment (not unsurprisingly and thankfully the suspected result).... HOWEVER... Over time it has proved pretty fairly conclusive that Frank and Fred had NO significant difference in ranking on Google.

In fact 2 of the 5 search engines completely ignored all of our pages so we cannot be entirely conclusive. Ask and Windows Live did not index ANY of the pages at ANY point throughout the 3 month experiment so clearly their algorithms rely more heavily on inlinking or natural spidering - of which none formed a part of our experiment.

The conclusions?
Well to be honest... Pretty unconvincing. It has to be said that at the time of writing (and when we closed the experiment) Frank (H1: image with alt and title) was the ONLY page naturally listed in Google's results.

Roger(P: as plain text) listed consistently best on Yahoo.

Frank & Fred had the most consistent results overall suggesting that, in our opinion, semantic content DOES make a difference. Although we are truly shocked that it didn't appear to make as much difference as we suspected, especially considering accessibility laws and the use of semantic tags to help screen reading browsers to navigate.

Our next experiment will be based around meta information in a quest to see how search engines actually use meta information and it's significance for companies trying to achieve high natural rankings in the major search engines.

So in our first experiment to uncover SEO secrets with "No bullsh*t just hard & fast evidence of what works best" proved pretty inconclusive... Sorry guys! :-)

Caveats to consider...
  1. Each page was given similar content (same volume of keywords completely irrelevant to what the test website was about and each other).
  2. Each page had no in-links from other sources except those that appeared in the Code Required blog (however we cannot account for links to the pages from other blogs etc - at the time of writing we were unaware of any and the pages have been removed from the test site)

Labels: , , , , ,

Monday, 4 August 2008

Note to clients r.e. Firefox 3

A few of our clients have been requesting support for Firefox 3 of late. Unfortunately our development standards do not currently permit development in FF3 due to some unforeseen bugs in the Beta release that Code Required have raised with the Mozilla development group.

Until we can confirm that these bugs are resolved we will not be supporting FF3.
(UPDATE: Please note that this refers to not just the Beta release FF3.0 but also to the release FF3.0.1 and is related to unpredictable and inconsistent browser crashes)

Labels: , , , ,

Wednesday, 16 July 2008

Code Required are proud to announce....

Code Required have just released a brand new corporate website for Verulas, an independent market data consultancy, at http://www.verulas.net.

Contrary to popular believe we do have design skills in-house and this site was designed, built in Strict XHTML & CSS and published completely by Code Required.

If you're interested in contacting code required for design or development work please email jon@coderequired.com or visit our contact us page.

Thursday, 3 July 2008

What do you mean you can't get me to rank #1??

One question that always comes up when people ask about SEO (search engine optimisation) services is "does that mean I'll rank number one on Google?... But Company X said they'd guarantee they could get me to number 1".

You've all heard it right? Well the guys at Google have further updated the Webmaster Blog post:
"What's an SEO? Does Google recommend working with companies that offer to make my site Google-friendly?"

I really do urge that anyone offering SEO services and equally anyone looking for SEO services should look at this article NOW!

Labels: , , ,

Friday, 20 June 2008

Help us raise money for Macmillan Cancer Support

OK a slightly out of context post today but one for a very valid and worthwhile cause so if you don't like it - tough! :-)

Jon (the founder of Code Required) and a friend Pat Fahy (of Sonaa fame) are doing a parachute jump from 12,000ft in an attempt to raise money for Macmillan Cancer Support a charity very close to both of our hearts and I'm sure many of you reading this if you have ever experienced the devastating effects that cancer can cause not only to the sufferer but to the friends and family as well.

Therefore it'd be great if you could sponsor us (even just a few pence will make a difference) at http://www.justgiving.com/patandjon

Thanks so much for your support!

Labels: , , , , , , , ,

Wednesday, 11 June 2008

Semantic content: images with alt attributes vs plain text? Part 2

OK so interesting results from our little test case... Although it looks like Google is certainly acting as expected for natural rankings with the way we markup content we've had some interesting results from the other guys at Yahoo & Altavista where it looks as though our mate Roger (un-sematic plain text content) is certainly leading the way!!

Page namePosition
GoogleYahooAltavistaAskLive/MSN
Frank
(H1: image with alt and title)
3n/an/an/an/a
Fred
(H1: as plain text)
1n/an/an/an/a
Roger
(P: as plain text)
222n/an/a


I must say - I'm a bit concerned by these results as it certainly doesn't bode well for the way we've been told we "should" code so often!

Watch this space for further updates!! Feel free to drop Jon an email if you want to see more comparisons.

You can see the pages at:
http://www.mycardioworld.com/tests/frank.html
(header as image with alt and title attributes)

http://www.mycardioworld.com/tests/fred.html
(everything as plain text)

and...
http://www.mycardioworld.com/tests/roger.html
("un-semantic" plain text)

Labels: , , , , , , ,

Friday, 30 May 2008

Semantic content: images with alt attributes vs plain text?

One of the big arguments I constantly have about SEO is whether semantic content as images (with appropriate alt text) or simple text values will rank differently.

For example - which is better for SEO?

<h1>header</h1>

Or...

<h1><img src="header.gif" alt="header" /></h1>

...And does the H1 tag actually make a difference?

<p>header</p>

Not surprisingly it's an incredibly difficult subject to find any solution for so here at Code Required we're currently running a simple test to see what happens...

You can see the pages at:
http://www.mycardioworld.com/tests/frank.html
(header as image with alt and title attributes)

http://www.mycardioworld.com/tests/fred.html
(everything as plain text)

and...
http://www.mycardioworld.com/tests/roger.html
("un-semantic" plain text)

We'll be monitoring the situation over the coming weeks on all the major search engines and posting updates here - in the meantime if you would like us to add other versions or have any comments please drop Jon an email.(For example should we do a sIfr version? should we do a version without title attributes on the images? etc).

Page namePosition
GoogleYahooAltavistaAskLive/MSN
Frank
(H1: image with alt and title)
1n/an/an/an/a
Fred
(H1: as plain text)
2n/an/an/an/a
Roger
(P: as plain text)
n/an/an/an/an/a

Labels: , , , , , , ,

Friday, 16 May 2008

Quite possibly the best CSS "hack" I've ever used...

After a good couple of days banging my head against the desk trying to figure out a solution to a Windows Safari "bug" I think I may have found the best CSS "hack" ever...

Ever wondered why Safari renders fonts bolder than all other browsers on Windows? Well it's down to a setting hidden away in the preferences dialog shown below:



Which is great if you can control everyone's install of Safari but, well let's face it - you can't. Which left me with the dilema... how the hell do I get the headers on my website to render as expected in Safari? Well fear not - just add the following line to your css:

text-shadow: 0 0 0 #FFF;

Where #FFF is whatever the background colour your text appears on and voila Safari's nasty aliasing "bug" has vanished!

Labels: , , , , , ,

Tuesday, 13 May 2008

Social networking for SEO... the next big thing?

We all know the huge benefits of social networking when it comes to SEO - there is no better way to get new visitors than those on recommendations from existing customers... I mean you're hitting your target audience without even trying.

Social Networking and content sharing have rapidly become the de facto standard in marketing on the web well Google might have just taken that to a whole new level with Google Friend Connect.

Still in a preview release (ie. not even beta yet) it's pretty exciting stuff and I strongly suggest you check out Mussie Shore's (he's the project manager) post on the Google Webmaster Central Blog entitled "Becoming Social".

Google Friend Connect let's you interact with users on social networking site such as Facebook and invite them to check out the website, post directly to their diaries etc and invite their friends - potentially increasing your audience virally with minimal effort... According to Mussie Shore you only need to know very little coding to get going in minutes!

Labels: , , , , , ,

Wednesday, 30 April 2008

Google's use of Meta tags... The debate goes on...

So we've all heard how Googlebot no longer uses meta description or meta keyword tags to index your webpages in it's SERPS listings; and how it uses the actual page content to evaluate the "PageRank" etc... Well with that in mind many web developers/agencies/SEO "experts" often neglect to include meta tags in today's market... Well think again!

A recent post on the Offical Google Wemaster Central Blog explains how Google DOES use meta tags (well the meta description tag at least). Now, although this may or may not have an impact (our research shows that it most certainly does have an impact) on your actual positioning as such, it certainly can have a huge effect on your links "clickability".

The post explains how the meta description data is used to support the link so people can determine if it's your content they were actually looking for... Therefore, our research certainly indicates, that as more people visit your site, Google increases it's importance... Thus how you sell your content in the meta description tag must have an impact on your SERPS positioning.

Labels: , , , , , ,

Tuesday, 29 April 2008

Pure CSS headers as gradients?

Just a quick one (ooo-argh missus) to share this great post I found on Web Designer Wall for doing CSS headers with a graident effect. Ok, granted, it's not exactly a new technique but it's a really nicely written tutorial for all you CSS newbies and some nice ideas for those of you who have been doing this stuff for years (scroll down to see the examples).

Check it out at http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/

Cheers
Jon

Labels: , , ,

Monday, 21 April 2008

Introducting RootsCMS...

We've been busy beavering away over the last few weeks (hence the lack of posts!) building our new CMS system - RootsCMS...

Built around the Smarty template engine RootsCMS is intended as a very simple and easy to plugin content management system - in fact anyone with basic HTML knowledge can plug RootsCMS into their website within minutes - it really is that simple!

Many commercial CMS applications are either incredibly expensive to licence or incredibly complicated to to integrate into an existing website - this is the barrier we are striving to overcome with RootsCMS - think Adobe Contribute but without the delays of FTP uploads - RootsCMS runs on the back of your web server on a simple sql-driven database (whatever you have available).

RootsCMS is no slower than executing a basic PHP request!

With the use of the Smarty templating system the overheads are also minimal - the majority of CMS systems compile each page request as it's made - not RootsCMS...

On publication of a page RootsCMS compiles the template with the content updates and caches the result so the end user only ever receives the final compiled version - which means very simple archiving of content for: rollbacks; archiving; or even event based content publication.

RootsCMS is currently in user testing on a couple of websites but it currently publishes to XML, XHTML, HTML, CSS & PHP (we'll also be porting it to other languages when we have a stable version to release for beta testing). RootsCMS uses a WYSIWYG editor for ease of use for site editors and can be customised to use your favourite editor... TinyMCE, FCKEditor... Whatever you prefer.

Anyway we'll be releasing updates over the coming months and hopefully we'll have a release for you to try in the next couple of months!



*RootsCMS is in the early stages of development but we appreciate any comments people have on content management systems they have had issues with (so we can make RootsCMS even better), people interested in seeing it ported to other platforms etc etc... Basically if you have something to say - email us

Labels: , , ,

Tuesday, 8 April 2008

Code Required are proud to announce....

Code Required have just launched a brand new promotional website for the cult band "The Amateur Transplants" at http://www.amateurtransplants.net.

Built using Adobe Flash along with the crazy opinions and copy from Adam Kay & Suman Biswas this was a great project to work on and we wish the guys all the best with the new site and integrated newsletter tool.

Keep up the good work guys and we'll see you soon for beers!

The Amateur Transplants are responsible for cult classics such as the London Underground Song and The Menstrual Rag both of which can be heard on the site via the DocPod. Check out their blog at http://fitnesstoblog.blogspot.com

Labels: , , , ,

Monday, 31 March 2008

Keywords and copywriting for SEO

I'm often asked to evaluate copy for the web after writing my article on "Writing Effective Website Content for SEO" and one of the key issues that always crops up is - how do I know what keywords to target? I mean how do I actually know what my users are searching for?

Well this is a tough one, no doubt about that, but there are tools to help you out... Such as Google Adword's Keyword Tool which gives you stats on terms used in your site (or on a descriptive term you supply to it). This will enable you to determine what keywords users are searching for; but, more importantly, which keywords are relevant to your site without much competition. Therefore you can really target keywords your competitors might not be using but potential customers are.

Another wonderful site is Word Tracker. They really know their stuff and write great articles to help you with your copywriting - which are provided for free.

The key for me though is what to do before your site goes live...

I'm a strong believer in that fact that good SEO is actually free. Writing good semantic code and filling it with well written copy is going to be much more effective than paying people to advertise your site for you. Interesting content attracts interested users - and those are the ones you want!

A couple of my sneaky little tips that I find really help with SEO are:

Everyone knows the importance of shared/syndicated content these days... With the likes of Digg, and other community sites, sharing content has never been bigger for the SEO fanatic among us but what have they taught us? And why has no-one caught on yet??

Intelligent site searches: let's face it a user comes to your website and can't find what they are looking for... They use the search and (hopefully) they find it. What most people don't do however is actually analyse what people put into their searches. Simply by doing this you can get a sneak preview inside your users' head. For example 100 people searched for "mobile technology"... Great so now I know I need to focus on those keywords more in the content I write and use those keywords in links to those articles... Simple and yet very very effective.

Content tagging & tag clouds: I adore this little classic that came from the (marketing buzzword) Web 2.0 "phenomenon". What better way to get an insight into what people are looking for than community based content tagging? Why oh why is this such a neglected feature in e-commerce solutions I shall never know - I mean WAKE UP users tagging your products with search terms??? What could be better than that!

Labels: , , , , , , , ,

Wednesday, 19 March 2008

ASP.net 2 and the infamous Response.Redirect method

OK any of you working with a CMS system based on ASP.net which utilises the Response.Redirect method to handle links will undoubtedly have come across this issue - those of you using ASP.net in general and considering using Response.Redirect should also read on...

Response.Redirect makes a round trip to the server and returns a 302 redirect in the headers. Now if you're in anyway concered about SEO you'll know that the majority of search engine bots won't follow 302 redirects (temporary redirects).

I actually came across this after monitoring Google on a DotNetNuke project which utitlises the LinkClick method (which pretty much handles all links in the TEXT/HTML module). So I know that any links to LinkClick.aspx?xxxx&yyyyy will return 302 redirects before going onto my real "seo-freindly" url... Which of course is a BIG problem.

Well after badgering around for what seems like weeks (but is probaly only a few minutes) I began to think about the global.asax file and how it handles requests.

I know there is the Application_PreSendRequestHeaders (which is processed just before we bat the response headers back to the client) so this seems like an appropriate place to check and rewrite the headers and this is actually quite a simple piece of code...

Sub Application_PreSendRequestHeaders(ByVal sender As Object, ByVal e As EventArgs)
If Response.StatusCode = 302 Then
Response.StatusCode = 301
End If
End Sub

Obviously you'll want to be specific in your catchment but you get the idea. I tested this with LiveHTTPHeaders and it seems to have the desired affect - a 301 redirect. I'll let you know if Google likes it after Mr. Google-bot has come back to see my client's site. IN the meantime if your desired affect is to redirect to another file on your server I'd suggest you use the Server.transfer() method which doesn't make the round trip to the server.

Also check out Matt Cutts blog article about this very issue

Labels: , , , , , , , ,

Thursday, 13 March 2008

DNN setting the date format for the calendar control

Having recently been frustrated by the lack of support in DNN to change the format of dates (yes I know about the web.config setting and yes I know about the built in language settings - it still didn't work when using DataSprings DynamicForms module which otherwise is simply superb).

Anyway if you're experiencing the same issues that we did then there is a simple solution.

In the "js" folder you'll find a file named "PopupCalendar.js".

I won't bore you with the various ways in which you customise the look and feel but if you need to change the date format (in my case to the United Kingdom dd/mm/yyyy) here's how...

Simply scroll down until you find the lines:

//default localized short date format if not provided
if (popCalDstFmt == "")
popCalDstFmt = "m/d/yyyy";

This is where the date format is set if you didn't pre-specify a format on the call to the popupCal method.

You can simply override this by adding the following line straight after this function... In our case:

//force UK date format
popCalDstFmt = "d/M/yyyy";

...and voila you're ready to rock and roll!

Hope this helps some other frustrated developers!

Cheers
Jon

Labels: , , , , ,

Wednesday, 12 March 2008

Royalty free stock images - Introducing Fotolia

One of the things us web development people always struggle with, especially on smaller, low-budget projects, is where to get stock photogrpahy from. Often places like Getty Images or organising a bespoke shoot are simply too expensive for low budget sites so you either have to source your own images, use the client's, often limited back catalogue or the new(ish) era of social networking - community royalty free sites...

Our old favourite used to be istockphoto but, in years gone by they had quite a limited stock - not any more however as they recently relaunched with video and flash animation - they are definately worth a look!

However we've just come across Fotolia. These guys seem to have taken the whole social networking "file-sharing" idea to a completely new level and allow users to make money from their own images by simply uploading them to the Fotolia catalogue... Great I hear you cry - "I can make some dough"... Well yes and if you are looking for an image for a low budget site this site has a rapidly growing portfolio which, being based on the old community upload is likely to get massive... Huge! In the immenent future.

Check 'em out at http://www.fotolia.com/

Labels: , , , , , , , ,

Thursday, 6 March 2008

Adding a logout link to the control panel in DNN

DotNetNuke is a great tool but because it's written by developers sometimes basic GUI options have been omitted. One of these is adding a logout button the control panel - especially if you don't want a login/out link on your main webpages!

It's actually really simple to do this just navigate to the "admin/ControlPanel" directory of your site.

There are two different control panels: "iconbar" and "classic" just open up the Web Control that represents the one you are using: classic.ascx or iconbar.ascx.

Next you'll need to register the DNN:Login tag and associate it with the "Login" Control. To do this add the following line under the control declaration so your file will look like this:

<%@ Control language="vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.ControlPanels.IconBar" CodeFile="IconBar.ascx.vb" %>
<%@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/Login.ascx" %>

Then to add the link itself just add the line:
<dnn:login runat="server" id="dnnLOGIN">

...Wherever you would like the link displayed... Simple!

Here's an example file for you to download: iconbar.zip

Labels: , , , ,

Tuesday, 4 March 2008

Code Required launches our bookshop online!

That's right with the help of our friend's over at Amazon we've gone all ecommerce and added a list of our favourite books onto the website so you can see which books we use and grab them for yourselves!

The store is based on Amazon's store and uses their checkout too so you even get the knowledge that you're shopping safely and securely with one of the World's leading bookshops!

Check it out at: http://www.coderequired.com/bookshop/

Labels: , , ,

Saturday, 1 March 2008

Telling search engines where your sitemap is...

Those of you interested in SEO really need to get to grips with the sitemap:url line in your robots file... The what? I hear you cry... Well let me explain.

For a long time now there has been an accepted protocol for sitemaps that many of the top search engines have adopted (check out: http://www.sitemaps.org/ for more info) but it's always been a bit of a headache going to each of the big search engines and telling them about your sitemap so that robots can index it right?

Well Google introduced the Webmaster Tools dialogue so that you could tell Google where your sitemap was and use it's tools to evaluate any crawl errors (404s etc). Well there is a really really simple way to tell all of the "big four" (namely Microsoft, Yahoo, Google and Ask).

All you need to do is add one line to your robots.txt file and those search engines will find it. So what's the line?

Simply:

sitemap:<url>

Where <url> is the URL of your sitemap file. In our case:

sitemap:http://www.coderequired.com/sitemap.xml

Still not sure? Check out sitemap.org's Informing search engine crawlers article

Labels: , , , , , ,

Friday, 29 February 2008

LiveHTTPHeaders Firefox Plugin

We just stumbled across a great Firefox plugin called LiveHTTPHeaders

What this wonderful tool (which appears in the Firefox sidebar) shows is all the HTTP headers returned from the server when you request a page... So if you're page is calling a file that doesn't exist or an image that's been deleted for example you can quickly see those nasty 404 errors and rectify them!

So, if you're a developer, and SEO guru or just a bit of a geek like us then pop on over to the Firefox add-ons page and grab yourself LiveHTTPHeaders.

Labels: , , , ,

Thursday, 28 February 2008

Integrating site searches

A common query for a lot of websites we build is "can we have a search site function?". As advocates of making the web as usable as possible and subsequently the sites we build as near as damn it to perfect (pending our client's spec's of course ;-)) we're all behind this concept but what if you're simply building a basic website, maybe one without a CMS, or a simple CMS system that doesn't use a database, to index content?

We've built several of these sites as you can well imagine and it's often led to bespoke search apps built or for those less "corporate" minded clients Google's Search API more than suffices but to seemlessly integrate it into your sites costs the client money... Which we all know they don't like to part with - so what are the alternatives?

Paid search solutions are everywhere - just whack "site search" into Google and there are hundreds - for the record we think PicoSearch is one of the better ones - but what about free solutions?

Well on our previous Code Required site we used KSearch which was great but pretty complicated to setup - especially on shared servers when you may not know your perl or site roots without some pretty indepth investigation.

Anyway, before I bore you all to death, we're loving our latest find, it's free, simple to integrate and even comes with a setup installer (which we didn't try ourselves as we went for the more laborious manual approach)... Damn it get on with it... It's called "Perlfect Search" from Perlfect Solutions.

So why do we love it so? Well number one it's free; two: easy to integrate; and three: easy to customise.

The biggest draw for us though was many of these free Perl search scripts scan the WHOLE of your documents so you'll get unrealistic search results. For example, let's say, you have a global navigation included in all your documents with leywords in (not uncommon right?) then this will get indexed.

Perlfect Search is different - by simply adding some basic comment tags aroound blogs of code you want the indexer to ignore you get pretty accurate results to your searches.

For those who, like us, couldn't find these tags or advice on how to implement them simply surround the blocks of code you want Perlfect Search to ignore with:

<!--ignore_perlfect_search-->

and

<!--/ignore_perlfect_search-->

...That's it!

Nice one Perlfect!

Labels: , , , , , , , ,

Wednesday, 27 February 2008

Adobe Contribute CS3 content management system

So we finally got round to building a site in Adobe Contribute CS3 at long last... So what's the verdict?

Well let's face it not much has changed in the latest version of Contribute... You still use Dreamwever templates to manage content but with the new support of CSS* and web standards developing, a Contribute managed website, is how can we say it? A lot more "ethical".

Another great feature is the support for blog posting directly from the Contribute user interface so that you only need to train users on one system. Currently this supports Blogger.com, Wordpress and Typad - although in theory you can add any blog server we've only tested these three (in fact this post was created in Contribute and posted directly to our blog which utilises Blogger.com in case you didn't already know).

Anyway the point is that if you're looking for an expensive, user friendly CMS for your site - this is definately worth a look. We've built big corporate sites based on DotNetNuke and Drupal in the last few months but for the more basic sites (i.e. no commerce) Adobe Contribute is definately up there with those guys.

We'll let you know as and when we play and discover more exciting features but if you're looking for something cheap, effective and reliable for a "non-dynamic" site - look no further as Adobe Contribute is the best we've worked with so far.

* CSS-wise: We've noticed a few unexpected bugs with floats and absolute layouts that we are looking to find solutions too so if we find any solutions we'll be sure to let you know on here as soon as we do.

Labels: , , , , , , , , , ,

Thursday, 14 February 2008

ASP.net ButtonClick events not fired when "Enter" is hit?

In Internet Ignorer (AKA Internet Explorer for you purists)... You know that browser by MICROSOFT? The same dudes who came up with ASP.net? You may have noticed that a form submittal event that is fired by the enter key doesn't call the form's _Click event.

This only happens with a single TextBox control for example the code below:


<form runat="server">
Name: <asp:TextBox runat="server" id="txtField" />
<asp:Button runat="server" Text="Go" />
</form>


Internet Ignorer does not pass the submit button's name/value pair in the post. Therefore the ASP.net engine can't determine what control fired the postback event and therefore can't fire the appropriate Click event.

To get round this simply add another TextBox control to your form for example:


<form runat="server">
Name: <asp:TextBox runat="server" id="txtField" />
<asp:Button runat="server" Text="Go" />
</form>
>asp:TextBox runat="server" style="display:none;" /<


For some strange reason INternet Ignorer now decides to send the name value pairs along to the post event.

Yet ANOTHER workaround for a Microsoft product... When using a Microsoft technology... Does it get worse than this? :-)

Labels: , , , , , , , ,

Tuesday, 12 February 2008

DNN - Returning Page titles in place of Module titles for Search Results

Those of you using DotNetNuke (DNN) as the platform for your site build have probably encountered the problem where that DNN displays the module name in the search results and NOT the page name.

There is a pretty simple fix to this. In SearchResults.ascx.vb (located in admin->search) simply add the public function "FormatTitle" as per below:

Public Function FormatTitle(ByVal TabID As Integer) As String

Dim strURL As String

Dim objTabs As New DotNetNuke.Entities.Tabs.TabController
Dim objTab As DotNetNuke.Entities.Tabs.TabInfo

objTab = objTabs.GetTab(TabID)

strURL = objTab.Title.ToString()
If strURL = "" Then
strURL = "Home"
End If

Return strURL
End Function


This will get the page name from the TabID returned from the stored procedure GetSearchResults.

Next, to display the page name, add the following line to SearchResults.ascx:

<asp:HyperLink id="pageTitle" runat="server" CssClass="SubHead" NavigateUrl='<%# FormatURL(DataBinder.Eval(Container.DataItem,"TabId"),DataBinder.Eval(Container.DataItem,"Guid")) %>' Text='<%# FormatTitle(DataBinder.Eval(Container.DataItem,"TabId")) %>'></asp:HyperLink>

And you should now see the page name in your results set instead of the module name!

Labels: , , , , ,

Monday, 11 February 2008

Flickering graphics for rollovers

One common thing that crops up with graphical navigation bars is when they flicker whilst an image preloads (or the browser renders the change rather slowly) for example.

There are many traditional ways around this... Javascript preloaders being one example. How about a purely CSS, compliant version? Well here you go...

CSS background-position
Simple right? Well here goes... You need accessible links so you need a text equivalent... You need your links in a list too... OK let's get on with it:

<ul>
<li id="link1"><a href="http://www.google.com">google</a></li>
<li id="link2"><a href="http://www.yahoo.com">yahoo</a></li>
</ul>

That's the xhtml done... No seriously that's it - the rest is pure CSS - No JavaScript I promise!!

Ok so our nav bar is 40px in height.. And each is a graphic with the name of our link on it... When we rollover it displays with the graphics in inverse colours.. Cool?

OK so you need two graphics per link... One in the on state and one in the off state... Right? Wrong.

The way around the flicker is to have the two states on the same graphic and change the background position of the image... That way we have no flicker or preload issues...

ul #link1 a {
background:transparent url(/images/link1.gif) no-repeat scroll left top;
}
ul li a:hover, #main_nav li.selected a {
background-position:0pt -40px !important;
}

It really is that simple... We just move the graphic (background-position) up by the height of our original bar and voila!

Ok but our text still shows OVER the grpahic in our anchor tag? Well seeing as we're all CSS purists let's just move that with CSS...

ul li a {
display:block;
float:left;
height:0px !important;
overflow:hidden;
padding:40px 0pt 0pt;
}

Simple... Really nice, clean, accessible graphical navigation WITHOUT JavaScript.

Code examples written by Dom Smith, one of our coding buddies, from www.webmotivated.com

Labels: , , , , ,

Thursday, 7 February 2008

Accessibility and JavaScript Mouse Events

One of the most annoying things as a fellow developer trying to get his sites to pass accessibility checks is the "Make sure event handlers do not require use of a mouse" pass - which seems like an unavoidable scenario… I.e. you want something to happen when the user clicks the mouse… Nothing unreasonable there? Except when the user doesn’t have a mouse that is!

So we need a solution for those users too...

<input type="text" id="forename" onclick="this.value='';" onkeypress="this.value='';" />

Mmmm there's my first problem – I can’t simply add an onkeypress event as it would wipe out everything as I type… Not very user friendly.

Being lazy I was obviously annoyed at this as it meant I had to think about how to make this action accessible for all users…

Here’s a messy version of something that worked in my scenario:

<script>
<!--
function clearText(obj){
var defaultValue="DEFAULT VALUE";
if(obj.value==defaultValue){
obj.value="";
}
}
//-->
</script>

<input type="text" id="first_name" onclick="clearText(this);" onkeypress="clearText(this);" value="DEFAULT VALUE" />


It's messy but it does solve the problem and my page successfully got a WCAG priority 2.. AKA "a pass".

The point is you have to offer a solution to all of your users, not just those with a mouse. So next time you type that fatal line of code: onclick, remember those people who can't use a mouse.

I guess that is the concept of accessibility after all – allowing everyone to use your website!

Labels: , , ,

"I don't care about accessibility"

Time and time again I come across clients saying "I don't care about accessibility just make it fixed sized fonts". You know the ones who don't understand that changing a relative fonts css file actually isn't a five second job? And that there isn't some big magic button you can press?

Well next time they want to break the law, become the first big name to get sued and have their image tarnished by all the hype that will surround them when it happens tell them this...

Good accessible websites can port easily to other devices such as mobiles, PDAs and other platforms due to the way they are coded – opening up a whole new market place for your products.

Coding in web standards, using semantic markup, also has another beneficial side effect – SEO – good semantic code means that search engines can understand your content in much the same way your users will be able to.

If that doesn't get them how about the massive percentage of potential customers they are alienating?

• There are 8.6 million registered disabled people in the UK which amounts to 14% of the population.

• Two million UK residents have a sight problem.

• One in 12 men and one in 200 women - 9% of the UK population - have some form of colour blindness

• 3.4 million people have mobility disabilities preventing them from using keyboards and/or a mouse in a conventional manner.

• Increase potential revenue streams: a seamless experience across different platforms/devices will help you prevent damage to your brand.

• Good usability & accessibility often goes hand in hand with higher organic search rankings.

Any good business person should want to increase their target audience and 14% is quite a hefty percentage to exclude.

Don't alienate potential customers - start to care about accessibility.

Labels: , , , ,

Wednesday, 6 February 2008

Simple IIS 301 redirects

One of the common requests I get is to setup 301 redirects when porting to a new site. There are really simple ways to do this on an Apache based server but for IIS on Microsoft platforms it's not as easy as having a .htaccess file and you need to know a few things about IIS operates in order to do this.

For example if you can redirect a directory on IIS you can do really simply by pointing the directory at a new URL. Simply right-click on the directory in IIS and select properties to be presented with the following screen:



Simply select the "Directory" tab and the "redirect to a url" option then type the url into the "Redirect to:" box. You can even pass over querystring parameters (let's say for tracking or the like) by adding $Q to the end of the URL.

For example:

If the virtual directory that is mapped to the following Web site:

http://www.mydomain.com/products

is configured to be redirected to the following exact URL:

http://www.myNEWdomain.com/products$S$Q

A new request for the following URL:

http://www.mydomain.com/products/File.asp?var1=5&var2=6

Would be redirected automatically to the following URL:

http://www.myNEWdomain.com/products/File.asp?var1=5&var2=6


For more information on what variables you can pass check out the IIS documentation at: IIS Docs

Or give us a shout at Code Required as we'd be only to glad to help!

Also check out our article about porting an ASP (classic) site to ASP.net and how you can setup 301 redirects really easily!

Labels: , , ,

Internet Ignorer 8 and the 'Super Standards' meta tag

OK So everytone is blogging about IE8 and the new "Super Standards" meta tag so we thought we'd jump on the bandwagon and throw our two-pence worth into the ring.

What's "Super Standards"?

Microsoft wanrts us to include a new metatag: <meta equiv="X-UA-Compatible" content="IE=8"> to show that the browser wants IE8 to act in a certain way to render the page. Great hey? Well ermmm no.

Since web standards took off developers could focus on CSS for styling their pages and doctype declarations to determine how their code should be interpreted by a browser. Hence the underlying XHTML would be platform (or browser independant) with a range of css hack's (I know, I know, but who's actually got a complex design looking perfect without them?) and, with the arrival of IE7, conditional css statements.

The scary thing is that Microsoft actually worked in tandom with WaSP (the webs standards project) to come up with this idea.

So what's the problem?

Well think about it... IE7 is going to be shipped as an automatic update any day now (although MS deny they would ever do such a thing) either way all the stats still point to IE6/5.5 being the most popular versions with users therefore we're writing yet another check for IE with this new meta tag. Microsoft even insist that we should leave it out as standard and only include it for pre-IE8 pages... Great there's the IE7 busting pages thing all over again as we have to go back and hack about with old websites when the clients kick off (don't you just wish they'd think before opening their big gobs?).

Anyway the big question is... Why don't IE just stick to the W3C and WaSP recommendations and get their new browsers to comply with strict/transitional DTD's like everyone else?

So Microsoft - if you're listening: fix the damned loopholes for hacks such as the Harvey Morse Code css hack, and the underscore hack so that the new browser behaves like a "proper" browser... IE7 and below will still work with the hacks and you can actually start to claw back some of the market cos you have a browser that developers can actually code for.

Failing that (WaSP we're pointing the finger directly at you here - how dare you side with the billion dollar bung man at Microsoft!) how about we actually push a new version of CSS?

CSS3 has been kicking around the archives at the W3C for what a decade now? Let's get browsers to comply with CSS3 have a conditional statement to include it if browsers support it otherwise they revert back to pre-IE8 hack-you-like-it CSS?

Here's something original... How about Microsoft ask the developers that struggle to cope with the shit it produces what they would like in the new browser???

Nah forget it what a stupid idea.


Labels: , , , , , , ,

Monday, 4 February 2008

Writing Effective Website Content for SEO

“Think of your visitors”
What are your visitors going to be searching for? Is your site full of industry jargon which they probably won’t use in their search terms? How do users read your website? How often do you really read a webpage? …How often do you “skim-read” until you find the information you’re after? How do search engines read your webpages?

Turning off images and style sheets for your webpage is often a good indication of how effective the page is at conveying the information within it. Remember that search engines can’t read the fancy text, the beautiful images and all those colours.

This document is a guide to what can you do to make your site perform better in the search engines just by changing the way the content is written.
There is also another positive side effect to writing effective content for your website – accessibility. Remember some people can’t see your website (just like the search engines!) so making sure your content is effective will also aid those users’ experience of your website.

It costs nothing to do and is the single most effective way to boost your search engine rankings!

Make good use of page titles & headers
Ensure each of your website’s page has a unique title that describes the page well. The title is not actually shown on the webpage itself but it’s this text that appears in bookmarks, on the menu-bar of your browser and it’s what most search engines use as the title in their listings.

For instance, if your site title is "Dave’s Cars", a visitor may want to bookmark your home page and the page for a red convertible you have on the forecourt. If all of your pages have the title "Dave’s Cars", then a visitor will have trouble finding your site again in their bookmarks. If, on the other hand, your home page has the title "Dave’s Cars” and your page about that classy red convertible on the forecourt has the title "Red Convertible at Dave’s Cars", then visitors can glance at the title to see what it's about and can easily find it in the bookmarks later. Note that “at Dave’s Cars” comes at the end of the sentence… There’s a reason for this but we’ll get onto that later.

Search engines index pages based on the words contained in them, and including descriptive titles helps search engines know what the pages are about. The search engines will often compare your page titles to your page headings… Let’s review those now.
Breaking up text with descriptive headings and sub-headings allows site visitors to easily see what each section of the page is about.

The main heading (the H1 tag) on the page provides a brief overall view of what page is about. The opening paragraph should give a brief conclusion of the page (because you've “front-loaded” the page content… Again hold back we’ll get onto “front-loading”/”front-weighting” your content shortly).

The sub-headings (your H2, H3 etc tags) should group on-page content into logical groups, to allow site visitors to easily access the information that they're after. For example your main heading (H1 tag) may contain “Latest industry news”; your subheadings (H2 tags) may then be “United Kingdom”, “United States” etc if your news happens to be regional. If you wanted to further categorize your content you may add (H3 tags) such as “England”, “Wales” and so on.

Again this will help search engines understand how the content on your page is structured but it also has a positive effect for accessibility (as do most of the techniques in this document) as screen-readers use the headings to create links into sectors of your page so users can jump to relevant information in your page quickly and easily.

Use Bold Text & Italics
Another way to help users locate information quickly and easily is to bolden important words in some paragraphs. When site visitors scan through the screen this text stands out to them, so do make sure the text makes sense out of context.

Use descriptive link text
In the same way that bold text stands out to screen-scanning web users, so does link text. Link text such as ‘click here’ makes no sense whatsoever out of context so is useless to site visitors scanning web pages. To find out the destination of the link, site visitors have to hunt through the text both before and after the link text.

Screen-readers will also show users a list of links in the page… Understandably in this instance “click here”, “click here” and “click here” next to all of your top three news articles suddenly becomes pretty annoying and irrelevant.

Using lists
Using a bulleted or numbered list is a really simple and effective way to convey information. Lists are easier to scan for the user so they can quickly grasp your products key features quickly and easily and therefore ascertain whether or not it is relevant to them.

“Front-weighting” or “Front-loading” your Content
OK I’ve already mentioned this a couple of times but what is it?
Front-loading content means putting the conclusion first, followed by the what, how, where, when and why. The first line of each paragraph should contain the conclusion for that paragraph.

This theory all goes back to how users read your webpages… When you “read” a webpage you tend to scan it for the information you need… You’ll often read the first few words of a paragraph to ascertain what it’s about and then move on. This is why front-loading can be so effective.
Because each paragraph should contain just one idea, concept or theory users can do all this safe in the knowledge that if they jump to the next paragraph they won't be missing any important information.

Front-loading also applies to the entire web page, as well as paragraphs. The opening paragraph on every page should always contain the conclusion of that page. This way, site visitors can instantly gain an understanding of what the page is about and decide whether they want to read the page or not.

Unfortunately many websites don't adhere to this guideline and end up writing page content in a story-format. On each page there's an introduction, middle and conclusion, in that order. Unfortunately, when scanning through web content we don't tend to read all the text nor read all the way to the bottom of the screen. As such, you may easily miss the conclusion if it's left until the end.

Although there is no hard evidence to back up the theory that front-loading content can affect your search engine rankings it is fair to assume that search engines will evaluate the content of your page by first reading the title; then checking the H1 (your main heading) is relevant; then the subheadings; and then the body text to make sure that the page contains relevant content.

Common/ Key Words, Descriptions & Metadata
You may or may not be aware that you can apply “metadata” to your webpages. Metadata is a concept of tagging data - the dictionary definition actually says it’s “data about data”. For example in your local library books might be categorized into sections ie. “Children’s books” or “Biographies” this is metadata.

Webpages can store this information in custom tags that are added to your webpage called “metatags”. This information is not seen by the users when viewing your webpage but some search engines use this additional information to help index your webpages in their databases.

There are two main types of metadata tag that you can add to your document namely “keywords” and “description” – both are pretty descriptive of their use. Generally these tags are written by your webmaster or, more often than not, excluded altogether from a webpage - which can decrease your SEO rankings for some of the search engines.

Therefore including and writing these tags effectively, in the same way you would the rest of the content, is important. Be careful not to duplicate the first paragraph of your webpage in the description metatag and use it as an opportunity to describe your document in another way; where this description needs to sum up the entire page.

Some search engines use the description metatag as the “introduction” text in their listings so make sure it makes sense and presents your webpage in an enticing manner... It’s often the first snippet of information users will read about your webpage!

Using “Keywords” or Common Words
It may sound obvious, but if you want to rank highly in the search engines for a certain set of keywords, but don't use those keywords or phrases on your webpages, then ranking for those phrases will be difficult, if not impossible.

You can add these as a comma separated list in your “keywords” metatag but should also use them throughout your textual content so the search engines can match a users search terms (keywords) to your document.

I cannot emphasise enough the importance of choosing these keywords carefully. Always think of what your users will search for… For example if you were a watch manufacturer and your new product was named “Tickomatic 5000” it’s unlikely users will search for a “Tickomatic 5000” but they may search for: “watch”, “watches”, “timepieces” etc. If you’re struggling to think of keywords a good tip is to use a thesaurus for example http://thesaurus.reference.com

Be careful not to overuse keywords as some search engines will see it as “spamming” and blacklist your webpages from their indexes.

The use of images to convey information
Images on a site can look great - but search engines can't “read” them, and not all visitors can. Make sure your site is accessible and can be understood by visitors viewing your site with images turned off in their browsers, on mobile devices, and with screen readers. If you do that, search engines won't have any trouble. Some things that you can do to ensure this:

• Don't put the bulk of your text in images. Reserve images for graphical elements. If all of the text on your page is in an image, it becomes inaccessible.

• Take advantage of alt tags for your images that enhance the content – it’s a common mis-conception that “all” images should have alt text.

• Make sure that alt text is descriptive and unique. For instance, alt text such as "picture1" or "logo" doesn't provide much information about the image. "Charting the path of stock x" and "Company Y" give more details.

• Don't overload your alt text. Be descriptive, but don't stuff it with extra keywords – this can actually have a negative effect on SEO.

Whilst we’re on the subject…
Google Image Search enables you to opt-in to have your site’s images indexed. This enables Google to use your images in the “Google Image Labeler”, which harnesses the power of the community for adding metadata to your images.

Domain and file naming conventions
It used to be a common misconception, among many search engine optimization consultants, that filenames and domain names didn’t affect search engine ranking as it was pretty easy to name your file “cars-automobiles-motors-car-motorcar-automobile.html”, for example, and therefore spam the search engines with lots of keywords… Will I’m afraid they do have quite a dramatic effect.

You’ve probably seen several URLs with variables passed to them such as:
www.irrelvant-domain-name.com/news.asp?article=1234

Now take away everything you learnt thus far about writing your content.

Let’s say the above link goes to a page about the latest advances in medication for flu. Nothing in the domain name, or file name, tell us anything remotely related to our search terms of “medication for flu”. Now consider:

www.your-medication.com/viruses/flu/news/

Immediately we have three possible keywords in our URL that the search engine can relate our search too.

Try typing “medication for flu” into Google, for example. You’ll notice some of the top results contain keywords (in bold) as a part of the URL in the listings.

Therefore always try to name the files you create appropriately and place them into well-named folders on your web server as a quick and easy boost to your search engine rankings.

Labels: , , , , ,

Welcome to our new blog!

Yes, finally we got the website up and running and now we're blogging too! yes that's right we're actually going to try and keep an up-to-date blog running about stuff we're interested in, the latest industry goss' and other general crap we can bore you with - so watch this space!

Tuesday, 15 January 2008

ASP and 30x redirects for SEO

One of the common things I come across when building websites is the lack of understanding for SEO when you are porting to a new site.

One recent site I've just finished meant porting a site from classic ASP 3.0 to ASP.net and how to point redirects to the new pages to maintain the SEO rankings. Well the obvious answer is a 301 redirect. But how?

Well there are many ways on an IIS box but the basic way to point ASP (classic) pages is to have a global.asa AS WELL AS a global.asax. The global.asa will serve ASP (classic) and the global.asax will serve the ASP.net pages... Therefore we can simply put our redirect code into the global.asa and point our .asp files to their new .aspx conterparts...

If Request.ServerVariables("PATH_INFO")= "/default.asp" Then
If Request.ServerVariables("QUERY_STRING")="" Then
Response.Status="301 Moved Permanently"
Response.AddHeader "Location", "http://www.mydomain.com/"
Else
Response.Status="301 Moved Permanently"
Response.AddHeader "Location", "http://www.mydomain.com/?" &
Request.ServerVariables("QUERY_STRING")
End If
End if


I've added the check for querystring variables in case you wanted to pass any tracking or like URL variables to your new page but you can customise to suit your needs.

Labels: , , , , ,

Wednesday, 13 June 2007

Windows Safari and the Aliased Fonts Debate

The debate about web typography (and accessibility to some extent) goes on as Safari released their "Beta3" version of Safari for Windows this week and an interesting debate arises - should fonts be automatically aliased as per Apple's Safari?

We've seen, and in my case touted, sIfr and then we discovered the frailties of design with varibale width fonts etc etc... Then Apple go and release yet another browser for us to test against... Safari on Windows. Now take away the super efficient rendering engine, which I adore for quick Google queries, and take a look at how it renders fonts... Yes that's right - the Apple rendering engine rears it's head.

I'm not going to get into a Microsoft versus Apple debate here (or here care of Joel Spolsky), as personally I believe there is a case for both sides. However what I am going to say that for pure usability versus design it's my opinion that aliased fonts combat the design issue (nice headers, graphical navigation etc) and anti-aliased fonts combat the readability issue (i.e. a big blob of text is indefinately more readable in non-aliased Arial that aliased Helvetica for example.

So before I turn this into a massive ramble about text replacement concepts like sIfr and dynamic image creation with JavaScript (et al) replacement methods... It appears the W3C are actually considering this with the font-smooth property in the CSS3 Fonts module.

So why the hell are they taking so long? This is the fast moving web not print for goodness sake...

Read more about the CSS3 module: Fonts

Labels: , , , , ,

Monday, 29 January 2007

Odeon accessibility review

One thing I tend to do, sadly, is have a check back on sites after a while to see if the current editors are keeping up the accessibility standards and I have to say Odeon has started to slip unfortunately...

1. Proper use of header tags

For starters I've noticed more than one H1 per page... For example underneath the logo is a H1 with their phone number in! There should always only be one H1 so a user can see what the page is about in their headings list (a feature of common screen readers such as Jaws).

2. Badly implemented TabIndex

This one is terribly frustrating... The left nav has a single TabIndex applied halfway which jumps you straight to "something for everyone"! Obviously frustrating for those non-visual users and some mobility disadvantaged users who rely solely on the keyboard to navigate.

3. Bad use of Alt tags

Just hover over the user ratings... Intuitive isn't it?

4. Interesting random buttons

Take a look at a film page with Javascript disabled and you get two rather interesting new buttons appear underneath the film name... "Larger Size" and "Close". The Larger Size one is my favourite... This takes you to a popup that tells you you don't have javascript installed... Classic!

I think the point here is never promise your clients anything commital when it comes to accessibility - especially if you're relying on an editor with inadequate experience of accessibility, or content editing for the web in general... They will inevitably mess up all your hard work!

Labels: ,

Thursday, 18 January 2007

Harvey Morse Code Hack (css hack for ie7)

I have just accidentally discovered a hack css for Internet Ignorer 7 with the dot dash sequence needing to be identical to below...

body{
background:red; /* all "normal" browsers */
.background:green; /* ie <=6 and 7 */
_background:blue; /* ie <=6 only */
}

Enjoy my fellow web developers!

Cheers
Jon

Labels: , , , ,

Friday, 17 November 2006

Is Flash actually accessible?

I've been having a bit of a read on Fadtastic recently about a very interesting article on the accessibility features of Adobe Flash.

As a massive fan of Flash, one of the most frustrating things for me was the lack of ability for an embedded object to return focus to it's parent page... Virtually rendering it inaccessible for obvious reasons.

However Johan, of http://designmatters.zoic.be/, has come up with a very interesting test which you can see here which opens up an interesting idea. Unfortunately it uses javascript to control the focus but it's certainly got me thinking.

I'll update you if we get anywhere!

Labels: ,

Wednesday, 8 November 2006

Accesskey's are bad - UPDATE

Not long ago I wrote an accessibility article as to why accesskeys were a bad idea... Well I'd like to further that discussion with the release of FireFox 2.0, not so long ago, and a new issue that has arisen.

In a somewhat intuitive 'hack' to avoid access keys colliding with its browser shortcut keys the guys behind FireFox 2.0 introduced a new combination of keystrokes to implement accesskeys by adding the SHIFT key. Therefore to activate access keys in FireFox 2.0 the combination is now Shift+Alt+{key}. I.e. to activate an access key with the value of H would be Shift+Alt+H.

Great I hear you say... The combination no longer clashes with the browser's shortcut key i.e. pressing Alt+F will activate the File menu as expected. However inevitbaly (God I sound like such a pessimist!) this is by no means a great solution - just try holding down SHIFT+ALT+0 with one hand for example... Tricky isn't it?

On that note another issue is the fact that numeric access keys no longer work in FF2 (without accessing the config and changing the default settings that is). That means that the functionality of all accessibility optimised websites that have numeric values for access keys currently setup, will no longer work in FireFox 2.0.

Hands up who wants to tell all those accessibility gurus currently referring to the UK government's e-GIF recommendations?

Labels: ,

Tuesday, 7 November 2006

Is Web 2.0 a step backwards for accessibility?

In a recent article on ZDNet Robin Christopherson, head of accessibility services at AbilityNet warns "Web 2.0 won't close the door, but it will make creating accessible websites fraught with many more potential pitfalls and you'll really have to keep your eye on the accessibility ball all the way through to make an accessible product at the end".

I guess this could be argued both ways, seperating content from the presentation layer is certinaly a fantastic step forward - it enhances search engine optimisation and undoubtedly makes the content more accessible to a wider range of browsers but the point Christopherson is trying to make is that user generated content can often lead to more problems than it solves.

Front loaded content: the principle of one idea per paragraph; is a valid point here... After all if you are allowing any Tom, Dick & Harry to enter content who is going to validate it?

Another valid point made is the use of Ajax based technologies and the fact that many companies are happy to jump on the band wagon without considering the users who can't use such technologies in their browsers.

I think the point here is that Web 2.0 isn't the cause and yet it certainly isn't the solution.

Make sure you check out the article here

Labels: ,

Friday, 6 October 2006

Department of Trade and "Inaccessible"

A friend of mine, namely Pete Hobson of www.freesome.com fame, pointed me in the direction of an article about how the UK Government can't even follow their own accessibility guidelines when commisioning agencies to do their websites.

The site in question is the Department of Trade and Industry and with statements from their spokesman such as: "No assistive technologies were tested against the site."

It really makes you wonder why we bother doesn't it?

There isn't much else to say which hasn't been said in the article itself but it certainly makes interesting reading that's for sure!

Check out the article at: www.webstandards.org

Labels: ,

Tuesday, 3 October 2006

Accesskeys and why you should remove them

I've recently removed accesskey technology from the Code Required website and continue not to use them on our latest projects.

Basically accesskeys were touted as a great accessibility tool a little over a year ago and the increased ubiquity of sites using them was immense. However, I'm now of the opinion that so many sites are implementing non-standard accesskey combinations that they are actually a hindrance to accessibility rather than an aid.

For example it was always my intention to use the acceskey key combination "ALT+1" to return to a site homepage; I have since seen various other key combinations such as "ALT+h", "ALT+0" etc etc.

Now far be it from me to stand and preach but I think until an adopted standard for these keys is used they are of little help to a user if they have to learn to use these.

My second, and perhaps even more valid consideration, is that accesskeys may actually override key combinations that users can create themselves in browsers such as Jaws. (OK so Jaws tends to use the INSERT key for most of it's key combinations but you get my point).

Therefore forcing a user to use your predefined key combinations is actually bad usability & comprimises "accessibility" as it were.

Labels: ,

Wednesday, 20 September 2006

Educating the client when it comes to accessibility

I have recently been working on a new version of the Hackett website which I must admit caused us some headaches with accessibility - some I'm not sure we've solved at all - here at designuk which raised the point for me about how aware client's actually are about accessbility.

I mean 9 times out of 10 it appears agencies tend to take a marketeer and a designer when it comes to new projects... Maybe they'll throw in an account handler, to keep them under control, but only on very rare occasions is a development consultant included in the initial meetings - you only have to look at the recent dire consequences such as River Island and French Connection to know that's true.

I know for a fact Diesel can't/don't care about accessibility with the amount of Flash they use on their website(s)!!!

So if you work at an agency and as your company's accessibility advocat then stand up and be counted... In fact gone are the days when developers had to sit in the corner with their headphones and Metallica t-shirts on, stroking their goatee beards - it's time to stand up and be counted!

Only we can make a difference in educating the clients at the end of the day - not the arty farty designers or the marketeers with their acronyms and speil.

Labels: , ,

Tuesday, 25 July 2006

AOL and closed caption video online

Yes, I know, they are the demon of the UK internet service provider, yes I know they're expensive and yes I know that traditionally their software wasn't particularly useful but AOL really are making an effort in the accessibility world.

AOL has recently announced a partnership with CNN to produce closed caption video streaming of news content to enhance it's online media experience for people who are deaf or hard of hearing.

The captioned CNN content will be available exclusively through the AOL network including the free AOL.com web portal.

Although AOL has provided synchronized text transcripts of news reports in the past these were generally an exact copy of the newsreader autocue and not "user-friendly"... The new captioned video streams will be manually captioned to ensure the stream is completely accessible.

Nice one AOL!

Labels: , ,

Monday, 24 July 2006

WATC Releases Toolbar Plug-in for Opera Browser

WATC released a new version of it's web accessibility toolbar for the Opera web browser. The toolbar includes a several built-in tools to aid developers and quality assurance testers design web sites that meet international accessibility requirements.

The IE version has been available for sometime and is also available as a free download.

Labels: , ,

Saturday, 1 July 2006

Inclusive Web Design For All at the RNIB

I recently completed a course at the Royal National Institute for the Blind and have to say that if the vast array of courses that are appearing on the net at the moment are leaving you somewhat perplexed as to which to choose then go for this one!

Although most of the courses available will cover the same principles the RNIB course really has it cracked.

Inclusive Web Design For All isn't so much coding and technically orientated but based strongly on the principles of why the way you develop a page influences the end result.

At no point do they attempt to constrain design in anyway which is also incredibly refreshing but the key to why this course was so amazing?

Bim, the instructor wrote the course herself, is registered blind so it really hits home how important the issues are - this is from someone who really experiences the issues and not some techy geek who thinks they know it all!

Labels: , ,

Sunday, 18 June 2006

Image Replacement with Accessibility and why Flash Replacement is Better

I've read so much about image replacement, and how bad it is for accessibility, over the last few months that I felt I really needed to throw my toys out of the pram and write something myself.

So what is image replacement?

Essentially image replacement uses JavaScript to search through a document's object model and replace certain tags with images... For example you might change "<h2>header</h2>" with "<h2><img src="headerNicelyStyled.gif"></h2>.

Why is this bad for accessibility?

The valid argument is that if I scale my text; images won't scale, so, it won't help users who need to use text resizing to view a page (or those who use Opera or similar re-rendering magnifiers will be presented with heavily pixelated images).

The solution?

Don't use it. sIFR is a new version of image replacement using Flash to render the font. If a user doesn't have Flash or JavaScript the tags will be left alone and presented with their css style aternative.

If they have both these technologies then they will be presented with flash file with the font embedded. Now the glory of this is that as long as you use relative sizing the flash movie can scale and the user can still benefit from magnification methods they are used to!

I've used it on several projects now and can't see any issue not to, but if you have a valid reason why this is bad for accessibility purposes, or indeed any other VALID reason, please do get in touch.

If this is all new to you please check out www.mikeindustries.com/sifr/.

Labels: , , ,

Tuesday, 18 April 2006

Accessibility and the BBC websites

The BBC's "My Web My Way" directive has been attracting a lot of attention in recent months and they have again exceeded, certainly my, expectations and have commissioned System Concepts to produce an Accessibility study of bbc.co.uk which they are releasing to the general public for perusal.

Interestingly System Concepts actually use disabled users to evaluate using the site (as discussed in my meeting with the Shaw Trust) and the BBC have included details of the user findings in Appendix 6 of their document - it certainly makes interesting reading and can be downloaded from their site.

It all goes to show that not even the big guns get it right everytime - even if they do meet so called WAI guidelines!

Labels: ,

Thursday, 23 March 2006

Accessibility and anti-robot testing

One thing that PAS78 hopefully will bring to more people's attention is the use of graphics for anti-robot testing... Also known as the obscured numbers in a graphic that you have to type into a box to confirm your registration or if your a complete marketing-speil word-monkey then 'Captcha' or 'Turing testing'.
PAS78 raises the issue, quite rightly, that if a user has any type of sight impairment the use of this technology could in fact disable the use of these forms unless there is an alternative method available.

Hotmail does include an audio version of it's Captcha image, so that a user can listen to the numbers being read, and then enter them into the verfication form field (although if you have ever attempted to listen to one of these it's incredibly diffcult to inteprete what the hell is being said as they have distorted the sound to deter robots with sound analysis!)

Google has gone to the extent of using SMS to send a user a passcode, which is a novel idea, but SMS isn't completely accessible yet either so that isn't a solid solution - and let's face it - not exactly cost effective either if you have to set up an SMS gateway etc etc.

Unfortunately at the moment there is no surefire ideas on how to implement accessible Captcha methods... Virtually all methods can be hacked and using these methods of human detecting inevitably will be difficult to use for some users... A 'code' based system such as those mentioned above may be difficult for dyslexic users; The common 'distorted image' method is difficult for those with visual impairments; and so on and so on...

So what is the solution? Well I'm not about to answer that here but do make sure you consider these users next time you implement some form of anti-robot testing in your next application... Create an audio version if you are going to use the recognised 'distorted image' method, try to avoid complex logic and always consider ALL of your users!

related link

Labels: ,

Tuesday, 21 March 2006

PAS78 : What's all the fuss about?

So PAS78 has been released now and the dust is starting to settle somewhat but my initial impressions are of some disappointment.

Although finally we have some solid statistics and analysis to convince our clients that developing a website with the broadest range of users in mind is welcoming, to say the very least, there is nothing new in the DRC's documentation - it's been the accepted norm that the W3C's Web Content Accessibility Guidelines are the guidelines that we should all be following for some time now.

So why all the fuss? Well that's something I still can't determine... I mean I genuinely hope that the government has decided to take more of a stance and enforce the Disability Discrimination Act of 1995, with regards to digital media formats, and was hoping that the PAS78 documentation might actually be an enforcement more than a general overview but I'm afraid that's exactly what it is.

So the conclusions are the same as before: consider what the site should do and for whom; consider who you are going to get to create it; consider how to enforce the guidelines; and consider how this can be tested.

So much hype; so much expectation; so little new information.

There are some valid points that I have tried to advocate on all projects I've worked on however:

  • Never rely solely on automated WCAG checking tools such as WatchFire and the like; try to actively envolve disabled people in your testing

  • Consider how disabled people might access your website - there is no substitute for working directly with people with a range of disabilities

  • Remember that most disabled people don't use assistive technology but rely on standard browser features such as text resizing

  • Compliance isn't all about design or the code you use - consider the way you present content and the wording you use

  • Consider whether the same functionality provided by client-side technologies such as javascript and flash can be achieved on the server before the data is presented to the user.

  • I'll be delving deeper into the guielines on a regular basis and providing my views and opinions on solutions to some of the issues raised so watch this space!

    Check out the W3C's Web Content Accessibility Guidelines

    Labels: ,

    Wednesday, 8 March 2006

    Meeting with the Shaw Trust

    I had the privelage of meeting some representatives of the Shaw Trust today regarding their work with disabled web users. Very very interesting and although I've been advocating accessibility guidelines for over a year now they certainly opend my eyes to some new ideas... The Shaw Trust works directly with disabled web users so has a really good understanding of exactly how they use the internet.

    Our meeting coincided with the launch of the DDA's PAS78 Guidelines (which I'll be reviewing soon!) and between us we managed to raise some very interesting points:

    Accesskey's and whether they are good are bad... What?? Yes we actually came to the conslusion that pre-defining acceskeys is a bad idea... For example what happens if they conflict with a usres browser shortcuts? Or, what if you've set a user defined shortcut in your browser so that ALT+G takes yo straight to Google? Ahhhh not so great now are they? The W3C guidelines state that defining accesskeys is a good thing so it'll be intersting to see what PAS78 makes of them.

    There's no denying they are a great tool but for now I suggest you create a set of session variables which allows a user to define their own accesskeys and indeed allows them to be "turned on" or "off" accordingly.

    related link

    Labels: ,

    Wednesday, 23 March 2005

    Accessiblity and DHTML Menus

    The general consensus amongst users unfamiliar with what you can and can't do with web standards and accessibility is that javascript and accessibility don't mix? This is a total fallacy.

    After much research the conclusion is that DHTML is fine. As long as the code is structured using lists and you give alternatives for users, such as "onkeypress" instead of "onclick" events ? basically drop-down-menus are perfectly feasible.

    For example the top level DDM would have an "onclick" event to go to the top-level homepage. Then, for accessibility compatibility, we would add an "onkeypress" (and an access key) to the link so that users, unable to use a mouse, could also go directly to the page.

    This is fine as the user will then see the full navigation on the subsequent page, or, for users using screen readers or non-visual browsers where the navigation would effectively be hidden, the navigation elements would be coded using pure web standards so that all of the navigation is "visible" to those users.

    related link

    Labels: , , ,

    RSS feed ATOM feed Add to Technorati Favorites View Jon Harvey's profile on LinkedIn