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.
Small Screen Size
Guidelines include:
Use a responsive design and minimize the amount of information that is put on each page
Use fewer images
Focus on the features needed to operate in the mobile environment
Use a “reasonable” default size for content and touch controls to reduce the need for zooming
Make sure link text does not exceed the width of the device
Put form fields below their labels
Zoom/Magnification
The suggestions include:
The user should be able to zoom to 200%. Do not block this with the page’s viewport meta element.
Support system fonts that follow platform level user preferences for text size
Support options on the page to allow the user to change text size
Contrast
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.
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.
Flash has had a few hard years. HTML5 whupped its ass. So it’s going away.
Sort of.
In its place, Adobe will give us Animate CC, which loses the loser of a name but retains much of the function. There will be added functions, as well. Here’s Adobe’s announcement of the change.
To summarize the changes, here’s how Adobe describes what the new software will do:
Drawing, illustration and authoring
Vector art brushes – Modify the path of a stroke after it’s been drawn, and scale them to any resolution without losing quality. You can also make custom brushes and import brushes created with Adobe Capture CC.
360° rotatable canvas – Rotate the canvas on any pivot point as you draw to get the perfect angle and strokes. You can even use this feature with a Wacom Cintiq!
Improved pencils and brushes – Draw smooth, precise vector outlines along a curve and get faster live previews.
Easier audio syncing – Control audio looping directly on the timeline, without having to code.
Faster color changing – Naming tagged colors lets you change one color and have it automatically update your entire project.
Colored onion skinning – Easily orchestrate complex animations now that adjacent frames can have different color and alpha values.
CreativeSync integration
Adobe Stock – Browse and license millions of high-quality photos, illustrations and vector graphics directly in Animate CC. You can even add life to static content by adding animations to them.
Creative Cloud Libraries – Access colors, vector graphics and brushes directly as you work.
Output capabilities
Multiplatform support: HTML5 Canvas, WebGL, Flash (SWF), AIR, video, and custom platforms (such as SVG) via extensions.
4K+ video export – Export videos with custom resolutions for the latest Ultra HD and Hi-DPI displays.
Custom resolution export – Revitalize older content by resizing and optimizing them for any resolution, such as Ultra HD and Hi-DPI displays.
.OAM support – Export your project as an .OAM file for easy importing to Adobe Muse, InDesign, DPS and Dreamweaver.
The new Adobe Animate CC will be released in January 2016.
WebAIM announced several updates to the WAVE tool. I always spend time in my accessibility classes telling students about the importance of accessibility testing. The WAVE tool is generally at the top of my list.
A number of the updates deal with “smarter ARIA and HTML5 evaluation logic.” This includes HTML5 structural elements and ARIA landmarks. There are improvements in support for aria-labelledby and aria-describedby including a new icon for broken ARIA references.
There are some scripting changes that allow evaluation of dynamically generated content. There’s a new indicator for skipped heading levels and for big blocks of justified text. The Firefox extension is going to go away, but the Chrome extension will still be supported.
Still the Same
Click on an icon to see a brief explanation of the accessibility issue identified by the WAVE tool
Using the tool on the web remains basically the same. You enter your URL in the form at wave.webaim.org. The results of the evaluation are displayed over a representation of your page with icons indicating errors, alerts, features, structural elements, HTML5 and ARIA, and contrast errors. Clicking on an icon gives you a brief explanation of the meaning, with a link for more information.
Most importantly for web developers and web educators, the WAVE tool is still a valuable tool to help identify accessibility issues in sites.
Photo Credit: Daniel Kulinski (https://flic.kr/p/bWHeie)
By Jason OConnor
I feel like an old man. While preparing to write this article I can clearly recall a time when I used the Netscape browser to load my favorite search engine Alta Vista using my tortoise-speed dial-up internet connection back in 1998.
From this seventeen-year altitude I have seen a lot of web design trends come and go, with only the best becoming relatively standard.
However, like dog and cat years, the internet has an adjusted time too; I’m not sure exactly what it is but for every real year that passes, it seems like the internet experiences many years of trends, growth and development.
And along with the internet itself, its users have become much more sophisticated, both in how they use and perceive the internet and what they expect.
Today’s web designers have their work cut out for them.
Web design trends come and go like any other, but certain aspects can really take hold by the majority of website designers and builders. At the end of 2015 going into 2016 I can see a number of trends that are wildly popular now. Let’s take a look at five of the most prominent.
1. Simplicity
Web designers and companies are becoming more refined in their understanding of how people interact with websites. They are starting to realize a useful concept called the paradox of choice. American psychologist Barry Schwartz penned a book called The Paradox of Choice – Why More Is Less in 2004 where he explains that eliminating consumer choices is a good thing that can reduce shopper anxiety.
This extends to websites where the more choices a site visitor is given the less likely they are to choose anything and maybe they just leave.
So simplicity is what designers are shooting for now. Web users scan content and simplicity facilitates scanning. Apps are leading the way in this and websites are following. Apps are minimal, fast and intuitive. This is because they perform better with consumers, so websites are now emulating this trend.
Pros: Companies can benefit by offering less choices on a page or site because it allows them to funnel site visitors exactly the way they want in order to maximize the chances of them taking a desired action (signing up for something or purchasing). For example, if they only choice a visitor has is to buy, they are more likely to buy.
Cons: If a desired action is not possible on a site, the site risks losing a certain percentage of visitors simply because the choice they are looking for doesn’t exist. And what happens if a company’s site is designed around flawed assumptions? The site’s sparse design elements may be missing the mark completely.
2. Flat Design
Flat design is a style defined by a lack of glossy or three-dimensional visual effects. Three-dimensional effects, skeuomorphism and realism are the opposites of flat design and used to be very popular.
Now flat design is taking over. 3D effects like raised buttons or sunken form fields, Skeuomorphism which is unnecessary, ornamental design features that copy the real world like navigation tabs, and realism which is similar to skeuomorphism but exists only for aesthetic purposes are all being replaced by simple, flat design.
Pros: Flat design helps in making a site appear simple and easy to digest. And as discussed above, simplicity can be advantageous.
Cons: Flat design can sacrifice usability in the name of aesthetics. Although the web is still in its early years, there are already standards. For example, the blue underlined word or phrase signifies that it is a link. This is a standard and most web users know this intuitively now. Flat design can cause users to get confused or discouraged because of a lack of standards.
3. Fewer Stock Photos, More Illustrations
Another emerging trend that will continue through 2016 and beyond is the use of illustrations over stock photos.
Pros: Illustrations are easily scalable for responsive design. An illustration will look the exact same on a smart phone as it will on a large computer monitor. They also load faster than photos. And with illustrations, you can create any image; you are not limited to existing stock photos.
Cons: Photos are much better at invoking emotions, the goal of every marketer. Photos can feel a lot more personal. And photos can help in establishing credibility (think C-level head shots and corporate building photos), another priority of marketers
4. Hero Images
This one is everywhere now. A hero image – a term from the printing industry – is a huge, full-width image that is immediately apparent upon loading a page.
Pros: Hero images offer the web designer the ability to really evoke emotion as soon as a user sees their page. And because of its size, it can also communicate a large amount of information quickly. They can make a web page beautiful, stunning and memorable.
Cons: Large images like hero images can make pages load more slowly, which is a big turn off for users and search engines alike. Hero images sometimes can be overwhelming and too in-your-face. Large images can make a page feel cluttered or confusing. And I often see typography that is lost because it is overlaying a hero image, another thing designers need to avoid.
5. Scrolling Over Clicking
Again, apps are leading the way in this. Any smart phone user knows it is a lot easier to scroll than it is to click. Website design is really beginning to mimic this. You now often see web pages that fill up the whole screen and expect that you scroll down to see the rest of the content.
Pros: Scrolling is better for usability because it speeds up the ability to scan pages and is much easier to do than clicking when using tiny screens like smart phones. And scrolling avoids breaking the user’s reading flow.
Cons: A certain percentage of users will not even realize scrolling is an option on a page and therefore miss most of a page’s content. This has happened to me where I load a page, and see a big white space above the fold and not realize that I need to scroll down to see the actual content.
Of course there are other popular trends today too, but the five discussed above seem to be everywhere now. As web designers, we need to remain aware of all our options when designing and we must be discerning when it comes to following today’s design soup-de-jour. And above all, regardless of the trends we emulate, the site visitor’s wants and needs must be our primary guiding force.
Jason OConnor is a web designer and marketer who owns and operates OakWebWorks.com, a full service Internet firm that helps clients from all over the world.
Two excellent videos from Akamai Technologies are available explaining how to code for responsive images. The first is written by Mat Marquis, the second by Yoav Weiss.
Both films go quickly and bear watching more than once.
