Archive

Archive for the ‘Web Design’ Category

Screen reader survey

February 21st, 2009

A survey by WebAIM on how users of screen readers interact with web pages is worth a read. It gives a small insight into how screen reader users navigate around pages and some of the problems they face. The survey failed to clarify the term Web 2.0 so the survey hasn’t helped to understand if AJAX based sites disenfranchise partially sighted users but it does confirm some of the advice accessibility experts make. It also reinforces some of the point I tried to make to the Domino developers at Lotusphere about where the new XPage technology fails to meet basic accessibility criteria, namely that screen reader users use the page’s semantics to navigate around the page. A good practice that XPage authoring using the visual interface fails to support.

When html was originally specified it was intended to be a docuument markup language and the tags selected define the page’s content – headings, paragraphs, lists, etc. As web developers we all know this, it’s really basic stuff.

Since headings are more important than paragraphs, a significant percentage of screen reader users use headings to quickly navigate around sections of the page and this confirms the advice accessibility experts have been giving for years. Define a readable document and then style it to look like an application. XPages gets this fundamentally wrong and provides no visual tools to generate standard page markup, a glaring omission that no other editor that I’m aware off fails to include.

All’s not lost. If you want to develop a semantic page it’s just a case of switching to code view and you can add normal markup and it wouldn’t take much for Lotus to add some simple page editing tools.

Hopefully surveys like this help developers see how some simple changes to their pages can make page browsing easier for a small forgotten number of web users

Accessibility, Domino, Web Design, XPages , , ,

8.5 Discussion template

January 6th, 2009

Ok, now this is beyond a joke. Sorry, but Domino 8.5 is going to be an accessibility nightmare. I know the discussion template is used many many companies and I’ve seen some University’s base their discussion facilities on this template (not us, we wrote our own), but the new template makes NO ATTEMPT to be accessible, both from point of view of handling javascript or by using semantic HTML.

Sean Cull has kindly left his 8.5 discussion template  open for us to play with.

If you’ve got Firefox with the web developer tool bar installed. Switch off css

discuss

Notice how the page just collapses into a mess. None of the generally accepted conventions for semantic pages have been obeyed (such as marking up related links as lists).

It’s even worse if you switch off javascript. Although many of the advanced screen readers such as JAWS, integrate with Internet Explorer and deal with certain types of Javascript events, it’s generally accepted in accessibility circles that wherever possible, web developers should attempt to make as much of the page work without javascript as possible. In fact nothing in the discussion template works without javascript. All the links are to ‘#’ with the clicks being handled through events. Why, when there’s a document stored in the database is it now possible to show the document when javascript is switched off.

If the template demonstrated significant usability improvements over the existing template it would almost be acceptable, but the template is very basic. Where’s the different view modes such as viewing discussions as linear threads or the ability to filter discussions to the current conversation (i.e. limiting the view to the direct reply hierarchy). Where’s the facility to view the message you’re writing your reply to? Where’s the lookup when tags are added?

A core template such as this, should be accessible. If I was evaluating this product for use within the University it would not make it past the tender. It would fail on every accessibility point.  Sorry, it’s simply that bad.

Domino, Web Design , , ,

HTML-Ipsum

December 15th, 2008

I’ve been using lipsum.com for years to generate lipsum text for page mock-ups. HTML-Ipsum is a really simple site that takes lipsum generation one step further. This site generates html based lipsum but includes useful mark-up such as bullet lists, paragraphs and headers, allowing you to quickly preview the styles you’re applying to your website.

Web Design

Ideajam – accessible?

December 6th, 2008

The day after my last post, I just happened to visit Ideajam after I’d been doing some testing in Firefox with Javascript disabled. It completely threw me. Very little of the site worked and most of the text was missing.

Notice how all the login options and promote options are missing. 

Ideajam is a valuable resource for the Lotus community, but it’s also a commercial product. So a commercial decision seems to have been made to implement alternative language support as expediantly and flexibly as possible through rendering the page using Javascript. Although this works, it’s not the ideal solution. Ideajam also makes heavy use of javascript to improve the user experience using AJAX calls to handle votes, dynamically generated tag clouds, etc. It clear that the developers made every effort to make the user experience pleasurable.

