• Client login
  • Work for us

All the latest from the team...

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!

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