Categories
Online Marketing

UI Elements at 60fps (Progressive Web App Summit 2016)

I kind of wanted to put that into a little bit of context when we talked about performance historically on our team. Last year year and a half we’ve talked about a thing called rail and rail stands for response, animation, idle and load, and it’s a way of thinking about performance that puts the user in the middle and lets us figure out what they expect from things.

So, for example, if you tap on a screen, you expect something to be coming back on screen in under a tenth of a second. If you scroll or there’s a transition, that’s an animation, and we want that at 60 frames. A second idle is a bit of a funny one, but the general idea is that you should do work when the user isn’t interacting and when there’s opportunity to do so when the main thread has some time and we do those in 50 millisecond chunks.

So we can keep responding to users and loading. You want to keep the user on their train of thought, and so you’ve got about a second to get something up on screen, whether that’s from a cache for the network. Now, when we talk about rail, this is the kind of world view. Then I think many of us have today we kind of go yeah responses. Ok, yeah! We don’t need to be lucky, that’s fair enough! It’s kind of important scrolling animation.

It definitely heard that’s a thing and that’s something I want to make sure is good idle. Yeah sure seems good load load, yes, whoo back in the safe, ok load, yeah man, if I can catenate all that good stuff, but here’s the thing this is kind of where we’re thinking of being on people’s home screens and a closer look at that home screen Raises an interesting question which of these is the progressive one up which of these is the native web app? The truth is users don’t care what they care about.

Is that the thing that they tap on works really well and they would never say something: oh wow. It skipped things there you go back would go rewind, okay, nobody ever going to say this, and if they did, it was something ice. That up looks like native. I hope it behaves like it. There you go, they expect it to behave like a native app. They expect your stuff to run. Well, I want to say, behaves there, we go hello behaves for me is like performance, and it’s about.

Does it behave as we expect? Is it do the things that you know and interact with it? Just do the right things right, since that’s the case, I think we can reevaluate rail to look more like back bad clicker more like this, the response part of rail. Well, we expect our responses to be instant like every time instant. So that’s just now more important. Animations yep they’re down there and there we go they’re going up there, because we expect again, we expect instant transitions.

We expect you know scrolling to be super smooth idle. Well now, if we’re doing more work, to make responses and animations good idle is something we’re going to have to be more tactical about we’re going to have to do some work when the user isn’t, and we have things like requests idle callback for that, so idle. Just went up good news, though I think, if you’re expecting somebody to add you to home screen and run your stuff lots of times.

Hopefully, you’re going to have a serviceworker, hopefully you’re, going to be running from a cache and therefore I think load drops down to here. I don’t think it’s unimportant. Don’t get me wrong. You still got to do a good job to get that first load there, but I think over time I think that’s what we’re talking about so, if you’re being home screen minded. I think it looks more like this and I think, if you think about the the native apps, that you run, you have a similar expectation.

You don’t ever sit there thinking about well, this APK took a long time. You know when you’re using it for the 50th time you’re thinking more about how this actually behaves, whether it’s got the features you want and so on. So with that in mind, I wanted to talk about three individual components, but they give me an excuse to talk about about a bunch of other things and I can explain, I suppose, the way I categorize my components from deterministic.

We know up front. We can hard code the values, those animations and interactions through something that’s a little bit less known upfront all the way through to something where we’ve got no idea about how it’s going to behave until somebody actually clicks on the thing, or we have a little bit Of an idea, but not much so those three components are a side, nav some swipeable cards and then expand and collapse view, let’s jump straight into the side navigation, which I think most of us I’ve seen before seen these you ever seen these quite a lot.

So what, although, for each one of these I’ll, explain the theory of how I would approach them to maintain performance and to kind of be performance minded? I will be leaving probably some glaring omissions in the area of accessibility, but just as well Bob Dodds coming on next and he’s going to talk about accessibility. Oh it all fits together wonderfully anyway, the theory for the side nav. What we’re going to do is we’re going to pop on a containing element over the top of all our content, into which we can place a semi-transparent black, a background to obscure our content and then we’re going to have this contents bit with our actual side.

Nav. In it, which will slide in from the side like so so, the CSS for something like that for that containing element, it’s going to be positioned, fixed left:0, top:0 width and height 1 %. Some people like to do write 0 bottom 0. That’s fine works just as well overflow, hidden because we don’t want any scroll bars, but the pointer events. One is a bit of an interesting side step that I want to take it lets me talk about something that’s kind of like a primed element, so these are elements where you you want that thing to be ready to go, and the sign now is one of Those because, when a user taps on the button, they expect the side nav to just come throughout right.

So the general idea behind a primed element for me is that it’s something that could be activated at any time: okay, like a side, nav yeah, it probably fits that bill and if you were to toggle its visibility, it would take more than 100 milliseconds, as in Because they’re, probably at a tap a button and you ray’ll, tells you you’ve got 100 milliseconds to respond if you take longer than that, it’s going to feel lucky.

So these are my sort of two criteria. As I say, I’m leaving a glaring omission where’s. The regards accessibility so hold on to your hats for that bit coming next, but all the same we have around on. I think this is a primed element. I think it fits and as such we can take a couple of shortcuts, one of which is we’re going to promote the content bit to its own layer and, if you’re not familiar with layer promotion.

The idea is, you want to separate out an element from the rest of the page so that when you paint it or move it around, you don’t affect any other element on the page. It’s the same kind of deal. Is you know if you are not packaged whatever you create a layer and you can mess with the pixels in it and you don’t mess with anything else now? The easiest way to do that today, to create one of these layers called a compositor layer, is to use, will change transform.

So if you imagine the simplest possible page with a photo of bald idiot and a nice guy – and you put will change onto said image now, you can move it around with a transform and you can see that it’s kind of separate from the page. Obviously, this isn’t happening in real time, but it’s it’s the idea of separating these things out now you may be sitting there thinking that seems like a great idea star.

Will change transform burn that from your mind? Okay, if I’m not clear, don’t do it! The reason you don’t wan na do it is twofold. Firstly, you’ll want to keep your memory usage down, especially on a mobile device. If you create layers you’re going to use memory, you’re going to have management you’re going to have textures on the GPU all that kind of stuff, so you want to do this as needed now with the primed element, I’m going to make the argument that you probably Want to do something like the will change in your CSS, but in other cases, where it’s not known until you start interacting, you probably do the will change in your JavaScript.

