Monthly Archives: May 2012

2 Websites Accessibility Testing Tools

.

Web Accessibility

Web accessibility refers to the inclusive practice of making websites usable by people of all abilities and disabilities. When sites are correctly designed, developed and edited, all users can have equal access to information and functionality. For example, when a site is coded with semantically meaningful HTML, with textual equivalents provided for images and with links named meaningfully, this helps blind users using text-to-speech software and/or text-to-Braille hardware. When text and images are large and/or enlargeable, it is easier for users with poor sight to read and understand the content. When links are underlined (or otherwise differentiated) as well as coloured, this ensures that color blind users will be able to notice them.
Web accessibility – Wikipedia

Testing Tools

Enjoy it!

Pingdom Tools – Page Speed Performance

.

Nobody Likes a Slow Website

Pingdom Tools is a Full Page Test tool to help you analyze the load speed of your websites and learn how to make them faster. It lets you identify what about a web page is fast, slow, too big, what best practices you’re not following, and so on.

This tool is completely free and easy-to-use.

Features

  • Examine all parts of a web page: View file sizes, load times, and other details about every single element of a web page (HTML, JavaScript and CSS files, images, etc.). You can sort and filter this list in different ways to identify performance bottlenecks.
  • Performance overview: it automatically puts together plenty of performance-related statistics for you based on the test result
  • Performance grade and tips: see how your website conforms to performance best practices from Google Page Speed (like Yahoo’s Yslow). You can get some great tips on how to speed up your website this way.
  • Trace your performance history: save each test so you can check it later and see how things change over time.
  • Test from multiple locations: see how fast a website loads in Europe, the United States, etc.
  • Share your results: it’s easy for you to do a test and share it with your friends, work colleagues or web host.

All tests are done with real web browsers, so the results match the end-user experience exactly. Tests are done from dedicated Pingdom servers.

Pingdom – The Uptime Company

Visit Pingdom Tools and test your website.


Check out my blog score!

How To Create 3D Text using CSS3 | CSSReX

.

CSS3 Text
Css3 introduced few new interesting features, one of these is text-shadow.

Earlier Text Shadows were announced since the beginning of css2 however, the only browser that was supporting this functionality was Safari.

If you talk about today’s condition, almost all the browsers except Internet Explorer are running Text Shadows successfully.

This usefull tutorial by CSSReX shows how to create a 3D text using only css3 text-shadow.

ternarylabs/porthole Javascript Library

.

Porthole is a small Javascript library that makes it safe and easy to communicate with cross domain iFrames. Porthole relies on hidden iFrames (later referred to a as proxy) to exchange information. The caller sets a url fragment with the message to pass. The proxy by virtue of being served from the same origin as the callee, invokes a callback method with an event object that contains the message read from the url fragment. The message signaling mechanism is based on a resize event.

How to use it

Include the Javascript.

<script type="text/javascript" src="porthole.min.js"></script>

Create your content iFrame. This is where the guest content lives. Make sure to give it a name.

<iframe id="guestFrame" name="guestFrame" src="http://other-domain.com/"></iframe>

Define an event handler if you want to receive messages.

function onMessage(messageEvent) {
    /*
   messageEvent.origin: Protocol and domain origin of the message
   messageEvent.data: Message itself
   messageEvent.source: Window proxy object, useful to post a response
   */
}

Create a window proxy object on the main page.

var windowProxy;
window.onload=function(){
    // Create a proxy window to send to and receive
    // messages from the iFrame
    windowProxy = new Porthole.WindowProxy(
        'http://other-domain.com/proxy.html', 'guestFrame');

    // Register an event handler to receive messages;
    windowProxy.addEventListener(onMessage);
};

Create a window proxy object in the iFrame.

var windowProxy;
window.onload=function(){
    // Create a proxy window to send to and receive
    // messages from the parent
    windowProxy = new Porthole.WindowProxy(
        'http://parent-domain.com/proxy.html');

    // Register an event handler to receive messages;
    windowProxy.addEventListener(function(event) {
        // handle event
    });
};

Send a message.

