Accessibility at Google IO 2011

So I attended the first day of Google I/O 2011, my first time at a Google event. I was glad to hear a fair amount of talk about accessibility. There were at least 3 sessions focusing on the topic (see below) and a breakout area where you can talk with developers.

There was even an accessibility "Developer Sandbox" area which was great. I tried out the ChromeVox screen reader on a Chromebook with help from Google's Rachel Shearer. I got a quick demo of the built-in TalkBack screen reader on an Android mobile device. Mika Pyyhkala and I were shown the LevelStar braille device running Android. The University of Washington showed off their mobile ASL Android project which used video chat technology.

Some tips for Android development from the sessions are:

• In Android code, ensure images, especially ImageButtons, are labeled with contentDescription.
• Use standard controls.
• Stick with standard or modified views; custom very complex to make accessible.
• Ensure all controls reachable with D-pad and Trackball.
• Test with screen reader using D-Pad. To turn on, enable accessibility under Settings/Accessibility, then enable Talkback.
• Take advantage of device's "many eyes and ears" for alternative input/output (microphone, speaker, touch screen, camera, GPS)

The sessions specific to accessibility were:

• Accessibility: Building Products that Everyone Can Use by Brad Green, Erin Rosenthal (on YouTube)
• Leveraging Android Accessibility APIs To Create An Accessible Experience by Charles Chen, T.V. Raman, Tim Credo (on YouTube)
• Creating Accessible Interactive Web Apps using HTML5 by Dominic Mazzoni, Rachel Shearer (on YouTube)
• Added via comment below: The YouTube Caption API, Speech Recognition, and WebVTT captions for HTML5 by Naomi Black, Cynthia Boedihardjo, Jeffrey Posnick (on YouTube)

More resources:

• My Flickr album from Google I/O 2011
• Google Accessibility Resources for developers and publishers: APIs, captioning, and standards
• Android Developers - Designing for Accessibility
• The official Google I/O 2011 announcements

Tim Credo, Charles Chen, and T.V. Raman on stage at Google I/O.

How to implement a mobile version of your blog in three simple steps

After launching of the mobile version of woork I received a lot of messages from my readers that asked to me to dedicate a special post about this topic. So in this post I want to illustrate you a simple way to implement a mobile version of your blog/website in three simple steps using Mobify.me, an awesome on-line service that allow you to design mobile versions of a website just with some clicks.


Step 1: Select sections for your mobile layout
First thing to do is to create an account on Mobify.me. It's simple and free. Than you have to choose the URL of the website you want to "Mobify". It appears an interface that allows you to choose sections to add to the mobile version of your website. The only thing you have to do is to pass your mouse over a section (red borders appear automatically around the section) and click on to select it:

Remember that, in order to improve readability, templates for a mobile device have to be simple, preferably with a single-column layout. I suggest you to select only the section that contains your posts (selected in red in the previous image). You can add the header and footer in the next step using the Design view that allow you to have more control over the CSS and HTML code.

Step 2: Design CSS + HTML code
At this point you are ready to customize the layout of your mobile template using the Design view and adding for example a custom header and footer. How you can see in the following image, Design view is divided in two parts:

Left section contains the CSS code and right section a preview in real time of your website (you can choose several mobile devices such as iPhone, Nokia, BlackBerry). To customize header and footer choose the related link on the right menu. This is the window that appears:

You have only to add some lines of HTML code and press "save and close". Then you can add CSS code to customize all HTML elements of your template using the left section of the Design view:

How I said all changes you make to your code are in real time, so you can see how your template looks immediately in the right section of the Design view. When your code is ready click on the button save to save your mobile template.


Step 3: Publish your website
Now you are ready to publish the mobile version of your website. Publishing is very simple. You can publish your blog using your hosting service or directly Mobify.me hosting choosing an URL like this: http://yourname.mobify.me (if you use Blogger this is the best solutions!).

At this point you have to add in the tag <head> of your original template some lines of JavaScript code that allows to redirect visitors that use mobile devices to browse your website. The code is very simple:

<script type="text/javascript" src="http://yourname.mobify.me/mobify/redirect.js"></script>
<script type="text/javascript">try{_mobify("http://yourname.mobify.me/");} catch(err) {};</script>

Save your template and don't forget to publish it otherwise the redirect doesn't works! Ok, your mobile version is now ready! Take a look at the final result trying to load your website from a mobile device. Simple no? And also free! Try to take a look at the mobile version of woork loading woork from your mobile device and tell me what you think about.

Any suggestion about this topic? Please leave a comment, thanks!

External Links

- Mobify.me

Related Posts

- The mobile version of Woork is on-line with Mobify.me

The mobile version of Woork is on-line with Mobify.me

Hello everyone, some interesting news from Woork. I just released the mobile version of my blog. Now you can read this blog more easily using your favorite mobile device (you'll be redirected to the mobile version at this link: http://woork.mobify.me/)
To implement the mobile version of Woork I used a great free service called MOBIFY that provides websites with seamless, integrated mobile views. It lets publishers quickly monetize mobile users and gives web designers a powerful mobile toolkit. MOBIFY is compatible with thousands of devices, integrates with most web publishing platforms and is free to use.

If you are looking for an awesome free service on-line to create the mobile version of your website or blog quickly and for free you can't absolutely miss this service (http://mobify.me/).

Related Posts

- Tips to design your site for mobile devices

- Sync Windows Mobile devices with your Mac

- 10 Interesting social applications for your Google Phone

- 30+ Interesting Twitter services and applications