The other reason is you want to keep your time in compositing to a minimum. Compositing is where we take all those layers and we squish it back together and put the pixels up on screen now, of course, if you made lots of layers, that’s a lot of depth, sorting, it’s a lot of management, and it’s a lot of putting back together That takes time, so you want to be tactical about this, so we’ve got our promoted layer and, as you can see in the CSS I’m going to put will change transform on it like so and then come back, then yeah I’m going to transform the contents off To the left, by a oddly specific 102 percent and if you’re curious about that is because I’ve got a shadow, and I just do an extra couple of percent to hide it, cheating, but that’s programming.

You know it’s just cheating right sometimes and I’m a cheat when it comes to programming, I’m very, very, not otherwise, especially not when playing little games with my kids, I’m very fair, never cheap anyway. Eventually, the user is going to tap on a button and that’s going to show the side nav, which in this case is just going to add a class in that class, is going to remove that 102 percent fairly straightforward.

And we get something like this, where it slides in from the side that semi-transparent black black background is the same kind of deal here. We’re going to do a will change of opacity from an opacity value of 0 to an opacity value of 1 and getting rid of it like so it’s just going to be the same in Reverse, we’re just going to remove that class. Everything goes back. It’s great and we could just do that, but it’s like hide side nav, which I put on the containing element.

So if you click anywhere, I’m going to hide the side nav, which is a bit bad, if you actually click on something in the side nav. So the way to get around, that is, to just add an extra handler for that particular situation, which cancels the click which is just a stopped propagation, so I’m kind of canceling the click and it works out really well, in fact so well, this is what it Looks like in reality, this is one that Surma and I built.

This is actually running on a nexus 5x and you can see you know slide out slide in. I actually added a bit of drag thing to it, which you can see if you want to afterwards. When you take a profile of this in the dev tools timeline, which is kind of what you want to be doing with all your UI elements, I have the side nav sliding in and sliding out, which doesn’t look very big. So, let’s zoom in you can see that green chunk is the frames per second and we’re hitting a nice comfy 60 frames a second on our Nexus 5x and below.

It is the amount of work frame which is pretty low because we’re not doing much we’re just using transform changes if you’re interested in seeing that actually being built for real there’s the TL DW and is also a live stream, which was about an hour long with Me and Surma, where we built the side, nav books and everything it was great, but you can catch that if you, if you haven’t seen it so, let’s move on since we’ve done the essentially done the fully deterministic hundred and two percent, nothing.

We can move on to this swipeable card, which is a little more interactive, a little more dynamic. So that’s this one you’ve seen it probably some that Google, now you know just ours and it slides up to take its place. The theory here is again. We want to promote to a layer for the thing that’s being interacted with, but we want to do that on demand. We don’t want to do this one ahead of time, because if you had a lot of cards, that’s a lot of layers and a lot of memory usage, not a good idea.

We also want to use transform and opacity as well, because we’re going to transform this thing off to the side and from a kind of behavioral point of view. If we want it to fade out, because that gives the idea of being dismissed, it’s it kind of something the user would expect now. At this point, I want to take a little bit of a detour and talk about kind of game loopy stuff, which is something that any game developer would be like yeah and it’s extremely useful in this situation.

What we want to do in these kind of cases is decouple our input, which can happen fairly, sporadically and whatever, from the actual rendering and drawing you bit. We should expect from a game because your character stood there. You don’t want to you know you want the kind of game to keep moving, even when you’re not moving the character right same kind of thing. We want this animation to keep going, even when we’re not actually doing touch.

Events, for example, and the way we do that is, we call requestanimationframe for every frame of the interaction and we’ll give it our update function, which you know the nice side effect, gives us a function that we can just call to be like just draw it. Even when there’s nothing else going on now, we’ve got a touch move at the start of the frame. Well, that’s, okay, we’ll just use it will distort its value and we’ll pick it up in the requestanimationframe.

If it comes in a little bit late or it doesn’t come in at all no big deal, we’ll just use the last known good value. If, by some weird weird chance, we actually got two or more well again we’re not doing work per input event we’re the only going to do it once per frame and we’re just going to use the last known good value, that’s good. So this is a model that you probably want to adopt. If you haven’t already for this kind of work now we get to the actually to adding the event listeners and fair enough, I’m going to share them between Mouse and touch.

I think pointer events might help a little bit here, but you know I’ve got this so touchstart touchmove touchend, so on and as a side note, the adding of these touch handlers to the document is bad. Generally speaking and the reason it’s bad is this: really? You have on the compositor thread, which gets the user touch. It’s the one that actually is told about the interaction first and by default. It would do something like scrolling.

It would just move the page up and down, but we registered a touch move, and that involves the main thread and if the main thread was busy or our touch move, just ran for a long time. For some reason, then, eventually to come back and the frame will be shipped, but in between that we’ve blocked the user oops. So that’s not as good, and there is a way around this it’s new as of I believe, chrome, 51 and it’s in opera and Firefox.

It’s in development, according to Chrome status, same with WebKit, but this is encyclopedia large, obviously, and I’m not sure about age. I can check with the folks on that team. However, what we do is we add this passive, true to the event listener. One that says is, I won’t call prevent default, I’m not going to do it. So don’t worry about waiting on me in order to do the thing you’re going to do still give me the events and give me the information, but I’m not going to prevent default.

Okay and then the browser goes cool. I won’t block then I’ll just get on with it. That’s great. So, anyway, back to where we were. We have our event listeners and we talked about what they are going to do. For example, we have this card, it’s in the start exposition. So what we’ll do is tapped on it we’ll go to our on start, which is going to basically ask for the position which lie to be paychecks or the first touch.

Events, page X and then we’ll add, will change on it dynamically, which will give us a bit of a hit because we have to create the layer and everything. But it’s probably going to be. Ok. Probably now you actually move your finger across and we have to category in what’s the new position, which is fairly straightforward, it’s the same kind of deal. We just tracked the page X or the first touch events page X and since we know where we were and where we are, we can figure out what the translation should be, such that in our update function.

We can say if you’re dragging the card, your translation is the current minus the start and what we will do is we will apply a transform with that value. Great stuff, that’s going to work, we’re going to be able to slide across. We can change the opacity and the same in the same kind of way, but we now need to think about the next part, which is I’m kind of dismissing the card right or I don’t go far enough and it comes back to the middle so kind of This is the behavioral bit, so if we consider a normalized distance, so it’s at 0.

