You know in accessibility circles we are constantly telling people using drop down CSS menus that when the menus are not visible  we shouldn’t be using display:none to achieve this.   We all know this one, right.  Just to refresh your memory, remember the display:none rule takes an element assigned right out of the picture completely,  for anyone using a screen reader the assigned content will just not “exist”.

This is all well and good.  Well that depends, maybe there is a case for the use of display:none afterall.

Sometimes we forget about the bigger picture, about the people we are building the sites for.  A few weeks ago at the UPA Perth (chapter in formation) meeting, Teressa from the Disability Services Commission demonstrated with her screen reader (JAWS) why the display:none is sometimes a good thing.

The Issue

Normally for a drop down menu you would code it as a unordered list as below, note I have removed the links for clarity:

<ul class="menu">
        <li>Home</li>
        <li>Products
           <ul class="submenu">
               <li>Sexy Product </li>
               <li>Highest Selling Product</li>
               <li>Mega Cool Product</li>
           </ul>
        </li>
        <li>Services</li>
        <li>About</li>
        <li>Contact</li>
</ul>

And you would use CSS menu based techniques (with a little Javascript for legacy browsers) to generally display the lower  menu (assigned the class submenu on the unordered list).  It follows before the menu is activated it would be hidden from view with the use of the following CSS that still makes the submenu content readable to a screen reader.

.submenu {
    position: absolute; 
    left: -10000px;
    top:-10000px;
 }

For those who are not familiar,  this rule pushes the element outside of the normal document flow visually – to the far left and up beyond the normal visual screen.  However it is still on the virtual screen, so it can be read by a screen reader.

It follows then that a screen reader will be able read all the menu items even the lower level ones and hence the user can transverse at their will round such a menu system.   Which is a good outcome, right?

The Downside – Information Overload

However consider not just a simple menu system (above), but say one from a government agency  consisting of  maybe hundreds of items.  Now think about  having to transverse such a menu.  To deal with those hundreds of items being read out.  As Teressa put it -”It’s just information overload”.

Unknowingly we have subjected our users with disabilities to a massive amount of information that even we are not subjected to.   You see even we see the the menus in chunks, bite sized pieces that we can mentally digest as they appear on a mouse or keyboard action.

The Solution

It’s really a simple thing to fix.  We just use display:none to hide all these large lower menu systems as required.  This means that they are no longer visible to the screen reader at all.  Which is exactly what we want.

.submenu {
     display:none;
 }

To supplement this what we should be doing is using progressional enhancement of the navigational system.  At the very least we should be  having the relevant  sub menus presented on the parent page or related sibling pages as a separate menu list.   This way anyone with disabilities or the like using just the top level menu buttons will still be able to navigate around the site.

So when we have way too much information on the CSS menu, maybe it’s time to consider an  alternative and remove it from the sight of the screen readers altogether. Forcing the navigation of the site by the regular page by page chunks of the menu navigation.

As you would expect this all comes down to testing with real people, people with the disabilities that you are finding solutions for.  You see sometimes with all the good intentions we think we are doing the right thing, but it turns out to be otherwise.

So what instances of disability best practice have you found to be a hinderance to people with a disability?

It’s one of those wet August days in Perth when the sunny and rain just can’t make up their mind who really wants to be the dominate partner.   In a similar way a web design business can wrestle with a similar issue.   Do you use someone else’s pre-built templates  or do you roll your own designs.

Between User Experience and Information Architecture gigs I usually squeeze in a little standard front end web site development.  Over the  years I have rolled my own, designing each website from scratch to the final interactive site.  I have prided myself in this production of  a higher quality result that my clients where looking for.   Something unique that they knew was a once off.

However in the last year or so I have been thinking, is that really what people want.  After all it’s just web design, its not like we are producing a fine arts masterpiece or the like.  It’s commercial throwaway pixels.   To this end I have been experimenting with using pre-built  templates for some of my clients.   Yes I admit it, I have strayed.   Now the interesting thing is there are a number of benefits and pitfalls with using these templates:

Benefits

1. It’s About Profit.

   From a pure business view you really are there to maximise profit.   It’s a cold hard fact that no one in the industry will talk about.   As a creative you are too often concerned with the technical aspect of the design, from the user experience to the beauty of the final  product. From a project management view, it’s about minimum hours for maximum profit.   If you can turn around a design for a client in a few hours and charge out for 5 times that amount, then that is a good thing.  Using pre-built templates allows you to do this very easily.