But it throws up a complicated question, what is accessibility?

I think there are two different approaches to accessibility.

The first approach is to view accessibility as making the website easier to use for the majority of users through the use of javascript to handle the simple interactions. Ideajam is clearly developed using this model.

The second approach views accessibility as designing websites that ensure that ‘no one is left behind’ by making the site work without javascript. Often these sites are government, educational or charity websites. Designers in the second category often have to make design compromises so the needs of a small minority of users are supported.

I obviously have to take this second approach, but have tried to be pragmatic adopting a ‘core’, ‘plus’ and ‘core plus’ design model.

The ‘core’ model

The core model is used for areas of the system used for teaching and learning. This includes module websites and core university support information. The core model adopts the ‘no one should be left behind’ model. Everything works without javascript.  About 90% of StudyNet functionality falls under this category.

The ‘plus’ model

The ‘plus’ model provides us with the extra flexibility to develop interactive facilities using client side javascript interaction handling, and we use this model in social areas where the students’ educational experience won’t be effected. We try to ensure the functionality works for as many users as possible, but will cut corners and develop client-side solutions.

The ‘core plus’ model

The core plus model is when we make the decision to develop both the server-side and client side interaction.

Often we have to make a decision as to whether it’s worth doing the work twice. i.e. developing front-end  using javascript to handle interactions and also having to do the work a second time handling the interaction through a series of server posts. More often than not, we take the decision that to only develop the more longwinded server-side interaction and this obviously compromised the interface for the majority.

ideajam as a ‘core plus’ development

Using ideajam as an example, it could be developed under a ‘core plus’ model. Multiple language support would almost certainly be rendered on the server side under the ‘core’ model. If the tag cloud can’t be generated quickly server-side, then we would develop it under the ‘plus’ model since the tag cloud isn’t essential functionality. For the vote buttons we’d probably adopt a ‘core plus’ model – links would be standard hrefs calling a server-side agent, but for users with javascript, the agent could easily be designed to handle AJAX calls without significantly increasing development time, so we’d also add handlers to make the AJAX vote. You would then have an ideajam that covers both accessibility approaches.

Domino, Web Design , ,

“We Are Unable to Accept Your Lotusphere 2009 Birds-of-a-Feather abstract”

December 4th, 2008

This year I put in two Lotusphere abstracts, a BOF and presentation on ‘accessible web design‘. To be honest neither abstract was very good having been put together at the last minute. If I’m honest, I’m relieved that I won’t have the worry of presenting and can just relax and enjoy the week. But I’m always uncomfortable attending conferences when I’m not presenting, especially at such an expensive conference (why doesn’t IBM sponsor educational establishments – most academic conferences are half the price of this one?)

Accessibility is extremely important in my job. A large proportion of ‘Web 2.0′ sites are designed without any real consideration of accessible design and I have a concern that Domino 8.5 will encourage the Domino community into adopting Web 2.0 technologies without understanding the problems they might be creating.

When I was a design student I visited the ‘Royal National Institute for the Blind’ and met one of their designers. He explained that the RNIB believed that spending some time with a student designer to explain some of the of the issues surrounding designing accessible products, would be repaid many times over, if that designer adopted sympathetic practices in industry. So I’ve always tried to show as much consideration as possible when designing websites, for the issues faced by people with disabilities.

At Lotusphere 2008 there were lots of wizzy AJAX being demonstrated. Not once in any of the session I attended, did a presenter discuss the accessibility issues created by the inappropriate adoption of AJAX. For example, the excellent ‘Great Code Giveaway’, showed developers how to make views exciting through AJAX. The fact that if you had Javascript disabled, you got nothing, wasn’t mentioned. Looking at the code afterwards, there were simple approaches that could have allowed the code to degrade to a more basic accessible design. I imagined Domino designers rushing back creating a whole host of inaccessible websites.

After chatting to some of the Designer and Domino teams, I wasn’t filled with confidence that Lotus are really tackling accessibility in Designer 8.5. So although I’m relieved I don’t have to present, it’s clear to me at least, that Lotus should have scheduled one of the accessibility sessions.

