Multimedia and Web Design Firm
Flash replacement

Jeremy Keith talks and web accessibility / HTML5

January 6th, 2010

I first learned of Jeremy Keith after being recommended his great first book back in 2005, which seems like last year, wow! how time flies by. Since then i have been a few of his live talks and read many of his blog posts and articles. Working for Clear Left ( lovely site) in Brighton he is is a front end developer who specialises in accessibility. Today i spent hour plus listening to a fantastic podcast and resource by WebAxe in which he was interviewed.

A few quotes and what i took away from the interview:

We dont mention accessibility with clients

Some may initially wonder about this but he is simply stating that it should be a given with any website. He explained it very well by comparing it to

The plumber asking if its ok to use that specific wrench on your sink when called out to repair a pipe.

Also some clients may not have heard about web accessibility and they should be trusting you to do a competent job while doing the right thing for their audience.

HTML5 is very backward compatible and with HTML4 it validates fine.

There are some tags that have been deprecated in HTML4 but in a practical way most modernly built XHTML1 or HTML4 with will pass the w3c test. There are also some new tags in HTML5 that can used such as the new input types.

Using a javascript library is something i do myself and it saves reinventing the wheel

After initially being a little hesitant using a library due their first load ( file size), we have been using Jquery for over 2 years and love it! Its great to hear someone so experienced as Jeremy using a library and now validating our choice for Jquery when we evaluated the different options such as Django, Prototype and Moo Tools.

I think of web accessibility of not destroying accessibility rather than creating it.

This is in referral to properly structured and semantic HTML being accessible, while Javascript can break that accessibility if not properly used and planned.

It was an hour very well spent and he was as informative as ever. I highly recommend you hear him talk in person if you get the chance. In the meantime listen to the Webaxe episode 75 podcast in which he is interviewed.

Absolute DIV not showing in IE6 / IE7 – Internet Explorer

June 21st, 2009

Iv come across this problem a few times now and this should be of help to a few people.

When placing an absolute div within a relative positioned div, in IE6 and IE7 that div disappeared. The content within the div and the div just would not show. An immediate response would be to think of the stack and z-Index but after a few tests it wasnt that.

The Fix: Simply surround the absolute div with another empty div.

Did it work? Another similar problem? Leave a comment.

Coda Style JQuery Bubble – Now works in IE !

March 22nd, 2009

After finding the Coda Bubble article i was keen to implement it on my site. Its a really cool effect that can add a lot to the web page with limited room to add in all the desired content. Its also a really attractive bit of candy that gives that little extra wow factor.

There are a few problems to the solution however:

  • The main being it doesnt work in any version of IE ( See image below )
  • Its riddled with inline tables and the code is a mess
  • Any text within the pop gets anti aliased by IE making it ugly

Problems in IE

I thought that it would be a shame to waste the original authors time and my own after taking a few hours to get it working. Is there a solution to get round these three problems?

Yes there certainly is: Very simple just use a gif image with transparency. View the demo.

While this solution isnt ideal* it works in all browsers, and the code is so much cleaner. To make the method accessible either add an “alt” or “longdesc” tag with a description of what’s in your pop up box.

*You are of course limited to colours with gif images but in most cases its generally text thats going to go in the pop up box anyway.

Did it work for you? Leave a comment…

3 CSS tricks / bugs in Internet Explorer 7

March 8th, 2009

A quick post today with 3 bugs and the solutions iv found to fix them.

1.) I wanted to get rid of the border on the input fields within a form. You would naturally try input: border:none; However and strangely that didnt work.

The Fix:
input: border-width:0;

2.) IE7 and below were showing the scrollbar within a textarea even with the textarea having a absolute height

The Fix:
overflow:auto;

3.) The strangest one of the 3. I wanted to get rid of the default text in a submit button. ( There has to be text for accessibility). I tried text-indent:-9999px which worked perfectly in Safari and Firefox.

The Fix:
text-indent:-9999px; color: transparent; text-transform: capitalize;

I hope that helps anyone coming across any of these bugs in Internet Explorer. Did it work? Leave a comment.

