Archive for December, 2009

AJAX accessibility for websites

AJAX or Asynchronous JavaScript and XML, is an innovative way of using existing technologies to create highly interactive web applications. AJAX allows portions of the page to be updated without having to refresh and reload the entire page. It can increase site performance significantly and provide cutting edge user interfaces. Unfortunately it can also be a source of concern for delivering fully accessible web sites.

What is AJAX?

AJAX is not a new technology in itself but a new approach to programming websites based on the following web standards:

  • JavaScript
  • XML
  • HTML / XHTML
  • CSS

The key word is asynchronous – AJAX applications work ‘behind the scenes’ with the web server to dynamically update the content of a web page. JavaScript plays an important role in this process, trading data with the server and manipulating the information on the page.

Accessibility benefits of AJAX

As well as significantly improving the user experience AJAX applications can also enhance accessibility. For example:

  • Auto-suggest dropdowns can help both users with reading difficulties and motor impairmentse.g. City and airport suggestions are offered as users enter text Screenshot of Kayak auto-suggest dropdown
  • Drag & drop sliders can help users with reading difficulties due to their illustrative naturee.g. A click-and-drag slider is used to filter search criteria Screenshot of Amazon drag & drop  sliders

Accessibility issues caused by AJAX

AJAX and JavaScript are usually used to update page content. When this happens screen readers respond in a variety of different ways, depending on both the screen reader and the browser:

  • Screen readers aren’t aware of the changes so will read out the unmodified version of the page. This means screen reader users don’t get the updated content of the page.
  • Screen readers are aware of the changes but will only read the modified content when they naturally reach it. This is fine unless the modified content precedes users’ current location. If this happens, they’re unlikely to hear this content.
  • Screen readers start reading the modified page but from the very top. This means that users have to essentially listen to all of the page content again. It can be difficult for these users to know which content has been updated and where in the page this content is.
  • Screen readers are automatically taken to the modified content so users instantly know that page content has been updated – this can however severely disorientate users.

Screen magnifier users might not notice changes that have occurred outside the areas they’re interacting with. They can therefore miss out on important information especially if the changed content takes place above their current location on the page.

Finally, AJAX requires JavaScript to be enabled. Although assistive technologies can now handle many uses of JavaScript they don’t all provide complete support.

Recommendations for AJAX and accessibility

There’s one key question to consider when planning the development of a website and the use of AJAX: Is there a real need to use AJAX?. If the answer is yes, then ensure the following is true to ensure AJAX accessibility is optimised:

Inform users early in the page that dynamic updates will occur
Not all users are familiar with AJAX interfaces. Let them know that changes may take place so they can expect and look for these changes. This is particularly important for screen reader and magnifier users as they may be unaware that changes have taken place.
Highlight the areas that have been updated
Using subtle changes to highlight areas that have changed, for just a short period of time, can be most helpful. It will inform users, in particular those with reading difficulties that updates have taken place.
Don’t change the focus
Do not move the focus of the page to where the change has taken place. Changing the focus can be disrupting for screen reader and magnifier users especially if there are no mechanisms to return to the previous position.
Offer the option to disable automatic updates
Allow users to manually request page updates, for example by providing links and/or form buttons to refresh the page on-demand. Screen reader and magnifier users may be unaware of on-the-page changes. It can also be difficult for users with reading difficulties to keep up with automatic updates. If possible, store users’ preferences for requesting page updates for future visits to the site.
Ensure the site works if JavaScript isn’t enabled
Build a standard application then overlay it with AJAX to improve its functionality. If JavaScript is disabled or not available then users will still be able to use the site.

In case of an advanced AJAX application, consider providing an HTML alternative. If the AJAX application is impossible to use by group of users (e.g. if it relies on the use of a mouse, such as the drag & drop sliders) then a link to an HTML alternative is a must.

Bookmark and Share
Advertisements

Twitter and Web Accessibility

Create robots.txt file for better SEO

SEO - Search Engine Optimization

It has been a half month since ThemeLib.com was created, not a long time, huh ?. Today, I decided to test how is my site in two popular Search Engines : Google and Yahoo.

Here is the result :