If it was out to the side, we could say that’s position 1 or back in the other way. That’s also position 1. All we can do is we can come to throat. These thresholds, I put them in 0.35, when I was doing this, you could pick naught point 3, 6 or something else entirely. It’s very exciting. What will I choose today? Who knows that’s web dev, so I put an all point three five and if you don’t know, Pratt’s, not point three, five, I’m going to slide back to the middle.

If you do go past, not point three, five, I’m going to dismiss the card fair enough. Okay, so that’s in the the on end, like so oh yeah, threshold card width times by not 0.35, and it’s is this – is this target x value which we’re going to come on to in a moment it’s defaulting to zero? If you go past the threshold, we’re going to choose, either the card width or card with, depending on which direction you were going okay, and we can pick that up in the the else here, where we say translate x, plus equals target X minus translate X, all Over four and if you’ve been around for a while – and it done this kind of work – you probably recognize this if you haven’t very exciting little one-liner, that is incredibly helpful when you want to do what I call the easiest easing in the world or easy inning Easy takes always takes this form.

Okay, it’s value plus equals target value all over strength, and I genuinely have made other developers like memorize that, because it’s incredibly helpful, let me show you what I mean worked. Example. Let’s say you want to get this box from zero to a hundred and you basically target value. So it’s 100 zero all over strength, which is four we’ll move. It 25 pixels cool on the next iteration. It’s a hundred minus 25, which is 75 all over the strength, which is four, that’s 18 point, seven five and, as you build it up, you’re going to see that it’s going to slow down because there’s a nice kind of slowdown easing feel for this, so that Your box would go mmm sound effects, not included okay.

So that’s this one line, but it’s an incredibly helpful line. It’s either than that users back to zero, which can ease us to the card dismissal point now we need to detect doneness. There’s no better word for what we’re doing here. Is this animation done? Can I say that we’re finished with this? Okay? The way we do that is well, it’s either you go there and back to the middle, fair enough, in which case we can just say.

Are you nearly at the start? If so, yeah you’re probably done I’ll work that’ll get us most of the way there. If you are just reset the target allow the user to interact again. Other one is basically, you slide. You’ve done the slide out to the side like so, and we also know that we’re going to fade out the card. So I mean this is pretty cheeky, but we can just ask: is the opacity really really low if it is it’s nearly invisible? If it’s nearly invisible, it’s going, it’s going going gone and, in fact gone so much that we’re going to remove it from the Dom with remove child like so now that will cause all the other cards to jump up immediately, because the Dom yeah we took our Element until the other ones went full cool, there’s some space, let’s take it, which we don’t want.

We want them to animate. We have this function. That says, is what there’s and it looks like this. You know that kind of slide up there. You go. That’s the thing you want, so what we do is in our animator the cards into position. What we’re going to do is we’re just going to ask for the current card and we’re going to step through all the remaining ones like so and we’re just going to. Basically, push them down straight down by a cards height, so you go back down to where you were.

Please just ignore the fact that we just removed a card. You stay where you are, and then what we’re going to do is we’re going to wait a frame for that to take hold because styles will run after the end of our JavaScript cool and then what we’ll do is we’ll switch on a transition on transforms and We’ll get rid of it and that’ll cause all the cars to go and that’ll look great cool, and then, when we’re done, we can reset the target and in reality this is what it looks like.

This is another one that server and I built again. It took an hour there were bugs weird, so you go slide swipe it’s great. If you have two timeline and you were to take a recording of that again zoom in and it’s actually in two parts, this one the left-hand bit is the car dismiss. What are you doing slides? Don’t do that to me. I maybe it’s me and Jake. Maybe maybe we just there’s something bad going on, I’m blaming Jake.

It was all fine until Jake came on stage and everything broke for him. Interesting coincidence. Yes, so the car dismissal. That’s right there and then there’s the other bit here, which is sliding the card and you see, there’s a little dip at the start and that’s because that layer, promotion of there’s a bit of layer promotion, but the kind of setting up of those card animations did Cost us a little bit so, if you’re interested in nine, you want to see that one built.

What are you doing seriously? Okay, if you want to see that one built there’s a TL DW, there’s an hour-long livestream that you can catch of that one as well. So I football cards right. We can move on areas, I’m just going to stand around here. Okay, the exponent collapse is the final one and it’s the one. That is the kind of fully dynamic one, because you could pick any of those cards. They could be anywhere on screen and okay, in this case, in the mobile case, they might do a full screen takeover, but they might not.

They might just expand a little bit or something like that. We don’t really know ahead of time. We can’t hard-code those values and if we try it’s going to be pretty horrible, so how do we handle this situation? Well, the theory for this one is going to be a little more involved, but that’s fun. When I get something like this from a designer or I do it myself, I kind of read it over and over and over again it’s a thrilling few minutes.

But it’s a useful few minutes because it’ll as you kind of read something over and over again, your brain starts to notice the patterns and the patterns here are in this case. I think that thing is, is getting bigger and it’s moving. Yes, there’s the pink head a bit, that’s fading in, but predominately this is about a movement, it’s getting wider and taller and it’s moving and therefore I would normally go wow that feels like a width, height left in top moment.

Great, that’s probably what I would animate, except that that would be bad and the reason it would be bad is that in every browser you would trigger layout with a purple chunk at the top. There paint and composite layout is basically where the browser says. Where is every element? It’s basically a geometric process. Where is the remote element? Every element, what is its size and so on paint is where we fill in pixels and compositing is where we put the page back together all those layers.

Now, if you’ve got to do that for every single frame, when you might have a reasonable size that Dom you’re in trouble, you don’t want to be able to do under have to do this work on every single frame. Chances of getting 60 frames. A second slim to none – you may have noticed that I use transforms an awful lot and the reason it is their profile is different for an element. That’s got its own compositor layer.

Changing a transform is not going to trigger layout and it’s not going to trigger paint. It should only trigger compositing, which is something that we can probably get done comfortably at 60 frames a second, so this then changes the question to look like this. Can we do that effect with transforms? Can we remap this slow-mo? Can we do that with a transform? Well to me that looks like a scale and it looks like a translation cool.

