Tips, web design book reviews, resources and observations for teaching and learning web development.
This post simply serves as a summary of the 4 posts published recently that distill the information from the W3C about how the guidelines and principles of WCAG 2.0 apply to mobile devices.
I thought it would be useful to have a single post with links to each of the previous posts. The posts take the 4 POUR principles and explain what they mean in terms of mobile application.
The W3C wants to help developers understand how WCAG 2.0 applies on mobile devices. They recently issued the first working draft on the topic. The guidelines and principles of WCAG are explained using the POUR method: Perceivable, Operable, Understandable, Robust.
In this post I will distill the W3C information on the Robust principle.
Set the virtual keyboard to the type of data entry required.
Make data entry as easy as possible by,
Don’t disable the device’s platform characteristics such as zoom, larger fonts, and captions.
Mobile device image: William Hook
The W3C wants to help developers understand how WCAG 2.0 applies on mobile devices. They recently issued the first working draft on the topic. The guidelines and principles of WCAG are explained using the POUR method: Perceivable, Operable, Understandable, Robust.
In this post I will distill the W3C information on the Understandable principle.
Position important items before the scroll.
When two elements (e.g., an icon and a text link) perform the same action, group both items within the same actionable element.
Actionable elements such as links or buttons should be indicated by more than one means. Use combinations of shape, color, style, positioning, text labels, and conventional iconography.
Provide easily accessible instructions to explain what gestures can be used to control a given interface and whether there are alternatives.
Mobile device image: William Hook
The W3C wants to help developers understand how WCAG 2.0 applies on mobile devices. They recently issued the first working draft on the topic. The guidelines and principles of WCAG are explained using the POUR method: Perceivable, Operable, Understandable, Robust.
In this post I will distill the W3C information on the Operable principle.
These suggestions are for manipulations such as shaking or tilting:
Mobile device image: William Hook
The W3C wants to help developers understand how WCAG 2.0 applies on mobile devices. They recently issued the first working draft on the topic. The guidelines and principles of WCAG are explained using the POUR method: Perceivable, Operable, Understandable, Robust.
In this post I will distill the W3C information for the Perceivable principle.
Guidelines include:
The suggestions include:
Mobile device content is viewed on smaller screens and in different conditions so the allowable ratio for lessened contrast on larger text on desktop devices must be considered carefully for mobile apps. Therefore, the W3C suggestion at this point is that developers should strive to apply the lessened contrast ratio only when text is roughly equivalent to 1.2 times bold or 1.5 times (120% bold or 150%) that of the default platform size. Even then, the user must be able to zoom to magnify the text.
Mobile device image: William Hook
A new open source tool, Responsive Image Breakpoints Generator, should be at the top of your to-do list of new things to learn to use. Developed by Cloudinary and offered to web designers for immediate use, the tool describes itself,
Responsive websites, even the most modern ones, often struggle with selecting image resolutions that best match the various user devices. They compromise on either the image dimensions or the number of images. It’s time to solve these issues and start calculating image breakpoints more mathematically, rather than haphazardly.
After you choose what you want the breakpoints generator to do for you, you can then download a zip file which contains the HTML5 code which uses the srcset attribute of the img element to set up the responsive breakpoints. The zip file also contains all the images that are referenced in the srcset attributes.
For a longer description of the tool, see this excellent article at Smashing Magazine, which explains a bit more about the tool.
Gather Content, an online software tool that allows people to streamline their web content production, is making their UX Guide available as a free download.
The book, UX Design And Content Strategy: The Project Guide, is described as a hands-on resource for all UXers and a project guide to UX design and content strategy that explores the relationship through a website project. The book is a 64 page PDF document.
I haven’t read the book myself, but if you are interested in a project based approach to user experience, it certainly is worth a look.