All of the results in Google is fine. They indexed my posts, my tags, my keywords, … But there are some problems with my site in Yahoo. Yahoo indexed my wp-login page and download links !!! How did it happen, huh ? If you have knowledge on SEO (Search Engine Optimization), these results are not good, really. After examining ThemeLib.com a few minutes, I realized that I have not created a Robots.txt file yet !!! Oh man, how can I forget it? :shock:

Introduction

The robots.txt file is used to instruct search engine robots about what pages on your website should be crawled and consequently indexed. Most websites have files and folders that are not relevant forsearch engines (like images, download links, admin files, …) therefore creating a robots.txt file can actually improve your website indexation.

How to Create a Robots.txt file

A robots.txt is just a simple text file that can be created with any text editor such as Notepad. If you are using WordPress, a sample robots.txt file would be :

User-agent: *
Disallow: /wp-
Disallow: /feed/
Disallow: /trackback/
Disallow: /download/

“User-agent: *” means that all the search engine (Google, Yahoo, MSN and so on) should use those instructions to crawl your website.

“Disallow: /wp-” will make sure that the search engines will not crawl the WordPress files. This line will exclude all files and foldes starting with “wp-” from the indexation, avoiding duplicated content and admin files. Similar to Disallow: /feed/, Disallow: /trackback/, …

After you created the robots.txt file just upload it to your root directory and DONE!

Further reading

Here are some good links that may useful for you if you want to know more about SEO and Robots.txt

Conclusion

You should always verify your site in Search Engine like Google, Yahoo to see if there are any problems with the indexing. Hope you do not make a mistake like me. If you need professional help, you can hire a SEO company

XABH88M229UZ

WordPress Blog improve tips

A lot of people are going crazy over WordPress. Bloggers enjoy most their experience with WordPress blogs but not everybody has the enough information on how to go about it.

For those who just started blogging and would want to know more about effective tips on WordPress , then read along. Here are top 10 general tips on blogging through WordPress:

Tip #1: Kick off your blogsite, by activating the akismet plugin. Though this plug in comes as a preinstalled feature with WordPress, you have to activate it in order to get a WordPress key. This process will take almost 2 minutes, very easy and quick.

This Akismet plugin works to block spam comments on your blogsite. If you want to achieve a wider scope of audience you must allow people to comment on your site but be vigilant to spam comments.

Tip #2: Your Blog should look good to achieve a good impression. Choose a theme which could add more personality to your site. You may use the default theme but there are a myriad of options to choose from. You must pick a theme which is user friendly and easy to navigate. A theme with good link visibility as well as attractive lay out can attract more readers. You can use the WordPress Theme Directory to avail of the best themes to use for WordPress.

Tip #3: Create a permalink that would show your niche outright. Permalinks are the specific links referring to your blog post. Keep your permalink SEO friendly by choosing “yourdomain.com/blog-post-title”.

Tip #4: Of you want a plugin which can take care of all the submission and updating of your sitemap to Google and other search engines, then you should download and install a Google XML Sitemaps Generator Plugin.Your site will be more accustomed to search engines if you install this into your site.

Tip #5: Search engine optimization is very important in order to achieve more traffic to your site. Traffic would entail an increase in the number of people visiting your site. The more traffic , the more probable customers who might be interested to make a purchase or avail your service. This can be done by downloading and installation of the All in One SEO Pack Plugin. This WordPress plug in can optimize your keywords and the site as well.

Tip #6: You must make sure that your WordPress blog should have a social bookmarking plugin. You can use ShareThis plugin which could go right after posting along with a specific reminder to inform visitors that they can make a subscription to your feed. In this way, you are providing your readers the opportunity to be updated of the posts and activities inyour blog.

Tip #7: Always make the effort to introduce yourself to the visitors of your site. An About Page can be created to contain all necessary information regarding your background, products and services. Other details such as likes and what visitors can expect out from your blogsite itself is very important to enable customers to be more aware ofyour site. This will give your site a more personal touch. Include profiles of the company and even some personal information about you.

Tip #8: Provide an avenue for your visitors to communicate with you. Create a Contact Page so they can send you emails regarding concerns related toyour site . You can use a contact me plugin e.g. Secure and Accessible PHP Contact Form is a perfect plugin for setting up an e-mail instruction corner foryour site.

Tip #9: You can allow users tgo use an RSS reader and email to subscribe to your blog. Create an account over Feedburner so you can give your visitors the option to subscribe to your blog and receive updates in the future.