My approach is called flip all right, so that’s the first last invert and play because there aren’t enough acronyms okay, so I’m adding another one cool, but it’s an extremely useful way to think about the animation. What we want to do is we want to essentially ask the question at room type. Where is the element that I’m interacting with so we record its first position on screen and we do that with something like get bounding, client rect, which is fun to say and has been around since ie for lint.

And it will tell you in relation to the viewport, where this element is its left, its height, its top its right, its bottom, all the stuff that we need to know know what we can do is we can actually snap the element in question out to its Final position, I’m doing this for the class. We could have manipulate the Styles. You could do whatever you need to do so now our card is going to be in its last position like so, and we can call get bounding, client rect a second time.

So now we know where you were now now. We know where you’re going to be that’s cool. That means we can start to kind of figure out our transforms that we might need dynamically. Now there is a word of warning here. Going from first to last is going to trigger styles and layout and the reason it’s going to trigger styles and layout is because the second gets bounding, client rect came after some style mutation.

We said: here’s a new class for you or here’s, some style changes, and then we asked for how wide and how high and where are you on screen and the browser goes. I don’t know you just moved everything hang on. Let me go and figure it out and I’ll come back with an answer and that’s exactly what happens. So you got to bear in mind that there’s the from this first class, I mean you might be sitting there going hang on a minute.

I’r sure you said trigger in layout was bad and I did, but the key is here: we’re not going to do it on every single frame. There are two things we need to bear in mind, one we’re going to do it once at the start, as a set up cost. Secondly, we have rail, which is going to be our friend here, bear in mind the user tapped on a card to get the animation. Therefore, in rail terms there here, we have a tenth of a second in which to respond.

We have a tenth of a second in which we can do some work and believe me, a tenth of a second is actually quite a long time, especially when it comes to this kind of work. It’s great. We should use it and we do so. When it comes to rail and flip, you can typically afford to do a single styles and layout. Pass then seriously one, but that’s cool. That’s often enough and in terms of flip, that’s a good set up time.

You’ll still need it to complete in less than 100 milliseconds, so you kind of have to be aware of how big the DOM is and if you’re able to use something like CSS containment to limit the scope of layout and paint. You should definitely do that and that’s really useful. However, we knew where we work. That was first, we know where we are that’s last and now we can transform. What we’ll do is we’ll just basically apply an inverse transform to take us back to here.

We can do that so first left, you know blah blah blah. Do that with a scale, apply a transform that uses those values. So at this point, we’ve done first last an invert – and it’s like this. So if I was the top on the card Ready, Steady, Go there, you go from the users point of view. Nothing happened. What’s really happening. Is this going first last and then we’re inverting and it feels like a lot of setup cost and it kind of is, but it gives us a huge advantage, because what we can do now is switch on transition on transforms and remove that transform and our card Will just go, we didn’t know where it was bit the stuff.

We didn’t hard code it we just said: where are you going? Where are you now I’ll figure out the transform and I’ll apply it for you, we’ve just most a remaps, something there was width, height, left and top, which wouldn’t have run at 60 frames. A second do something that definitely will hopefully all being well caveat. So because there’s always those if you’ve got some scale changes that are being applied.

They something like text, let’s say, you’re, doing something flipped like when you got something with text inside that might get squashed or stretched. So you might need to move the content to a sibling element so that it’s not affected and then just have faded in or something like that, but a sleight-of-hand. You might need to do that bit of gymnastics, but it’s well worth it like. I said the first to last does involve forcing Styles and layout, so you have to be careful with that, but this is what it looks like in reality there.

This is a little kind of expanded collapse, e-card thing, which you know that’s running on our Nexus 5x, and this screen doesn’t make a look at like it’s. 60 frames a second, but it is, and I can prove it because I’ve got timelines that show it and you can see it I’ll show you it’s great. It’s also responsive design friendly, like I said, we’re going to ask at room time what the first position is and what the last position is.

We don’t we don’t hard-code those values, which means the same animation on desktop, looks like this different position: different sizes, but still the same stuff, and this is what it looks like in timeline – will zoom in again to the top bit, and you see the dip at The start – and you see, there’s a red markers – that’s they’ve tools telling you your frames per second dipped below the comfortable point of 60, but we know that that was the setup of flipped.

That was the first lesson invert, which, on a nexus 5x on this case, was about 40 milliseconds. After that that is a steady, 60 frames, a second afterwards tremendous cool. I get to call this one a day in a moment. Some closing thoughts. You’ve noticed probably that I use will change, and I would suggest that you start doing that. If you haven’t already for elements that you intend to animate, you need to decide.

Is this thing primed? If so, I’m going to probably put the will change into my CSS. If not, I need to do it on demand, probably via JavaScript, but you want to use it sparingly, don’t go overboard. Transform and opacity are your best friends. When it comes to UI elements, running performant ly. I hope in the future to be able to say that you can get away with a lot more and actually we are heading for that world with things like Jeep, GPU, rasterization, CSS containment, lots of really good things that might help us limit the work, and I Mean that we can do more, but for today for the cross browser story, I would suggest that you stick here.

If you find yourself in the kind of dynamic and then something like flip, where you can remap expensive properties calculate your transforms at runtime is very useful. Now follow that’s news to you and you’ve never come across like layout, recalc style or anything here are some links, inbound phones out, don’t worry, you can get the slides afterwards as well. Other phones went down, don’t care anymore.

There’s the Google web fundamentals render performance section complete with Udacity course, which will take you through the same kind of content, very useful to get up to speed. Secondarily, if you want the source code for those elements, I showed you can get that at the supercharge. Do I wish to take you to the github repo? If you want to see me and Surma, where sermo basically spends an hour interrupting me and I try and code it’s like real life.

There are bugs as well. It’s just it’s every time. I don’t when it’s scary, but brilliant and there’s a TL DW, which is like five minutes. If you ever got that on that time right, I need to shut up and move on, but before I do, I just want to say this again. We are hopefully going to be here. This is the first time we’ve been invited to people’s home screens. That is incredibly exciting, but it’s also a huge responsibility.

We need to act like we deserve to be there, and that means taking a user interface work super seriously. The web is ready for us to do that. We can do that today with the tech. I’ve shown that you can. I hope that you go and give it a try, and with that I’ll say, thank you very much. You


 

Categories
Online Marketing

DrupalCon Amsterdam 2019: Quick wins for an accessible website