I hope it doesn’t come across that I’m bitter for not getting my sessions on to the agenda, I’m really am not. There was a far better accessibility abstract posted to IdeaJam that also hasn’t been included in the programme. It’s just I know how frustrated I was at last year’s Lotusphere that accessiblity issues were completely missing from the agenda, I’ll suspect this year I’ll be be doubly so.

Domino, Web Design , , ,

Safari increase

December 4th, 2008

It appears that Safari’s use is rising. One recent report by Net Applications places Safari usage at 7%. Although other stats sites such as thecounter.com put Safari’s percentage at around 4%, it’s good that other browsers are finally making in-roads into IE’s dominance.

Although there’s been a very big increase in student laptop use on campus, I would say that Mac usuage has only grown in line with the general trend. So Stats for our systems are closer to ‘thecounters’ results. Our figures are:

  • Safari - 4%
  • Firefox - 20%
  • IE - 74%

Although my life would be easier if we stuck to a single browser. I’ve always recognised that as a web developer in a University, I have a responsibility for information to be as accessible as possible. So have resisted efforts to move to a single browser platform (IE). I the long term this will pay dividends as students switch to ‘standards-based’ browsers such as Firefox. In the short term with IE6 being so heavily used and a requirement to provide access for the majority of users, it does significantly increase development time.

Our student population has a very wide demographic, everything from 18 year old’s, coming direct from school, to ‘mature’ health professionals here to develop their professional expertise. It means I have a proportion of users who are not confident computer users often using older computers, so IE 6 usage is still very high (‘encouraging’ them to upgrade would put pressure on our helpdesks)

A big advantage of most of the modern browsers such as Firefox and Safari, is that they encourage users to update when new versions become available. They make it easy, even for the users who aren’t confident, to upgrade to the latest and most secure version. In fact our stats show that for Safari and Firefox, a high proportion of users are using the latest versions. Unfortunately with Internet Explorer, we’re still seeing nearly 25% of Internet Explorer users are using Internet Explorer 6. If I factor that 60% of all accesses are from on-campus, where computers are using the latest version of Internet Explorer, then the percentage of our students’ computers using Internet Explorer 6 must be nearer 30-35%. So for us at least, there’s still a long way to go before we can drop that browser from our test suite.

Web Design

Host files

December 3rd, 2008

I’m setting up this new domain and I’m having to setup my own domains and since Media Temple don’t handle .co.uk’s, I couldn’t set them up when I purchased the server space. So while I was waiting for a dns change to be propagated from a UK registration service. I wanted to test that I had configured the server correctly for the new urls and discovered a remarkably useful ‘hosts’ file in both Windows and OSX that allows you to override your dns server and redirect urls to ip addresses. Remarkably useful and I don’t know why I wasn’t aware of them.

On Windows there’s a file called ‘hosts’ in 

c:\windows\system32\drivers\etc\hosts

You can edit the file using a text editor and add in your testing servers url and the ip address to direct the browser to. e.g.

127.0.0.1       mywebsite.com

OSX also has a ‘hosts’ file in /etc/hosts

Again you can edit the host file by using 

sudo vi /etc/hosts

and then add the required host definitions.

General, Web Design

24 Way to impress your friends….. Web Design Advent Calendar

December 1st, 2008

A interesting idea, an advent calendar of useful web development tips. It seems to have been running for a few years but it’s the first time I’ve seen it. The first article is a web developer’s checklist for a web designer. Personally I’m not too keen on their design, but they appeared to have covered a wide range of topics in previous years.

24 way to impress your friends

Web Design ,

Mock-up tool

November 28th, 2008

If you are and have a habit of producing very quick and rough mock-ups with a pen an a piece of paper (or maybe occasionally using an Table PC), then you might be interested in Balsamiq Mockups. This is an Adobe Air application that allows you to paste together quick mockups by dragging and dropping pre-defined templates onto a work area, such as a browser window, menu bar, image holder, etc.

It’s a really simple idea and works really well

Source: Interface Matters

Web Design ,