Smashing Book 6 Is Here: New Frontiers In Web Design

Smashing Book 6 Is Here: New Frontiers In Web Design

Smashing Book 6 Is Here: New Frontiers In Web Design

Vitaly Friedman

2018-09-13T13:25:00+02:00
2018-09-13T14:15:01+00:00

Imagine you were living in a perfect world. A world where everybody has fast, stable and unthrottled connections, reliable and powerful devices, exquisite screens, and capable, resilient browsers. The screens are diverse in size and pixel density, yet our interfaces adapt to varying conditions swiftly and seamlessly. What a glorious time for all of us — designers, developers, senior Webpack configurators and everybody in-between — to be alive, wouldn’t you agree?

Well, we all know that the reality is slightly more nuanced and complicated than that. That’s why we created Smashing Book 6, our shiny new book that explores uncharted territories and seeks to discover new reliable front-end and UX techniques. And now, after 10 months of work, the book is ready, and it’s shipping. Jump to table of contents and get the book right away.


Smashing Book 6: New Frontiers in Web Design

eBook

$19Get the eBook

PDF, ePUB, Kindle. Free for Smashing Members.

Hardcover

$39Get the Print (incl. eBook)

Printed, quality hardcover. Free airmail shipping worldwide.

About The Book

Finding your way through front-end and UX these days is challenging and time-consuming. But frankly, we all just don’t have time to afford betting on a wrong strategy. Smashing Book 6 sheds some light on new challenges and opportunities, but also uncovers new traps and pitfalls in this brave new front-end world of ours.

Our books aren’t concerned with short-living trends, and our new book isn’t an exception. Smashing Book 6 is focused on real challenges and real front-end solutions in the real world: from accessible apps to performance to CSS Grid Layout to advanced service workers to responsive art direction. No chit-chat or theory. Things that worked, in actual projects. Jump to table of contents.


Smashing Book 6
The Smashing Book 6, with 536 pages on real-life challenges and opportunities on the web. Photo by our dear friend Marc Thiele. (Large preview)

In the book, Laura and Marcy explore strategies for maintainable design systems and accessible single-page apps with React, Angular etc. Mike, Rachel and Lyza share insights on using CSS Custom Properties and CSS Grid in production today. Yoav and Lyza take a dive deep into performance patterns and service workers in times of Progressive Web Apps and HTTP/2.


Inner design of the Smashing Book 6.
Inner design of the Smashing Book 6. Designed by one-and-only Chiara Aliotta. Large view.

Ada, Adrian and Greg explore how to design for watches and new form factors, as well as AR/VR/XR, chatbots and conversational UIs. The last chapter will guide you through some practical strategies to break out of generic, predictable, and soulless interfaces — with dozens of examples of responsive art direction. But most importantly: it’s the book dedicated to headaches and solutions in the fragile, inconsistent, fragmented and wonderfully diverse web we find ourselves in today.

Table Of Contents

Want to peek inside? Download a free PDF sample (PDF, ca. 21 MB) with a chapter on bringing personality back to the web by yours truly. Overall, the book contains 10 chapters:

  1. Making Design Systems Work In Real-Life
    by Laura Elizabeth
  2. Accessibility In Times Of Single-Page Applications
    by Marcy Sutton
  3. Production-Ready CSS Grid Layouts
    by Rachel Andrew
  4. Strategic Guide To CSS Custom Properties
    by Mike Riethmueller
  5. Building An Advanced Service Worker
    by Lyza Gardner
  6. Loading Assets On The Web
    by Yoav Weiss
  7. Conversation Interface Design Patterns
    by Adrian Zumbrunnen
  8. Building Chatbots And Designing For Watches
    by Greg Nudelman
  9. Cross Reality And The Web (AR/VR)
    by Ada Rose Cannon
  10. Bringing Personality Back To The Web (free PDF sample, 21MB)
    by Vitaly Friedman

.c-garfield-the-cat img {
border-radius: 11px;
}
@supports (display: grid) {
.smb6-authors {
display: grid;
grid-template-columns: repeat(auto-fit, 130px);
grid-gap: 1em;
}
.smb6-authors figcaption {
grid-column: 1 / -1;
}
.smb6-authors::before {
display: none;
}
}

Laura Elizabeth
Marcy Sutton
Rachel Andrew
Mike Riethmuller
Lyza Danger Gardner
Yoav Weiss
Adrian Zumbrunnen
Greg Nudelman
Ada Rose Edwards
Vitaly Friedman
From left to right: Laura Elizabeth, Marcy Sutton, Rachel Andrew, Mike Riethmuller, Lyza D. Gardner, Yoav Weiss, Adrian Zumbrunnen, Greg Nudelman, Ada Rose Edwards, and yours truly.
  • 536 pages. Quality hardcover + eBook (PDF, ePUB, Kindle).
    Published late September 2018.
  • Written by and for designers and front-end developers.
    Designed with love from Italy by Chiara Aliotta.
  • Free airmail worldwide shipping from Germany.
    Check delivery times for your country.
  • If you are a Smashing Member, don’t forget to apply your Membership discount.
  • Good enough? Get the book right away.

Smashing Book 6: Covers of Chapter 1 and Chapter 10

eBook

$19Get the eBook

PDF, ePUB, Kindle. Free for Smashing Members.

Hardcover

$39Get the Print (incl. eBook)

Printed, quality hardcover. Free airmail shipping worldwide.

About The Designer

Chiara AliottaThe cover was designed with love from Italy by one-and-only Chiara Aliotta. She founded the design studio Until Sunday and has directed the overall artistic look and feel of different tech companies and not-for-profit organizations around the world. We’re very happy that she gave Smashing Book 6 that special, magical touch.

Behind The Scenes Of The Design Process

We asked Chiara to share some insights into the design process of the cover and the interior design and she was very kind to share some thoughts with us:

“It all started with a few exchanges of emails and a Skype meeting where Vitaly shared his idea of the book and the general content. I had a lot of freedom, which is always exciting and scary at the same time. The only bond (if we want to call it like this) was that the “S” of Smashing Magazine should be the main protagonist of the cover, reinvented and creatively presented as per all the other previous Smashing Books.



The illustration on paper. The cover sketched on paper. Also check the close-up photo. (Large preview)

I worked around few keywords that Vitaly was using to describe the book during our meetings and then developed an idea around classical novels of adventure where the main hero leaves home, encounters great hazards, risks, and then eventually returns wiser and/or richer than he/she was before.

So I thought of Smashing Book 6 as a way to propose this basic and mythic structure under a new light: through the articles of this book, the modern web designer will be experiencing true and deep adventures.

I imagined the “S” as an engine, the starting point of this experience, from where different worlds were creating and expanding. So the cover was the map of these uncharted territories that the book explores.

Every element on the cover has a particular meaning that constructs the S
Every element on the cover has a particular meaning that constructs the S. Large view.

I am a person who judges books by its cover and having read some of the chapters and knowing some of the well-established writers, I wanted to honour its content and their work by creating a gorgeous cover and chapter illustrations.

For this edition of Smashing Book, I imagined a textile cover in deep blue, where the graphic is printed using a very old technique, the hot gold foil stamping.

Together with Markus, part of the Smashing Magazine team and responsible for the publishing of all the Smashing Books, we worked closely to choose the final details of the binding and guarantee an elegant and sophisticated result, adding a touch of glam to the book.



Smashing Book 6 comes wrapped with a little bookmark. Photo by our dear friend Marc Thiele.

As a final touch, I added a paper wrap around the book that invites the readers to “unlock their adventure”, suggesting a physical action: the reader needs to tear off the paper before starting reading the book.
And for this only version, we introduced a customise Smashing Magazine bookmark, also in printed on gold paper. Few more reasons to prefer the paperback version over the digital ones!”

A huge round of applause to Chiara for her wonderful work and sharing the thoughts with us. We were remarkably happy with everything from design to content. But what did readers think? Well, I’m glad that you asked!



Sketches for chapter illustrations. (Large preview)

Feedback and Testimonials

We’ve sent the shiny new book to over 200 people to peek through and read, and we were able to gather some first insights. We’d love to hear your thoughts, too!

“Web design is getting pretty darned complicated. The new book from SmashingMag aims to bring the learning curve down to an accessible level.”

Aaron Walter, InVision

“Just got the new Smashing Book 6 by SmashingMag. What a blast! From CSS Grid Layout, CSS Custom Properties and service workers all the way to the HTTP/2 and conversational interfaces and many more. I recommend it to all the people who build interfaces.”

Mihael Tomić, Osijek, Croatia

“The books published by SmashingMag and team are getting better each time. I was thrilled to be able to preview it… EVERY CHAPTER IS GOOD! Having focused on a11y for much of my career, Marcy Sutton’s chapter is a personal favorite.”

Stephen Hay, Amsterdam, Netherlands


Smashing Book 6, a thank-you page
The Smashing Book 6, with 536 pages on real-life challenges and solutions for the web. Huge thank-you note to the smashing community for supporting the book and out little magazine all these years. (Large preview)

Thank You For Your Support!

We’re very honored and proud to have worked with wonderful people from the industry who shared what they’ve learned in their work. We kindly thank all the hard-working people involved in making this book reality. We kindly thank you for your ongoing support of the book and our little magazine as well. It would be wonderful if you could mention the book by any chance as well in your social circles and perhaps link to this very post.

We’ve also prepared a little media kit .zip with a few photos and illustrations that you could use if you wanted to — just sayin’!

We can’t wait to hear your thoughts about the book! Happy reading, and we hope that you’ll find the book as useful as we do. Just have a cup of coffee (or tea) ready before you start reading, of course, stay smashing and… meow!


Smashing Book 6: New Frontiers in Web Design

eBook

$19Get the eBook

PDF, ePUB, Kindle. Free for Smashing Members.