2. Platform is not at Issue

   These days the professional pre-built templates  often come in a variety  of different platforms from Wordpress, Joolma, Drupal, various e commerce systems and even basic HTML layouts.   So there really is no excuse to be restricted by the template and the platform.

3. A Refreshing Change

   Having someone else outside of your usual creatives design a site allows for a fresh approach to a design view point, this can often win a client over with an alternative design outside your usual stable of concepts.

4. Save Time

   Just like you are saving money on using a professional template, you are also saving time to a degree (see below for clarification), as you at least have a prepackaged starting point.  You can also often present to the client a range of design concept proofs very quickly.

5. New View, New techniques

   You are not just getting a new design, you are being exposed to other people’s techniques in terms of CSS and HTML.  Good or bad, it’s a different view point.   Sometime we just need that as we can all get very stale with our own code or that of the other freelancers we tend to work with.

Disadvantages

1. Don’t Assume it’s Good

   The templates may look very stylish from the outside, design wise.  However I have found that they are often either the bare minimum of code to express the design or a mish-mash of tag soup.  There seems at best to be a distinct lack of professional code.  Maybe I’m just being to hard on my fellow web professionals, but the terms like web standards, the best practice seem to a very loose and fast application in the world of professional template production.

2. Completeness is a Dirty Word

   A well designed template will have been tested against a suite of data types and scenarios that will allow for a large degree of flexibility while still maintaining the interface look and feel.   That’s what you would expect.  Be prepared to get something that is a more of half arsed attempt at this.   Again it’s going to mean that you have to drop into the code and fix the lack of the completeness.

3. Burning Time for Perfection

   I am a perfectionist, I’ll give no quarter on that front, small details in a design tend to  drive me crazy.   I have a habit of correcting bad code or imperfect designs.  In a good way using a template does force you to stop fussing over minor points of the design.   However  in some cases you really need to change the methods used in the code so that it fits into your workflow and makes it easier to maintain in the future.  This is going to cost, sometimes beyond the savings that can be made using templates.   In reality it comes down to the longevity of the client and what future modifications they may require,

4. Bad Techniques

   Don’t expect  all the techniques in use to be good or well thought out before they where implemented.   This is especially true for CSS.  I have often found that the hacks to implement the intended design  (especially  for Internet Explorer) can be an little dubious at best.  Overall the techniques just seem to lack the experience of a good web designer.  I guess in a way I’m projecting my own skills.   Still it’s just little things like  a good CSS layout structures, correct use if inheritance, and naming techniques that really do show how much experience author has.

5. Cost Effective,  Maybe

   It’s just amazing how you are working on a very strict budget with a template design and suddenly the client wants something simple like a colour change  that suddenly means  a template rework.   This is where if it was your design it would be more cost effective to make the change in design direction.  However with a template, that is not the case, you are often working with photoshop files that have had masking and effects layers rendered, so simple things like a slight colour change can suddenly go from a few minutes work to an hour or so of working the design.

After all this what’s the main things I’ve take away from all this are –  In an industry where the business dollar talks, and with the latest software you can turn around a photoshop design into an interactive web site in about 20-30 minutes by using table layouts.   Is there still a place for  unique designs that are hand coded.   I frankly would  sadly say for the average client, no.   The ways of the craftsman are disappearing just as hand made furniture and cars have done in the past.

Maybe it’s time to go design some templates.

Post Lunch, comes forth with the usual multiple stream conflicts as you normally get with a conference like Web Directions South. Lucky there is power charging and free wifi in the breakout areas. Looking forward to the Bert Bos discussion of the revision of HTML and CSS.

John Allsopp – Trends and predictions in web technology

John Allsopp repeated it again, the web is now the platform, he looked at the internals of the stack of the web platforms. The centre can’t hold it all, its all moving outwards, moving away from the control. Technology is removing the friction, off loading the boring stuff to the machines. Privacy and security are still important and should be considered, we must always be aware of the implications of the security and the information being held.

We need to consider the user more than the technology (eg the Wii). The fact is the internet is no longer on the web, its a shared device on the web now. Its beyond the office or the bedroom. But this comes with challenges, like resolution and accessibility, mousing and interaction, text input, and shared experience.

The mobile web, is it here. No baselines, to fallback on. various user events (mousing) just don’t make sense. Many of our design layout patterns just need to be rethinked. Passive input is here now, track and reporting on events is available now.

The traditional computing and web is being disrupted. The removal of the islands of islands of data. It is pushing the limit of the data at the edges. The of the API and the semantic content distribution is allowing for the distribution of the data at the edges.