Cant login after Wordpress 2.7.1 upgrade??

February 24th, 2009

After updating to Wordress 2.7.1, on one of our sites i couldnt seem to log in. The page seemed to refresh and not do anything. Here are three things to try to solve the problem.

  1. Clear your cookies
  2. Clear your cache
  3. Rename the plugin directory ( /wp-content/plugins) to something different

Hopefully that will help a few people out. Did it work? Leave a comment!

What to do when gmail is down? Write a review of it

February 24th, 2009

Google’s email service also known as gmail has now been down for over an hour. Its 11:49 UK time here. Here is a quick review of whats good and bad about it.

Good:

  • Can run multiple pop3 and imap accounts through it, all located in the one single interface
  • Search facility is fantastic, find anything in seconds
  • iPhone access- works a treat on the iPhone
  • Speed – its usually lightening quick to load and read
  • Web space – it now has 12GB of space – iv only used 12% of that with many large files
  • Its a free service
  • Even the ads can be useful, iv seen me finding some great sites and articles from the ad links

Bad

  • There really is only one bad thing i can say about and thats the downtime im suffering from right now. Iv used gmail for over 2 years and apart from the occasional “service is down” message its worked a treat.
  • Ill add the ads in here as well as for the good. They do take up a little bit of screen space but its a minor bad point.

12:13p: You can get your gmails through your mobile such as iPhone. It seems only the web interface is down for now.

What do you love about gmail? Is it worth it even with todays downtime?

Should i use tables for layout ?

November 14th, 2008

Here we are in the year 2008 and some design agencies seemingly don’t know the answer to the question!

http://shouldiusetablesforlayout.com/

Benefits of CSS::

  • Faster loading pages
  • Easier to update the whole site
  • Accessible – making the site available to all
  • Content picked up easier by search engines
  • The list could go on…

Cowboy builders use tables for building websites.

Jquery and Sifr Error in IE7 – Internet Explorer

October 24th, 2008

Quick post today but may help save someone a bit of time debugging and back tracking with code.

When using a combination of Sifr ( replacing fonts with a Flash and Javascript combination ) and jQuery ( Javascript codebase which can be built upon for numerous web coding uses ) there was a problem. The code animations and display worked fine but Internet Explorer was throwing up an error. Firefox and other browser were fine. All very easily sorted by simply linking to the Sifr code, after linking to the jQuery code.

Help break a world record

June 16th, 2008

The best web browser in the world is about to get even better. Help Mozilla break the record

Download FireFox 3 on the 17th June 2008

What has happened with Amazon’s redesign? Three basic web design errors!

June 10th, 2008

Was just away to order the monthly supply of books from Amazon.co.uk and i noticed they have had a redesign. Not overly keen on the visuals of the site as a whole, but when looking through i am stunned to see three basic, fundamental errors that is quite shocking to see on one of the worlds most visited and profitable online businesses.

1.) Viewing on a 1024 x 768 monitor there is side scroll ! If Amazon are saying that this is now, a depreciated size of monitor, they are mistaken.

2.) A click here link? Imagine a user viewing the page with a screenreader, (which is software that reads out web pages for blind users), is going to read out “Click Here”. This means absolutely nothing to them, the link should be descriptive and read the text to the left of the actual link : “Forgot your password”. This would helps to users they understand what they are about to click on, and navigate to. Imagine if a page had a 15 “click here” links. How is anyone going to navigate that page with ease! This would help both accessibility and usability of the site.

3.) Last but certainly not least, viewing the source code of Amazon.co.uk shows its riddled with tables, inline css and javascript. The worst offender of the three being tables, which could inspire a whole series of blog posts, why not to use them, alone.

Overall

Now these are three basic errors that i came across within minutes of being on the site. Im quite sure there would be be many more, on further inspection.

I’m shocked, annoyed and disappointed that in 2008, a business so “credible” as Amazon are have redesigned their site to such a low standard.

Telephone:

+44 (0)1224 582948

Office Address:

27 Justice Street,
Castlegate,
Aberdeen,
Scotland,
AB11 6AW