Hardcover

$39Get the Print (incl. eBook)

Printed, quality hardcover. Free airmail shipping worldwide.

Smashing Editorial
(ra, il)


Source: Smashing Magazine

20 Best jQuery Image Sliders

Let’s be honest—sliders are fun. A little bit of movement can really bring a page to life.

Sliders—also known as “carousels” or “image sliders”—are interactive elements for showing images or other media in a web page. 

Take a look at these 20 useful jQuery sliders from Envato Market and you’ll see there’s more to sliders than you might have imagined.

1. RoyalSlider

Having a touch-friendly and responsive slider for your website is more important now than ever before, and RoyalSlider is both.

Developed with HTML5 and CSS3 best practices, it’s a solid choice.

RoyalSlider  Touch-Enabled jQuery Image Gallery

Here are a few of the other royally cool features:

  • SEO optimized
  • highly configurable
  • over 10 starter templates
  • includes fallbacks for CSS3 transitions
  • and more

I think the best feature is the modular architecture that gives devs the option to exclude what they don’t need from the main JS file, keeping things as lean as possible.

The RoyalSlider is a solid JavaScript slider that should be a nice addition to any web dev’s toolbox.

2. Slider Revolution

It’s not easy to be “revolutionary” in the slider space. There are only so many options you can make available when it comes to sliders, but the Slider Revolution does a great job trying.

When it comes to jQuery sliders, this one delivers on just about everything you’ll want.

Slider Revolution Responsive jQuery Plugin

The list of features for this slider is long, so I’ll just hit the high points:

  • parallax effects and custom animations
  • SEO optimized and lazy loading options
  • add unlimited layers and slides with link options
  • includes “ready to use” styles and is highly customizable
  • and much more

The ability to drop in an image, video player embed, and social media source makes Slider Revolution one of the most flexible and customizable options you’ll find.

3. LayerSlider

The name doesn’t do this jQuery slider justice. Its 200+ 2D and 3D slide transitions will turn some heads.

LayerSlider Responsive jQuery Slider Plugin

Some of the notable features include:

  • skin design PSD template included
  • 13 skins and 3 navigation types
  • add a fixed image over the slider
  • SEO friendly and lazy load images
  • hardware-accelerated CSS3 transitions with jQuery fallback
  • and more

Like the previous slider, you can drop in just about any content—even HTML5 self-hosted multimedia content.

The LayerSlider brings a lot of action to the slider space and is downright handsome.

4. jQuery Banner Rotator / Slideshow

The jQuery Banner Rotator / Slideshow slider is a straightforward solution. It’s simple without sacrificing essentials.

jQuery Banner Rotator  Slideshow

It includes:

  • tooltips, text descriptions, etc.
  • thumbnail and component viewing options
  • timer and delay options on a global or per-slider basis
  • multiple transitions for all slides or different for each one
  • more

While the jQuery Banner Rotator / Slideshow is basic compared to other jQuery sliders, it should not be overlooked if you want a simple, clean interface.

5. All In One Slider Responsive jQuery Slider Plugin

Every slider comes to market with its own unique perspective and provides a solution to whatever slider niche is being targeted.

But not this one.

The All In One Slider Responsive jQuery Slider Plugin is… well… all in one.

All In One Slider Responsive Jquery Slider Plugin

I think most web devs and designers have a go-to solution, but at the same time are always on the lookout for something new.

This just might be that something new as it includes:

  • banner rotator
  • thumbnails banner
  • banner with playlist
  • content slider
  • carousel

And all of these slider styles include most—if not all—of the features needed in a jQuery slider.

Will the All In One Slider Responsive jQuery Slider Plugin be your all-in-one slider solution?

6. UnoSlider

If your slider isn’t touch-enabled and responsive, you’re not doing it right.

The UnoSlider does it right.

UnoSlider - Responsive Touch Enabled Slider

This slider finds its sweet spot between simple and feature rich.

Features include:

  • easily themeable
  • 12 pre-built themes
  • 40 present transitions
  • IE6+ support (because it’s still out there!)
  • and more

The feature set leans more towards design and style, making the UnoSlider a great content slider to theme.

7. Master Slider

Looking for one jQuery slider to rule them all?

Try the Master Slider on for size…

Master Slider - jQuery Touch Swipe Slider

When it comes to good looks, this one is in the upper echelon:

  • smart preloading
  • over 25 templates
  • hardware-accelerated transitions
  • supports touch navigation and swipe gestures
  • and much more

The interactive transitions, animated layers, and hotspots will really catch your eye.

The Master Slider collection is a masterpiece.

8. TouchCarousel

TouchCarousel touts “free support and upgrades”, but there’s a lot more to this lightweight carousel-style jQuery slider.

TouchCarousel - jQuery Content Scroller and Slider

With “touch” in the name, it’s obviously fully responsive and supports touch navigation.

Other features include:

  • SEO friendly
  • smart autoplay
  • hardware-accelerated CSS3 transitions
  • customizable UI with four Photoshop skins
  • and more

However, TouchCarousel takes mobile to a whole new level with its unique physics-based scrolling.

9. Advanced Slider

A jQuery slider isn’t just for the web. It can also be useful when integrated into applications, just like you can do with the Advanced Slider.

Advanced Slider - jQuery XML Slider

Using HTML markup or XML, this advanced slider packs a lot of punch:

  • animated layers and smart video
  • 100+ transitions and 150+ customizable properties
  • 15 slider skins, 7 scrollbar skins, and built-in lightbox support
  • keyboard navigation, touchscreen support, and fully customizable interface
  • and much, much more

The best feature, however, has got to be the Advanced Slider API—making it the perfect slider solution for your application.

10. jQuery Slider Zoom In/Out Effect Fully Responsive

This is one of those jQuery sliders that makes you visit the demo before you start reading about the features, because you want to know what the heck “zoom in/out effect” even means.

Think screensaver.

jquery Slider Zoom InOut Effect Fully Responsive

While the effect is fairly slight, the zoom effect in a slider adds a nice touch in a world wide web full of static image sliders.

This slick slider’s features include:

  • CSS3 layer transitions
  • exit animation parameters for layers
  • fixed, full width, and fullscreen options
  • CSS and HTML formatted animated text
  • and more

While most sliders try to deliver many effects in one package, the jQuery Slider Zoom In/Out Effect Fully Responsive slider delivers the Ken Burns effect and delivers it well.

11. Content Timeline

Content Timeline is a beautifully designed and powerful slider—a perfect solution for timelines.

From desktop to mobile, timelines have never looked so good.

Content Timeline

It’s simple. Take your content, sort it by the date, call the function, and that’s it!

Features include:

  • powerful and lightweight
  • 11 customizable settings
  • fully interactive, flexible, and intuitive
  • full responsive and built for mobile and desktop
  • and more

With seven embedded script control methods and included easing effects, Content Timeline is one of the best timeline sliders you’ll find.

12. Sexy Slider

The Sexy Slider isn’t nearly as sexy as it used to be, but it has aged well, making it a trustworthy solution.

Sexy Slider

It’s not very impressive at first blush, but with some fine-tuning, this flexible jQuery slider can be configured to fit your design perfectly.

It includes:

  • auto slide
  • image captions
  • continuous sliding
  • 6 transition effects
  • and more

Sexy Slider is just waiting for you to unlock its power and discover its full potential.

13. Master Slider jQuery Slider Plugin with Visual Builder

The Master Slider jQuery Slider Plugin with Visual Builder makes building a slider a snap—without sacrificing good looks.

This premium image and content slider offers some really nice hardware-accelerated transitions that will surely catch your eye.

Master Slider jQuery Slider Plugin with Visual Builder

Features include:

  • smart preloading
  • built for both mobile and desktop
  • over 80 ready-to-use sample sliders
  • masked layer transitions, layer actions, and overlay layers
  • and more

Master Slider jQuery Slider Plugin with Visual Builder is fully customizable, SEO friendly, and also supports videos. And of course, the most obvious: a visual builder.

14. Translucent

Most jQuery slider plugins include some sort of design chrome, and while you can configure it to your liking, sometimes you just want to keep everything contained within the slide itself.

Enter the Translucent slider.

Translucent - Responsive Banner Rotator  Slider

There are a lot of presets, so all you’ll need to do is configure it and go!

Features include:

  • 6 style variations
  • 4 transition effects
  • 2 touch swipe transitions
  • configurable buttons and captions
  • and more

Like others, it’s touch-friendly, responsive, and leverages hardware acceleration.

Translucent is a minimal slider design that does a great job pushing the content to the front.

15. Unleash

Looking for an accordion slider? Then Unleash is what you want!

Packed with features, this beautiful slider is one of the best accordion sliders you’ll find.

Unleash

Features include:

  • HTML5 video support for desktop
  • hardware-accelerated animations
  • fully responsive
  • supports touch
  • and more

Unleash the Unleash jQuery responsive accordion slider.

16. AviaSlider

AviaSlider is another good-looking slider that includes some really nice effects.

This easy-to-use jQuery slideshow plugin includes eight predefined transitions, but you can create more.

AviaSlider

Some other features include:

  • includes image preloader
  • autoplay stops when users interact
  • works with prettyPhoto Lightbox out of the box
  • and more

AviaSlider packs a punch, despite the packed version weighing in at only 8kb.

17. Slider Evolution

Start a slider revolution with Slider Evolution! Now you can easily create JavaScript sliders with some of the best effects.

Slider Evolution

With Slider Evolution, you can create an unlimited number of sliders, each with customized settings, to be placed anywhere on your website.

18. Accordionza

jQuery sliders don’t get much lighter than this.

Using only 3kb to load, Accordionza is a super lightweight accordion slider option.

Accordionza - jQuery Plugin

And if you don’t like the three included styles, you can tweak the HTML and CSS of this flexible accordion.