I don’t need one. I don’t target blind users. Does it sound familiar to you? Yes, yes, what about a responsive website? Now I don’t need one. I don’t target mobile users. Does that sound familiar now somehow building responsive websites became an integral part of our workflow. However, accessibility is seen as something extra that we built upon it.

My hope, my dream is that we’ll be totally different in the next couple of years and I hope that’s the reason you’re all here as well. So what we’re going to do is we’re going to talk about some quick means how we can accelerate this. So we’re going to talk about what accessibility is to make sure we’re all on the same level about the definition, but also why it’s important and the most exciting part of part is of course, how are we going to do it? But the first question I want to answer is: Who am I I’m more dos? I am a front-end developer at new home, I’m also co-organized organizer of content, United and before I became a developer.

I worked in healthcare for like ten years and in health care. I noticed a lot of elderly people struggling with inaccessible websites and that’s the part where I came and testicle out it, but I didn’t know that accessibility was a thing in tech. I had no idea. So what is accessibility so when I started as a developer, I thought well yeah. Well, accessibility means that people with disabilities can use the web, but is that really the case now it not only helps disabled people, for example, subtitles.

It helps deaf people to understand. What’s being said in a article, but if we and if I’m not mistaken his face, almost 80 % of the articles on Facebook are being readed with some of, and I think that not everybody of the 80 % is actually deaf and contrast. If you have high contrast on your website, it helps usually disable people to read the text better, but also when you’re sitting in a very bright Sun.

It makes it much easier to read and semantic HTML. It helps screen readers to navigate through your pages, but Google does the same thing to rank your site and keyboard navigation helps physically disabled people who cannot use the mouse to navigate through your website, but also, if I fit in a very big form, I always use My keyboard I’ll never touch my mouse, so we have to have another definition, for what accessibility is, what accessibility means that websites tools technologies are designed and developed to work for all people, no matter their hardware, their software language, location or ability.

So this definition also gives a small answer to our next question. Why is it important and for many reasons, because all people benefit from it, but not only that a lot of products are being offered online. If I buy new socks, I buy it online. If I need a new book about online, but even worse, we also dependent on those digital services filling in my taxes. I have to do it online, so more companies need it need accessible website because they forget a larger audience, which is good for the profits.

The government needed because it’s legally required since last year – actually this year, it’s official now in Europe, but it has been required legally required in America for much longer time. Now. Look at the dominoes case, for example, and the problem is not the technology web sites are at least the web is accessible by itself, but because of us developers how we implement it, which makes it very inaccessible.

So how are we going to build an accessible website? We don’t have to invent it, because we have content, accessibility, guidelines for it and since there’s no last year we have a new version, which is the 2.1 version, and those guidelines consists of four principles which, in the receivable, operable unsellable and reboost, and those principles are Consists of guidelines and those guidelines are part of the success criteria and every success criteria has a level of conformance and legally required at least the Double A.

But if you AskMe English, as you all can hear, is not my native language. So, for me, those guidelines are pretty hard to read and quite hard to understand, sometimes, especially when I want to look something very quick, very quick and I have to read all those text and I’m not sure if I understand it correctly. So what I want to do here is to show you some practical examples in a live demonstration and we all know what happens in a live demonstration.

So bear with me – and I want to show you some tips and tricks about semantic structure, about links and buttons and about focus management. So for this case, I created a website for you a very basic, triple website and since there’s a lot of hate in this world, I want to distribute a lot of love. So all meat grinder, which is that they think that form for front-end developers, which is absolutely fake, of course, but just say, Utah, so basic dipper website.

This is the front page, which is a node, and I know it’s not correct to use a node as a front page, but hey it doesn’t matter. So if we analyze this first front page, you can see that the page is divided in multiple sections and those multiple sections are guided by headings. So, for example, we have, then you also see my mouse. So we have a friend which is the page site, or in this case we have some profiles and in these profiles we have some other headings that introduce the front-end developers.

We have some nice events and some news and so on, which are all confirm that these are headings yes. However, if we disable the styles with a web developer tool, it’s it’s it’s just a extension for chrome and it’s a Firefox as well, and we should disable the styles. We cannot see those headings anymore, as you can see here. This is me, navigation in search. The browser has some styling for headings by default, but the problem here is that we didn’t actually use heading tags to create our settings.

They only look like headings so to make sure you structure your content perfectly to help screen readers and, of course, removal to navigate through your pages. We have to convert them to actual heading tags, those heading tags, since it’s a triple side, came out different templates. So we’re going to find those templates so first so here we have the the page title and instead of using India, we just use a first heading tag and then we have the and for the section titles like the news and the profiles and and events we Enable the second heading, because that’s the way we have a structure, our page based on levels and the third are cards.

So this is for the profiles, which contains the names of the the front-end developers, and I have a different view modes for the other cards. For the news and for the for the events, so we changed all the headings for now and if you refresh the page, nothing changed and that’s exactly what we wanted, because it looks exactly the same. However, if we just say well the Styles again, we now can see all those headings back and that’s what we want.

So it looks the same, but it’s different on the body, and you want to disable yourselves from now and then to make sure how it really looks like just forget about the makeup, with just the real body, which is where that sells. So back to the front page, yes, so what we did here is created the structure based on the levels and based on the information we have on this page. So if we check the heading structure with a headings map extension also available for Firefox, is it matter? Okay good, so we had the first hanging tag.

We have a second heading tag. We have that hadn’t set, but what we do as developer as developers when we’re lazy, we reuse the View mode, for example, this view mode of of a front-end developer. So if we go to the landing page of the profiles in this case, we go to show more and we are back on the page. We have the first heading tag again, but we just concluded that this is a third heading tag. So if we check the headings map again we’re missing an heading level and there are multiple solutions for this.

We can write P process to saying that the name of the fungal developer should be a third having take on the front page or a second hand, tag on this page, but in this case I’m just a very lazy developer and I’m putting a second heading tag. Right here, just like that, so unable secondhand attack on this page specifically, and if you refresh it now we fixed it and if, if the design said designer said, oh, I don’t want a secondhand attack right there.

You can also visually hide it, for example, but more on that soon, all right does it make sense to check every page. Okay, if it makes sense to us. We also have to make sure that this makes sense for the content editors. So we want to provide the content at the freedom to structured account just the way we read it, so we enable this or is it this style thingy right here to add multiple headings based on the content, however, in daily life, most of them say yeah yeah.