The challenge is now becoming changing the view form leveraging the value of the content to leveraging value of letting users use your data and use it for mashup and the use of the content ecosystems. The promoting and encouraging of the ecosystems around you. But what about licencing, that’s always going to be an issue. Consider building atomic applications.

Bert Bos – A new life for old standards – revisions to HTML, CSS and others

Bert Bos asked, should we modify or build something new. He ram through the various working groups that are in operation. In the area of HTML its in the area of modify than replace. But in the multimedia is arena it is new verses modify.

CSS – new features for CSS2, for level 3 and level 4. The question becomes what do we add to CSS, he listed the new features that are being considered.

Designers Wants:

• Advanced Layout – define template system
• Grid Positioning – flexible coordinate system
• Stretched Backgrounds
• Multiple Backgrounds
• Rounded Corners
• Rotation and Other Transformations (rotate block before and after text)

It was good to see and hear Bert speak. It was interesting to hear and see his passion in various issues and learn of the disappointments with the W3C. Of interest

Chris Wilson – Moving the web forward

Chris Wilson discussed the connection of people and the interconnection of people is now the core of the fore-front of the web itself. Now we need to look at how we can improve it.

Web 2.0 – “Caring about the quality of web UI”

People are grouped as Web Developers, Browsers Vendors, and the rest. No consistent browser platform. The challenge for browser vendors is that we can’t break the web and the previous implementations (IE has over half billion users). Compatibly prevents browser upgrade. So supporting previous versions of the browsers We need ton consistently improve five things of the web:

• Secure
• Stable
• Interoperable
• Preformant
• Powerful

Security needs to be everyones concern. Not just the browser vendors, developers should be concerned too.

But what do developers want:

• Works in x should work in x.1
• Pages that work to web standards
• Shouldn’t have to extend browser matrix

Standards need to show what works in the wild, we need to work together. IE.Next will ship with an improved layout engine, also realise that people build the web differently today than in the past.

After Chris Wilson, it’s the Web Direction Reception, then the Sydney Twitter Underground Brigade Meetup.

Technorati Tags: wds07, conference, sydney, web+directions

Day one workshops, Web Directions South, the fun begins after breakfast at Concrete, with Andy Clarke launching in the breaking the limitation for the browser and CSS. Looking at the media rich presentations with the high end, advertising. movie and music industry, questioning why they can’t use semantic CSS based layout.

Andy has suggested people need to look at using more of the existing draft CSS3 standard that are supported be the relevant browsers and use javascript to plug some of the holes, example multiple columns in Firefox.

Maybe we should be considering, should browsers see the same design, should it be pixel perfect on very browser. Considering the current crop of best browser first the design for them via using progressive enhancement. Why can’t there be different version or standards of a site support. People except that hardware and electronics do different things. Just don’t add in more presentational markup and hacks to allow for IE6, just make it more plain and just base design functionality.

Content should come first, then the presentation, consider not using the grid at this stage, consider the content semantics, markup the content as raw content. This will increase the options on the design. Leveraging the content markup into the presentation not the other way round. Make the markup minimum. Nothing new here.

Andy has transformed into John Allsopp as he gave a brief overview of microformats. I’m not going to go on about microformats, you all know I have a passion about them. It was interesting to see how many people didn’t know about microformats.

Looking at modern CSS selectors for example: child selectors, adjacent selectors, attribute selectors, pseudo-eleemnt selectors. To avoid the use of addition presentation markup. Using attribute selectors for diagnostic CSS debugging. Note attribute selection are weak on specificity issues. Use of substring attribute selectors for comparison and styling of start, end, contains in string. Pseudo elements application of style specific information. Of course these can be all be combined into a CSS tag soup.

Amusing that we started with positioning elements, then we used float to position elements, but we can go back to positioning now with the present browsers. Use of negative margins in image replacement with transparent images to pull the images outside of the grid or box shape.

Andy dealt with relative position by explaining it as offset visual positioning, giving examples with negative positioning and negative margins to break the box. He also looked at absolute verses relative positioning, which he has just explained really well to the audience.

Being the uber design geek Andy has to discuss typography and the simple ways to improve web typography, such as:.

• Reset the browser defaults.
• Compose to vertical rhythm.
• Incremental leading.
• Optical Greying of text.

Final thing is if maybe the W3C won’t push the CSS3 development, then maybe it’s time for Designers to taking back CSS by using the CSS advanced features, trying them out, blogging about them and forcing the issue. Now this I can relate too. More on this later in the week!

Technorati Tags: CSS, Microformats, Andy+Clarke, wds07, workshop, web+design