Features include:

  • keyboard navigation
  • easily configure effects and controls
  • progressive enhancement (viewable without JavaScript enabled)
  • and more

Keep in mind that Accordionza can display many kinds of mixed content, making it an excellent choice for a flexible, go-to accordion slider option.

19. mightySlider

The mightySlider is mighty indeed.

You can use it not only as a simple image slider, but also as a full one-directional slider with item-based navigation—making for a nice one-page website design.

mightySlider - Responsive Multipurpose Slider

You’ll find plenty of options under the hood:

  • keyboard, mouse, and touch support
  • hardware-accelerated CSS3 transitions
  • clean, valid markup and SEO optimized
  • unlimited slides, caption layers, and caption effects
  • and much more

The API is powerful and developer-friendly, adding to the many ways it can be used.

With its clean and well-commented code, the mightySlider is an excellent, forward-thinking jQuery slider.

20. Parallax Slider

The Parallax Slider works like the jQuery Responsive OneByOne Slider Plugin, allowing you to animate each layer separately within a particular slide.

You can do this with multiple slides, or even just one slide, adding some compelling parallax animation to your website.

Parallax Slider - Responsive jQuery Plugin

This comes with four different types of sliders, all offering the same animated, parallax effect.

Like many other jQuery sliders, it also includes:

  • fully customizable
  • touchscreen support
  • fully responsive and unlimited layers
  • autoplay, loop, height & width, and timer parameters
  • and more

Animated layers are not limited to text and images either. You can also include YouTube, Vimeo, and HTML5 video.

The Parallax Slider is another fine example of how Flash-like effects can be executed better than Flash—and be supported across all devices.

Conclusion

It’s interesting to see how the jQuery slider has evolved from something that just transitioned from one image to the next, into a broad range of creative tools. We see sliders that are 3D, parallax, full page, and are fully responsive and viewable on the desktop or smartphone.

If you didn’t find a jQuery slider you liked in this list, you could always take an Envato Tuts+ jQuery Code Tutorial and develop something completely new and unique. Otherwise, dig through the many other great jQuery sliders on Envato Market—there are plenty to choose from.

What’s your favorite jQuery slider and why?


Source: Nettuts Web Development

Scroll Snap in CSS: Controlling Scroll Action

The following is a short extract from Tiffany’s upcoming book, CSS Master, 2nd Edition, which will be available shortly.

As the web platform grows, it has also gained features that mimic native applications. One such feature is the CSS Scroll Snap Module. Scroll snap lets developers define the distance an interface should travel during a scroll action. You might use it to build slide shows or paged interfaces―features that currently require JavaScript and expensive DOM operations.

Scroll snap as a feature has undergone a good deal of change. An earlier, 2013 version of the specification — called Scroll Snap Points at the time — defined a coordinates-and-pixels-based approach to specifying scroll distance. This version of the specification was implemented in Microsoft Edge, Internet Explorer 11, and Firefox.

Chrome 69+ and Safari 11+ implement the latest version of the specification, which uses a box alignment model. That’s what we’ll focus on in this section.

Warning:
Many of the scroll snap tutorials currently floating around the web are based on the earlier CSS Scroll Snap Points specification. The presence of the word “points” in the title is one sign that the tutorial may rely on the old specification. A more reliable indicator, however, is the presence of the scroll-snap-points-x or scroll-snap-points-y properties.

Since scroll snap is really well-suited to slide show layouts, that’s what we’ll build. Here’s our markup.

<div class="slideshow">
  <img src="avocado-and-bacon-salad.jpg" alt="avocado and bacon salad">
  <img src="salad-eggs-and-scallops.jpg" alt="salad topped with hard boiled eggs and seared scallops">
  <img src="seafood-and-noodles.jpg" alt="seafood stew over noodles">
  <img src="grilled-salmon-and-side-salad.jpg" alt="grilled salmon steak with avocado and side salad">
  <img src="avocado-toast-with-egg.jpg" alt="avocado toast with egg">
</div>

That’s all we need. We don’t need to have an outer wrapping element with and an inner sliding container. We also don’t need any JavaScript.

Now for our CSS:

* {
   box-sizing: border-box;
}

html, body {
    padding: 0; 
    margin: 0;
}

.slideshow {
  scroll-snap-type: x mandatory; /* Indicates scroll axis and behavior */
  overflow-x: auto;              /* Should be either `scroll` or `auto` */
  display: flex;
  height: 100vh;
}

.slideshow img {
  width: 100vw;
  height: 100vh;
  scroll-snap-align: center;
}

Adding scroll-snap-type to .slideshow creates a scroll container. The value for this property, x mandatory describes the direction in which we’d like to scroll, and the scroll snap strictness. In this case, the mandatory value tells the browser that it must snap to a snap position when there is no active scroll operation. Using display: flex just ensures that all of our images stack horizontally.

Now the other property we need is scroll-snap-align. This property indicates how to align each image’s scroll snap area within the scroll container’s snap port. It accepts three values: start, end, and center. In this case, we’ve used the center which means that each image will be centered within the viewport as shown below.

How scroll-snap-align: center aligns images within a scroll container, in Chrome 70 for Android

For a more comprehensive look at Scroll Snap, read Well-Controlled Scrolling with CSS Scroll Snap from Google Web Fundamentals guide.

The post Scroll Snap in CSS: Controlling Scroll Action appeared first on SitePoint.


Source: Sitepoint

How to Grow Your Business from $0 to $20M

Steve McLeod is Founder and Chairman of Fire and Safety Australia, Australia’s leading safety training company. The company is built on an unwavering passion for safety education and a determination to make a change in the world. Working with clients such as BHP, Chevron, Santos, and training over 50 000 people nationally, Steve shares his secrets on how he grew his business from the ground up.

How Relentless Discipline Can Create Your Vision

Whenever we see success, whether it be an invention, a social change or a Maserati-driving entrepreneur, we have that moment of asking “How? What was the chain of events that made that happen?”

Although no two paths will ever be the same, there are commonalities with all success stories.

During his time as an active firefighter, Steve experienced many dire situations from the result of unsafe practices. Being passionate about safety and saving lives and therefore enhancing people’s existence by keeping them alive, he saw an opportunity to share his passion through educating organizations and individuals, to prevent the scenarios he witnessed as a firefighter.

The post How to Grow Your Business from $0 to $20M appeared first on SitePoint.


Source: Sitepoint

The Importance Of Manual Accessibility Testing

The Importance Of Manual Accessibility Testing

The Importance Of Manual Accessibility Testing

Eric Bailey

2018-09-12T13:30:55+02:00
2018-09-12T13:15:05+00:00

Earlier this year, a man drove his car into a lake after following directions from a smartphone app that helps drivers navigate by issuing turn-by-turn directions. Unfortunately, the app’s programming did not include instructions to avoid roads that turn into boat launches.

From the perspective of the app, it did exactly what it was programmed to do, i.e. to find the most optimal route from point A to point B given the information made available to it. From the perspective of the man, it failed him by not taking the real world into account.

The same principle applies for accessibility testing.

Designing For Accessibility And Inclusion

The more inclusive you are to the needs of your users, the more accessible your design is. Let’s take a closer look at the different lenses of accessibility through which you can refine your designs. Read article →

Automated Accessibility Testing

I am going to assume that you’re reading this article because you’re interested in learning how to test your websites and web apps to ensure they’re accessible. If you want to learn more about why accessibility is necessary, the topic has been covered extensively elsewhere.

Automated accessibility testing is a process where you use a series of scripts to test for the presence, or lack of certain conditions in code. These conditions are dictated by the Web Content Accessibility Guidelines (WCAG), a standard by the W3C that outlines how to make digital experiences accessible.

For example, an automated accessibility test might check to see if the tabindex attribute is present and if its value is greater than 0. The pseudocode would be something like:


A flowchart that asks if the tabindex value is present. If yes, it asks if the tabindex value is greater than 0. If it is greater than zero, it fails. If not, it passes. If no tabindex value is present, it also passes.

Failures can then be collected and used to generate reports that disclose the number, and severity of accessibility issues. Certain automated accessibility products can also integrate as a Continuous Integration or Continuous Deployment (CI/CD) tool, presenting just-in-time warnings to developers when they attempt to add code to a central repository.

These automated programs are incredible resources. Modern websites and web apps are complicated things that involve hundreds of states, thousands of lines of code, and complicated multi-screen interactions. It’d be absurd to expect a human (or a team of humans) to mind all the code controlling every possible permutation of the site, to say nothing of things like regressions, software rot, and A/B tests.

Automation really shines here. It can repeatedly and tirelessly pour over these details with perfect memory, at a rate far faster than any human is capable of.

However…

Automated accessibility tests aren’t a turnkey solution, nor are they a silver bullet. There are some limitations to keep in mind when using them.

Thinking To Think Of Things

One of both the best and worst aspects of the web is that there are many different ways to implement a solution to a problem. While this flexibility has kept the web robust and adaptable and ensured it outlived other competing technologies, it also means that you’ll sometimes see code that is, um, creatively implemented.

The test suite is only as good as what its author thought to check for. A naïve developer might only write tests for the happy path, where everyone writes semantic HTML, fault-tolerant JavaScript, and well-scoped CSS. However, this is the real world. We need to acknowledge that things like tight deadlines, unfamiliarity with the programming language, atypical user input, and sketchy 3rd party scripts exist.

For example, the automated accessibility testing site Tenon.io wisely includes a rule that checks to see if a form element has both a label element and an aria-label associated with it, and if the text strings for both declarations differ. If they do, it will flag it as an issue, as the visible label may be different than what someone would hear if they were navigating using a screen reader.

If you’re not using a testing service that includes this rule, it won’t be reported. The code will still “pass”, but it’s passing by omission, not because it’s actually accessible.

State