I don’t like this: it’s very big blue heading. I just want to use the third heading just like that, and then it all goes wrong, so make make sure you instruct them how to use those heading structures and the most painful thing is if they very copy and paste it from word. For example, Google Drive and they just make it bold and beautiful. Also then, the heading tag isn’t actually, there only looks like a heading and that’s not what we want alright.

So back to the front page again – and last thing I want to talk about regarding headings – is the way we build and the function of the headings. So headings are a great way to bundle your information. So I have this very beautiful book over here and if I open it make it sound important because it is, for example, in the South States chapter title and I will deceptor text and it doesn’t really make sense if this steps is a couple of pages earlier Right, it makes sense to read it after the hell.

So when I started as a as a developer, I thought I built my HTML based on what I see an individual design so, for example, easy fancier. I see a visual, I see your date, then I see the heading and then I see the text and I normally used to create a HTML structure very based on what I just said. First, the visual down the date down the heading down the text. So if you take a look at this, this pizza party, I really love pizza and I would join this pizza party.

Definitely so it’s on the 10th of November correct all right. So if we disable the Styles again to check the actual body, you say: oh the cell – and we look for the pizza party right here. Yes, we have the pizza party and we read it like a book. Then we have yes, we have the text, we have a wrong image and it’s on the 2nd of May something went wrong here because we concluded the device of the time of November.

So how are we going to do that without not being lazy again so fix this? We have to change our HTML structure, let’s go to so for here. If we take out the template the twigs and play, we have our image right here, so I’m going to disable that and we have the rotate right here and now we are hiding right here and place all the other contents under the heading, just like the book. So we enable our date again and enable our visual again and if we go back to our page refresh it it’s a little bit broken, but hey no worries and if we disable the styles again, at least for certain that the structure is correct right now.

So we have pizza party at the end of November and this lovely picture of a pizza which makes me very hungry. To be honest, so the thing about flexbox is: it helps us to visually change order and what I did here is edit a flexbox to restore the styling, and let me show you how I did it, so the parent div has a display flex and the part The the the child in the depth that I wanted to show first visually, not in the HTML, gave it an order minus one.

So all the children of the parent div always have order zero, and if I put a minus 1 it becomes the first child in the parent visually. So let me show you how it looks like right now we restore it the style up. Guy. Sorry we restore the styling again, so the visual now is the minus one in the parent div of the carp and the date is the the first child element now in the textual bar div. So we fix that as well.

The last thing I want to talk about regarding the semantic HTML, so children. Instead, if we look at all those carts together, they’re kind of a list grouped together. However, the problem now, I’m not sure if it’s a problem, but the thing with Drupal is, is if this is a field, it gets outputted with all the dips, and it looks like this. This is this is just a basic few template of classy if-if-if.

I don’t even know what it actually means with all those if statements, so I override it in my own custom theme: where is it right here and basically it just it’s? It’s a div get the items in another div. But if you want to structure our content in a list, we have to create an ordered list. In this case, it was ordered based on the date. Otherwise, you can use it an ordered list if it’s not really bored, so we disable the div and instead use an ordered list, and it actually looks the same.

However, there’s one thing about the list: is we get bullets for numbers just like that right here? The two and three and, of course we can disable that, so that’s what the phone it’s so we are the list-style-type none and that’s a small issue with that. There is a bug in voice over that. If you use a list-style-type none, it removes all the semantics from the lists. Don’t know why nobody knows why.

But if you add this potato element, we have the content 200v, which is like this nothing more than that it restores the semantics back again. I don’t know why, if you know the answer, please let me know and then, if you go back, it still looks the same and now it’s an ordered list with other numbers with the correct semantics and if we disable the styles again, we see a very nice Structured HTML right, okay, good, so a small recap about the semantic HTML use, actual HTML heading tags, to bundle your information and make sure they’re correct on every page, even if you reuse any few modes and also provide a meaningful, meaningful and semantic HTML structure.

So next, what I’m going to talk about is links and buttons. So let’s go to the karaoke nut and I have a very beautiful link right here and you can see it because it has a different color. But what if I’m visually impaired – and I see it just like this – where is my link yeah, it says link, so he can’t recognize it because I said it was a link, but we also have to add a small text decoration to make sure it’s also visible.

Not only a bad color so, of course, and instead of text-decoration none, we just enabled the text decoration and this text on the land position under and just puts the light a little bit further down the bird. Just like a border bottom kind of thing. It’s not really supported in every browser yet, but it has a nice effect for now in google chrome, which is the browser that I use. So, as you can see now, I can recognize the link because it not only indicated by color and also it looks so very nice if you disable.

Oh, I didn’t have to refresh that it still looks very nice. If you ask me, we also used a lot of icons as links and great example are those socials, but at the bottom. Yet you can see that so we have a LinkedIn, we have a Twitter and we have YouTube, but if we disable the Styles again, of course, we cannot see what our links are anymore, because we only saw the icons so a screen reader cannot see that which One is LinkedIn or Twitter, but we remember which one.

What was I can help don’t be don’t so. Links always need a text and we have those socials in in my page. Sam played just right here and we enable the link text with a small span and, as you all can see, it has the class visually hidden and you can use that class out-of-the-box and Drupal it’s already incorporated and what it does is. It makes the the text very, very smaller, like one by one pixel and therefore it’s not visible anymore, but it’s still there for the screen reader and for Google so back to the page, and we still have linked in the three there.

The icons are very nice and when, if we disable the styles again now at least we can see which link is which so links always need a link text. But if you use an image as a link, the alt text is actually the link text. So, for example, at this beautifully new home image right here and it’s a link to our corporate website and if we inspected, this is writable okay kit, so at this link to our corporate website.

But the effects in this case is minimum local. So if we say out loud our link, yes, I go to Limu home no home, but that’s not what we’re handing we’re going to the corporate website. So in this case, we want to alter the alt text to the destination of the link, and it has to be so yes, so instead of this alt text be provided, alt text really open corporate website refresh it, and now it should be ok.

So the link text in this case is now in corporate website. So not only do links need a link text, we want them to be descriptive and unique, and I see a lot of designs which has this show more show more show more buttons. So let’s say I know, your name is dear Queen, just one of my nicest colleagues and let’s say your name right and we have another dear and another day and another dear, and if I ask you Alex, did Dirk order pizza do you know which their comment Know exactly the case with show more show more show more show more.