Tip # 10: Create a clone blog or a password protected subdomain in order to avoid break down of stuffs on your actual site. This clone blog is just a blog installation which matches your actual blogsite with all the same plugins, same theme and few posts. In this way, you can do trial and errors before setting up your actual site.

Bookmark and Share

Add Polldaddy polls in WordPress

It’s been a long time since I’ve written a tutorial here. I thought with Automattic’s acquisition of PollDaddy, this would be a good opportunity to write one about adding polls to your self-hosted WordPress blogs, more specifically – PollDaddy polls. In this tutorial I’ll go over:

  • Installing the PollDaddy plugin
  • Signing up to PollDaddy (if you don’t already have an account)
  • Creating and managing polls from within your WordPress admin panel
  • Inserting the polls you create into your WordPress posts and pages

And now onto the tutorial…

The Plugin

You can grab this plugin from this page over at WordPress.org. After installing the plugin, you’ll notice a prompt to input your PollDaddy account details.

Signing Up

If you don’t have a PollDaddy account already, not to worry! I’ll walk you through it. You can sign up for a free account here.

PollDaddy Free

Fill in your name, e-mail address, and password choice, and you’re all set.

Configuring the Plugin

After this, you’ll need to go back to your WordPress admin panel and type in the login details you just created. Upon revisiting the PollDaddy admin page, you’ll see a new screen to create and manage your polls.

PollDaddy Admin

I’m not sure what that warning message means, but I’ll just ignore it and see if the polls work anyway. Seems some others are having the same problem as well.

Creating Polls

Click the “Add New” link to set up your poll. There’s an input box for the poll question, as well as three answers. You can click the “Add Another” button for more answer choices. You can also set up multiple choice polls, randomize the answer order, and allow other answers.

PollDaddy Create Poll

I’ll choose the “Simple White” design and leave the default settings for results and repeat voters.

After clicking the “Add Poll” button, I was greeted with a page with two warning messages on it. After re-logging in to the admin panel (somehow I was logged out) and visited the Polls page, it seems the poll I created was indeed successful.

Inserting Polls

The next step is to go write a post, and click the orange button thingy next to Add Media. You should see a screen like this with your newly created poll.

PollDaddy Send to Editor

Again, the same warning message pops up. I’ll try my best to ignore those since they seem not to make a difference with the actual workings of the plugin. After sending the poll to the editor, WordPress will generate a shortcode to place in your post.

Help Me! It doesn’t work!

After saving/publishing, you’ll notice the actual poll doesn’t display in your post, just the unparsed shortcode. To correct this, you’ll need to install another plugin from PollDaddy. You can get it here. I grabbed the one for version 2.5 and above.

I’m not sure why this plugin isn’t even mentioned at all on the first plugin’s page. I had to check this support thread to find out why the polls weren’t displaying properly. Apparently the first plugin was just for creating/managing polls. This one is for having them display in your WordPress post.

All Done

That’s it. Here’s the poll I’ve just created in action.

PollDaddy Test

Pretty cool?

Conclusion

First of all, I’d like to congratulate Matt Mullenweg and Automattic on this awesome acquisition.

It’s a mystery to me why the plugin for creating/managing polls and the plugin for displaying polls are separate. Maybe someone can enlighten me. I personally think that these two plugins should be combined into one.

I think it’s also worth mentioning the self-hosted WP-Polls plugin by Lester Chan, if you’d rather not be dependent on a third-party service.

Hope you all liked the tutorial. Feel free to comment with your thoughts on the acquisition, the WordPress integration, and the tutorial. I’d love to hear them.

Bookmark and Share

CSS3 Tips (Tutorial)

20 Useful Resources for Learning about CSS3

Though W3C’s CSS3 specifications aren’t finalized yet, modern web browsers such as Mozilla Firefox, Opera, and WebKit-based browsers already have full or partial support for them. tutorial

As a web developer, it’s crucial to be well-informed about modern and future web standards. To help you stay ahead of the curve – here are 20 excellent resources on the topic of CSS3.

1. CSS3 Progress Report

CSS3 Progress Report - screen shot.

The CSS3 Progress Report is a web page by the CSS Working Group outlining the current status of all the CSS3 modules. For would-be contributors, this may be a helpful resource in discovering places where you can potentially contribute.