Some automated accessibility tests cannot parse the various states of interactive content. Critical parts of the user interface are effectively invisible to automation unless the test is run when the content is in an active, selected, or disabled state.

By interactive content, I mean things that the user has yet to take action on, or aren’t present when the page loads. Unopened modals, collapsed accordions, hidden tab content and carousel slides are all examples.

It takes sophisticated software to automatically test the various states of every component within a single screen, let alone across an entire web app or website. While it is possible to augment testing software with automated accessibility checks, it is very resource-intensive, usually requiring a dedicated team of engineers to set up and maintain.

“Valid” Markup

Accessible Rich Internet Applications (ARIA) is a set of attributes that extend HTML to allow it to describe interaction in a way that can be better understood by assistive technologies. For example, the aria-expanded attribute can be toggled by JavaScript to programmatically communicate if a component is in an expanded (true) or collapsed (false) state. This is superior to toggling a CSS class like .is-expanded, where the update in state is only communicated visually.

Just having the presence of ARIA does not guarantee that it will automatically make something accessible. Unfortunately, and in spite of its first rule of use, ARIA is commonly misunderstood, and consequently abused. A lot of off-the-shelf code has this problem, perpetuating the issue.

For example, certain ARIA attributes and values can only be applied to certain elements. If incorrectly applied, assistive technology will ignore or misreport the declaration. Certain roles, known as Abstract Roles, only exist to set up the overall taxonomy and should never be placed in markup.

<button role="command">Save</button>

<!-- Never do this -->

To further complicate the issue, support for ARIA is varied across browsers. While an attribute may be used appropriately, the browser may not communicate the declared role, property, or state to assistive technology.

There is also the scenario where ARIA can be applied to an element and be valid from a technical standpoint, yet be unusable from an assistive technology perspective. For example:

<h1 aria-hidden=“true”>
  Tired of unevenly cooked asparagus? Try this tip from the world’s oldest cookbook.
</h1>

This one Weird Trick.

The aria-hidden declaration will remove the presence of content from assistive technology, yet allow it to be still rendered visibly on the page. It’s a problematic pattern.

Headings — especially first-level headings — are vital in communicating the purpose of a page. If a person is using assistive technology to navigate, the aria-hidden declaration applied to the h1 element will make it difficult for them to quickly determine the page’s purpose. It will force them to navigate around the rest of the page to gain context, an annoying and labor-intensive process.

Some automated accessibility tests may scan the code and not report an error since the syntax itself is valid. The automation has no way of knowing the greater context of the declaration’s use.

This isn’t to say you should completely avoid using ARIA! When authored with care and deliberation, ARIA can fix the gaps in accessibility that sometimes plague complicated interactions; it provides some much-needed context to the people who rely on assistive technology.

Much-Needed Context

As the soggy car demonstrates, computers are awful at understanding the overall situation of the outside world. It’s up to us humans to be the ultimate arbiters in determining if what the computer spits out is useful or not.

Debunking

Before we discuss how to provide appropriate context, there are a few common misunderstandings about accessibility work that need to be addressed:

First, not all screen reader users are blind. In addition to all the points Adrian Roselli outlines in his post, some food for thought: the use of voice assistants is on the rise. When’s the last time you spoke to Siri or Alexa?

Second, accessibility is more than just screen readers. The rules outlined in the Web Content Accessibility Guidelines ensure that the largest number of people can read and operate technology, regardless of ability or circumstance.

For example, the rule that stipulates a website or web app needs to be able to work regardless of device orientation benefits everyone. Some people may need to mount their device in a fixed location in a specific orientation, such as in landscape mode on the arm of a wheelchair. Others might want to lie in bed and watch a movie, or better investigate a product photo (pinch and pull zooming will also be helpful to have here).

Third, disabilities can be conditional and can be brought about by your environment. It can be a short-term thing, like rain on your glasses, sleep deprivation, or an allergies-induced migraine. It can also be longer-term, such as a debilitating illness, broken limb, or a depressive episode. Multiple, compounding conditions can (and do) affect individuals.

That all being said, many accessibility fixes that help screen readers work properly also benefit other assistive technologies.

Get Your Feet Wet

Knowing where to begin can be overwhelming. Consider Michiel Bijl’s great advice:

“Before you release a website, tab through it. If you cannot see where you are on the page after each tab; you’re not finished yet. #a11y

Tab through a few of the main user flows on your website or web app to determine if all interactive components’ focus states are visually apparent, and if they can be activated via keyboard input. If there’s something you can click or tap on that isn’t getting highlighted when receiving keyboard focus, take note of it. Also pay attention to the order interactive components are highlighted when focused — it should match the reading order of the site.

An obvious focus state and logical tab order go a great way to helping make your site accessible. These two features benefit a wide variety of assistive technology, including, but not limited to, screen readers.

If you need a baseline to compare your testing to, Dave Rupert has an excellent project called A11Y Nutrition Cards, which outlines expected behavior for common interactive components. In addition, Scott O’Hara maintains a project called a11y Styled Form Controls. This project provides examples of components such as switches, checkboxes, and radio buttons that have well-tested and documented support for assistive technology. A clever reader might use one of these resources to help them try out the other!


A screenshot of homepage for the a11y Styled Form Controls website placed over a screenshot of the Nutrition Cards for Accessible Components website.
(Large preview)

The Fourth Myth

With that out of the way, I’m going to share a fourth myth with you: not every assistive technology user is a power user. Like with any other piece of software, there’s a learning curve involved.

In her post about Aaptiv’s redesign, Lisa Zhu discovers that their initial accessibility fix wasn’t intuitive. While their first implementation was “technically” correct, it didn’t line up with how people who rely on VoiceOver actually use their devices. A second solution simplified the interaction to better align with their expectations.

Don’t assume that just because something hypothetically functions that it’s actually usable. Trust your gut: if it feels especially awkward, cumbersome, or tedious to operate for you, chances are it’ll be for others.

Dive Right In

While not every accessibility issue is a screen reader issue, you should still get in the habit of testing your site with one. Not an emulator, simulator, or some other proxy solution.

If you find yourself struggling to operate a complicated interactive component using basic screen reader commands, it’s probably a sign that the component needs to be simplified. Chances are that the simplification will help non-assistive technology users as well. Good design benefits everyone!

The same goes for navigation. If it’s difficult to move around the website or web app, it’s probably a sign that you need to update your heading structure and landmark roles. Both of these features are used by assistive technology to quickly and efficiently navigate.


Two code examples for a sidebar. One uses a div element, while the others uses an aside element. Both have the class of sidebar applied to them, with a subheading of Recent Posts.
Both of these are sidebars, but only one of them is semantically described as such. A computer doesn’t know what a sidebar is, so it’s up to you to tell it.

Another good thing to review is the text content used to describe your links. Hopping from link to link is another common assistive technology navigation technique; some screen readers can even generate a list of all link content on the page:

“Think before you link! Your “helpful” click here links look like this to a screen reader user. ALT = JAWS links list”

Tweet by Neil Milliken

Neil Milliken

When navigating using an ordered list devoid of the surrounding non-link content, avoiding ambiguous terms like “click here” or “more info” can go a long way to ensuring a person can understand the overall meaning of the page. As a bonus, it’ll help alleviate cognitive concerns for everyone, as you are more accurately explaining what a user should expect after activating a link.

How To Test

Each screen reader has a different approach to how it announces content. This is intentional. It’s a balancing act between the product’s features, the operating system it is installed on, the form factor it is available in, and the types of input it can receive.

The Browser Wars taught us the folly of developing for only one browser. Similarly, we should not cater to a single screen reader. It is important to note that many people rely exclusively on a specific screen reader and browser combination — by circumstance, preference, or necessity’making this all the more important. However, there is a caveat: each screen reader works better when used with a specific browser, typically the one that allows it access to the greatest amount of accessibility API information.

All of these screen readers can be used for free, provided you have the hardware. You can also virtualize that hardware, either for free or on the cheap.

Automate

Automated accessibility tests should be your first line of defense. They will help you catch a great deal of nitpicky, easily-preventable errors before they get committed. Repeated errors may also signal problems in template logic, where one upstream tweak can fix multiple pages. Identifying and resolving these issues allows you to spend your valuable manual testing time much more wisely.

It may also be helpful to log accessibility issues in a place where people can collaborate, such as Google Sheets. Quantifying the frequency and severity of errors can lead to good things like updated documentation, opportunities for lunch and learn education, and other healthy changes to organizational workflow.

Much like manual testing with a variety of screen readers, it is recommended that you use a combination of automated tools to prevent gaps.

Windows

The two most popular screen readers on Windows are JAWS and NVDA.

JAWS

JAWS (Job Access With Speech) is the most popular and feature-rich screen reader on the market. It works best with Firefox and Chrome, with concessions for supporting Internet Explorer. Although it is pay software, it can be operated in full in demo mode for 40 minutes at a time (this should be more than sufficient to perform basic testing).

NVDA

NVDA (NonVisual Desktop Access) is free, although a donation is strongly encouraged. It is a feature-rich alternative to JAWS. It works best with Firefox.

Narrator

Windows comes bundled with a built-in screen reader called Narrator. It works well with Edge, but has difficulty interfacing with other browsers.

Apple

macOS

VoiceOver is a powerful screen reader that comes bundled with macOS. Use it in conjunction with Safari, first making sure that full keyboard access is enabled.

iOS

VoiceOver is also included in iOS, and is the most popular mobile screen reader. Much like its desktop counterpart, it works best with Safari. An interesting note here is that according to the 2017 WebAIM screen reader survey, a not-insignificant amount of respondents augment their phone with external hardware keyboards.

Android

Google recently folded TalkBack, their mobile screen reader, into a larger collection of accessibility services called the Android Accessibility Suite. It works best with Mobile Chrome. While many Android apps are notoriously inaccessible, it is still worth testing on this platform. Android’s growing presence in emerging markets, as well as increasing internet use amongst elderly and lower-income demographics, should give pause for consideration.