What I don’t know so, instead of using only to show more, we want to provide some extra information for, in this case, show more profiles and show more events. So we’re going to added to the link as well. I think it’s yes and enable this alright. So at least we have more information now about what we’re going to read more about, but this is the part where the designer comes in and says: hey. That’s not what I design I want to show more all of those buttons, and things should be the same size with the same padding and not all those large text in it, and in that case we can use the same technique.

We used for the for the Twitter and and the LinkedIn icons so, instead of actually using the whole show more profiles news, we add an extra visually hidden spun as well with the title in it. So if we refresh, we are back to show more and show more and show more, but if we disabled the cells again, we can see that the actual link text is show more events and show more profiles all right, so links go somewhere and buttons do something.

That’s a very big difference and every website, because pay responsiveness, has a hamburger menu buttons nowadays. So of course, this one has a menu button as well, because it’s responsive and if you take a look at this menu button, an old click, click click, click click Alex. Can you tell me if the menu is open or closed? Yes, I mean, is a menu open or closed? Oh, yes, it’s open, okay, speaking yeah, so, okay, I disabled the styles again and Alex this one is for you as well.

Okay, I click on the menu button. Not a professional. Is the menu open or closed exactly my point we can tell so if the button does something we have to indicate the state of the button. So there are two solutions for this, and one is altering the button text so instead only apply new menu, we want to add open menu or closed menu, so we’re going to do that first, so open menu closed menu, yes, and if we disable this stuff, so It’s not very hard, yes and I’m clicking on the menu button multiple times now is the menu open or closed yeah? Exactly yes, so this is one way to indicate the button state, but it’s not always a good idea to provide this only by text.

So I’m not sure if everyone anyone noticed it, we can also add an area expanded, true or false, and in that case we can just provide a menu button text and the area expanded announces to the screen music reader. If it’s open or closed, don’t do both. Otherwise, it will get announced twice. So in this case, we just remove the open and close text again, and I prefer that I exponent attribute, because that’s the way a screen reader user can tell how it’s how it needs to be announced, for example, with a very lovely tone or just with spoken Words or sham, for example, this is back then and their feet.

So if y’all can see the re accidental Falls and open, and that also indicates the state of the button. Does that make sense? Okay, nice? So a small recap about that one. We want to make sure that a link and a button is recognizable and clickable and provide meaningful and unique text and also communicate the state of the button when toggling talents. So the last thing I want to cover is focus management.

So if you’re back on the front page – and I want to use my keyboard navigation to navigate the page, who has never used the keyboard navigation. So if it’s up through this page and you can see in the in the very left corner that we are really navigating through a page, but we cannot see the focus outline and that’s because we disabled it in our CSS Amy right here and instead and now The outline is back again, however.

This is also the part where the designer comes in and says yeah. Can you remove that ugly blue line? No, no, we can, but we can change the styling of course. So, instead of using this very ugly blue line, we create a very nice designed outline look at that, but there’s one small problem: we made it white and from the moment we adjust the starting from the focus outline. We have the ownership of it and with the new guidelines, we have to make sure that the contrast of those outline is at least three to one.

So when I tap further of the line right here and now my baya Buckley and Zig Sebring, I cannot see the outline anymore and it is my responsibility to make sure it’s visible at all costs. So double check your page. If you navigate through to the page with your keywords, to make sure that the outline is visible everywhere, so in this case we just change the outline color when we are on the white part, you know it’s what and it’s a little bit blackish.

I guess down the line, so it’s visible everywhere, alright, so the other thing about responsiveness and accessibility is that we want that hamburger menu on the right side, power of our screen right because it’s easy to tell. But if you look at the rhythm we have on our desktop, which is logo, menu, search, local menu, search, repeat after me, menu something really changed right here we changed the ribbon and that’s the part where we add the JavaScript to make sure that the hamburger bet Button is really on the right side.

Now it doesn’t have to be like that we can visually change the order once again, as we saw earlier so instead, we let me check the JavaScript or the jQuery in this case, if, instead of appending it to the header on the far right, we want to Make sure that it’s a pendent to the main navigation right here and now we have the same rhythm, again: logo menu search. Yes, that’s a new hit and in this case we’re not so not that the menu is the first child of the parent death.

In this case, we want to make sure it’s the last child, so we can give it in higher order than zero, and I gave it an order three, but can be two as well and now it’s back again and the HTML structure is very the same as The same rhythm on desktop and on mobile, alright there’s just one small thing I forgot to mention – and actually it’s not really a legal requirement for governments at the moment, because it’s a triple-a solution is the click ability of this button.

So, as you can see, if I add a very beautiful background, color to this button, for example, background color green, it’s very, very small, especially when I open it, meaning that the clickable area on the mobile phone is very, very small. It’s only this green part. So, as you can see, if I click here and click here and I’m definitely almost on the cross bitch, it closes the menu right. So instead we wanted to make it a little bit bigger and I added this clickable area variable which is 4.

8. I don’t know why, because the the kauffman guideline says it should be at least 4 by 4 or 44 pixels by 44 pixels. But I just like the 48 number and instead we adjust the margins a little bit to make sure that it still has the same alignment that we had before but make the clickable area better. As you can see, I didn’t have to refresh this one. So back again, so it looks the same, but it’s about a clique wall and that’s exactly what we won, especially for those sweaty fingers here, and I even can’t reach out a little bit more tool to this case and we cut this cover as well.

So another thing with hamburger menus is that it hides the main navigation. That’s exactly what we want, so we have more spare space, but it should also be hidden for three meters. So if we go back to the logo, we go back to the menu and then we go navigate further and where are we? We are inside the menu and it’s a small problem because it’s visually hidden, but it’s still there for screen readers.

So, in this case, it’s this perfect case to actually use display, none, so we’re going to enable this small part of the code. Saying yeah you shouldn’t be there display none. I don’t want you to be there, not visually, not really there for screen readers, but when your main menu is open, show it as a block and let’s make sure that the the fish, the invisible elements cannot receive focus. So if we go back and we are back on the the logo again the menu and then we that we can’t go to the children also important regarding the focus management is, if you open the menu in this case.

Instead of navigating further, you want to make sure that the menu items are actual the first child that received focus just like that, but we don’t want. Is this number? That’s not what we want. You cannot do a thing right now. I can click and click, and maybe, if I go to another link, yes I’m back again, that’s also not what we want in this case, it’s very appropriate to add the kind of focus truck.