windowProxy.post({'action': 'supersizeme'});

ternarylabs/porthole GitHub

Thanks to georges

The Blog Usability Checklist by Skelliewag

.

Skelliewag has written an interesting blog usability checklist composed in 19 points.
A great way to evaluate and improve the usability of your blog or your websites as well.

  1. Does your site have an ‘About’ page?The importance of this element is succinctly explained by usability expert, Jakob Neilsen:
    It’s a simple matter of trust. Anonymous writings have less credence than something that’s signed. And, unless a person’s extraordinarily famous, it’s not enough to simply say that Joe Blogger writes the content. Readers want to know more about Joe. Does he have any credentials or experience in the field he’s commenting on? (Even if you don’t have formal credentials, readers will trust you more if you’re honest about that fact, set forth your informal experience, and explain the reason for your enthusiasm.)
  2. Does your site have a ‘Contact’ page?
    This page will be a first port of call for readers wanting to connect with you. Bloggers do tend to include contact information, but often as part of their ‘About’ page. This is quite counter-intuitive for the user. For example, if you wanted to ask someone for their email address, would you do it by asking: “Could you tell me about yourself?”
  3. Are your headlines a meaningful preview of the article?
    Vague headlines like “You Won’t Believe This” or “Some Thoughts on Politics” are bad usability and about as gripping as a waxed floor. Your headlines should encapsulate why a reader should pay attention to your article, and if possible, preview what they will find there.
  4. Is the function of each element on your site obvious to your target audience?
    An Alexa widget on a cooking blog is bad usability. In fact, Alexa, Technorati, and any other blogger/webmaster widgets are usability stumbling blocks on any site not about blogging/webmaster topics.Two popular WordPress plug-ins I think well-and-truly break this usability principle in all contexts are the Share This! social media plug-in and Popularity Contest.Share This! is an incredibly ambiguous term. It could mean any number of things, and when a reader isn’t sure what clicking on something will do, chances are she will not do it. My advice would be to stick with specific buttons for each social media service instead.The Popularity Contest plug-in sticks ‘Popularity: 3%’ or another low percentile at the bottom of each post, and is broken in two ways: it makes no sense to those who don’t have the plug-in, and secondly, no-one wants to see a positive variable and a low percentile (i.e. Honesty: 2%)
  5. Is it clear where each link will lead?
    Regular readers will know this is a habit I’m trying to develop over time. Even if you want to hyperlink the text ‘click here’ (a strategy Copyblogger has suggested will increase click-throughs) it’s important that the text leading up to the link explains where the ‘click here’ will lead. If you’re using keyworded anchor text it should serve as a mini-preview of what you’re linking to.
  6. Is your text readable?
    If you suspect visitors are not thoroughly reading your articles, perhaps because their comments indicate only a partial understanding of what you’ve written, it may be because your text is difficult to read. This is an endemic problem because many bloggers only read their posts as they’re composing them and not once they’re published. I’d suggest getting a few friends to look at your posts and describe whether or not it is easy to read for them.
    If you’re using a small font, or a serif font (like Georgia, or Times New Roman) — two trends I’ve seen growing more prevalent in recent times — then your content may be difficult to read.
  7. Do your posts contain whitespace or images?
    It’s important to use frequent paragraph breaks in web writing. Images will also make your posts easier to read. Each post is a wall of text in its unformatted form. Your goal should be to break it up into a series of bite-sized chunks.
  8. Are you making good use of sub-headings?
    I don’t think we should ever settle for scannable content. Sub-headings work to signpost your logic, to give readers an angle to approach the following paragraph, and to lay out your sequence of ideas. Sub-headings don’t make it easier to scan — they make it easier to read. If you want readers only to scan your posts, don’t format them.
  9. Do your posts fluidly allow readers to comment when finished?
    This is as simple as adding a comment link to the bottom of your posts. Most blog designs readily accommodate this but I still encounter some that don’t. If your comment link is under your headline, it’s in the wrong place.
  10. Is your feed icon above the fold?
    There’s a compelling reason to adhere to this standard: you will get more subscribers. Your feed button should be prominent, but it should never insult the intelligence of your readers: (I’ve occasionally seen feed buttons as big as a child’s hand!).
  11. Does your header image link to your main page?
    Many readers expect that clicking on your header will return them to your main page, and it’s become something of a web standard. If this is not possible with your design (for example, if your header image is the background for a cell), make sure there is a prominent link home near your header. Even if your header already links back to your main page, I think an additional text link is good usability.
  12. Is there padding between your embedded images and text?
    Text running into the sides of images is a nightmare for readers. Sentences are, after all, supposed to end in full-stops, not pictures of boats!
  13. Are there wide margins around your posts?
    Margins around text are fundamental to readability. If your blog posts run almost into your sidebar, or to the side of the screen, you should make your post column narrower.
  14. Are your posts less than 2/3 a screen-length wide?
    Contrary to popular belief, wide post margins are not good for readability. There is a reason newspaper columns are as narrow as they are. Compare, for example, the readability of Blogging Tips with that of Signal vs. Noise.
  15. Are you making your best posts easily accessible?
    Readers shouldn’t have to excavate killer posts from your archives. Further, I think any blogger who’s not highlighting their best stuff is selling short the long-term effort they’ve put into building their blog. A quick list of benefits: it shows readers your site is packed with value, it will ensure your best posts continue to generate comments and inbound links, and it will establish that the sum of your blog is more than just your most recent posts.
  16. Are your color choices conducive to usability?
    Black text on white is easiest to read, followed by black on light. Any writing on a dark background is hard to read, but worst is light text on a light background, or dark text on a dark background. James Reggio’s personal site is, in my opinion, an example of minimalism winning at the expense of usability. If each line of text was the color of the central two lines, it could be transformed into a usable and functional minimalist design.
  17. Are your links easy to pick out?
    A good practical tip to unsure this is to double format your links. They could be a different color to the plain text and underlined, or bold and underlined, for example. Often one form of formatting isn’t enough (for example, links only in different colors can be hard to pick out if the color is similar to that of your plain text. Underlined links not in a different color can look like underlined plain text, also.)
  18. Are your images meaningful in their context?
    Including images in your posts is not a good in and of itself. If they don’t relate, at least tangentially, or metaphorically, to your content, they will distract readers. Images should capture the essence of your content, or create an appropriate atmosphere for consuming it.
  19. Are your essential navigational elements easily accessible?
    The biggest culprit in breaking this usability principle is what I call the ‘footer ribbon’ (though perhaps designers have another name for it). It’s everywhere — even the ProBlogger redesign! The ‘footer ribbon’, if you have one, is just above your footer, beneath the content, and usually contains navigational elements, categories, and other important stuff.To me, this is like throwing a party and serving finger-food under the table instead of on it. How many readers will look for important navigational functions in the nether regions of your main page? My advice would be to simplify your sidebar, move only those footer ribbon elements that are essential into your sidebar, and delete the ribbon.

The Blog Usability Checklist « Skelliewag.org.

jsPerf — JavaScript Performance Playground

.

jsPerf is a performance playground for JavaScript developers.

What is

jsPerf aims to give an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks. But even if you don’t add tests yourself, you can still use it as a JavaScript performance knowledge base.

Benchmark.js

jsPerf is proudly powered by Benchmark.js, a robust JavaScript benchmarking library that works on nearly all JavaScript platforms, supports high-resolution timers, and returns statistically significant results. Kudos to John-David Dalton for his awesome work on this project!

If you have any question you can check the FAQ.

jsPerf.com

Lynx Viewer – Text-mode Web Browser

.

It’s worth running pages through a text-only browser, or text-browser emulator to see what e.g. a blind person using a text-to-speech converter will encounter. It will help you pick up on badly chosen or missing ALT texts for example. It also shows you the site pretty much as a search engine will see it. Incidentally the Opera browser has a built-in text-browser emulator.

Lynx Viewer is a web service allows web authors to see what their pages will look like when viewed with Lynx, a text-mode web browser.

Random posts