Popular screen readers
Screen ReaderPlatformPreferred Browser(s)ManualLaunchQuit
JAWSWindowsChrome, FirefoxJAWS 2018 DocumentationLaunch JAWS as you would any other Windows applicationInsert + F4
NVDAWindowsFirefoxNVDA 2018.2.1 User GuideCtrl + Alt + NInsert + Q
NarratorWindowsEdgeGet started with NarratorWindows key + Control + EnterWindows key + Control + Enter
VoiceOvermacOSSafariVoiceOver Getting Started GuideCommand + F5 or tap the Touch ID button 3 timesCommand + F5 or tap the Touch ID button 3 times
Mobile VoiceOveriOSMobile SafariVoiceOver overview – iPhone User GuideTell Siri to, “Turn on VoiceOver.” or activate in SettingsTell Siri to, “Turn off VoiceOver.” or deactivate in Settings
Android Accessibility SuiteAndroidMobile ChromeGet started on Android with TalkBackPress both volume keys for 3 secondsPress both volume keys for 3 seconds

Call The Professionals

If you do not require the use of assistive technology on a frequent basis then you do not fully understand how the people who do interact with the web.

Much like traditional user testing, being too close to the thing you created may cloud your judgment. Empathy exercises are a good way to become aware of the problem space, but you should not use yourself as a litmus test for whether the entire experience is truly accessible. You are not the expert.

If your product serves a huge population of users, if its core base of users trends towards having a higher probability of disability conditions (specialized product, elderly populations, foreign language speakers, etc.), and/or if it is required to be compliant by law, I would strongly encourage allocating a portion of your budget for testing by people with disabilities.

“At what point does your organisation stop supporting a browser in terms of % usage? 18% of the global pop. have an #Accessibility requirement, 2% people have a colour vision deficient. But you consider 2% IE usage support more important? Support everyone be inclusive.”

Mark Wilcock

This isn’t to say you should completely delegate the responsibility to these testers. Much as how automated accessibility testing can detect smaller issues to remove, a first round of basic manual testing helps professional testers focus their efforts on the complicated interactions you need an expert’s opinion on. In addition to optimizing the value of their time, it helps to get you more comfortable triaging. It is also a professional courtesy, plain and simple.

There are a few companies that perform manual testing by people with disabilities:

Designed Experiences

We also need to acknowledge the other large barrier to accessible sites that can’t be automated away: poor user experience.

User experience can make or break a product. Your code can compile perfectly, your time to first paint can be lightning quick, and your Webpack setup can be beyond reproach. All this is irrelevant if the end result is unusable. User experience encompasses all users, including those who navigate with the aid of assistive technology.

If a person cannot operate your website or web app, they’ll abandon it and not think twice. If they are forced to use your site to get a service unavailable by other means, there’s a growing precedent for taking legal action (and rightly so).

As a discipline, user experience can be roughly divided into two parts: how something looks and how it behaves They’re intrinsically interlinked concepts — work on either may affect both. While accessible design is a topic unto itself, there are some big-picture things we can keep in mind when approaching accessible user experiences from a testing perspective:

How It Looks

The WCAG does a great job covering a lot of the basics of good design. Color contrast, font size, user-facing state: a lot of these things can be targeted by automation. What you should pay attention to is all the atomic, difficult to quantify bits that compound to create your designs. Things like the words you choose, the fonts you use to display them, the spacing between things, affordances for interaction, the way you handle your breakpoints, etc.

“A good font should tell you:
the difference between m and rn
the difference between I and l
the difference between O and 0.”

mallory, alice & bob

It’s one of those “an ounce of prevention is worth a pound of cure” situations. Smart, accessible defaults can save countless time and money down the line. Lean and mean startups all the way up to multinational conglomerates value efficient use of resources, and this is one of those places where you can really capitalize on that. Put your basic design patterns — say collected in something like a mood board or living style guide — in front of people early and often to see if your designed intent is clear.

How It Behaves

An enticing color palette and collection of thoughtfully-curated stock photography only go so far. Eventually, you’re going to have to synthesize all your design decisions to create something that addresses a need.

Behavior can be as small as a microinteraction, or as large as finding a product and purchasing it. What’s important here is to make sure that all the barriers to a person trying to accomplish the task at hand are removed.

If you’re using personas, don’t create a separate persona for a user with a disability. Instead, blend accessibility considerations into your existing ones. As a persona is an abstracted representation of the types of users you want to cater to, you want to make sure the kinds of conditions they may be experiencing are included. Disability conditions aren’t limited to just physical impairments, either. Things like a metered data plan, non-native language, or anxiety are all worth integrating.

“When looking at your site’s analytics, remember that if you don’t see many users on lower end phones or from more remote areas, it’s not because they aren’t a target for your product or service. It is because your mobile experience sucks.
As a developer, it’s your job to fix it.”

Estelle Weyl

User testing, ideally simulating conditions as close to what a person would be doing in the real world (including their individual device preferences and presence of assistive technology), is also key. Verifying that people are actually able to make the logical leaps necessary to operate your interface addresses a lot of cognitive concerns, a difficult-to-quantify yet vital thing to accommodate.

We Shape Our Tools, Our Tools Shape Us

Our tool use corresponds to the kind of work we do: Carpenters drive nails with hammers, chefs cook using skillets, surgeons cut with scalpels. It’s a self-reinforcing phenomenon, and it tends to lead to over-categorization.

Sometimes this over-categorization gets in the way of us remembering to consider the real world. A surgeon might have a carpentry hobby; a chef might be a retired veterinarian. It’s important to understand that accessibility is everyone’s responsibility, and there are many paths to making our websites and web apps the best they can be for everyone. To paraphrase Mikey Ilagan, accessibility is a holistic practice, essential to some but useful to all.

Used with discretion, ARIA is a very good tool to have at our disposal. We shouldn’t shy away from using it, provided we understand the how and why behind why they work.

The same goes for automated accessibility tests, as well as GPS apps. They’re great tools to have, just get to know the terrain a little bit first.

Resources

Automated Accessibility Tools

Professional Services

References

Quick Tests

Further Reading

Smashing Editorial
(rb, ra, yk, il)


Source: Smashing Magazine

How to Use 2D Transformation Functions in CSS

The following is a short extract from Tiffany’s upcoming book, CSS Master, 2nd Edition, which will be available shortly.

Transforms allow us to create effects and interactions that are otherwise impossible. When combined with transitions and animations, we can create elements and interfaces that rotate, dance, and zoom. Three-dimensional transforms, in particular, make it possible to mimic physical objects. In this piece, we’ll look at 2D transform functions (3D functions are covered here).

There are four primary two-dimensional transform functions: rotate, scale, skew, and translate. Six other functions let us transform an element in a single dimension: scaleX and scaleY; skewX and skewY; and translateX and translateY.

rotate()

A rotation transform spins an element around its origin by the angle specified around the transform-origin point. Using rotate() tilts an element clockwise (positive angle values) or counter-clockwise (negative angle values). Its effect is much like a windmill or pinwheel, as seen below.

The purple box has been rotated 55 degrees from its start position, shown by the dotted line

The rotate() function accepts values in angle units. Angle units are defined by the CSS Values and Units Module Level 3. These may be deg (degrees), rad (radians), grad (gradians), or turn units. One complete rotation is equal to 360deg, 6.28rad, 400grad, or 1turn.

Rotation values that exceed one rotation (say, 540deg or 1.5turn) are rendered according to their remaindered value, unless animated or transitioned. In other words, 540deg is rendered the same as 180deg (540 degrees minus 360 degrees) and 1.5turn is rendered the same as .5turn (1.5 – 1). But a transition or animation from 0deg to 540deg or 1turn to 1.5turn will rotate the element one-and-a-half times.

2D Scaling Functions: scale, scaleX, and scaleY

With scaling functions, we can increase or decrease the rendered size of an element in the X-dimension (scaleX), Y-dimension (scaleY), or both (scale). Scaling is illustrated below, where the border illustrates the original boundaries of the box, and the + marks its center point.

A box (left) is scaled by a factor of 2 (right)

Each scale function accepts a multiplier or factor as its argument. This multiplier can be just about any positive or negative number. Percentage values aren’t supported. Positive multipliers greater than 1 increase the size of an element. For example, scale(1.5) increases the size of the element in the X and Y directions 1.5 times. Positive multipliers between 0 and 1 will reduce the size of an element.

Values less than 0 will also cause an element to scale up or down in size and create a reflection (flip) transform.

Warning: Using scale(0) will cause the element to disappear, because multiplying a number by zero results in a product of zero.

Using scale(1) creates an identity transformation, which means it’s drawn to the screen as if no scaling transformation was applied. Using scale(-1) won’t change the drawn size of an element, but the negative value will cause the element to be reflected. Even though the element doesn’t appear transformed, it still triggers a new stacking context and containing block.

It’s possible to scale the X and Y dimensions separately using the scale function. Just pass it two arguments: scale(1.5, 2). The first argument scales the X-dimension; the second scales the Y-dimension. We could, for example, reflect an object along the X-axis alone using scale(-1, 1). Passing a single argument scales both dimensions by the same factor.

2D Translation Functions: translateX, translateY, and translate

Translating an element offsets its painted position from its layout position by the specified distance. As with other transforms, translating an element doesn’t change its offsetLeft or offsetTop positions. It does, however, affect where it’s visually positioned on screen.

Each 2D translation function—translateX, translateY, and translate—accepts lengths or percentages for arguments. Length units include pixels (px), em, rem, and viewport units (vw and vh).

