Testing for BT Internet's Browser

My site is coded for accessibility to all the IE's, Opera, Firefox and Safari....

However people using the browser provided with BT broadband software can't use me shopping cart. Does anyone make their sites accessible for BT Browser's and if so how can you test for it if they don't provide it as a download for anyone.

Cheers

Tim

 

How many people use that nasty pig? I can't even remember what it looks like, isn't it based on something else out there?

Edit: wikipedia says: As part of this partnership customers also have a choice to use a BT internet browser, an Internet Explorer frontend with easy access to Yahoo! services. This software is aimed at more novice computer users, it is installed as part of the BT Home Hub software disk.

 

Tonnes of people use it apparently... I'm trying to figure out if its related to javascript.. Will report back.

 

How do you know people can't use your site with the BT browser? I mean have lots of different people said so, or just one person? To be honest if it works okay in IE's, Opera, Firefox and Safari I don't think there's much more you can do. It might be that some people have javascript disabled if your cart uses it?

 

Because we've tested and tested with all the other types and I regularly get people emailing and calling saying that they can't get past the basket because it says no delivery type is selected. Every problem as been with a bt internet customer. It is too much of a coincidence to be anything else.

 

If it's not working there, it's probably that you lack graceful degradation in your code - you either became over-reliant on using javascript for things you shouldn't have, or didn't provide fallbacks for when that scripting is unavailable. It is also probably you lack images-off degradation, CSS-off degradation or a whole host of other fallbacks that modern coding techniques provide.

But without seeing the page in question, all of us are guessing wildly. I could probably tell you in two minutes where you went wrong if you just post a link or a code snippet.

Though the short list is usually:
bloated scripting framework asshattery (jquery, mootools, prototype, etc)
AJAX for nothing (javascript should enhance functionality, not supplant)
DHTML for major content elements
Images for text without image-replacement techniques
Non-semantic markup that doesn't work right (or at all) when CSS is disabled.

 

True true but here is the page. You can clearly how it selects delivery types. We did have the create seperate fallbacks for older versions of IE and that is no problem but we just don't have a version of BT's browser to find out exactly how or where it is falling down. We've made it accessibly for every other browser under the sun.

http://www.nothingbutpadlocks.com/index.php/basket_items

Obviously you'll need to add something to the basket for it to show the delivery options.

Let me know if you see something i've missed

 

... and this is where you failed. Between the hordes of useless javascript and that you ended up resorting to an IE conditional, that's a pretty good indication before I even open the CSS that you probably have either the wrong CSS or the wrong nesting structure.

Oh christmas on a cracker, what the **** is this ***otry?!?

@import url(base/reset.css);
@import url(base/positioning.css);
@import url(base/typography.css);



/* Element styles */
@import url(element/button.css);
@import url(element/form.css);
@import url(element/navigation.css);
@import url(element/table.css);
@import url(element/title.css);

/* Section styles */
@import url(section/checkout.css);
@import url(section/contact.css);
@import url(section/faqs.css);
@import url(section/popup.css);
@import url(section/product.css);
@import url(section/sitemap.css);

Code (markup):

Mein gott, overthink your layouts much? Here's a tip, if you have more than two stylesheets per media type (common elements and per page) you are probably ***** up somewhere. Explains why the page takes so long on firstload if nothing else.... Just LOOKING to make more work for yourself?!? Gah, CSS is so spread out it would take me two hours to find anything without resorting to firebug and/or dragonfly...

Ok, one possible suspect - declaring padding on an input. given that no two browsers handle padding the same way on inputs, that's a REALLY bad idea. That might be a possible suspect.

You know, markup apart from some semantics boo-boos (like the h2 preceeding the h1, the lower order headings NOT being subsections of the h1) the markup looked great until I added an item to the cart.... Do that and boom, nested table crap like it was still 1997. Well there's your problem

Let's see... in modern markup there is no good reason to ever put NAME on a form, though you do have the action setup for dropthrough if the script fails (that's a good thing)... I'd see if axing that check makes it work in that browser, if so you have a possible culprit.

The tables for layout though are the real telltale. You do have a section that could be considered tabular data, but even if you were building it as a table it's made of /FAIL/ since you are using strong instead of label (or th for that matter), strong and color instead of legend and/or th/caption, and are so knee deep in presentational markup you end up using twice the code you should actually need.

