Ian Matthias

http://51elliot.blogspot.com/2008/02/selenium-ide-goto.html

Loading mentions Retweet

A friend sent me the link to this tool: http://www.notableapp.com/, which is a great way for non-technical people to capture their comments and feedback on a website and submit to developers.

Rather than wasting time describing where on the page they are, or struggling with taking screenshots and manipulating them in Powerpoint or similar, a simple Firefox plugin takes the screenshot and the user then uses the webapp to comment on the visuals, code, heading structure and SEO of the page.

Unfortunately it doesn't allow easy import of the issues raised into a bug-tracking system (at least not that I have found so far). However, this might not be desirable as the discussions arising in the collaborative space that NotableApp creates to discuss the webpage might require a different resolution.

I certainly aim to use it on small projects in the meantime and have been testing out its functionality already: https://ianmatthias.notableapp.com/website-feedback/34605/Unforgotten-Exmoor-Homepage.

Loading mentions Retweet

http://labs.adobe.com/technologies/browserlab/

Useful tool for testing the visuals of your website on different browsers. I'm not entirely certain that IE7 and IE8 are entirely accurate as they do not seem to deal with transparency in the same way as it is being dealt with on a local machine.

Loading mentions Retweet

http://www.smashingmagazine.com/2009/09/24/10-useful-usability-findings-and-guidelines/

Interesting findings on usability.

Loading mentions Retweet

http://www.groovecommerce.com/ecommerce-blog/ecommerce-web-site-design/creating-an-accessible-checkout-progress-bar/#comment-11644

An interesting article on how this could be done. Due to the reasons below I would probably make the following modifications:

1. To satisfy DDA requirements, information that is conveyed by an image (e.g. the progress bar image) also needs to be conveyed by screen-reader accessible text on the page. For step 3 from your example page I would implement it as below; inserting " (selected)" after the step name provided within the <span> tags.

<h3>Step 3</h3>
<ol title="Checkout Progress" id="step3" class="checkout-progress">
    <li>Checkout</li>
    <li>Billing and Shipping</li>
    <li><span>Confirm Your Order (selected)</span></li>
    <li><span>Complete Order</span></li>
</ol>

2. When I last researched the issue, most screen-readers do not come pre-configured to read out the title text of a link. It is entirely possible that this situation has changed, but if this is still the case I would be inclined to further modify the example by placing the "Return to" text inside <li><span>  instead of using title text. I would also be consider using "Back to" and "Forward to", rather than "Return to" as these re-enforce the ordering by indicating the direction through the process that the user would be moving. Further modifying the above example with the steps above and to add a forward link for the final step this would become:

<h3>Step 3</h3>
<ol title="Checkout Progress" id="step3" class="checkout-progress">
    <li>Back to Checkout</li>
    <li>Back to Billing and Shipping</li>
    <li><span>Confirm Your Order (selected)</span></li>
    <li>Forward to Complete Order</li>
</ol>

Loading mentions Retweet

http://forums.cpanel.net/f5/horde-attachment-stripped-43416.html

Loading mentions Retweet

http://www.anandgraves.com/html-email-guide

Loading mentions Retweet

Click here to download:

Excel_Formulas.xls (20 KB)

Spreadsheet illustrating excel formulas. Currently illustrating:

• COUNTIF for numeric values
• COUNTIF for strings
• Freeze Panes: to keep the title rows of cells at the top of the document

Loading mentions Retweet

For displaying extremely long amounts of text, such as terms and conditions, you might need to use a scrollable div to display the text inside a scrollable area of the page. My solution was:

In the CSS:

div.scrollable {
    overflow-x:hidden;
    overflow-y:auto;
    height:400px;
}

In the HTML:

<div class="scrollable">
    Very long scrollable overflow content goes here.
</div>

Scrolling can also work in automatic, hidden and visible modes as follows:

• auto: automatically assigns left and right scrolls
• hidden: hides the content, so that although it is present on the page, you cannot see the scrollbars or access the content further down in the scrollable area
• visible: forces all content to expand and be shown outside the scrollbar-defined area
  

One good use of this that I can think of immediately is when trying to provide an accessible version of rotating content such as a carousel of promotions. A current example of this is the Dixon's homepage http://www.dixons.co.uk/ where users with Javascript disabled see the promotions in the carousel appear one beneath the other and reach them using the carousel buttons. With javascript enabled the users get the full dynamic slide-in slide-out effect without the use of scrollbars.

Loading mentions Retweet

Documenting Ubuntu keyboard shortcuts as I come across them:

• Alt + F1: Open application menu
  
• Alt + F2: Open start application dialog
• Ctrl + H: Toggle show / hide of hidden files in Nautilus

Loading mentions Retweet