The translateX function changes the horizontal rendering position of an element. If an element is positioned zero pixels from the left, transform: transitionX(50px) shifts its rendered position 50 pixels to the right of its start position. Similarly, translateY changes the vertical rendering position of an element. A transform of transform: transitionY(50px) offsets the element vertically by 50 pixels.

With translate(), we can shift an element vertically and horizontally using a single function. It accepts up to two arguments: the X translation value, and the Y translation value. The figure below shows the effect of an element with a transform value of translate(120%, -50px), where the left green square is in the original position, and the right green square is translated 120% horizontally and -50px vertically from its containing element (the dashed border).

The effect of having an element with a transform value of translate(120%, -50px)

Passing a single argument to translate is the equivalent of using translateX; the Y translation value will be set to 0. Using translate() is the more concise option. Applying translate(100px, 200px) is the equivalent of translateX(100px) translateY(200px).

Positive translation values move an element to the right (for translateX) or downward (for translateY). Negative values move an element to the left (translateX) or upward (translateY).

Translations are particularly great for moving items left, right, up, or down. Updating the value of the left, right, top, and bottom properties forces the browser to recalculate layout information for the entire document. But transforms are calculated after the layout has been calculated. They affect where the elements appear on screen, but not their actual dimensions. Yes, it’s weird to think about document layout and rendering as separate concepts, but in terms of browsers, they are.

Transform Properties May Be Coming to a Browser near You

The latest version of the CSS Transforms specification adds translate, rotate, and scale properties to CSS. Transform properties work much like their corresponding transform functions, but values are space-separated instead of comma-separated. We could, for example, express transform: rotate3d(1, 1, 1, 45deg) using the rotate property: rotate: 1 1 1 45deg. Similarly, translate: 15% 10% 300px is visually the same as transform: translate3d(15%, 10%, 300px) and scale: 1.5 1.5 3 is the same as transform: scale3d(1.5, 1.5, 3). With these properties we can manage rotation, translation or scale transformations separately from other transformations.

At the time of writing, browser support for transform properties is still pretty sparse. Chrome and Samsung Internet support them out of the box. In Firefox versions 60 and later, support is hidden behind a flag; visit about: config and set layout.css.individual-transform.enabled to true.

skew, skewX, and skewY

Skew transformations shift the angles and distances between points while keeping them in the same plane. Skew transformations are also known as shear transformations, and they distort the shapes of elements, as seen below, where the dashed line represents the original bounding box of the element.

A rectangle is skewed 45 degrees along its X-dimension

The skew functions—skew, skewX, and skewY—accept most angle units as arguments. Degrees, gradians, and radians are valid angle units for the skew functions, while turn units, perhaps obviously, are not.

The skewX function shears an element in the X or horizontal direction (see teh image below). It accepts a single parameter, which again must be an angle unit. Positive values shift the element to the left, and negative values shift it towards the right.

The left image is not transformed, while the right image reveals the effect of transform: skewX(30deg)

Similarly, skewY shears an element in the Y or vertical direction. The image below shows the effect of transform: skewY(30deg). Points to the right of the origin are shifted downward with positive values. Negative values shift these points upward.

Again, the left image remains untransformed, and the right image is skewed vertically by 30 degrees

This brings us to the skew function. The skew function requires one argument, but accepts up to two. The first argument skews an element in the X direction, and the second skews it in the Y direction. If only one argument is provided, the second value is assumed to be zero, making it the equivalent of skewing in the X direction alone. In other words, skew(45deg) renders the same as skewX(45deg).

The post How to Use 2D Transformation Functions in CSS appeared first on SitePoint.


Source: Sitepoint

How to Get Started with CSS Animation

The following is a short extract from Tiffany’s upcoming book, CSS Master, 2nd Edition, which will be available shortly.

Think of CSS animation as the more sophisticated sister to CSS transitions. Animations differ from transforms in a few key ways:

  • Animations don’t degrade gracefully. If there’s no support from the browser, the user is out of luck. The alternative is to use JavaScript.
  • Animations can repeat, and repeat infinitely. Transitions are always finite.
  • Animations use keyframes, which offer the ability to create more complex and nuanced effects.
  • Animations can be paused in the middle of the play cycle.

The latest versions of all major browsers support CSS animations. Firefox versions 15 and earlier require a -moz- prefix; later version don’t. Internet Explorer versions 10 and 11 also support animations without a prefix, as do all versions of Microsoft Edge.

We can check for CSS animations support in a few ways. The first is by testing for the presence of CSSKeyframeRule as a method of the window object:

const hasAnimations = 'CSSKeyframeRule' in window;

If the browser supports the @supports rule and CSS.supports() API, we can use that instead:

const hasAnimations = CSS.supports('animation-duration: 2s');

As with transitions, we can only animate interpolatable values such as color values, lengths, and percentages.

Creating Your First Animation

We first have to define an animation using an @keyframes rule. The @keyframes rule has two purposes:

  • setting the name of our animation
  • grouping our keyframe rules

Let’s create an animation named pulse:

@keyframes pulse {

}

Our keyframes will be defined within this block. In animation, a keyframe is a point at which the action changes. With CSS animations specifically, keyframe rules are used to set property values at particular points in the animation cycle. Values that fall between the values in a keyframe rule are interpolated.

At the minimum, an animation requires two keyframes: a from keyframe, which is the starting state for our animation, and a to frame, which is its end state. Within each individual keyframe block, we can define which properties to animate:

