Tuesday, November 24, 2015

Smashing Newsletter #148: Mobile, SVG and Accessibility

Front-end tools, clever tricks and eye candy. Issue #148 Tuesday, November 24th 2015 178,244 readers View in the browser

The Smashing Email Newsletter

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
2. Seeking Hard Data: Performance Case Studies
3. Inspiration For Pricing Tables
4. Designing The Entire User Interface Stack
5. Lerp: Linear Interpolation in Animations
6. SVG Tips For Designers
7. How To Build A Pattern Library In Sketch
8. Gmail, Sketch and Slack Keyboard Shotcuts
9. The Museum Of The World
10. Upcoming Smashing Workshops
11. New On Smashing Job Board
12. Smashing Highlights
13. Recent Articles On Smashing Magazine

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.

Mobile Design and Data from Luke Wroblewski

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.

Seeking Hard Data: Performance Case Studies

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.

Inspiration For Pricing Tables

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)

Telerik platform

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.

Designing The Entire User Interface Stack

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.

Lerp: Linear Interpolation in Animations

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.

SVG Tips For Designers

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)


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.

How To Build A Pattern Library In Sketch

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.

Gmail, Sketch and Slack Keyboard Shotcuts

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 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.

Upcoming Smashing Workshops

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

Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.

Email: newsletter@smashingmagazine.com
Follow us on Twitter Join us on Facebook

The authors are: Owen Gregory (og), Cosima Mielke (cm), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).

unsubscribe update preferences view in your browser

No comments:

Post a Comment