2. Get Started with CSS 3

Get Started with CSS 3 - screen shot.

Web Monkey has a tutorial on how to get started with CSS3. It will give you an overview of some CSS3 features that are already supported by modern browsers. This is a great article to read for those that are just beginning to explore CSS3.

3. Progressive Enhancement with CSS 3

Progressive Enhancement with CSS 3 - screen shot.

Opera – one of the web browsers in the forefront of supporting CSS3 specs – has an excellent tutorial on a progressive enhancement approach to CSS3 usage that discusses how you can utilize CSS3 for modern/cutting-edge browsers yet still have a design that’s accessible to older browsers that don’t support it.

4. Accessibility Features of CSS

Accessibility Features of CSS - screen shot.

With the rise in popularity of mobile hand held devices and non-traditional web browsers such as screen readers, the CSS Working Group puts accessibility as one of the leading issues that will be addressed in CSS3. This W3C document outlines some of the accessibility features and considerations that are inherent in current and future CSS3 specifications.

5. Introduction to CSS3 (Design Shack)

Introduction to CSS3 (Design Shack) - screen shot.

In this 5-part series, Design Shack gives readers an excellent induction to the world of CSS3. The article series goes through an overview of CSS3 in plain-speak and talks about some CSS3 techniques and topics such as borders and text effects.

6. CSS3 . Info

CSS3 . Info - screen shot.

CSS3 . Info is an enormously comprehensive site about all things CSS3-related. They share news, interviews, and resources from around the web regarding CSS3. CSS3 . Info also has a demo section called CSS3 Previews so that you can see CSS3 modules and features at work for browsers that support them such as Opera and WebKit-based browsers.

7. CSS Advanced Layout Module

CSS Advanced Layout Module - screen shot.

Learn about one of the more popular modules in CSS 3 specs: the Advanced Layout Module. This resource is W3C’s working draft and will show you just how great CSS3 will be for us developers.

8. Six Questions: Eric Meyer on CSS3

Six Questions: Eric Meyer on CSS3 - screen shot.

Six Revisions was fortunate enough to discuss CSS3 with celebrated CSS expert, Eric Meyer. In this interview, Eric Meyer talks about what excites him the most about CSS3, the modular approach to CSS3 specs development, and JavaScript’s relationship to CSS3.

9. CSS3 properties tests for webkit based browsers

CSS3 properties tests for webkit based browsers - screen shot.

In this live demonstration, you’ll find properties currently supported (and unsupported) by WebKit-based browsers such as Safari; it also provides you information about iPhone’s support of these properties.

10. WaSP Community CSS3 Feedback

WaSP Community CSS3 Feedback - screen shot.

This article is an excellent summary of the feedback received from the Web Standards Project (WaSP) blog post entitled, “Tell the CSS WG what you want from CSS3“. It’s a great read to see what web developers around the world think about current CSS3 specs.

11. CSS 3 attribute selectors

CSS 3 attribute selectors - screen shot.

An exciting improvement in CSS3 is the ability for very complex and specific DOM selection. This tutorial on Dev.Opera shows you the potentials of the new attribute selection features in CSS3.

12. W3C: Selectors

W3C: Selectors - screen shot.

W3C’s working draft of CSS3 Selectors is an excellent introduction into the concept of Selectors in CSS3.

13. Conversation with CSS 3 team

Conversation with CSS 3 team - screen shot.

XHTML.com’s interview of Bert Bos (former chairman of W3C’s CSS Working Group) is an insightful look at CSS3 development through the eyes of a leading expert in CSS.

14. The fundamental problems with CSS3

The fundamental problems with CSS3 - screen shot.

This article by Matt Wilcox discusses some of the current issues surrounding CSS3.

15. CSS Working Group Blog

CSS Working Group Blog - screen shot.

The people in charge of maintaining and developing CSS standards – the CSS Working Group (CSS WG)  –  has a regularly updated weblog that shares useful information about CSS3.

16. Rounded Corner Boxes the CSS3 Way

Rounded Corner Boxes the CSS3 Way - screen shot.

24 Ways, an annual online publication that puts out articles by top web professionals, has a tutorial on rounded corner boxes written by CSS expert Andy Budd. The tutorial showcases one of CSS3’s styling improvements: rounded corners without using CSS backgrounds.

