Hi, I'm Emma Torsky and today I'm going to share eight actionable steps to build more accessibly with Angular. Let's get started. Accessibility is a vital part of web development, ensuring that users can perceive, understand, navigate, and interact with apps. In fact, one in four US adults have a disability that impacts their major life activities. On wide, about 15% of the world's population, more than one billion people, have some form of disability, with about two to four percent experiencing significant difficulties. In this course, Ally is shorthand for accessibility. Notice that the A is followed by 11 characters and a Y. Today, we'll use best practices and built-in techniques to address common web accessibility issues in a demo dumpling shop Angular app. By the end, our app will meet Accessibility Guidelines, WCAG 2.0, and ARIA 1.2, and pass Acts and Lighthouse Accessibility Audits. Everything you need for this project is linked in the code lab in the description box below. All of the getting started code is already in your GitHub repository. To begin, clone the code and open it in your favorite dev environment. Once we clone, install and ng serve, and you'll see your starting point is a basic restaurant app designed for this code lab. The code has been simplified to show the concepts in this code lab, but it's pretty non-functional. For example, let's see, if I click purchase, obviously I'm not going to actually let you make a purchase. How do we know what we want to fix? We're going to start each example by recognizing the accessibility issue using a mixture of manual and automated testing. In the currency of the web, manual testing accessibility is mandatory. You have tools that can identify accessibility issues, but no tool can certify that an app is fully accessible. Manual testing ensures that you test for a breadth of ally concepts that include logical content order and feature parity. To manually test applications for accessibility in this course, we'll be turning on the computer's built-in screen reader and navigating through the app with keyboard navigation. For more information, you can see semantics and screen readers, or if you go in the code lab, there's some good resources on how to look for all of this stuff here. So I'll go ahead and turn on my voiceover. And you can see that I can navigate through and insert into this. So for the course, I will be exiting that just because I don't want to fight with a voiceover, but as you can see, that's what you'll be doing. You can also use the Mac built-in voiceover, which is what I was just doing by clicking enable voiceover in the accessibility settings of your system preferences. Or what I'll do is press touch ID three times, and that's the short key for turning the service on and off. We're also going to be using Lighthouse to run accessibility tests. So if I enter Lighthouse within my console and I choose just accessibility for desktop, I can generate a report, and I can see my starting place of everything that I need to fix. Let's see. I might need to stop and restart it because of how many things I'm sharing. And while that's going, let's go ahead and look over at our last thing, which is if I go into my code, you can also use Angular's ESLint rules to link your code for common accessibility issues and automatable attributes that we can check for. So if I go to all of my code and I enter into my ESLint RC JSON, this is going to be all of the ESLint tests that I am checking for. And in my rules, you can see that the code already comes with these, I believe 10, I don't know, I'm not going to count, but 10 accessibility issues or rules. And I'm choosing to say 2, so this value can be 0, 1, 2, with 0 being nothing, 1 being a warning and 2 being an error, and that's choosing how when I run my Lint rules, these issues are tested for. So you can go to the ESLint repository to see more of these, but these are the 10 that we recommend, and you can find these all again in the code lab to add. So that's a great really quick lift if you just want to automate a little bit of accessibility. And if I go back to my terminal, I can actually do MPM run, and while I'm waiting for my Lint team, I can see that I'm using 2 new of a version, but it'll still run, and we can see that we have one error being caught by one of those rules. So the rule for click events have key events. Can see that there's something in my app that's not working correctly because there's not a key up or key event associated with something in one of my templates. So we'll fix that in a little bit. And if I go back to my application, I can see that I get an 87 for my Lighthouse accessibility score, which isn't bad, but we definitely want to get up to the green area of both 90, and we can do better and get almost to 100.  So now that we have a starting place, I want to get started by fixing our first issue of the eight identified issues that I've picked out again by manual testing with voiceover, by running this Lint check here, and by doing this Lighthouse accessibility test to see what's going on there. The first issue that we're going to fix is defining a unique page title. Providing unique, concise page titles helps users using Ally services quickly understand a page titles content and purpose. Page titles are critical to users with visual difficulties because they are the first page element announced by screen reader software. Angular is a single page application framework. And as a result, a majority of the transitions, such as moving to a new page, do not involve a page reload. Until recently, this meant that each page had an identical page title and provided no value for understanding the page's context or purpose. So if you can see that here, let's identify that issue and then talk about how we're going to fix it. So as you can see right now up at the top, we're looking really small here, but it says Ally and Angular. And if I open up a new tab of this and go to maybe a different page, let's go to our story. You can see that this is like the about page of our website, and it's still at the top just says Ally and Angular. And if I open one more just to really prove my point, let's say I go to the last page, so find us. So this is like a map if I had location services that said like where I'm located in San Francisco. And we can see that all of these have the exact same page titles. So there's not a lot of information. So if you can think about this in like, let's say a Google search website, let's say you had like 30 tabs of Google search open, and all of them just said Google search at the top. But you had 30 different searches and you were trying to find that one tab. It's really hard because you have to click into each one. So both from like a UX standpoint, it's just a terrible experience to have to go into each tab to figure out what's there. But also from an accessibility standpoint, that's the first thing your screen reader is going to read to your users. So you want to convey what's on the page in that page title. So in Angular V14, the router added a built-in method to define unique page titles out of the box. This provides a streamlined approach to ensure developers follow page title best practices. To fix this, we're going to use that built-in tool. So if we go to define page titles, we're going to go into our app routing module. And we're going to add this title property. So this is the new thing that was added in version 14 when you update. So I'm going to take this and I'm going to go into app routing and go into my code. The other way you can check any of this is since we're on step four of the code lab, you can search to do step four and quickly jump to where you want to go. And what we're going to do is again, add that title property. So like here is a title. And then if I save, I should be able to go back. Let's go to this running. It recompiled and see, here we go. Here's the title. So that title was automatically applied. So this is super easy. If you're familiar with former versions of Angular, it's much more difficult. And just for the sake of time, I'm going to copy and paste this code to define my new routes and replace it here. And then this can be deleted. We no longer need that to do. And if we look at the best practice here, what I like to do is convey like what that page is. So this is the shop page where you could buy things. So our shop dash and then the overall website. You can see common patterns of this.  So conveying the most important or most specific thing about the page and then the more general context. So specific then general is just like a best practice that I like to follow. But if we save that and go back, then if I open up those tabs I just had, you can see that now I have our story, Angular, find us, Ally and Angular, and our shop, Ally and Angular. And so we are seeing the difference without even needing to go. So if I'm here and I want to go to that like find page, I don't need to go into each one. That's super cool. And again, I'm just really excited because again previously you would have had to add and manually manage these page titles and apply that in your app component. So this is a super easy way where I'm adding like, I mean literally no lines of code were added, just like a few characters on a few lines. So super cool, super quick, super easy. Now that we've done that, we've verified our change and we're one step closer. So let's keep going. Your design might seem cool, but it's not cool if people with visual impairments like color blindness can't read your content. The web content accessibility guidelines or WCAG 2.0 define a series of color contrast ratios that ensure that your content is accessible. In Angular and on the web, you can define color palettes that ensure your components meet these standards and are visible for users with low vision and color blindness. So for this, we're going to identify the issue by inspecting the page with the little Chrome DevTools inspector. And the thing that's really standing out to me on this page is this matte icon. And if I click on it and hover it, I can see that that accessibility contrast is not good. So again, if I hover, you can see that that contrast value in accessibility is quite low. So significantly below the WCAG guidelines. If I go down to that value in the actual Chrome DevTools, by going up, I can hover it. And I can see that that contrast ratio is quite low and I can actually try and fix it to either 3.0 or 4.5 and see that it needs to be much darker for the recommended value. So super cool that Chrome has that built in. But now let's go change that in the code. So to do this, we are going to go back into our code and look at the palettes we've defined. And we can see that I have this value. I'm using this pink palette, right? I'm really enjoying this pink, red, quite bright vibe. But this text value is 500, which if you're familiar with Angular, you know that the material color palettes that we're defining are using values from 100 to 900 with 100 being the lightest and 900 being the darkest. And so for the 100 to 500 contrast is quite low, right? We're only like two color steps off of one another. So I'm going to go ahead and change that to 900 and go the furthest away that I can and go back and see how that changes it. And if I reload, we can see that anywhere that that really light color was is swapped to a really dark color. And I can also hover it and see that, again, that color contrast is now above four, which is meeting the guidelines that I need. So I've met that color contrast ratio. I can also go this is something that, again, that lighthouse audit is going to do a really good job of checking. So this is the contrast here because again, this is super automated, right? We can test and see if colors need it. And here it was pointing out that those icons were not doing very well. So now if I rerun my audit, I can see my percentage should go up. Yeah, so we got two more points there and that contrast is no longer there. So we verified both manually by hovering and by running the audit again that I fixed the automated thing and my palette is now fixed. And the benefit of doing it in a palette is that anywhere that you're going to use icons or things that are using material in this application that are using that text color are now going to use that accessible color with the highest contrast. So super great to do it in a more generic place like your styles versus individually overriding like that that color is darker. The broader you go, the more accessible it's going to be. We fixed two things. We've gotten our score up two points. Let's keep going. And our next one is going to be another thing in our templates, which is using semantic HTML. We're now on step six and let's talk about native HTML. So if we go to our application, we're actually going to be on our our story page here and native HTML elements capture a number of standard interaction patterns that are important accessibility. While a paragraph can be styled as a span or a div can be styled as a button, semantic HTML elements ensure that screen readers and keyboard navigation understand the interactions and control your HTML. When you're authoring Angular components, you should always try to reuse these native elements directly when possible rather than re-implementing well-supported behaviors. This ensures that the page has good content structure and natural content flow and that the tab is in a logical order to assist users navigating the web with effective use of the keyboard. So here we have two things that we're going to fix and the first we can actually see again in that lighthouse score if I go back but we can see that it's getting mad that the heading elements are not sequential. And if I actually go to this other tab and run another lighthouse test on this, it's going to get even more mad at me because it's going to notice that each of these HTML elements are headers in the wrong order. So these heading elements don't make sense and are not sequential. Otherwise, this page is looking pretty good. So to fix this, we're going to go back into our code and we're going to go to that. We're going to go to do six and we're going to notice that in the about component I can even look at this and say, okay, I start with an H3, a header three. I go to a header two, which is supposed to be higher than an H3, right? This should go one, two, three, four, five, six. Then I go to a five and a six but then I go back to a five. Then I go to five, then I go right. So this number order doesn't make sense if I'm trying to go sequential. I'm not doing a very good job at that. So we're going to go and I provided the code snippet in the code lab but we're going to take this and we're just going to reorder these things so that they have headers and it's going to be the same text but instead of using headers to decide the styling, I'm going to use headers as what they are which is semantic HTML element that our voice over would understand as the header of a section and then anything within that section I'm going to mark as a paragraph because it's essentially just like a line of text. It's not a header. It's not like this section information and then I'm going to use styling and specifically angular materials built in styling classes to apply some styling to make sure that I get this same style that I really like without having to use semantic HTML to sort of hack it. So if I save this and I save this and I go back we should see that. Yeah. So that reloaded and we now have what is clearly two headers with some text in the middle that still has fun styling but isn't all a header. Right. In general, text and all the headers and if I rerun that white house I should see a fix there which is exactly what we're trying to do. And yeah. So this page is now at a hundred which is a little premature but quite exciting because again we fix that semantic HTML thing. Now if we go back here we're going to fix the other semantic HTML thing which if we inspect we're going to see that this purchase button right it clearly like in theory the idea of this website is like here's my dumpling preview. This is like a super cool nuanced dumpling shop where like you can order hot pink dumplings of different quantities of different filling types. So let's say we're going like chicken and tofu and I want to click purchase this purchase button should be how you purchase those dumplings right but I can notice that it's actually just a div that's styled to sort of look like a button and even in the HTML it's called button it just is a div which is really not what we want here because again we want to use the semantic HTML for this we want to use the native button attribute because when we turn on something like voiceover and we navigate we can get to that control and voiceover will know what to do with that known interaction. So to do this we're going to go to do number six the other one and we're going to see here and see that even within our code editor we know that there's an issue here right so this is what was being thrown by that lint error earlier is it knew that this div has this click attribute that like it really shouldn't and so we're getting an in browser error because I made that ng lint error. So if we copy and paste the code that I provided we're changing this to a button with angular material flat styling just coloring it a little bit and then putting the exact same class on it putting the same click event on it and just giving it the exact same text. So again, the before and after is very similar. We're just making this a button and by doing that we get rid of the in code editor error and if we go back to linting we can run that lint test again and see that that should also be fixed and while that's going we can also go back to our shop and we can see that there's now like even the UX of this is great, right? So if I zoom in so you can really see if I like click there's like a click interaction, right? It's a visible the UX is great, right? So we think about accessibility as just fixing things for people using accessibility services but a lot of what we've already fixed today right like this color contrast just makes it easier for everyone or this like clicker interaction like the fact that it now has hover and you can see that the like cursor changes and there's like known interactions there in animation is like a really great benefit where fixing things for accessibility is not just for people who we typically think of as needing accessibility services it's really a better user experience for everyone. So if I rerun that accessibility report on this and I go back and look I can see that all of my linting has passed so we're already much closer and we're up to the green space here. So we're up to a 91 because again we fixed this button issue and we fixed this page all with just using semantic built in HTML. So a lot of great things happening already and we're only about halfway. The next thing we're going to do is use selectable controls with angular material. So here you can see that one of the complicated interaction patterns for accessibility services is nested controls in this demo we're using all of these checkboxes right and we have nested controls where you can get like chicken but not impossible meat and you can get tofu but not bok choy right these are nested controls where there's vegan there's meat but there's also nested options. But how do you indicate to a user that you selected a subgroup or navigated to the parent item? So let's think like when you're going through this interaction with a voiceover how do you indicate that bok choy is a sub child of vegan or that meat is a parent of chicken and impossible meat? That's a really hard pattern to try and work with. In angular simplified menus and controls create a much more navigatable experience and so what we want to do is simplify those controls as much as possible and use the angular material list box to build out this interaction pattern. So I'm not going to turn on voiceover just because running a screen share while also doing voiceover on this step is like quite difficult but as you can see it's that same interaction pattern that we had right where like you really can't convey these nested controls very well and it's just a really poor experience for everyone involved. To fix this let's simplify this a little bit so we're going to go to step seven uh scroll up and we're going to be replacing the check boxes with material check boxes. So first if we go to our code I'm going to swap here and we go to to do item seven. We can see that to create selectable controls we have a ton of stuff here of all of our selectable controls in our shop component and what we want to do is just simplify this. So we're going to define our options a little bit differently. Here so our filling option instead of being a set of Booleans is going to be a list of strings and I made them a little bit fancier. So now we have a list of fillings. We have our selected fillings which is again a nice little ArrayList and then we're just going to in our faux purchase correct that the way we make a faux purchase is a little different because of that ArrayList of strings just strings there you go strict taping that's really getting the best of me here. So now we have just an Array here of our fillings that we're excited about. I like made them a little bit fancier because why not again an ArrayList of our selected ones and then if we go down here into our selected fillings when we make a purchase we're just going to go through create a list of each of the selected fillings that we have and then just print that and that's going to be the flavor of dumplings that we're buying. So now that we fixed that part we're going to go into the actual controls and just replace this like really complicated whole UL list or unordered list with this provided here which is significantly shorter and what it is is again a matte selection list of list options where each of the fillings that I just provided is going to be one of the options that I give. So I'm using the ngModel to make sure that I know that all of the selected fillings are going to be my selected controls and just again give that selection list and here notice that I'm giving an ArrayLabel so I'm providing context for what that list is for ArrayList or screen readers so that when it's read as a list it's read as the dumpling filling list so just something to indicate there and then just each of my flavors is going to be one of those so quite easy and then I believe we can also just get rid of some styling just to make sure we clean up some things so within that shop component that last to do is just a quick little cleanup and if I save all of that and I go back we can see that yep without doing very much we already have a bok choy and chili crunch a tofu and mushroom a chicken and ginger and impossible meat and they're all within fillings and you can see that the styling changed quite a bit so I now have those click interactions it's not that unordered list but I've also removed the nested controls so if I went in with voiceover I would very clearly hear that this is a list of my fillings I would get to pick each one and I wouldn't get confused about whether or not I was ordering like the parent of what flavor or whatever and you can see that I believe if I run the lighthouse again I would also get a slight bump just because I'm not using sort of like a less supported pattern there so quite exciting if we move on the next thing is going to be very closely related which is step eight is talking about aria in that template that I was just in I showed that I was using this aria label right and so you see this a lot where aria labels are going to provide context for what that control or what that HML element is doing and how to be read to a screen reader so that's not just a button it's a purchase button or it's not just a list of controls it's the dumpling filling list so it's providing that context for the screen reader or accessibility service so the next thing we're going to do is we're going to add a label to something that's missing the label so this was caught if we go in we can see that here the first issue we have is form element does not have associated label so again you can think of aria as a lot of those labeling technologies and if we look we see that the input didn't have a label here so that was that filling and we already added that right so that one was fixed we ran it and the next one is aria input field does not have a label so this slider that's deciding how many dumplings I want I always want more than bakers doesn't doesn't have a label as well so if I go into to do eight I'm looking to see what aria label is missing and what I'm noticing is this mat slider is an accessibility it's a material component slider so it already has a lot of built-in accessibility just because it's the material component version it's a known interaction of a slider but I'm not seeing any aria label so I'm not providing context so here I'm going to go back to my code lab just to make sure I get the code right and all I have to do is add this aria label value so all I'm doing is adding just that aria label and that's solving it so then if I went in with a screen reader or I ran that lighthouse command again I would see that instead of just being an unknown slider it would be read as dumpling order quantity slider so again you can think of this as providing context to what that interaction is and I actually would probably go back and remove the word slider since the role would be read in a different place so this is the context not the interaction and then the slider would actually read that and a cool thing is if you hover as you saw there I could actually open the aria reference which is what I accidentally just did if you want more information on that so I'm going to go ahead and I'm going to run one more accessibility report just to see that and I fixed two things with aria now so I should see that fix and again this is like pretty intuitive yep we're at a hundred percent more than halfway through already at a hundred percent we're still going to do a little bit more which is why I said that manual testing is super important but from the chance of automatable fixes we have fixed everything that was automatically checked so that's a super cool goal I'm going to go ahead and give myself a little bit of a pat on the back hopefully you can too and I'm going to exit out of lighthouse just so that we're not too distracted by that but if you think about that it makes a lot of sense right like let's say you're on a screen reader and you get to the point of selecting the quantity and you get to like you know you change it up to like 13 there's no context for like what the 13 is of so we want to make sure that anytime you're making a slider selection there you're being told that it's you know 13 dumplings that you're about to order that the order quantity of dumplings is 13 that way you don't get to the end and click purchase and say like well I don't know I like got 13 maybe that's like 13 fillings or 13 boxes versus 13 dumplings right I think I would be incredibly sad if I made this one because I thought that it was like one box of dumplings and then a single dumpling arrived at my house that would be very sad we've gotten to the point of doing everything that we can without really digging into some of the nuances of angular and we've done a lot to be clear we've done page titles uniquely just by using that built-in router property we've changed the color palette to have color contrast and we've really looked at the semantic HTML and controls as well as changing that pattern of this checkbox to be a little bit more intuitive and digging into the aria attributes of our templates to make sure that they're the most accessible possible so now we're going to move on to part nine which is where we add the power of the angular CDK accessibility package to fix common additional accessibility issues the thing about this is the CDK's accessibility module helps solve more complicated angular specific issues and by the end of the section we're going to add the module so that we can continue and do more of this you can read more about what the CDK Ally package does on our docs website but you can really think of it as providing a set of tools just like anything in the CDK or component development kit it's going to provide you a bunch of tools so that you can build components that are more accessible it's going to give you ways to hook into things like focus live announcement, contrast all kinds of more nuanced interaction patterns that are common on the web that we want to give you a direct way to hook into those APIs and control so to do this we're going to go to do step nine and it's going to be really easy all we're doing is adding this module so we want to import the accessibility module just like anything in a module we're importing it and then it's getting mad because we didn't use it but that's okay because we can add it to the top and then it's imported and we can save it and close out some files and go let's see it should have recompiled we might want to restart when we import a new module I always like to just re-serve my application just in case to make sure I'm getting that import but yeah super simple so we're getting that Ally module again the shorthand for accessibility from the import in the CDK and really that's about it and I'm realizing I put this little low I actually want it to be up here with all of my packages and cool so we did that super easy probably the easiest step so far because there's no visual change right we just imported a new module let's keep going and look at three ways to use this module the first thing we're going to look at is focus trap if we open I previewed this earlier but if I open my color here I can select a new color so let's say like right now my dumplings are gold let's say I want to make them light green so I could apply that color they change color and in theory they would arrive and be a different color or let's say like I went into dark mode let's say I'm really digging this like plum color for spring it's like very seasonal and so I can apply that color so when I open this dialogue what I'm doing is I should be opening this dialogue and redirecting the focus of like a screen reader to know that it's inside of a dialogue so if I had voice over open I would want to contain the focus within this dialogue because while this is open I want you to make a selection here before exiting out right you can click out but you haven't made any change there so I want to make sure that you know if you select this color attribute that I'm sending you to a dialogue and I'm letting you make a change here before applying the color and going back right and I want to make sure that the user knows that they entered a dialogue what they're doing in that dialogue and then when they exit I want to make sure they know what happened in that dialogue so really common accessibility pitfall is that you'll open this dialogue and somehow the screen reader will be able to continue to edit things outside the dialogue while it's open right that I could like change the quantity of dumplings while within that dialogue so I want to make sure I'm trapping focus and this is something that we call focus trap the angular CDK trap focus directive traps tab key focus within an element and this is intended to be used to create accessible experiences for components like modal dialogues where focus needs to be constrained in order to do this we're going to go to you gust it to do stop 10 and we're going to actually go in and add just this CDK focus initial and all that's doing is letting the user know where to put the focus so CDK focus trap if we open to the documentation is going to have a lot of stuff there angular angular material and if I go into the components in the CDK I can see that within the accessibility package I'm looking at focus trap so this is things where I want to trap focus and there's a bunch of options here so there's trapping focus there's changing the focus region and there's indicating initial focus so for the use of this codelab all I'm going to be doing is making sure that the initial focus is where I want it which means that it's on the selection list so if I go to to do step 10 I'm going to see that initially if I were to use a screen reader and I go to this dialogue the initial focus would be on the entire or would be on apply color right it would be on like exiting the dialogue and so I want to actually move the focus to the entire window so that you go through each of the colors before doing that so that you know about that so here I'm going to make one change which is just adding this CDK focus initial which is saying this is where I want the initial focus to be on that list of colors and it says easy that stop and then if I see it and I go back it's recompiled and again accessibility short cuts you can hear that I turned my voice over on oops accessibility short cuts and if I turn voice over on and I move it over so you can see what is being said and I go here and I enter you can see that initially that color okay so you can see that when I selected that color and I opened the dialogue I'm now focused on white the first color in that and if I scroll through I can select a color so I'm selecting color and then I can exit by going to apply color and I'm going to exit out of this so that I'm not fighting with voice over but what you saw there to recap since I was fighting with voice over is that I selected this color and now my focus was on white the first color there versus one of these controls to exit right so I was put directly into the colors and I was told what I was selecting the dumpling color and then I was able to apply the color and exit so that was done again using the CDK focus initial but there's also really great stuff that I would highly recommend if you're using dialogues on other things like chopping focus again I didn't need to chop focus within that dialogue because I am using the math selection list which automatically knows when I open this mat dialogue with a mat dialogue action to control and trap focus I was just making sure that the focus was where I wanted so we've done that we've verified and that's step 10 off the list so we verified it our color picker now has cracked focus trapping and we're super close to the end our next thing is going to be super super simple are similar to what we just did which is again looking at that color indication and this is announcing changes so when I go and make a change let's say I change the color right to green yellow this like weird neon when I exit I want to make sure the user knows what just happened so I want to announce to the screen hey you just changed the color so you know like there's been a change to the screen you exited that dialogue and something happened another common thing is if you make a purchase I want to announce that that purchase was made let's say this is like hooked up to some sort of payment platform and you've exited and you've made a payment I want to make sure that this payment or this purchase that I'm just console printing for now is announced to the user so that they know what they're purchasing or going into another window to purchase so to do this we're going to use something else from our accessibility CDK package which is called live announcer and so live announcer is going to allow you to notify when something on the screen has changed you can imagine if you're attempting to submit a form or complete a purchase and not knowing that an error has popped up right error handling is super frustrating let's say you go to submit your address because you're making a really big purchase and the zip code is off or something and so you're just sent back to that form and visually there's an error on one of those form attributes but to somebody who is non-cited you're not being notified of what the error is and you're having to go through the entire form again to figure it out I know it's really frustrating for me when like I don't know what the error is and I'm being sent back to a form so error controls are a great place to use live announcer which announces messages for screen readers to use using the aria live region to ensure screen readers are notified about those notifications and live page changes so to do this we're going to add the live announcer so we're going to go to do 11 and we're going to go into this component and add the live announcer attribute if I go to do 11 we did that we're going to first go into the component let's see yes so first we go into the component we import the live announcer then we go into the actual class and we want to just add the live announcer to the constructor here and I'm just copying and pasting it so that you know what is happening but in this constructor here I'm just going to replace the constructor with this other constructor which includes that live announcer added so let's see it looks like I am missing something here change color and here the last thing I'm going to do is in my change color I'm going to change how I change color so here in this change color method providing a color and then I'm reemitting the new color and what I want to add here is this live announcer attribute right so I want to change the color but I also want to announce before changing that that color has changed so here in this to do I'm going to add this dot live announcer and I'm going to announce sensible thing that the new color is been selected so before I close and I'm going to do that anytime the dialogue is closed just to notify and then the other thing I'm going to do is I'm going to go into this component and I'm going to do the same thing again for that purchase that I was making right so the other to do is to do the exact same thing and add that live announcer but in my other place which is to import it to my shop component and do the exact same thing which is import live announcer from the CDK Ally I'm going to go into my constructor I'm going to make sure I have a reference to that live announcer just a private live announcer instance and then I'm just going to again use that super simple thing we're on my purchase my faux purchase I'm going to say this live announcer so of my instance I want to make an announcement and I want to announce the exact same thing I'm console logging which is what that purchase is so that in theory you would notify again this is sort of more of like a demo of what I would do with this but error handling is a really great instance and so here I'm going to go back make sure it recompiled it did and I'm going to turn on services and before I do so what you're listening for is when I click this button I want to hear or you'll be able to visually read that what is being read to the screen or what is being read with voiceover includes that announcement so if I turn on my services again accessibility shortcuts check and I show you what's being read application now in our shop purchase button group main you are currently a button to look at this button press control this slide is getting inside purchase purchase 11 buttons in the color bowl comment result purchase 11 buttons in the color bowl change dumpling wrapper call like green selected change dumpling wrapper color button group main select color like green you are currently a button group to voiceover yeah and so there you saw with a little bit of hacking of voiceover given the screen record happening that when I clicked purchase I was announcing again that I had made a purchase of this gold color and then I went and changed the color to light green and you saw that it announced that a new color had been selected so again these are instances of using this instance of live announced to make sure that the user knew and now drumroll please we have one last thing which is maybe like the coolest but a little bit more niche thing and that's something that we're going to call high contrast mode so Microsoft window supports an accessibility feature called high contrast mode and this mode changes the appearance of all applications including web apps to dramatically increase contrast in Angular we want to respect the user's preferences for this app and so we want to use the high contrast mode detector which again is going to be another attribute within this accessibility package to make sure yes targeting high contrast mode to make sure that we are respecting the user's preference there so Internet Explorer Microsoft Edge and Firefox support this mode and Google Chrome currently does not support window high contrast mode but there are changes being made to CSS all of the time to better respect again different forms of high contrast different color palettes prefers reduced motion there's a lot of CSS things we can do for accessibility and so this is one that we specifically want to look at for styling so here since I'm currently in Chrome I'm going to just mock what this would look like so that you can understand a little bit of the difference and so we're specifically going to be looking at this purchase button here and if I go into to do 12 I can see that in high contrast mode I would want to change the difference between these two colors to be essentially like white and black right it's it's almost white and black and how high the contrast is you can think of a CAG as using a 4.0 color contrast ratio that's what we changed initially where these colors are quite different think about if this background was white and this was black like the highest contrast you can get is what we're looking for so to support high contrast mode we're going to go into our style CSS and we're going to use the CDK high contrast mixing that's provided with accessibility so we're going to import this in again to do 12 our last one and so we're going to import that and then we're going to go down a little bit and we're going to use this include in purchase button so we're going to go to our purchase button we're going to add the include and so this is include like the SAS thing and then in high contrast mode so when the service or when this application is being served or used in a high contrast mode setting with that user setting turned on we're going to add a really thick outline and we could even like do more right like let's go big here and then we're just going to change the color to like the lightest possible version of again this pink palette that we're in just to go as light as physically possible and so if you want to see what that would look like since again we're not in high contrast mode I'm just going to go ahead and change it here so that you can see again what we're doing there and so here my computer is mad at me let's not this back why let's try use nope try use no tilde can't find style sheet to import let's try always fun okay well as we debug this and regenerate what I'm trying to show here is that if we go to again these two things we're using this mix in to ensure that when we're in this high contrast mode which is provided again by the accessibility service that we're adding the context of trying to make the purchase button as dark as possible again just to show that difference and it is really unhappy with that import there's something about strict importing that is not working with my compilation okay let's ignore that for now so if I go back can you compile please if I go to the instances of this if I just mock what's being happened here or what's happening here I want to show the difference and so if that import is correct which it will be in the code lab you'd see that if I was a user that had this setting on that I would then see this very differently styled purchase button that really emphasizes what's happening there has a much higher contrast color the outline is much significantly larger so it's really showing that control and it has the exact same behavior but again it's just emphasizing that styling so this is for maybe a more low-visioned user or somebody who has these controls on this is a really common setting for people who sometimes have chronic migraines who need to see really high contrast to not have to like focus really hard and discern the difference with like small nuances and so if I was styling my entire app with high contrast mode in mind I would go through and each of these controls I would make sure had the highest contrast had the largest outlines I would change the style even of maybe these dumplings that I'm showing to have a much thicker line to make sure they have maybe like a white background so really restyling your application again with this high contrast mix in being included to make sure that you can do that and again I have changed this import so you would just want to make sure this import is pointing to the correct thing it's possible it's index don't worry too much about this oh okay well we're going to keep moving on but in theory oops hello okay let's make sure we compile so a little bit of an anticlimactic end but let's move this back to not a ridiculous high contrast to the other one and we can see that visually not a lot has changed from our application but we've done a lot to change the different controls we have almost wrapped up and I just want to do a quick recap of the eight steps we did so you can think about the changes you made and how they might apply to applications you are currently working on that aren't a dumpling shop because this is fun but you know there's a lot of other cool things out there that are using accessibility and it's important that all of them think about accessibility and make these changes so the first and probably the coolest is if you update your application to version 14 you can automatically change that page title and again this is like super cool super built-in it's very new but if I look for that routes definition I can see that all I had to do was add that title and now I'm seeing these unique page titles up at the top so that was step one step two we changed this color here of this icon to make sure that it had the highest possible contrast ratio and met WCAG guidelines in step three we changed the semantic HTML of our purchase button and our story to make sure that they're using semantic HTML in the next one we made sure that we had selectable controls by again using aria to apply an aria value to this slider to make sure that we were giving the user context with aria labels to ensure that we were notifying them what they were doing on the screen and then we went over to our other control and simplified our controls of our checklist here of all of our fillings so that instead of using nested controls and a complicated pattern with low accessibility we could simplify the controls with a similar result to ensure that we have higher accessibility of our control system and that was everything we did without any angular package then we went and we added the angular CDK accessibility package or ally package and we went in and we changed three things there we added the focus trap to control focus of this color dialog we also announced changes when we exit the color dialog as well as when we make a purchase let's go in dark mode for this using the live announcer to announce those changes and finally we looked at high contrast mode to ensure that users with a selection for a specific change on their screen or a visual indication of preference are being respected by our application using the built-in high contrast mixing that we provide and so we did all of that and we fixed eight super quick super easy things for how to fix accessibility in this app congratulations you addressed common web accessibility issues in your angular app what was your favorite step my personal favorite is angular v14's new streamlined page title options directly in the router it's a game changer for out of the box accessibility to see all of the solutions check out the main branch in the get hub repository you now know the key steps required to resolving eight common ally pitfalls in your angular application thank you so much for joining me don't forget to follow angular on Twitter and YouTube and I'll see you next time