So if we go right here in this stating that, if you’re on the last item of the menu and you go to shift which is thrown to the next item, please put the focus back to the menu button and we go to the menu News and we’re Going back to the bottom and this course is to use to actually close the menu instead of getting lost somewhere behind the main menu. All right. So that’s my recap. So focus styling should be visible at all costs and if you decide to change the focus outline make sure you have a high enough contrast at least three to one and create a logical focus or to make sure it’s.

It’s the same rhythm on desktop and same rhythm on mobile and tablet and so forth, and to do that just never forget to disable yourselves from now and then to make sure that you actually see the body of your website not only the makeup and also navigate Through your website, with your keyboard on multiple pages, to make sure it’s really correct, and then I have a less sponsored content like I said, I’m a co-organizer front-engine I did – and this is an official announcement that we’re hosting fronted United means next year feel free to Come no, no, no just be there and going to be awesome and, of course, those very beautiful DrupalCon contribution.

I never contributed to Drupal because please help me it wants to be my first time and of course, what do you think and thank you all if there are any questions, I’m out no just kidding I haven’t bought, I can make one especially for your first now. I’d use in this case or just in general, because I use a lot of extensions to help me. Do automatic testing, specifically these ones, but all right. This one was the web developer tool and the headings map.

Yes, sir, a test suite that you can recommend that spiders a site and gives recommendations like I’ve heard of acts and there’s the microphone there. So, oh it’s over there! No! That’s! That’s a cleaver okay! Just wondering if there is a suite or speed of tools that you would recommend that, for instance, spider a site and give patterns of issues or specific issues and specific pages and your level of successes yeah.

Well, I use multiple tools because some cover some errors and other stones and even acts has different approaches because I used it in the browser acts core, but I also used it in my local environment and they both gave different errors, which was very strange. So I always used multiple automatic testing X is one of them that I use. I use wave toolbar and I use accessibility inside. If you ever heard of access with the inside that’s a great tool, I can show you do we have time five minutes now.

I can show you the tools that that I use mainly, for example, shirts. No, this is like ouch. I need the other one, this one. This is accessibility inside and it helps me to navigate through the pages that’s best and it helped me I’m not sure if it’s tap stops. This is a quick way to help me navigate from a page because of numbers. My links on the page there’s a buck in that in the JavaScript, so I have to disable this because I forgot to add resize it I’m sorry for that.

So so claps please. So it shows me exactly where I am on the page. That’s a quick way to test my keyboard navigation. If I lost it, for example, I use the wave to war that helps me define contrast where there’s a small error in this tool, because it also highlights the visually hidden text. For example, if I had a black background and black text, it fills, but I cannot see it so it doesn’t really is helpful in this case and acts mainly use axilla, but any other questions do you use also the screen readers for Mac OS windows.

I tried to use force over, but I’m not really an expert in it since I’m sorry, so I do if someone has a good idea about a course how to use a good screen reader or any tips to help me, please let me know I would like To know how to use it properly and eat other questions see yours truly on either


 

Categories
Online Marketing

Financial IT interview with Ioana Guiman, Business Development & Managing Partner of Allevo

We are celebrating 20 years of age this year, so we’re quite a mature business that have grown organically and we’ve been serving banks and other types of financial institutions from the very beginning, helping them automate their payments laws and achieve integration between their core banking systems and External market infrastructures, without our main focus, we very recently enrolled a new strategy that fresh out of the oven last year, and it defines us as a very customer intimate business, and that means we work very closely with our customers to understand what issues they actually have And what problems they also want us to solve, and that provides us with a lot of insight that allows us to develop our applications to provide not only compliance to their requirements, but also solve other issues.

Last year, for example, I noticed a lot of talk on the stage about cryptocurrencies and blockchain technology and applicability of that in financial services, a lot of talk behind the scenes about ideas that was not exactly on stage this. I have seen a bit of shift towards more focus on AI on artificial intelligence, and how can we best use the benefits of these types of technologies in financial services and how, on the other hand, do we protect ourselves from the bad things they bring with them? Cyberattacks and data privacy and all the type of so a levels solution for PSD to compliance enables the band to do a number of things.

First is obviously offering compliance to fill the PDP regulation, and that is, it manages the managing requests coming from payment initiation and account aggregation service providers on behalf of the final customer and processing all this type of communication between the data the bank has and is allowed To share with this third-party providers and them even allows a bank as the next step, to authorize itself as a PhD or a ISP and offer more value to the customer, and it allows the bank.

More importantly, I think to pursue the bank as a marketplace model where the bank itself and third-party developers can bring up into the API store and thus have diversification of product that they offer to people to become more relevant. And I think, a solution that enables that such as ours is what they should be looking at and, lastly, they also bring the merchant echo system closer and back to appoint the trust which is the bank.

One thing that is very different is that we work very closely with our customers to and started early last year, early 2017 to see how they perceive this regulation and what they want to do with it. But what we found is that they all have understood what the regulation said. They all have been part of the conversation and no, they knew all the implications that it had, but they had no idea how to go ahead and implement and collecting this feedback from our banks, our customers.

We were able to come back with them by midlist next year, with demo of this is how we think you should start to go ahead with it, and while doing that, we took into account not only their feedback but inside on the technologies they were already using In-House outers for strong customer authentication, for example, we wanted to be as this less disruptive as possible when bringing in a new architecture.

So we wanted to reuse the bits and pieces that were already available with the banks, and now we are very happy that we moved even further and we are running two books of concepts with two very important local bugs that I hope to be able to announce. Very soon there has been a lot of talk about, in fact that will replace pants and obviously no not everyone believes that truly the the truth is. I think that the need for payments to be solved has been cracked by a lot of feedbacks, so people have the needs for payments to be cheap, very fast, cross-border, with very small exchange rates with very small fees.

Banks have not done that yet, but then again, fintechs have not managed to do all that just on their own, so they are using the bank, rail, the bank infrastructures and the network of banks to be able to achieve this level of seamlessness. So I think we will see a lot of regulation that will target this in declare to bring a level playing field in the industry and more collaboration and more partnerships between banks, and things like to work together to actually give me something that actually needs.

As a user of their services,

Starting a business is not easy! Think about who will be working on your digital image. Hiring a good webmaster will help!