17. Push Your Web Design Into The Future With CSS3

Push Your Web Design Into The Future With CSS3 - screen shot.

Smashing Magazine’s article on CSS3 by graphic/web designer Chris Spooner delves into crafting web designs that leverage current CSS3 specs. It’s an inspiring scrutiny of the things that you can do with CSS3 – right now.

18. Introduction to CSS3 Transparency

Introduction to CSS3 Transparency - screen shot.

This article explores and explains the concepts CSS3 transparency; a concept that’s part of the CSS Color Module.

19. Styling Forms with Attribute Selectors

Styling Forms with Attribute Selectors - screen shot.

Dev.Opera showcases the benefits of attribute selectors in this “learning-by-doing” tutorial which deals with styling web forms.

20. 5 Techniques to Acquaint You With CSS 3

5 Techniques to Acquaint You With CSS 3 - screen shot.

Practice makes perfect; this tutorial from NETTUTS shows you how to learn about CSS3 by using it. This article covers things like adding drop shadows to page elements and changing an element’s opacity.

Are you using CSS3 today?

Have you incorporated CSS3 into your web development practices? Where are you at in terms of learning about CSS3? Share your thoughts and experiences with all of us in the comment section

Bookmark and Share

Excellent WordPress Themes

WordPress – the popular open source publishing platform – allows you to easily customize your installation with WordPress themes. Installing themes is a simple affair, and if you’re just starting out with the publishing application, you can check out this guide on using WordPress themes.

In this collection, you’ll find 40 high-quality and free WordPress themes handpicked from the vast amount of free themes out there on the web.

Note: Be sure to check out the license of the theme for restrictions in usage (if any) and it’s always good (and very much appreciated) to attribute the designer even if they don’t explicitly ask you to.

For another great WordPress themes collection, check out: 50 Beautiful Free WordPress Themes.

Irresistible

Irresistible screen shot.

DemoDownload

Magazeen

Magazeen screen shot.

DemoDownload

Imprezz

Imprezz screen shot.

DemoDownload

Blues

Blues screen shot.

Download

iLibrio

iLibrio screen shot.

Download

Dark Classic

Dark Classic screen shot.

Download

remedy

remedy screen shot.

DemoDownload

Vintage

Vintage screen shot,.

Download

CorporateMag

CorporateMag screen shot.

DemoDownload

Futura

Futura screen shot.

DemoDownload

The Morning After

The Morning After screen shot.

DemoDownload

Holiday WordPress

Holiday WordPress screen shot.

Download

Fontanella

Fontanella screen shot.

Demo (chose Fontanella in the list) – Download

Greenway 3C

Greenway 3C screen shot.

DemoDownload

Grid Focus

Grid Focus screen shot.

DemoDownload

Annexation

Annexation screen shot.

DemoDownload

Brilliance

Brilliance screen shot.

DemoDownload

Love Earth

Love Earth screen shot.

DemoDownload

Compositio

Compositio screen shot.

DemoDownload

Elegance

Elegance screen shot.

DemoDownload

Rewire theme

Rewire theme screen shot.

Download

Colourise

Colourise screen shot.

DemoDownload

Individual

Individual screen shot.

DemoDownload

WP-Premium

WP-Premium screen shot.

DemoDownload

WP ThemedVista

WP ThemedVista screen shot.

DemoDownload

Wynton Magazine

Wynton Magazine screen shot.

Demo

Vectorize

Vectorize screen shot.

Download

Elegant Grunge

Elegant Grunge screen shot.

DemoDownload

Smashing Theme

Smashing Theme screen shot.

Download

Zeke

Zeke screen shot.

DemoDownload

Androida

Androida screen shot.

DemoDownload

BlakMagik

BlakMagik screen shot.

DemoDownload

Love Bugs

Love Bugs screen shot.

DemoDownload (for personal use only)

Nature Gift

Nature Gift screen shot.

Download

BlackRed

BlackRed screen shot.

Download

Club Yellow

Club Yellow screen shot.

Download

Blogtheme

Blogtheme screen shot.

DemoDownload

Portfolio – WPESP

Portfolio - WPESP screen shot.

DemoDownload

iNove

iNove screen shot.

DemoDownload

SohoMag

SohoMag screen shot.

DemoDownload

Bookmark and Share