Technorati Tags: Andy Clarke, css, Microformats, microformats.org, wds07, web design, workshop

Seems lately that we are now starting to get a good spread of CSS and JavaScript (DOM Scripting) debugging tools available. About time too, for too long we web designers have spent endless hours debugging inconsistent implementations of CSS over the various browsers. Time for us to take some of that ‘lost’ time back. Now we all know about Joe Hewitt’s famous FireBug extension. If you don’t then go get it, install it, and it will change the way you design. That wonderful extension aside, what else is out there in the market place:

• XRay

  Just the other day John Allsopp joined the crowd with his XRay bookmarklet. Now this is just a CSS only tool that allows you to XRay (hence the name) into a page and see the CSS that relates to an element. Much like you can do in FireBug in FireFox, an extension I’m sure you all . What sets the Xray bookmarklet asie is that it works with Safari 2 and 3 (for OSX), and the Mozilla based browsers (OSX and Windows). The good thing about this tool is that it doesn’t take up as much screen real estate as FireBug does. But it doesn’t stop there, oh no. John is planning versions for Opera, and Internet Explorer. If this happens, this tool could be come an essential component of any web designers toolkit. Still go check it out. Also remember it’s still in beta.

  Update: There is now a version for Internet Explorer, this has now become a primary debugging tool for IE.

• YSlow

  Then we have YSlow released by the team at Yahoo, yes this is a FireFox Extension. Okay it’s not all strictly CSS, but it is a handy enhancement on Firebug and provides a quick analysis of your web page’s performance and reports on possible speed bumps (or weak points) for the nominated page. Now a word of warning using this. Don’t leave it turned on all the time, only enable it for testing and then disable it’s reporting after you have finished using it. It can be resource intensive depending on the web page.

• Dust-Me Selectors

  The people at SitePoint have produced a nice extension Dust-Me Selectors that reports on the unused CSS selectors within the current page. Now this is not ideal, as you may only use a selector on one page, and this maybe not the one being reported on. But it is good for general design selectors. Especially if you build your pages with a base design featuring all the major content elements for debugging of the design, and ensuring it all works and looks as you have envisioned. This even works with IE conditional statements. There is a school of design that dictates that you isolate your base design CSS selectors from your specifics via separate CSS files, Dust-Me Selectors is ideal for that situation.

• FireFox Web Developer

  The Web Developer FireFox extension developed by Chris Pederick is still a handy addition to any web designers toolkit. Although it has been surpassed in many areas by FireBug it is still useful for disabling elements of the display. I would recommend you at least have it installed as it can ofter as alternative view point to FireBug.

• DOM Inspector

  Scott MacGregor’s DOM Inspector extension for FireFox was very popular before the introduction of FireBug. It is still in production, however I feel the usefulness within the web designers tool kit has wained. This extension allows you to examine the DOM of a page, and travel up and down the DOM structure.

• Internet Explorer Developer Toolbar

  The Internet Explorer Developer Toolbar from Microsoft is really the only alternative, outside of the commercial products (see below), for CSS debugging in IE. It’s not a even a shade on FireBug, and while a stable and useful product, it is about time Microsoft developed a better tool than this, as it is a bit dated. Come on Microsoft time to revise and take a leaf out of the FireBug camp.

• Opera Web Developer

  There is a Web Developer Toolbar and Menu for Opera as well. This offers very much a functionality similar to the FireFox Web Developer toolbar.

• FireBug Lite

  Not the most ideal solution but FireBug Lite does offer Firebug like functionality to IE, Safari and Opera. It requires the use of a code insertion into the page to be debugged and the calling of the FireBug interface modules from a JavaScript library on the server. Not so much as on the fly like FireFox FireBug functionality, but it is an alternative.

• DeBugBar

  This is the solution to the poor support provided from the IE Developer ToolBar. The commercial product DeBugBar. This is an Internet Explorer plug-in that gives you FireBug like control of the page. Navigation up and down the DOM, and changing of CSS selector attributes on the fly. A JavaScript console and inspector. If you have problems debugging CSS in IE, and I know we all do! Then take a look at this commercial plug-in, prices start from 59 €.

That’s a bit of a wrap up. What other CSS debugging tools do you use, besides blood sweat and tears (mainly over IE 6)?

Technorati Tags: XRay+Bookmarklet, YSlow, FireBug, FireFox, CSS, Web+Design, Dust-Me+Selectors, Web+Developer+ToolBar, Opera, Debugging, DOM+Inspector, Internet+Explorer+Developer+Toolbar, IE, FireBug+Lite, DeBugBar