What evidence do you have that yours is a learning culture? Three very different companies studied in the book and everyone culture cited an environment where people make their weaknesses public so colleagues can support them in the process of learning. When an organization is focused on the development of its workforce the culture of development permeates and incubates growth that is mission focused. Development is the job. The need for the workforce to focus on development was introduced by doctors Bob Keegan and Lisa Leahy and is particularly important in a world where change is constant. Technical challenges can require new skills but adaptive challenges usually need a mindset shift that includes learning and development. What are you working on to become the leader of a learning and development culture? Lead well this week.


Every day, sailors just like you are making history, and the Every Day in the Navy section of All Hands magazine online wants to see just how. Every Day in the Navy is for sailors by sailors, and it's your chance to let the rest of the Navy know what you and your shipmates are doing every day. If you would like to highlight how you or your command are contributing to America's Navy, email us at allhandsmagazine at dma.mil. Please include Every Day in the Navy in the subject line, as well as a caption explaining what is happening in the photo or footage, and how it is helping your command complete the mission. To see examples of current submissions, go to www.ah.mil. From the Defense Media Activity, I'm Petty Officer Brandy Wills.


You didn't know that, yes, I am Matthew. Yes, I am the Build Creates Marketing Director. I'm going to give you a little bit of history. I was just in a panel where people were talking about how they got into tech. I was a music major. That's useful. Music and theater. And I've been in sales for, I got into sales. Basically because theater teaches how to lie, and sales and marketing is pretty much what that job is. It's the only one that actually pays bills. So, I worked in telecommunications. So I sold phone systems and big phytropic networks around the state. And I got really bored, and I decided to go to websites. It's not as boring. And I was originally at a custom development. One of those guys. We talked really bad about WordPress for a long time. We parted ways. Bill Curry Studios was looking for someone to sell websites. And it turns out that I'm the only person that actually had that as a job. So they hired me. And when I started, my job was I was supposed to be cold calling nonprofits to sell website packages to them. That doesn't work. So that will not be one of the things that's on these slides. So when I started, they were a project only. They literally did everything in projects. They went project to project to project. And they did about $300,000. Those aren't real numbers, 3.7. It's actually pretty close. They did about $300,000 in sales every year. From the steps that we took, from the time I walked in, we have doubled. And we are planning on doubling again this year. Our goals this year are to breach $1,000,000 in sales. And the ways we did it are going to be explained here. How many of you are actually agencies? Raise your hands please. I will drop four letter words if you're offended. I'm so sorry. It's just how I talk. One of you are not agencies and businesses and thinking this is going to teach you how to do your business better. And if you're working as a sole entrepreneur, you're a freelancer, this will help you too. But if you're like, I work for Compuware, please leave as we're going to talk about things that you don't want to know about. So the first thing that we had to do, and this just sounds simple, was we had to know who we were. We had to know are we a development agency that is a designer? Are we a designing agency that's a development? Are we marketing?  And also what is the language that we wanted to use? It seems simple. We should go, we know who we are. We know what the kind of people that work here. It's actually taken us two years. We've gone through several iterations of our language. When we first started, when I first came on, I said, okay, well, we need to create all this content. We need to do a lot of things. This is how we're going to talk about it. We're going to use all the buzzwords. And it was a terrible flop internally. We hated it. That's just not us. We're the tough love agency. We're going to tell you how it is. We're going to, you know, we're not, we're not there to be your friend. We're there to make you money. And so we had to learn who we were around that language. And the other thing that we had to find was our thresholds. Remember when I said it, I walked into that job and I was supposed to be selling website packages. And I'm going to save a number. And I know that a lot of people that's going to see like, oh, that's a lot of money. Nobody's going to buy that. It was $10,000 to buy a website. Turns out that nobody wanted to buy those. Not because $10,000 is a lot of money. It's because that wasn't who we were. The companies, the organizations that we were working with, they weren't at that threshold, but the companies that we needed to work with were, they weren't interested in packages. We had to learn who we were and what our thresholds were. So no, we don't sell $10,000 websites. Never going to come here. It's generally about $25,000.  You can come to us and you ask the question, we're going to give you that answer. The first threshold that we had to figure out was what was our top tier. I'll give you a little story. When I came on to Build Creek, I had about 90 days to make this whole process work. The first 60 days I was doing that cold calling thing, you know, it was also writing content and doing the things.  People will actually pay us to do this. And Eric, our owner, he was like, okay, we'll sign up for this specific software. You've got 30 days. If it doesn't work, we're going to cut ties, we're done, you can go back to Dana for your answer. Day 20, we signed a very large contract with a very large statewide company. We had to learn that top threshold. They were not a good fit. I couldn't control them, I couldn't manage them. They were too big. So you have to know where your balance is. Now, they came to us today, we've got more employees, we can do the thing, it would probably be a better fit, but that wasn't our threshold at the time. And we had to learn very quickly how to say no. And I'm going to make them say no very easy by the end of this. The second thing that we had to do was find a recurring revenue source. This doesn't have to be a huge thing. You don't have to go in and be like, we're going to charge $10,000 a month with marketing and blah, blah, blah, blah, blah. How many of you use an outside hosting company? Please tell me you don't host in your house. Everyone uses an outside hosting company. How many of you are charging your clients to host their website, a monthly recurring fee of some kind? Do you have maintenance built into that? Yeah, if you don't have maintenance, when I walked in they said, well, how do you guys use hosting? Well, we'll help them sign up for all of them, get all the stuff set up on Liquid Web or whatever on the servers that we, the server environment we want to work in, but we don't want to charge them, we don't want anything to do with hosting. Well, there's a lot of great partners that are downstairs that can create a structure for you to make money off of the hosting and off of the maintenance. Maintenance doesn't take that long. You built the website well, it's not going to take that much, you can charge people, and now you have a monthly, just a small revenue stream that you can grow on. Because what I'm going to try to work everyone through is you can't scale your company if you don't have a scalable amount of money coming in every month. If you're going from project to project, you may have a banger first quarter, oh my god, I got a higher tune, I got a higher tune developers, I got to do all this stuff. The next quarter it takes a dip, and that was literally the ebb and flow that our company had every single year was they did this all year long, and I'm like, and they had great years, they had big time years, but they didn't have monthly recurring revenues to allow us to make it all for a trajectory. Less than 10% of our monthly revenues in 2015 10% of our revenues every month were monthly revenues. By 2017 it was about half, and that's kind of the threshold that we wanted to keep it. I want to keep it about half of the money that's coming in is coming from existing client bases.  These things are done, they're not, and they don't, they're not going anywhere. These people are locked into agreements, they're locked into contracts so that we can scale. And to kind of give you an example, when I started we had about one and a half full-time employees, maybe two full-time employees and a couple of contractors, but we just signed a new lease to move out of town because we can't find space big enough because we have six, seven full-time employees that we're going on, and we're hiring, by the way, if anyone's in marketing, you can come see me afterward. We're looking for another marketer, but I need another meeting so I can take a vacation. So the steps to doing it were to create content, to write. Sorry, this is not a good talk for you. You need to write. When we do an about campaign, we generally tell people you should be creating at least two to three pieces of content every single day. Or I'm sorry, not every single day, every single week. We do about one piece of content to two pieces of content every single day, internally. We literally are, there's somebody writing every single day. And yes, it's good for SEO, but the second thing is that we can use it for, because we're strategic on how we write, as we can reuse that content to nurture our leads, to working down the sales funnel, to have email circle campaigns, and I'm sure some of you in this room get all the time. We get to use that content to continue to nurture leads. And they may be bad leads, but we don't have to worry about it and take care of it. And we get to be that change that we seek. We want to tell people, hey, you should be doing this, you should be paying us to do this, but we have to be the first one to do it. We have to show people that this is what you should be doing, this is how it works. And we have the case studies, including ourselves, that say, yeah, this works and we're set. And our leads went from like about two to four contact forms a month to we get about six leads a week. Now not all of them are qualified. And in the next steps we're going to figure out how we get, how we filter those people out. Those leads are coming from what are called gated content. So we have all that content. You take the best of it and you put it behind a pay wall. Just give me your who you are.  And we will sell you all the data you want to know. And can anyone tell me what the first question anyone ever asks you when they want to talk about building a website? Anybody? How much does it cost? How many of you are afraid to tell us about how much your website costs? Why? Do you know how much your competitors charge for a website? So they know how much you charge, right? But below the threshold if you tell them hey this website costs this much and they're below the threshold you don't have to deal with it. You can have email marketing do the thing because if they're really passionate about what they want and they're like man I can only four or five thousand or two thousand or a thousand dollars but it costs for you a thousand, you know twice that. If they really want to work with you they really want to, they'll find the money. If they're passionate about their business and this is serious for them so if you continue to nurture them through automations, you know workflows, things of that nature you personally as the business owner don't have to do jack. Just let it go and if they're happy if they want what you have they're going to come back which is what we're talking about remarketing to them and there's two ways to remarket at least for me one is the email marketing what I'm talking about the second thing is many of you are not using Google AdWords remarketing for your business you should do that now and I'm going to let you in on a secret it's super damn cheap really cheap we set a budget of about two dollars a day and it never maps out our budget AdWords costs can be a couple thousand dollars a month for search ads our remarketing ads costs us virtually nothing the point is that it's a brand it's remarketing it's a brand reinforcer every time you go to another website you see that military ad and I get people all the time that complain we do you please lay off I can't go to a website where I see your stupid green ads no that means I win you see my brand tough and this information can nurture those leads they really really want what you've got they're going to find a way to get the money to do it and we've already talked about automation and I'm going to dig into that a little bit deeper down the road oh right now WordPress is fantastic it's for the most part free but find some tools that are going to make you money that's that first step find that first residual money that you can help okay so it sounds bad it's like oh it's $100 a month what's that you build 12 websites in a year that's $1200 it's recurring you do that the next year it's $2400 a month this is recurring revenue that you can use to pay for a part-time developer to do your quarterly maintenance and you're still making money it's profit and then find good marketing tools because I don't know I kind of skipped over the point by the way SEO, PPC in battle marketing this is not that hard I literally taught myself my job by watching YouTube videos that's it took a little while spent a lot of time doing it this isn't rocket science if you can build and develop a website you can do SEO it's just not that hard and the beautiful part about WordPress is that it gives you so many great tools already kind of baked in Yoast being one of them and not plugging them because they're sponsored but seriously plugging them because they're sponsored they're for ongoing SEO it's super it's free and you get to learn some of those at least know the characters that you should okay where are my keywords they give it to you if you're coming from a custom side they don't have those tools you just got to know the information and that's where I think a lot of the people got this idea that search engine optimization is rocket science now I'm going to tell every client I'm glad there's no businesses in here that it really is rocket science but it's not and any if you are a single I just do this by myself I hope websites for small businesses if you can build that website you can optimize it and help them in marketing and what are some of the tools that we use number one is the reason I'm going to say it's a great tool is it makes you money again hopefully no businesses in here they have a model that allows us to charge more than what we pay for it so for a small business who's just getting started you take in speclet it gives you about five I think it's ten licenses and it's $79 a month look up this web it is a screen captures every visitor so you get to see how people are interacting with their website does heat mapping, does click mapping these are not only powerful tools for your user experience and your marketing elements there are also super cool tools to take into a sales meeting and go look at the cool we do how many of you have the other people that are giving proposals to give you all this information and data and so at $79 we charge our clients $79 a piece you get through five or ten of them you're making free money off of everybody else that profit is necessary because $790 a month or whatever is part of a payroll for another content writer now we can scale we can take on more clients we can make more money on Moz this doesn't make you money in that you can charge it for this but they're going to help you be really efficient on correcting your websites and making them as optimized for search engines as possible they're constantly croaking checking your website data they're doing all the things they're giving all these insights and the last one is Sharpsford this is actually a tool that kind of took us to the next level the thing that I had 30 days to prove that this works and I'm here talking to you now so obviously it did and it's an agency I don't know if you're familiar with HubSpot it's a big buzzword they charge a ton of money Sharpsford is a competitor in HubSpot and what it's basis is is that we are four agencies our pricing model is four agencies we want to help agencies grow we want the same functionality as Marketo part of HubSpot but about a tenth of the cost and they sell you you charge what you want we don't care so you can and anyone who wants a demo of this if you're interested in something like this you can see me afterward and I'll get you a demo from Sharpsford and I'll give the referral and send it off to our account rep and they'll give you a demo of the software help you understand the pricing model I won't really go into that but it's an incredibly aggressive pricing model to help agencies because once you for us once we've locked our clients into we give them so much data they know who visits they know when they visit they know their page they visit they know all this information and it's got marketing automation tools, email tools and one of the more important things for business owners is where my marketing dollars get spent marketing attribution and this tool gave us marketing attribution it says are you familiar with John Wonke he was a he was like a magnate in retail in the turn of the century he said half my advertising dollars are wasted, promise I don't know which half what some of these tools that are going to help you as a business and then also help you grow as a business because you can resell this to other people is that you get to tell them this is where your marketing dollars work and oh by the way if they're all coming from organic leads guess who's good look at what we did for you you should stay working with us and pay us more money so kind of wrap things up in conclusion if you don't know who you are then how can your customers ever know who you are and how are they going to know that they're a good fit for you and you for them and if you're living project to project how can you grow safely it's really hard anyone asking anybody who's been doing this for 6, 8, 10 years growing organically is very, very difficult without some sort of safety mechanism in the terms of monthly recurring revenues and if I can't stress this enough create content it's got so much value and then answer the questions that you have and filter out those that aren't qualified not everybody's a good fit for Bill Great Studios we know it of those 6 1 maybe a week is qualified enough to even get to the proposal level we filter out 5 of our leads it's not a good fit it's our they take the pricing and sell it out but then there are some that will come back 6 months later we know every page they visit and every time they visit they became a better they became the right fit and because we nurtured them we remarketed to them we did all those things and then when they found the money they were like oh this is a good fit now and then find the tools that aren't costing money none of the inspectors are free none of these tools are free but they make you money it's an investment not an expenditure and take a look at the tools take a look at the tools that you have and make sure they are making you money and that is how we are getting bigger any questions do you have a development side? can you charge the client package to mine separately? yep so the question was we have a development side we have a marketing side do we charge the answers yes do we sometimes split them out the answers yes we are going to do the thing that is going to fit the client the best a lot of clients are like I have this in my marketing budget and I am on a recurring basis and we want the two separate and then there are some that go roll it all into one X amount of dollars 15,000 a month or whatever roll it all into one and we have an annual contract to get that website one more question what is the difference between inspectors and there is a big difference Google Analytics tells you where they came from and Specklet says let's watch a video of that person doing that activity yeah so with the combination of start spring and in Specklet we can take your email address your IP address, tie them together, go to inspectlet and watch Declan go through our website and go page to page to page and just be totally creepy and you're looking at your traffic is there any tool that says on Sunday I might spike I might spike and wonder where does this traffic come from it happens a lot is there a way that you can figure out what caused that spike if you don't have those well do you have Google Analytics on the website do you have Google Analytics on the website I got Google Analytics yes it should tell you where that spike came from you should be able to and you say you see the spike and you go through the channels and you narrow it down and say Tuesday we got this spike with an extra 100 visitors than we normally have and then you narrow it down to Tuesday in Google Analytics and you say it will break down where that traffic came from and you can go oh it all came from Facebook from the day you set up Google Analytics it's tracking that data yeah yes sir did you find when you were at we saw in the postage that you could fit further for like email support email is terrible if someone wants email support it's 150 bucks an hour and we can help you as much as we can but generally we just direct them over to whoever the email hosting company is yeah and by the way when you say it's 150 bucks an hour for us to trouble to shoot this for you they generally will go get the free support from their email hosting yeah I guess at what point did you start subcontracting and you know just hired employees and did you still self contract okay so that depends on which side the development side we don't generally we'll do like a subcontract to hire kind of thing you got 90 days and if you're not an idiot we'll hire you also can you pass the drug test if you tell us yes we're definitely not going to hire you we don't hire losers but yeah it's it's our hiring process literally we'll generally subcontract a whole lot in terms of development most of our subcontractors come out of their writers we do subcontract some writing just because they mount that we write when you've got you know dozens of clients and websites and stuff that they gotta write where we literally can't handle it but if you're a marketer if you can write you can give me your resume it's fine that's what we're looking for another marketer that's my next question about writing so when you you said write write write on that slide so when you do all this writing is it around who you are or what you guys have done in terms of who you are and then and then when it comes to these content writers are because you might have a few of them don't look back in the class you might look forward are the different writers do you guys make like do they break different voices that are the core of who you are and you suggest that you hire a writer who doesn't write on our sales if you're that depends should you hire someone versus internal I think that external writers do a great job of explaining it to people who don't know like your customer base your customers like our we have people who write for us that they don't know anything about IT services but you know what a lot of servers are visitors they come to the website so it's a really big thing you know if you have just IT people talking about it they're talking a bunch of jargon that who the hell knows what that means so you're asking about write write write this is isopic art I'm not a designer this is a funnel this is our top of the funnel middle of the funnel I also have this handwritten to someone with cerebral palsy and that's the bottom of the funnel I hope I didn't really defend it I'm such an asshole you take all and then you have your personas this is person one, person two person three each of them have different questions based on who they are and where they are on the sales funnel sales and marketing funnel and back to your client what are the questions or if you are writing for yourself what are the questions that everyone's asking if they're a marketing person because your web design agency who's coming to you business owners marketing people occasionally the IT guys have got stuff to do with this job and they all have different questions based on who they are they all have different questions based on where they are in their entire process when they're at the top of the funnel that's why we have a pricing guide you're just starting to glaze through all this jazz the first thing you're like alright well I've got 5 grand for my business the owner to build a website I gotta come in here I gotta find out who's gonna I'm gonna chop off the people that I came for and I'm just going how much does a website cost and I go to a bunch of web designers and go oh okay these are the prices we have another thing that's called a marketing or a website buying guide and that's in the middle of the funnel that goes what's your process like cause that's usually the next question what does this all what happens your bottom of the funnel contact which is they filled out a contact form they actually said okay I can afford you your process is clean and clear I know what I'm gonna be going through alright I'm ready to talk to you and here's my budget give them some ranges ask them what their budget is cause people will tell you that they don't have a budget return it already it's gonna be the longest damn process of your life it's gonna be so long it's because they have to figure out where they're gonna find the money and find out how much it costs to do this so ask them their budget and the ones that say that it's undetermined you can kind of like skim around with you cause I'm not really sure you're serious someone who's ready to buy and how much money they can spend you don't go into car yeah you don't go buy a car but you know how much money you've got so of course at the bottom of the funnel ask how much money it costs and then the other content that you're writing is gonna be nurturing those leads in those different areas of the funnel they came in from the top of the funnel those other questions that are asked along that process answer those write blogs about them and then re-market that back um what development firms handle what oh sorry Mark your first how do you handle like potential competitive conflicts so you mentioned like IC services would you take another IC services company in the same space tell them we're loyal to those people we get people who ask us to do because they see it on our portfolio that you do this so they go oh now if they're we don't have an ongoing project that's one thing but if you're bought a website and if you're marketing yeah because the marketing are twice as much as the website is we build a website for you know we'll call it 20 grand by the time they're three years into their marketing they spend $100,000 marketing is way more valuable I don't want to ever miss that one I have a question kind of related to email you're recommending those two companies are you recommending other solutions for email or like how do you handle that I personally don't care but no I think we should that's asking Ian I think we usually say go use Google apps or someone like that basically because it's got the cleanest integration with some of the softwares that we use for tracking your email basically and it's super easy to put together it's cheap and it's cool I always panic when somebody wants to they're willing to move a website to the hosting that I recommend something cheap and crappy but then they have like an integrated email and they're probably not touching that I mean Google apps are even Office 365 are so easy to set up it's like I don't know why you didn't want to stick with that webmail plan but I don't know that's why they're always good to work and Gmail's five bucks are pretty easy I mean yeah if you don't have $5 to invest in a proper email service you're probably not a good fit to rebuild your website right I don't know anybody else do you guys have a warranty or a guarantee do you offer that to your client or to your customer in which case in terms of marketing do you develop a form or a warranty or a guarantee if they're not happy I will say from the website side I don't really have a warranty we have a 90 days fix whatever is broken we'll make revisions and things of that nature you're signing off on the website launch you're not going to break in 90 days in terms of marketing here's my warranty you give me 12 months if this costs you more than it made you you don't have to do this again and if you because it takes a good 12 months to really see a good return on investment someone's like well I'll do 90 days and it's not doing them work that's not how this works SEO doesn't work that way it's not let's optimize the page if you give me 12 months and it didn't make you money don't sign up again I've never had someone not sign up so but it's you're willing to we can show you that this works for everybody else this is work for other people so 12 month contract there's your warranty so do you target an armor or Michigan or I'll target anybody that's got an open checkbook check clears we target an armor in Michigan Michigan web design things like that if you're asking what keywords do we target I can't tell you that no of course I'm not competitive no it's fine and honestly if you use SEM you can find out what keywords I'm targeting it tracks all that information already I know what all my competitors are so you're customers are Michigan or I'm Michigan primarily we work primary I mean most of our work comes from the Ann Arbor Detroit area but you know we certainly apply it to other parts of the state anything else? alright cool that was fun


