Dear Friends,
Some things tend to appear more complicated than they really are. Accessibility is one of them. Often surrounded with misconceptions and myths, accessibility is often an afterthought, an obligatory website enhancement added by expensive consultants close to the release date of the project. However, accessibility is not something we add to a website, but something we start with and risk losing with every enhancement. It is to be retained. And it isn't that difficult — if you're writing meaningful, clean markup, of course.
So what should a pragmatic barebones accessibility strategy look like? Simple. Consider keyboard users and screen reader users. Prefer meaningful native elements if possible: a button should be a button, for example. Define a sound structure in your markup: headings h1–h6 are helpful, but ARIA landmark roles are, too. If you can't, use ARIA-roles to explicitly state the function of an element.
Furthermore, define states and relationships between interactive elements with ARIA states and properties, so screen reader users can access them. For keyboard users, make all clickable elements focusable. And keep in mind that accessibility tools do have JavaScript support and screen readers can't predict structure or purpose, so we have to explicitly define it. Example? LinkedIn is doing a great job providing accessibility toolbar (hit "Tab" when using the page).
If we think about content first, and write clean markup, accessibility is provided by default. Then we define relationships between elements explicitly (roles, properties, states), refine ARIA-properties to get things done right and test keyboard and screen readers use. That's pretty much it. Complicated? By no means. And you can also use accessibility patterns, practical ARIA examples and Ally.js to help modern web applications deal with accessibility concerns. Also, highly recommended: the "Apps for All" eBook by Heydon Pickering.
Stay accessible!
Vitaly (@smashingmag)
Table of Contents
1. Mobile Design and Data from Luke Wroblewski
Digital product leader at Google and author of Mobile First, Luke Wroblewski has opened up a fascinating Google+ collection on mobile design and data. Containing a wealth of useful and sometimes intriguing information, presented in Luke's unique diagramming style, the collection brings together statistics and analysis of mobile apps, devices and users.
Whether it's technology, demographics or UX design, the statistics reveal some very interesting facets of the world we're designing in and for, and quite often the data overturns our assumptions and leads to insights that can help establish new directions for development. Be sure to check out Luke's other Google+ collections on wearables design, tinyfication and "design is never done". (og)
2. Seeking Hard Data: Performance Case Studies
The best way to convince colleagues and managers about the impact of... well, anything, is to provide some hard data. Case studies work best, figures work well, and increase in conversion strikes when it comes to a business perspective on front-end or UX.
WPO Stats collects case studies and experiments demonstrating the impact of performance optimization on user experience and business metrics. There is literally no reason any more not to prioritize performance. The data speaks for itself, and now you can convince anybody about it, too. Run by Tammy Everts and Tim Kadlec. If you have a performance case study, make sure to submit it, too. (vf)
3. Inspiration For Pricing Tables
When you are offering a digital service, there is one essential component that your website won't get by without: the pricing table. Pricing tables all seem to follow the same pattern, but their styling possibilities are endless. If you need some fresh inspiration on how to display your pricing options in the best light, then Tympanus has got you covered.
Tympanus' collection features twelve different pricing table styles for you to explore — from smart and serious to playful, some of them with subtle hover effects others all minimalistic. A handy resource that is bound to cater for new ideas. (cm)
Advertisement
4. Designing The Entire User Interface Stack
When designing in visual tools, we tend to spend a lot of tim pushing pixels and perfecting edges and shadows and radii, yet our final designs usually don't cover more than the ideal state of what a website would look like if everything worked just fine — decent browser, decent connectivity, reliable network and predictable user actions.
But what about outliers? What about partial states, invalid states, disabled states, the timeouts, empty or overcrowded states, or just loading states in general? When designing an interface, we should be thinking about the full user interface stack and potentially nine states of user experience and carefully craft those imperfect experiences as well, documenting them in our pattern libraries just like we do with other compoennts. Our users will surely appreciate it. (vf)
5. Lerp: Linear Interpolation in Animations
We all want our online animations to be smooth and as naturalistic as possible, free of judder and jank. Over on CodePen, Rachel Smith has shared a technique she uses a lot for just this purpose: lerp, or linear interpolation. Put simply, it's a way of using a little bit of JavaScript to create an easing effect when an object moves from one point to another.
By interpolating a percentage of the distance between the start and end points, the amount the object moves becomes smaller as the distance between position and target decreases, meaning the object will slow down as it gets closer to its target. The CodePen includes a couple of neat examples of the effect, applied to mouse movement and scrolling. Something to consider for your next animated project? (og)
6. SVG Tips For Designers
With both designers and developers being involved in an SVG workflow, the SVG code often needs a second round of editing after it has been handed over to the developer, simply because a lot of designers know very little about the code behind the SVG. Sara Soueidan often experiences this in her projects, so to help designers cater for cleaner code, she published a row of valuable tips, dos and don'ts to prepare vector graphics and UI assets to become clean SVGs.
Choosing the best suitable export options for the web is one aspect Sara is focusing on, but she also tackles issues such as the pros and cons of converting text to outlines or techniques to simplify paths. The tips are applicable in Adobe Illustrator as well as other graphic editors and are bound to make your team's SVG workflow smoother. (cm)
Advertisement
7. How To Build A Pattern Library In Sketch
Have you ever struggled with keeping your designs consistent? Well, a pattern library can help. Instead of building complete pages, you establish all your UI elements — navigations, buttons, paragraphs, headings and forms — in a pattern library, so that you can reuse them any time to build pages that look consistently and are easy to maintain. If you want to get started with your own pattern library, Richard Child's article is a great starting point.
Richard covers the basic steps you need to know to build a pattern library in Sketch — from setting up your artboard to using symbols, organizing text styles, and creating a color library. Now you only need some inspiration before you begin? styleguides.io features a lot of real-life pattern libraries that will get your mind buzzing with ideas. (cm)
8. Gmail, Sketch and Slack Keyboard Shotcuts
So what if you dedicated one minute today to learn 3 new keyboard shortcuts? If you're using Gmail, you can memorize a few obscure Gmail shortcuts that you haven't used yet. You can just press Shift + ? in Gmail to get an overview of available shortcuts.
If you're using Sketch, Sketch Keyboard Shortcuts and Tricks will provide you with a few handy shortcuts for sure. And the Apple Keyboard Sketch file is available for free download as well. And with Slack keyboard shortcuts you might get even more productive. Also, what about taking a moment to rethink how you organize your email and design work? Perhaps there is a better way? (vf)
9. The Museum Of The World
The Rosetta Stone, the Parthenon sculptures, Egyptian mummies — all of them cornerstones of human culture, today they can be admired in the British Museum. Comprising more than 2,000,000 years of human history, its collection is exceptional and one of the largest of its kind. To make that cultural heritage accessible to more people from all over the world, the British Museum has recently partnered up with Google. The result: the Museum Of The World.
The WebGL-powered desktop experience explores connections between the world's cultures by showcasing exhibits that shaped human history. As they travel deeper into the history of mankind with each scroll, users can browse the artefacts according to type and area of origin — no matter where in the world they might be located. Stunning. (cm)
10. Upcoming Smashing Workshops
With so many techniques, tools, libraries, design patterns, strategies, abstractions, frameworks and boilerplates available nowadays, what do you really need to know to keep your workflow fast, smart and efficient? That's exactly what our front-end and RWD workshops are all about: practical front-end and RWD workshops that will help you become better front-end developers and designers, today.
Full-Day Workshops at SmashingConf Oxford
Full-Day Workshops at SmashingConf San Francisco
But what about in-house training instead? We can improve your eCommerce checkout and conversion rates right on spot — or performance, accessibility or UX. Feel free to get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you're facing and would like to solve. Don't worry about the cost — we'll find a fair price for sure. Get in touch — it's that easy! (vf)
11. New On Smashing Job Board
Here are the recent job openings published on our Smashing Job Board:
-
Web Designer at U.S. News & World Report (Washington, DC)
" This position requires an excellent eye for design, coupled with a keen ability to understand user needs, behaviors, and motivations. You should have strong Photoshop/Illustrator skills and be comfortable with HTML/CSS. Strong organizational and communication skills, attention to detail, and ability to meet deadlines are also required."
-
Web Developer/ Designer - MTV News at MTV News (New York, NY)
"The ideal candidate should have strong full-stack development experience – as well as a strong visual eye and aesthetic. Think of it as 2/3 developer, 1/3 designer – in a mobile web-leaning context.
12. Smashing Highlights
-
The State Of Animation 2014
The post-Flash era is hardly free of animation. CSS animation is quickly becoming a cornerstone of user-friendly interfaces on mobile and desktop, and JavaScript libraries already exist to handle complex interactive animations. In the wake of so much "CSS versus JavaScript animation" infighting, a new API specifically for web animation is coming out that might just unite both camps.
-
Original And Innovative Web Layouts
The layout is the foundation of your website. It guides the user through the sections and tells them what is most important. It also sets the aesthetic of the website. Therefore, you need to carefully think through how you lay out content.
-
Exploration Of Single-Page Websites
We tend to think of navigating a website as clicking from page-to-page via some kind of global navigation that's always visible. When it comes to a single page, we often think scrolling is the one and only way to move from one end to the next.
13. Recent Articles On Smashing Magazine