Hmm... the use of 'button' could also cause issues. It's known to have cross browser compatibility problems and being that BT is effectively IE5, it's probably that said element could be a failure point. It's why I'd probably use input[image] instead. I'd also be concerned that when scripting is not present that button would function as a sourceless submit instead of actually updating the basket. (since you don't set a value on it to check server-side)

Scripting only on the delivery options - that's 100% bound to fail since most handheld/mobile browsers have no scripting. That right there would prevent people from completing their orders. What I can't figure is why you'd have all these hooks for scripting, and then still do a full page refresh. Send ALL the options, then re-adjust in the scripting if desired. Not sending any options and only adjusting the list on refresh means scripting off users won't be able to complete their orders.

First step would be to neuter down the markup to remove the table and lack of labels & fieldsets as a possible cause of your problems.

<form 
	id="frm"
	method="post"
	action="/index.php/basket_items/updateQuantity"
	onSubmit="return Strictly.checkOut();"
>
	<div class="fieldsetWrapper"><fieldset>
		<legend><span>Products</span></legend>
		<div class="item">
			<h2>Brass Weatherproof Padlocks (Keyed Alike)</h2>
			<input type="hidden" name="BasketItemId6504" id="BasketItemId6504" value="6504" />
      <input type="hidden" name="BasketItemProductId6504" id="BasketItemProductId6504" value="237" />
			<input type="hidden" name="ProductStockLevel6504" id="ProductStockLevel6504" value="134" />
			<input type="hidden" name="ProductName6504" id="ProductName6504" value="Keyed Alike Brass Weatherproof (30mm)" />
			<input type="hidden" name="BasketItemQuantity6504" id="BasketItemQuantity6504" value="1" />
			<input name="data[BasketItem][6504]"  size="5" class="input" value="1" type="text" id="BasketItem6504" />
			Keyed Alike Brass Weatherproof (30mm) @ &pound;5.52
			<div class="controls">
				<button type="submit" onClick="return Strictly.updateBasket('6504');" class="btn_updatebasket">update basket</button>
				<a class="btn_removeitem" href="/index.php/basket_items/delete/6504"></a>
			</div>
			<div class="cost">&pound;5.52</div>
		<!-- .item --><div>
		
		<!-- more items would go here -->
		
	</fieldset></div>
	
	<div class="fieldsetWrapper"><fieldset>
		<legend><span>Delivery Options</span></legend>
		<label for="deliveryLocationId">
			Choose your location
			<select id="DeliveryLocationId"
				name="delivery_location_id"
				onChange="getDeliveryOptions(this, 96);"
			>
				<option value="1">England & Wales</option>
				<option value="4">Scotland</option>
				<option value="2">Northern Ireland</option>
				<option value="5">Republic of Ireland</option>
			</select>
		</label><br />
		
		<label for="deliveryOptionId">
			Delivery Type			
			<select id="DeliveryOptionId"
				name="delivery_option_id"
				onChange="if (0<this.selectedIndex) { document.frm.checkout.disabled=1; document.frm.submit(); }"
			>
				<!-- delivery options here -->
			</select>
		</label><br />
		
		<div class="cost">&pound;0.00</div>
		
	</fieldset></div>
		
	<dl class="totals">
	
		<dt>Total:</dt>
		<dd>&pound;5.52</dd>
		
		<dt>Vat:</dt>
		<dd>&pound;0.83</dd>
		
		<dt>Grand Total:</dt>
		<dd>&pound;6.35</dd>
		
	</dl>
	
	<ul class="controls">
		<li>
			<a href="/index.php/basket_items/empty_basket" 
				class="btn_emptybasket"
				onclick="return Strictly.confirmEmpty();"
			>Empty Basket</a>
		</li><li>
			<a href="/index.php/"
				class="btn_continueshopping"
			>Continue Shopping</a>
		</li><li>
			<button type="submit"
				name="checkout"
				value="checkout"
				class="btn_checkout"
			>checkout</button>
		</li>
	</ul>
</form>

Code (markup):

Though I'd axe all those BUTTON tags for input[image], you've got an empty anchor there likely being used as a static image, that's what image-replacement techniques like gilder-levin are for, and I suspect there's a whole laundry list of issues with the scripting.

 

Thanks deathshadow. Since all that went over my head I'll pass it to my developer who actually does the code etc and see what can be done.