Jenkins, who's taken over for backup and recovery president for the division data domain and all the variety of products. Welcome to theCUBE with David Flawyer, analyst co-founder of wikibon.org. I'm John Furrier with SiliconANGLE.com. So let's just jump right in. Backup and recovery, a lot of changes have happened. California, you've moved to California. And you've taken over as president. It's a lot of pressure, but California's laid back. Is it, how are you feeling? I love California, first of all. Compared to New England winters, it's much, much nicer. We had a very nice winter in California this year, but I think in anything we do, there's pressure all the time. And I think when you think about backup and recovery, it was formed when we bought data domain, which was a hostile takeover. And when I flew out there for the first day to meet the data domain team, that's pressure. You've never met them before. You've invested over $2 billion in a business and you've never met the management team before. So right out of the gate, it was a little bit of a pressure cooker, but we've come through it pretty well. And Frank has moved on to, went to a VC firm. Went to Greylock. And then went to a new jobs CEO. So he's cutting his teeth back into another company. He's moved very quickly. I think he was at Greylock for a couple of weeks when he realized he really liked being a CEO more than a venture capitalist. And started last week at ServiceNow down in San Diego. So EMC World 2011 is about big data, cloud. Backup's a big part of that. And we saw the big tape ball at the mega launch, which we actually came in handy because when the Google Gmail failed, it was because of tape backup.  So tape backup's changing. But a lot of the virtualization technology, things like flash are becoming more strategic. And big data is obviously a big trend that's a thermal in the marketplace. What's your view of what's happening right now in the marketplace from your perspective? You're leading the division. What's your vision? Well, you know, I think one of the beauties of, you know, Joe showed a slide today of the transformation and disruption in technology. And no matter what it's been from enterprise storage to, you know, it was virtualization and now, you know, cloud and big data, every one of those waves, you got to protect that information. And information keeps growing. And he put up a slide that showed back up in recovery down at the bottom. It's a fundamental necessity that any customers, you know, operation, they've got to protect it. It's the lifeblood of their business. So for us, it's really keeping ahead of those trends, right? Understanding that shift when, you know, we went from, you know, direct attached into sand and, you know, storage started getting collected now to virtualization. What impact does that have on data protection? Big data, when you're talking about huge files, huge data sets, what can you do to make that efficient for protection? But what can you do to make it efficient to get back? There's a paradigm out there. Jim Bampos was on. He runs the customer quality, total customer experience.  He's trying to figure out customer loyalty, social data. We've heard him talk about reports going from hours to minutes, days to weeks, weeks to days. The backup business was old and slow. You put stuff out there and D-Dub came along. Now things are happening faster.  I mean, would it put a little more color in that? Well, you've got competitors like Symantec who are wanting to go to appliances or suggesting appliances are the way to go. It's, what's your strategy in that area? Is that? We're going to talk a lot about this at the show, but, you know, if you look at both Avamar and Data Domain, they're appliances, and they've been out there for, you know, four-plus years now. And we have our competitors actually coming towards it, I think, acknowledging it, that you've got to have appliances. So Symantec, who had been a software-only approach, now is delivering appliances into the marketplace. And, you know, we're going to talk about this. We feel, you know, today for data protection and appliance market is over a billion and a half dollars right now. We think it'll go up to three billion by 2015. And I think it's, you're seeing the shift where it was backup software and tape. Now it's really almost equal backup software and purpose-built backup appliances. You know, appliances are giving customers, you know, greater efficiency in their backups, but they're also giving them a way to enhance the recovery strategies that they never could before. And if you think about tying that in with VMware, you know, how are you moving your protection data? How are you creating multiple sites to recover from? To an existing, you know, VM or to a new VM, there's a whole bunch of new protection strategies that customers are trying to deploy. Appliances are a perfect, vast, affordable way for customers to get the benefit. And, you know, we've been happy that someone like Symantec's coming in and validating that for us. And we feel like we're on our, you know, this is fourth generation of the Avamar hardware, sixth generation of Avamar data domain, you know, it's been out for over four years. We're in a really good position from that standpoint. I was talking to Tom Whalen this morning, he's from Asperis Health. And he was very excited about some of the new features, particularly because that allowed him to use his traditional software, network software together with Avamar in multiple different ways. Is that part of your strategy, is blending these approaches? So today we, in our portfolio, we have five, actually we have five products. We have data domain, Avamar, networker, disk library for mainframe backups, and then DPA, which helps you manage report on your backups.  And so if you think about technologies like Boost that we announced last year at EMC World, this year with, we announced that Avamar and Data Domain can now work together. It's this idea of bringing the portfolio together in a simple way for customers. And where you'll see us go, long term is that, you know, Data Domain will become the repository for all our backups and data protection. And you'll see, and we're going to talk about this, the keynotes, Stephen Manley and I, Avamar and networker will continue to, you'll see them blend and overlap in many ways, whether it's the client side, what you're doing there, it's VMware integration, you'll see a lot of that overlap come together over time, and the portfolio becomes simpler for customers to deploy. We're trying to give them investment protection right now though, which is, you know, if you bought Data Domain and you bought Avamar, guess what? Now they can work together. Networker with Data Domain, you got boost, it can work faster for you, so protect that investment. But just looking ahead, if you've heard Tom talk about his problems, the major problems is backup window, there's traditional way of doing things. His was 18 hours, it went down to 12 and now it's down to four again. But I can see the look on his face is, he thinks it's going back up again. So what's the alternative to this? I mean, what about strategies which allow you to do backups on a snapshot basis every 15 minutes? Are those part of your strategy? We're going to talk about this. It's a good lead in for the keynote and I won't give it all away, but you know, there's a lot of customers right now saying, hey, can I just use snapshots for backup? And while there are some use cases where snapshots are good for data protection, if you want file level recoverability, if you run out of storage with snapshots, how do you expand that pool to work in? You run into a lot of different issues with snapshots as an overall backup strategy. We actually think coming from where we're coming from, which is a backup application which gives you the cataloging and the detailed information you need on the files, along with the efficiency of DDoop, we'll get to a point where you'll get those benefits you want on snapshots, very quick, maybe incremental change data, but even faster recoverability down to a file level or down to a piece of data level that you want. So we're going to, in the keynote, show you the limitations of snapshots versus the approach we're taking and I think we'll get customers quicker to a better path for data protection. Okay, it sounds a little defensive because there are some people out there with quite good solutions and semantic, sorry. One of them, EMC's got great snapshot capability so I actually see it coming together and we actually use, if you look at Avamar, it's got snapshots, we have it in the product so not defensive, I think, emerging of the things that people want when they use snapshots in a backup framework or a data protection framework is what we're trying to give them. I understand it's very slow to move these people because they're very, very cautious about moving. You know, I think the other, this is what we see in the customer base all the time and you may see this as, you know what, when you think about job functions and job categories in a data protection world, you've got backup admins, right, who are used to working with backup software and, you know, a tape or a disk based format to back up. Well, now you've got storage administrators who want to use snapshots, right, to protect that data and then layer on top of it, I've got VMware admins now who want to do things in virtual environments and then on top of it I've got application owners, big data owners and traditional database administrators who want real time access to information and protection strategies and where it was very simple, you know, an application created some information, you know, the storage guy stored it and the backup guy protected it. They are all on a crash course right now. Isn't this a big time of inflection though? We, huge. That really there is an opportunity out here for some totally different ways of thinking about all of this. That's where we want to get offensive rather than defensive. We think we have light for these people. I was thinking that you needed to be a more aggressive because if you aren't, there are a lot of people out there with some good ideas out there. You'll hear this in the keynote. We really talk about those four job descriptions, what's happening between them and how our technology can help them all create a better IT service level for the business. So, you know, again, I think bringing this portfolio together and simplifying data protection for the customer base, they're asking for that. They're asking for help me, you know, do my job, you know, the way maybe I remembered it or the way I want it to go. This is things we can provide to them, we think with the portfolio. There's a lot of people coming after you.  I mean, they're trying to split off the archive, reduce that problem of the backup that way. Yes, and we view that as an opportunity and you know, I'd actually start out by saying, you know, if you look traditionally at backup and data protection, it was a market that Symantec for a long time had a, you know, large market share and a relatively slow moving market. We think it's a dynamic market. That's why we formed the division. You know, we've been growing tremendously and we think we're taking a lot of share there. We think customers are seeing that change. On the archive side, we view that as another opportunity, extension of backup and data protection. We announced the DD archiver in January. We had a great first quarter with it and we see these customers, as we've deployed this, we've seen application owners working together with backup and storage administrators to say, why buy a separate environment to put this data? Why, let's keep it all in one area. EJ, you were talking about the products kind of coming together, investment protection. How's the product market for you guys changing? I mean, appliances, as we're hearing a lot about appliances in other areas of EMC this week and around Hadoop, et cetera. What appliance strategy works best for you guys? I mean, obviously it works in backup. Talk about the product market. Are they coming together? Is it going to be pure appliances? Well, I think, you know, we look at- Purpose built, obviously it's working. Purpose built is working. It's growing phenomenally fast. Both Avamar and Data Domain are enjoying high growth. You know, we've looked at it and we will, for our business, you know, we have both today. We have them now talking to each other with the idea that Data Domain is really, we think the ultimate appliance for us for storing that data, for that protection data. And, you know, we're going to continue to evolve the Data Domain file system to be able to handle more workloads. And we think there's great extensibility there for it. But appliances are a foundational element of what we do for our customers and they like it. What about competition? Like, obviously a lot of startups come out over here. Starts changing their strategies from primary storage to, you know, disaster recovery, which essentially back up in recovery. So that's kind of an entry point for competition. How do you continue to have that insurmountable lead that just keeps on growing? And also you've got Oracle out there with their approach and their category. So how do you- I think, you know, again, we view it as a platform and we continue to extend the benefits customers get off of that appliance platform. So, you know, fundamentally the differentiating points are, you know, de-dupe and how you do it. Variable versus fixed. We think variable, we prove it every day and customers has been a differentiator for us in terms of efficiency. Replication. So now how do you take that platform and make it a DR platform and reduce the number of copies that you have out there and be able to recover quickly? Data Domains had replication first to market as multiple replication topologies that you can deploy and work very well. And then you add archiving to it. So we continue to like expand the uses of the platforms for the customers and, you know, the data comes- Do you think that vision is the right one though going forward because if data domain was very successful by just coming in solving one problem in the traditional backup mode. So if we add on the fact that you want to go to 15 minutes as opposed to a day, you want to include archive, you want to have applications, the ability for them to provide their own capabilities. Isn't all of that going away from that back it up once a day model to a very different model? Can data remain go that direction? Well, we continue to increase the scale and performance of every, you know, January was a new refresh of the DD line and greater performance and scalability.  I mean, they're never satisfied and that's a good thing. And, you know, we have not reached the upper bounds there. They want us to continue to push the platform from that standpoint, but they're the ones who actually drove us into replication. They drove us into, you know, archiving capabilities in the platform. And, you know, this ability to simplify their environments and their protection strategy is really important to them. The complexity they face is incredible.  It's, you know, get me what I need in a more simpler package. And, you know, so I think I look at the data domain platform and it's a relatively young platform and I think it's got, you know, a rich, rich road in front of it.  This is the second refresh of that line since we bought it in July of 2009. So they have really been, you know, pushing it hard. And customers, you know, keep pushing us to do it. So I feel really good about where we're at and, you know, again, I think, you know, the others who were incumbents in this market maybe are flipping and trying to follow in our footsteps here. Cool. How's the cloud and big data theme resonating with you guys? Obviously, your business is, you know, some would argue mature, but you're still seeing massive growth that's changing. But how does cloud and big data impact you? Is it on the integration of the products? Is it additional management software?  I mean, obviously, big data, you're backing it up and recovering it, but how does the big data meets cloud theme affect your group? I think we probably have to do a better job of saying how we play in those because the beautiful thing is it's huge growth and information that needs to be protected. So we do have a play. You know, we vary from just the tactical, which is, you know, work with the VCE sales teams, find out where V blocks go in and guess what, we're going to back them up to, you know, what, and the driver for us really has been virtualization, right?  And that's been the entry point for us with technologies like Avamar to say, look, here's how we can, you know, take an image back up very quickly. Here's how we can help you recover granularity very quickly so that you hit your uptime, that you honor your recovery levels. So, you know, we've been laser focused on virtualization and VMware. The nice thing is they're very close to us in Palo Alto, we're in Santa Clara, so we have, you know, great working relationships and we do a lot with them there, but, you know, virtualization, cloud, big data, all mean big backups or big protection and we've got to help them, you know, do that efficiently. It's like you're in a market that just never peaks because I don't think data is going to be going down.  They have a little meter here in the blogger lounge that says, here's the data passing through the show. I see we're contributing part of it with the broadcast here. Well, thanks for coming on theCUBE, BJ. We appreciate it, congratulations on your new role. Got a great product group over there. Thank you. And a growing market, congratulations. David, great insight, appreciate it. Thanks for coming on theCUBE.


Additive manufacturing, AM, also known as 3D printing, has revolutionized the way we make things. AM allows us to create complex shapes and structures that were previously impossible with traditional manufacturing methods. One such method is wire arc additive manufacturing, WAM. It is capable of producing large metal parts at high deposition rates, making it ideal for industrial applications. Research into WAM has been ongoing since its introduction, and many advances have been made in terms of process development, material selection, and post-processing. Additionally, there has been much progress in the area of certification and non-destructive testing. Despite these advances, there is still room for improvement, particularly in terms of part quality and reliability. Overall, WAM is a promising technology with great potential for industrial applications. This article was authored by Tiago A. Rodriguez, V. Duarte, R. M. Miranda, and others. We are article.tv, links in the description below.