@keyframes pulse {
    from {
        transform: scale(0.5);
        opacity: .8;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

This code will scale our object from half its size to its full size, and change the opacity from 80% to 100%.

The keyframes rule only defines an animation, though. By itself, it doesn’t make elements move. We need to apply it. Let’s also define a pulse class that we can use to add this animation to any element:

.pulse {
    animation: pulse 500ms;
}

Here, we’ve used the animation shorthand property to set the animation name and duration. In order for an animation to play, we need the name of an @keyframes rule (in this case, pulse) and a duration. Other properties are optional.

The order of properties for animation is similar to that of transition. The first value that can be parsed becomes the value of animation-duration. The second value becomes the value for animation-delay. Words that aren’t CSS-wide keywords or animation property keyword values are assumed to be @keyframe ruleset names.

As with transition, animation also accepts an animation list. The animation list is a comma-separated list of values. We could, for example, split our pulse animation into two rules—pulse and fade:

@keyframes pulse {
    from {
        transform: scale(0.5);
    }       
    to {
        transform: scale(1);
    }
}

@keyframes fade {
    from {
        opacity: .5;
    }
    to {
        opacity: 1;
    }
}

Then we could combine them as part of a single animation:

.pulse-and-fade {
    animation: pulse 500ms, fade 500ms;
}

Animation Properties

Though using the animation property is shorter, sometimes longhand properties are clearer. Longhand animation properties are listed below:

PropertyDescriptionInitial value
animation-delayHow long to wait before executing the animation0s (executes immediately)
animation-durationHow long the cycle of an animation should last0s (no animation occurs)
animation-nameThe name of an @keyframes rulenone
animation-timing-functionHow to calculate the values between the start and end statesease
animation-iteration-countHow many times to repeat the animation1
animation-directionWhether or not the animation should ever play in reversenormal (no reverse)
animation-play-stateWhether the animation is running or pausedrunning
animation-fill-modeSpecifies what property values are applied when the animation isn’t runningnone

The animation-delay and animation-duration properties function like transition-delay and transition-duration. Both accept time units as a value, either in seconds (s) or milliseconds (ms). Negative time values are valid for animation-delay, but not animation-duration.

Let’s rewrite our .pulse ruleset using longhand properties. Doing so gives us the following:

.pulse {
    animation-name: pulse;
    animation-duration: 500ms;
}

The animation-name property is fairly straightforward. Its value can be either none or the name of the @keyframes rule. Animation names have few restrictions. CSS keywords such as initial, inherit, default, and none are forbidden. Most punctuation characters won’t work, while letters, underscores, digits, and emojis (and other Unicode) characters usually will. For clarity and maintainability, it’s a good idea to give your animations descriptive names, and avoid using CSS properties or emojis as names.

To Loop or Not to Loop: The animation-iteration-count Property

If you’re following along with your own code, you’ll notice that this animation only happens once. We want our animation to repeat. For that, we’ll need the animation-iteration-count property.

The animation-iteration-count property accepts most numeric values. Whole numbers and decimal numbers are valid values. With decimal numbers, however, the animation will stop partway through the last animation cycle, ending in the to state. Negative animation-iteration-count values are treated the same as 1.

To make an animation run indefinitely, use the infinite keyword. The animation will play an infinite number of times. Of course, infinite really means until the document is unloaded, the browser window closes, the animation styles are removed, or the device shuts down. Let’s make our animation infinite:

.pulse {
    animation-name: pulse;
    animation-duration: 500ms;
    animation-iteration-count: infinite;
}

Or, using the animation shorthand property:

.pulse {
    animation: pulse 500ms infinite;
}

Playing Animations: the animation-direction Property

There’s still a problem with our animation, however. It doesn’t so much pulse as repeat our scaling-up animation. What we want is for this element to scale up and down. Enter the animation-direction property.

The post How to Get Started with CSS Animation appeared first on SitePoint.


Source: Sitepoint

CSS Architecture: Block-Element-Modifier (BEM) & Atomic CSS

The following is a short extract from Tiffany’s upcoming book, CSS Master, 2nd Edition, which will be available shortly.

We’ll now look at two methodologies for naming things in CSS. Both methods were created to improve the development process for large sites and large teams; however, they work just as well for teams of one. Whether you choose one or the other, neither, or a mix of both is up to you. The point of introducing them is to help you to think through approaches for writing your own CSS.

Block-Element-Modifier (BEM)

BEM, or Block-Element-Modifier, is a methodology, a naming system, and a suite of related tools. Created at Yandex, BEM was designed for rapid development by sizable development teams. In this section, we’ll focus on the concept and the naming system.

BEM methodology encourages designers and developers to think of a website as a collection of reusable component blocks that can be mixed and matched to create interfaces. A block is simply a section of a document, such as a header, footer, or sidebar, illustrated below. Perhaps confusingly, “block” here refers to the segments of HTML that make up a page or application.

Blocks can contain other blocks. For example, a header block might also contain logo, navigation, and search form blocks, as seen in below. A footer block might contain a site map block.

A header block that contains logo, navigation, and search blocks

More granular than a block is an element. As the BEM documentation explains:

An element is a part of a block that performs a certain function. Elements are context-dependent: they only make sense in the context of the block they belong to.

A search form block, for example, contains a text input element and a submit button element, as evident in figure_title. (To clarify, we’re using “element” in the design element sense rather than the HTML element sense.)

A search block with text input and submit button elements

A main content block, on the other hand, might have an article-list block. This article-list block might contain a series of article promo blocks. And each article promo block might contain image, excerpt, and “Read more” elements, as presented below.

A promotional block for a website article

Together, blocks and elements form the basis of the BEM naming convention. According to the rules of BEM:

  • block names must be unique within a project
  • element names must be unique within a block
  • variations of a block—say, a search box with a dark background—should add a modifier to the class name

Block names and element names are usually separated by a double underscore (.block__element). Block and element names are typically separated from modifier names by a double hyphen (for example, .block--modifier or .block__element--modifier).

Here’s what BEM looks like using a search form example:

<form class="search">
    <div class="search__wrapper">
        <label for="s" class="search__label">Search for: </label>
        <input type="text" id="s" class="search__input">
        <button type="submit" class="search__submit">Search</button>
    </div>
</form>

A variation of this form with a dark background might use the following markup:

<form class="search search--inverse">
    <div class="search__wrapper search__wrapper--inverse">
        <label for="s" class="search__label search_label--inverse">Search for: </label>
        <input type="text"  id="s" class="search__input search__input--inverse">
        <button type="submit" class="search__submit search__submit--inverse">Search</button>
    </div>
</form>

Our CSS might look like this:

.search {
    color: #333;
}
.search--inverse {
    color: #fff;
    background: #333;
}
.search__submit {
    background: #333;
    border: 0;
    color: #fff;
    height: 2rem;
    display: inline-block;
}
.search__submit--inverse {
    color: #333;
    background: #ccc;
}

In both our markup and CSS, search--inverse and search__label--inverse are additional class names. They’re not replacements for search and search__label. Class names are the only type of selector used in a BEM system. Child and descendant selectors may be used, but descendants should also be class names. Element and ID selectors are verboten. Enforcing block and element name uniqueness also prevents naming collisions, which can become a problem among teams.

There are several advantages to this approach:

The post CSS Architecture: Block-Element-Modifier (BEM) & Atomic CSS appeared first on SitePoint.


Source: Sitepoint

Variables in CSS: Custom Properties

The following is a short extract from Tiffany’s upcoming book, CSS Master, 2nd Edition, which will be available shortly.

For years, variables were one of the most commonly requested CSS features. Variables make it easier to manage colors, fonts, size, and animation values, and to ensure their consistency across a codebase.

It took years to work through the details of the syntax and decide how variables would fit into existing rules governing the cascade and inheritance. Now they’re available to developers in the form of CSS “custom properties”.

In this chapter, we’ll discuss the syntax of CSS custom properties. We’ll look at:

  • how to define properties and set default values for those properties
  • how the rules of the cascade and inheritance work with custom properties
  • how to use custom properties with media queries

By the end, you should have a good grasp of how to use custom properties in your projects.

Note: Browser support for custom variables is robust, existing in the latest versions of every major browser. Support is not, however, available in older yet recently released browser versions that may still be widely used by your site’s audience. Versions of Microsoft Edge prior to 15 and Safari prior to version 9.1 lack support entirely. The same is true for any version of Internet Explorer. Microsoft Edge 15 has support, but also has a few documented bugs.

Defining a Custom Property

To define a custom property, select a name and prefix it with two hyphens. Any alphanumeric character can be part of the name. Hyphen (-) and underscore (_) characters are also allowed. A broad range of unicode characters can be part of a custom property name, including emojis. For the sake of clarity and readability, stick to alphanumeric names.

Here’s an example:

--primarycolor: #0ad0f9ff; /* Using #rrggbbaa color notation */

The -- indicates to the CSS parser that this is a custom property. The value of the property will replace the property wherever it’s used as a variable.

Custom property names are case-sensitive. In other words, --primaryColor and --primarycolor are considered two distinct property names. That’s a departure from traditional CSS, in which property and value case doesn’t matter. It is, however, consistent with the way ECMAScript treats variables.

As with other properties, such as display or font, CSS custom properties must be defined within a declaration block. One common pattern is to define custom properties within a ruleset that uses the :root psuedo-element as a selector:

:root {
    --primarycolor: #0ad0f9ff;
}

:root is a pseudo-element that refers to the root element of the document. For HTML documents, that’s the html element. For SVG documents, it’s the svg element. By using :root, properties are immediately available throughout the document.

Using Custom Properties

To use a custom property value as a variable, we need to use the var() function. For instance, if we wanted to use our --primarycolor custom property as a background color, we’d use the following:

body {
    background-color: var(--primarycolor);
}

Our custom property’s value will become the computed value of the background-color property.

To date, custom properties can only be used as variables to set values for standard CSS properties. You can’t, for example, store a property name as a variable and then reuse it. The following CSS won’t work:

:root {
    --top-border: border-top; /* Can't set a property as custom property's value */
    var(--top-border): 10px solid #bc84d8 /* Can't use a variable as a property */
}

You also can’t store a property–value pair as a variable and reuse it. The following example is also invalid:

:root {
   --text-color: 'color: orange'; /* Invalid property value */
}
body {
  var(--text-color); /* Invalid use of a property */
}

Lastly, you also can’t concatenate a variable as part of a value string:

:root {
    --base-font-size: 10;
}
body {
    font: var(--base-font-size)px / 1.25 sans-serif; /* Invalid CSS syntax. */
}

Custom properties were designed to be used as properties that are parsed according to the CSS specification. Should the CSS Extensions specification be adopted by browser vendors, we could someday use custom properties to create custom selector groups, or custom at-rules. For now, however, we’re limited to using them as variables to set standard property values.

Setting a Fallback Value

The var() function actually accepts up to two arguments. The first argument should be a custom property name. The second argument is optional, but should be a declaration value. This declaration value functions as a kind of fallback value if the custom property value hasn’t been defined.

Let’s take the following CSS:

.btn__call-to-action {
    background: var(--accent-color, salmon);
}

If --accent-color is defined—let’s say its value is #f30—then the fill color for any path with a .btn__call-to-action class attribute will have a red-orange fill. If it’s not defined, the fill will be salmon.

Declaration values can also be nested. In other words, you can use a variable as the fallback value for the var function:

The post Variables in CSS: Custom Properties appeared first on SitePoint.


Source: Sitepoint

Introduction To Animation And The iMessage App Store With Shruggie

Introduction To Animation And The iMessage App Store With Shruggie

Introduction To Animation And The iMessage App Store With Shruggie

Simon Schmid

2018-09-10T14:45:42+02:00
2018-09-10T12:59:46+00:00

When the App Store for iMessage in late 2016 went live, I released Kaomotion, a sticker app with animated kaomoji inside. Ever since the release of this app, I wanted to write up a tutorial about how a simple text character like shruggie (i.e. ¯_(ツ)_/¯) can be animated to give it life-like features:

Shruggie animated
The Shruggie animation we’re going to make. (Large preview)

What you are going to read in this article is a step-by-step guide of setting up a canvas in After Effects and then going through with the animation. You’ll also read about how well the app containing more than 30 animated stickers worked and what some of the specific issues are you might be having on the App Store for iMessage:

  1. Canvas Setup
  2. Working With A (Text) Layer
  3. Working With Rulers
  4. Understanding The Puppet Pin Tool
  5. Animation And Timeline
  6. Further Reading And Tools
  7. Bonus Reading: Life On The App Store For iMessage

Without further ado, let’s jump right in.

1. Canvas Setup

We’re starting with setting up a new composition ( + N) within After Effects with the following settings:

  • 1000px × 1000px;
  • a frame rate of 30 frames per second;
  • a quarter on resolution;
  • a run time of 2 seconds.

This is going to be the basic canvas we’re going to work with during the animation. We’re choosing a square since that is what you have to deal with within iMessage and Apple’s sticker implementation.

After Effects canvas set up
After Effects canvas set up. (Large preview)

2. Working With A (Text) Layer

Since kaomoji are simple text-based emoticons we’re going to copy-paste a a Shruggie “¯_(ツ)_/¯” from the first source we can find being Jeremy Burge’s Emojipedia via Google.

After having found it on Emojipedia we’re pasting it as a text layer into After Effects. It’s time to utilise the text tool.

The Text Tool

Copy + T in with + V:

After Effects text layer
Using the text layer. (Large preview)

The Shruggie inside your canvas might not look exactly the way you’ve found him on Google, or on Emojipedia for that matter, that’s because of differences in font types. We’ve chosen a font that makes Shruggie look decent and made him stretch across the canvas to prepare him for his facelift: double-click on the Source Name to select all characters.

The Character Menu

Double click Name Source and then get the font type in your Character menu.

After Effects character menu
The character menu. (Large preview)

Scaling A Layer

Select Layer, then S + Scale (by sliding right for example).

To position the layer properly, we’re scaling it up to fill the canvas by selecting the layer by pressing S, then Scale and then finally moving the scale until it fits.

After Effects scale a layer
Scaling a layer. (Large preview)

To further explore some smaller tweaks let’s look into making our Shruggie a little more connected. For that we’re looking into some kerning and height options. To adjust the gap between Shruggie’s arm and hand, we’ll use the kerning tool (V/A) either manually in the menu or with another keyboard shortcut:

Kerning

Select Space + ALT + ← →. When we’re happy with the kerning gaps, we’ll adjust the height of the arms and make it look like the arms are actually connected. To join up the slashes with the underscore we’re going to play around with increasing the height of the slash/vertical scale, moving it vertically and potentially adjusting the baseline. In our case we’ve increased the height of the slash character to 120% and then adjusted vertically:

After Effects text kerning
Text kerning in action. (Large preview)

Moving Vertically

Make selection + ALT + SHIFT + ↑ ↓

After Effects move selection vertically
Move selection vertically. (Large preview)

If you repeat the steps above on the other side we’ll by now have a pretty looking Shruggie, but what’s that, we don’t like how it aligns at all, do we?

After Effects align
Unaligned Shruggy, can we fix it? (Large preview)

Let’s further align this sorry looking Shruggie.

That’s what rulers are for.

3. Working With Rulers

To conjure up rulers we’re going to use another keyboard shortcut:

Display Rulers

+ R

This gives you the ruler view, from which you can practically drag rulers as visual cues into your canvas.

After Effects set up rulers
Setting up rulers. (Large preview)

The next steps are a repetition of what we’ve done before: we’re selecting the middle part and moving it down vertically to align with Shruggie’s arms, shoulders, and hands. It looks pretty good, but let’s double-check on that first impression by zooming in!

Zoom in

You can zoom in by pressing + +, and also by pressing on the , + . keys. In our case, we found we need to change it to properly align Shruggie’s face with his arms, which is another repetition of the above resizing and realigning skills.

Guess what? We’re now ready to animate! 🎊🎉🎈🚀🚀🚀🚀

After Effects zoom
Zooming into Shruggie. (Large preview)

4. Understanding The Puppet Pin Tool

In order to animate our base Shruggie, we’re going to use the Puppet Pin Tool. Essentially it lets us work on any vector elements within After Effects, which includes our text assets. Let’s start:

The Puppet Pin Tool

Now what we’ll want to do is put pins where we want the joints to be: hands, elbows, shoulders, and so on. Press on + P to do the trick:

After Effects puppet pinning
Puppet pinning. (Large preview)

Keep adding joints until we have him fully pinned up and gotten a fully functional human torso:

After Effects pins
Finalized pins view. (Large preview)

When you get a yellow highlight, that means that everything has been well done and After Effects recognizes the element as a vector and therefore you can place your pins. One thing that’s worth looking out for is to make sure that your pins/keyframes are at time 0 in your timeline at this stage:

After Effects timeline
After Effects timeline. (Large preview)

5. Animation And Timeline

The key to doing this effectively is to start with your main poses. We’re going to start with our start and end poses in place. We can do that by copying the keyframes that have been set up by our puppet pins in the beginning to our end state. The reason for this is simple: this is the start and our default pose, that’s the pose we want to return to in order to get a coherent animation.

Set Up Start And End Point

Select the layout and press U, then copy-paste to the end state.

After Effects copy keyframes
Copying keyframes from start state and end state. (Large preview)

As you can see it in in the gif above selecting the layout and pressing U returns every property of a layer that has keyframes as little diamonds. These little 💠 now also constitute your end state.

Setting the Middle Stage

In order to have a stage that we want to animate to and from, we’ll put that right in the middle:

After Effects select timeline
Select the timeline in the middle (1 sec in our example). (Large preview)

Now that we’re in the middle of our animation we’re going to make changes to our default state in such a way that we want to constitute our middle state:

This means we’re going to raise the shoulder puppet pin, get the elbow and arms a little closer to your body and give the hand a proper “shrug” movement. This will automatically create those keyframes at that point in time, which will then animate our two default stages between each other.

Here’s the demonstration of the animation we get when we manually move the timeline with our cursor:

After Effects time ruler
Shoulders on the time ruler. (Large preview)

We’re following the exact same process for the right part of Shruggie’s shoulder and then add a bit of movement to Shruggies face which gives him a distinct look smirking over his shoulders and giving us the impression of: “Meh, you know, nothing to do about that”.

Space Bar To Play

Select layer + Space. When you hit the Space key you can get a first impression of our animation:

After Effects animation test
First animation test. (Large preview)

What you’ll notice immediately is that the character seems to miss character. That is mostly due to the fact that our animation plays at the same speed for the entire two seconds. That is the hallmark of mostly dodgy animation — you’ll want it to not just evenly move between two points.

The easiest way to fix it up and give Shruggie a bit more realism, believability is to use a technique called ease-in and ease-out (or cushioning or a number of other ways). It’s basically speeding up the animation and then speeding it down again before reaching the end of the animation timeline.

It’s a cheap way of breathing some more life into our Shruggie. To do that we’re using a great little After Effects plugin called Ease and wiz that lets us apply some easing without much work:

Select all keyframes and then apply Ease and wizz with the options most suitable for your animation.

After Effects ease and wizz
Applying Ease and wizz and some options. (Large preview)

In our case we’ve chosen to go with the following settings:

  • Easing: Quart
  • Type: In and Out
  • Keys: All
  • Curvaceous: no

If we now run our animation again with the space bar, you’ll notice you’ll get something very close to the animation embedded at the beginning of this post. This means that we’re done, and we can be very proud of our work.

6. Further Reading About The Motion Basics

The tutorial you’ve just read introduces only the very basics of animation by way of making Shruggie move. In order to progress in animation, you’ll need to dig in further into the basics of motion. Further reading on some of those basics will help you improve further.

Below you’ll find an article describing the basics of motion and then some that relate to motion/animation with UX and software to come back full circle on the web:

7. Bonus Reading: Life On The App Store For iMessage

The above tactics were applied to a whole bunch of kaomoji for the already mentioned as stated in the introduction.

I’ve launched the sticker app to some early support on Product Hunt, however, the app itself failed to be picked up by Apple or any audience on the App Store at large. I’d like to point out two realities on the App Store that anyone trying to make a sticker app needs to face:

  • Competition by big brands;
  • The wrath of users who don’t get the concept of stickers.

Problem: Prevalence Of Brands

If you want a shot at being consistently in the top 50 of the top paid iMessage stickers, then it helps to be a big brand or a notoriously known character. I’m not going to attach much meaning to this, just state it as a fact and provide the evidence below of screenshots collected in April 2018 (when I first wrote the draft on this article) on the Swiss App Store for iMessage.

Of the top 40 (that’s the top paid category), around 18 are likely to be well known characters turning that fact into downloads:


iMessage Store top paid sticker apps
Top paid sticker apps. (Large preview)
Top Paid Sticker Apps

The subtitle of this section is somewhat provocatively chosen, as there is no intrinsic problem with this as these characters are uniquely suited for stickers, though it’s an issue as this is just what you’re up against. Of course, the economic reality also shows around curation:


iMessage Store sticker app curation
Sticker app curation. (Large preview)

The left shows a screenshot of the first batch of curated stickers (66% big brand) in April of 2018, the right shows a screenshot of late August of 2018, where I encountered the exact same setup.

Again, this is not to pass judgment at Apple as I think they’ve become much better at curation in the App Store in general. As a summary of this situation, I think it is fair to say that other sticker ecosystems such as LINE’s have allowed more creativity to flourish and that the sticker ecosystem on the App Store is hard to advance into successfully.

Users still don’t get (or do not want?) stickers and the next point is a testament to this:

Problem: Facing The Wrath Of Users

The most annoying problem with the App Store for iMessage is still the fact that users do not know how to use them (i.e. stickers). That results in an abundance of one-star reviews.

In the case of Korea, Kaomotion got 80 one-star reviews in a matter of a few days by users complaining about the app not being there on their phone.


App Store negative review
“아니 삭제하는갓두 업네요..삭제좀요 사용하는 법도 모르겟어요” translates to “I don’t know how to use it.” (Large preview)

This can then look like the next screenshot fast, and Apple doesn’t seem to care to help clean out the mess, even after trying to address the users in Korean:


App Store 1 star reviews
What an abundance of 1 star reviews in Korean looks like. (Large preview)

They’re essentially all saying the same: “The App isn’t on our phone.” Any one-star reviews are essentially also going to stay forever as no-one seems to care about what you have to say.

Solutions to the discoverability problem of stickers in the interface

I’m not the first one or the only one to write about this problem, however I’d like to offer some possible remedies below.

18 months after the introduction of the App Store for iMessage users still don’t know how to send and receive stickers (though I must say that Apple tried to stitch the interface up within iMessage).

In this regard, you can only try to fix these problems by attacking the problem head-on and giving as much information as possible to users.

  • Writing guides on the App Store page
    Use the (text) screen real estate Apple gives you to write a step to step guide about how stickers are sent.
  • Writing more in-depth guides elsewhere
    Do a blog post or something similar about the same topic with screenshots, gifs, or a video (I’ve made one here for Kaomotion).
  • Use a screenshot or app preview
    Finally, you may want to be explicit even on your screenshots about how your app is used. Even Wonder Woman seems to have been experiencing the same problem and used a screenshot to offer remedy:

Wonder Woman stickers
Wonder Woman: “How to send stickers”. (Large preview)

You will likely still get users complaining, this way you’ll have an easy way to describe to them what needs to be done in order to use your stickers.

Were I to go back to the launch of the sticker store, I probably wouldn’t go through the hardship of creating Kaomotion once again, however, I’m glad I got to write about animation basics for After Effects!

I hope this tutorial gave you an interesting glimpse at both After Effects and the iMessage App Store. If you’re into this, you might want to go hang out at this new animation community called Keyframes.

ᕕ( ᐛ )ᕗ

Smashing Editorial
(ra, yk, il)


Source: Smashing Magazine