Tag: Google Developers

Categories
Online Marketing

Accessibility with Marcy Sutton – The State of the Web

”. My guest is Marcy Sutton Head of Learning at Gatsby and former Developer Advocate at Deque Systems and today we’re talking About web accessibility, Let’s get started: [ MUSIC PLAYING ], So Marcy thanks for being here. What exactly does Accessibility mean MARCY SUTTON To me. It Means building websites that include people With disabilities, both building for People with disabilities and with people With disabilities, including them as Stakeholders hiring them to work on our teams.

Paying them for their work to review things. For accessibility and give us feedback Along the way, RICK VISCOMI, So when a Website isn’t accessible. What’s at stake, MARCY SUTTON A lot! If you think about how many Services are moving online if accessibility isn’t Built in then, it could present Barriers for people with disabilities, where They can’t use the service They might give up and Leave or worse, it might cause harm to Them if they have something like a traumatic Brain injury or seizure risk So there’s actually Quite a bit at stake if the web isn’t accessible, RICK VISCOMI, So even with The Domino’s lawsuit recently that came out where They lost their appeal.

Do you think that Websites will actually have a push towards more Accessible websites, especially now that lawyers Realize the legal risk MARCY SUTTON In The United States legislation can certainly Help and people can lean on the Law in this country to enforce their civil rights, So having rulings like The Domino’s ruling could potentially Help since there has been an absence of rulings, In favor of including websites under the Americans, With Disabilities Act, but I think there will be More to read in that space I have seen and read and Heard about companies looking at competitors, That have been sued and sort of feeling like Oh, maybe we’re next, so there can be some Market pressure, if there are legal actions being taken And if that’s what it takes, To make something accessible, then I think that’s moving.

In the right direction, RICK VISCOMI, Where do The breakdowns typically happen when a website Becomes inaccessible, Are the managers just Not buying into it Are the developers unaware Of the importance of it, lack of developer Tools all of the above MARCY SUTTON, I think It’s mostly an education issue and awareness, So to sort of try and Solve this problem, I advocate building a Culture around accessibility, so that everyone at the company Is involved and invested From project managers to Designers and developers, we all have a part to play in Making the web more accessible – And it is true that A lot of people just aren’t aware of the Impact that they could have There’s also the misconceptions That accessibility is costly and maybe not worth it.

It’s too niche of an audience, But actually it can improve. Things for a lot of people, If you think of it in Terms of inclusive design, the benefits that we Put into our websites like keyword, support, improving Contrast and font size those can help a lot of people, So it’s definitely worth it. And it’s easier and less costly. If you do it from the beginning, RICK VISCOMI. Is it something –? 10 % of the population has Some form of disability, so it’s more than niche, It actually affects A lot of people, MARCY SUTTON – I think it’s More than that, actually one in five people – RICK VISCOMI, Oh wow, MARCY SUTTON And the range of Disabilities is pretty wide, so there’s all Kinds of scenarios that people can be Browsing your website and they might have situational Or temporary disabilities People are born With disabilities There’s a whole spectrum of How people use the web that’s really kind of beautiful And if we can Embrace that, like we did with responsive Design and letting go of some of that control.

Over pixel perfection and how the user actually Visits our website there’s some real opportunities. There to innovate and make things that are way more robust, RICK VISCOMI. What did you Mean by situational disability, MARCY SUTTON, If You break your arm if you have a baby in one arm. Or a cup of tea or coffee, you might hold your Phone in a different way or have to switch arms If you are born with Something like that, you might permanently not Be able to use your arms, And so you have to use other Input modalities like voice, or maybe you use a joystick With your mouth or something And so there’s new Devices and ways of navigating that don’t rely.

On the default of perfectly working limbs and the abilities That most people, think of So there are some Opportunities and people are pretty resilient. They figure out ways. To navigate the web And if we can Support them better, then that’s pretty awesome, RICK VISCOMI That Reminds me of Android Auto, where, if I’m driving My car, my phone, is not necessarily a thing. I’m putting Right directly, in my face So their way of Interfacing with devices changes entirely depending On your situation, MARCY SUTTON, Yes and a Lot of those technologies were developed for People with disabilities, so it’s worth Considering that, maybe some of the things that We appreciate, and we can use every day were invented.

For people who needed it, RICK VISCOMI, I want to go back. To something that you mentioned earlier about having Users with disabilities, or even people with Disabilities on your team, as part of the Development process, How can you implement Accessibility as part of the Process in a way that ensures that the website’s Going to be accessible, MARCY, SUTTON Well, Certainly including people on your teams to be Stakeholders and provide feedback in regular intervals.

That would be the best way. Is to have people embedded on your teams who Have disabilities mainly because they Have experiences and perspectives that, as Able-Bodied developers, we just can’t make that up. It’s not your lived experience. So having that feedback, all the Time would be truly valuable And people get to Work on your teams and you pay them for Their work and I think that’s a really good way to go: RICK VISCOMI, How about Part of the design process, If a website, for example, Is built to be entirely using Canvas or Flash or Something if people have a specific technology, In mind where it’s just never going to be accessible, How can you actually prevent that from happening Where, in the design Process, do you actually make those decisions? To be accessible, MARCY SUTTON, I think Having some requirements about how users should be able To navigate the site should definitely start in design, I mean hopefully you’re Not getting too locked down on a given technology, — RICK, VISCOMI Hopefully not Flash MARCY SUTTON — in The design phase Yeah Flash no way But Canvas –.

There have Been whole websites built with Canvas And accessibility Unfortunately, was an afterthought in A lot of those cases – And we do have some Standards for Canvas that are better than They were four years ago, but you still have To re-implement a lot of native Functionality that you would get for free if you used The DOM or the Document Object Model RICK VISCOMI. Are you referring To the Accessibility Object Model, MARCY SUTTON, No, So with Canvas.

If you Provide fallback content, there’s a method called Draw focus if needed, You can pass off some Of these interactions from the two-dimensional Canvas Which is essentially a bitmap to that fallback content. And try to create some sort of a Semantic experience, but that’s a lot of work And if you can use the Document Object Model which does feed into what’s. Called the accessibility tree –, which is a fancy Term for a structure with accessibility, information – –: you can do a lot and Communicate to users of assistive technology, What’s going on on the screen, RICK VISCOMI, What’s the Current state of accessibility in developer tools, Either in the browser or as part of testing MARCY SUTTON, Pretty Great actually From when I got started as a Front-End developer everything for accessibility in terms Of this accessibility tree that I mentioned all Of that information was sort of hidden Under the hood And you had to go, Crawl through the Dom and go look at what was on The page and sort of just know what was going on there And now we have developer tools.

Like in Chrome and in Firefox, and it’s amazing how much you Can learn about accessibility through those tools? It would be great to Have more but we’ve come a really long way. Both with built-in dev tools and browser extensions, And automated tools, so I think the future is pretty Bright in terms of tooling RICK VISCOMI, What was your Experience with axe-core and what did it do? Marcy SUTTON, axe-core Is an accessibility API written with JavaScript? It’s an open source library that I used to work on full-time And it’s used in both Lighthouse And Accessibility, Insights from Microsoft, so it’s sort of An engine and a common rule set for testing accessibility And its used a lot of places.

It’s pretty cool, There’s other APIs. As well like WAVE and some others that aren’t Coming to mind at the moment, but it’s nice to have a common Set of rules and the engine that people can Count on and they can use it in different ways: Such as in browser extensions and in automated tooling To use a common rule set so that some Testers on your team aren’t using a different set. Of rules than the developers, for example, Because then you’re working Off two different sets of requirements, and it can Be hard to meet in the middle RICK VISCOMI You had Mentioned that axe-core’s integrated with Lighthouse The HTTP Archive runs Lighthouse On 5 million websites, so we can get some Of that analysis from axe-core aggregated To the scale of the web, I actually have a few stats, So 22 % of web pages tested Passed the color contrast audit from axe-core 50 % of pages are passing the Lighthouse image alt attribute being present audit, So it’s kind of surprising To see how low accessibility adoption is in certain Areas of the web and having a tool like Axe-Core is just really great to be able to get That visibility, MARCY SUTTON, Sadly It’s actually better than I expected RICK VISCOMI That Is pretty sad, MARCY SUTTON? It is sad Yeah, it’s depressing.

There is a project from WebAIM Called The WebAIM Million, where they ran the WAVE automated tool. Against the top 1 million home pages – And that was also a Very sad set of results because, as an industry, We have a lot more work to do a lot of work to Do to make that better Tools are helpful. In highlighting some of these low-hanging fruit, Things that we need to fix. But if we look at It in aggregate the picture is not very Pretty at the moment, RICK VISCOMI You Co-Authored “ Smashing Book 6” with your chapter titled “ Accessibility in Times of Single-Page, Apps.

”. So in what ways do accessibility, And single-page apps not play well together: MARCY SUTTON, Quite A few, unfortunately, I mean all of the Basics of accessibility apply if you’re building A website that’s heavy, with JavaScript So things like image, alt text and color contrast, But when we have this Javascript layer, that’s taking over a lot of The interactions that would be happening, In a web browser, we have to do a bit more To support users who are navigating with Assistive technology and using the keyboard Things like focus management, making announcements Using unobtrusive motion, If we’re using a Lot of JavaScript to try and delight Users, we have to try not to cause Harm with those But I’d say, probably the Focus management piece is the biggest Thing that we have to handle because If the browser is not refreshing, the page When the page changes a user using a Keyboard might be stuck in the prior part of The screen, or they have no idea what happened – If they’re in a screen reader or something So we have to manage Their experience going through the Application and that can be pretty cool.

Actually, I think it’s another area, That we can innovate And I’m hoping that frameworks And potentially browsers could help make this easier, So that would be a good space. To try and move the needle a bit to support developers without Them all having to re-implement all of the same things: RICK VISCOMI, Even kind of More of an old-school UI component, like modal dialogs Has its own focus problems? Can you describe some of The accessibility issues with modal dialogs and What’s being done on the HTML standard side to fix that MARCY, SUTTON Sure yeah, So modal dialogs are An example of some of these same Things I was talking about with focus management, So you have a layer that Opens up over the screen, It probably has content Behind it, maybe a screen curtain to gray it out When that modal opens, you Have to send focus into it, so the keyboard user Or screen reader user is in the right.

Part of the page they’re not left behind The modal window, So that means that you Also need to disable any interactive content. Behind that modal window and that part can Get pretty tricky You have to do some DOM Walking potentially set aria-hidden and tabindex On interactive controls and most people are not Going to do that DOM walking It’s hard. It’s expensive performance, Wise and you have to do it –, you know every time the modal Opens walk it down and –.

It’s like you’re doing it. In inverse both directions, So what would be great Is in the standard space, if we could have Something like HTML inert. It’s an attribute that Was proposed a while back, I think it was at Risk of being removed – and nobody is convinced, That we really need it. This is me officially Saying yes, we need it because the alternative Is a lot of DOM walking that, frankly, very little People are going to do So.

What that would do for us Is make it a lot easier to set a Boolean attribute in Html to effectively disable whole subtrees of the HTML Dom And that way when we send focus into a Modal, we don’t have to do as much in the background. It helps to have Sibling elements, so maybe the modal and the Content behind it are siblings. That way, you can just turn Off all the other content, So that does take a bit Of work from the developer to structure their DOM that Way, but that attribute would solve a whole Lot of pain, as well as the dialog element in HTML, That’s another one.

That’s At risk of being removed, I think it’s Firefox At this point that we need to implement dialog That could give us some of this Behavior for free, like focus management having a Semantic HTML element that would tell users of Assistive technology that it is a dialogue, So there’s some Patterns here that — to have every Developer in the world have to re-implement the same Things over and over again, it seems like we should Have some more primitives for making that easier, RICK, VISCOMI Yeah That sounds super important MARCY SUTTON And complicated [ CHUCKLING ], RICK VISCOMI, You’ve advocated In the past, for something called an accessibility, Statement, What is that, and why is that? So good for accessibility, MARCY, SUTTON, Accessibility, Statements are great tools, no matter what kind of a website You’re making, whether it’s with heavy JavaScript or not So an accessibility, Statement is generally a page on your website.

That’s easy to find: maybe it’s linked. Your website footer, and it has things Like what you’re doing to improve accessibility, Maybe what level of the Web Content Accessibility Guidelines? That you’re aiming for It’s nice to have that Goal and that target whether or not you’ve Actually met it, but you have to keep actively Working at that to improve You can also collect Any accessibility, tips or information about Keyboard shortcuts or ways to use your website For accessibility and ways for users To contact you, That’s one of the Most important pieces having an affirmative Statement that says: hey, we might not Be perfect at this, but we’d love your feedback.

And get in touch with us And if people do Act on that feedback, So it’s opening That conversation to bring people in and Make them feel included and give them a way To give you feedback, Because a lot of These websites that have glaring Accessibility issues: we have no way to contact them, So you might see some tweets Of people calling out companies because they can’t use the Website or the service, Maybe an update to the Website or application breaks, what used to work? So if you have That statement it gives people a way to contact You in an official blog so that you can act On that feedback, RICK VISCOMI, It must be really Reassuring to go to a website and see that they actually Care about accessibility, MARCY, SUTTON, Absolutely RICK, VISCOMI, So What resources would you recommend for Web developers, who want to learn more about Creating accessible websites, MARCY SUTTON, So many –, The A11Y Project, Is really great? There’s an accessibility, Course, from Alice Boxhall and Rob Dodson at Google, on Udacity, I have a page on my website.

It’s MarcySutton.Com, There’s a web accessibility. Resources guide there and I collect things like Books and tools and articles and things that I refer to a lot There’s quite a bit out there. From companies like WebAIM, They have really great articles Deque. My former employer has A thing called Deque University: They offer free Accessibility, training to people with disabilities; Which is really great So there’s definitely a wealth.

Of information out there Just getting it to the people, To solve this education problem is sort of the gap that We need to figure out RICK VISCOMI And how About No Mouse Mondays, or what do you call it? Marcy SUTTON? Yes, I released an npm Package this week to sort of put a tool in the Hands of developers to turn off the mouse cursor for everyone, It was sort of a Joke but it actually could be useful as a Dev tool so something to pull into your Project maybe one day a week to actually have a No mouse day of the week, RICK VISCOMI, That reminds me Of 2G Tuesdays or something to get the feel for Slow performance, MARCY, SUTTON, Yeah, RICK VISCOMI.

I think That’s a good idea: MARCY SUTTON Yeah, It’s sort of a Chaos Monkey Approach to things of you know, if you Unplug, your mouse or don’t have that capability. How resilient is your design? Can you actually use it And some of the most Glaring accessibility challenges I see are with color Contrast and a lack of keyboard access, So if we could Somehow, culturally, build in tools and processes. To get us thinking about that, that would help So the No-Mouse Mondays is the First experimental version, but I have plans for it: RICK VISCOMI, It’s a good idea, All right Marcy.

This has been great Thanks for coming on the show MARCY SUTTON. Thank you. So much for having me RICK VISCOMI, You Can check out links to everything we talked about? In the description below, Thanks for reading and We’ll see you next time, [ MUSIC PLAYING ]

 

Categories
Online Marketing

What’s new in Material Design for the web (Chrome Dev Summit 2019)

The first update is the material theme builder tool on glitch. The tool itself is a self-contained application that showcases each of the material components with prompts to update the base theme shown. It helps teams to leverage the three subsystems of theming within material typography shape and color.

The tool uses SAS variables to show users how to adjust an interface style and make their own brands shine by changing just a few lines of code within a theme file. For example, color can be adjusted via a series of variables, such as primary secondary background and surface colors. These compared with on colors, which represent the text color on top of a variable background, shape, customization, can be made for three component size classes, small, medium and large components.

Small components include buttons and input, medium components include modal’s and dialogs, and large components include menus and drawers, there’s a great shape tool on material diode to help you visualize. These changes on our components before applying them to your codebase and finally, we can adjust typography through the generalized MVC typography variable or through SAS maps that allow you to customize individual typographic levels, such as having a separate, wait and fought family for primary headlines, rather than The body copy in the end, your theme could look something like this.

This is just one example that comes from Google developer days in China. We’ve made thousands of themes around the world so far so head over ticklish. To add your own, we’re also working on a set of guidelines for adapting dark themes, using material components, for example, and a dark theme. Google materials, color palette reduces intensity to mitigate visual vibration or strong color contrast against a darker background.

Instead of solely adding drop shadows to illustrate elevation and depth and a dark theme, a lighter overlay is applied check out the material Daioh guidelines for more design guidance on how to transition your designs to a dark theme, considering contrast, depth, desaturation and limiting colors for accessibility To help with this transition, MDC web has released a set of typography theme variables that respond to background shades for text styles.

You can now also use the theme variables in three different ways. The most supported and robust technique is, with our SAS styling API, using variables and mix-ins to override styles. You can also create CSS classes, with the variable names to style them by and finally, for modern, browsers, CSS custom properties can be used for the theme styling. We’re still working on full support for custom properties.

At this time we provide so many options, because theming should not be limiting. You can extend the theme builder to make your own theme as unique as your product leverage our code and build on top of our material components to quickly and easily get started building product on the web. The next new feature and material is data tables. You asked we listened our designers consider these three principles when it comes to data tables.

The first is that data must be organized in a meaningful way. Data tables should also be allowed for user interaction, and, finally, those interactions should be as logical as a structure of the data table itself. Data tables come with some basic default functionality such as row selection, but you can also hook them up to other components such as these filter chips, check out the links provided below for a deep dive into how you can actually implement data tables in your web projects And combine material components for orchestrated actions.

We also have a new density subsystem option in material material design, uses low-density space by defaults with large tap targets and margins, but offers high density space when it improves the user experience. We brought density into our system for the following reasons: the first is for scan ability, scan ability is improved for data heavy applications with a higher density interface. The second is that dense UIs may actually help users focus by reducing space between Asians and, finally, more content is available to the user on a single screen in more high-density applications, whether or not to increase your us density can be determined by how users interact with A component components with high density, enable users to process and take action against large amounts of information in a more manageable way.

Lists tables and long forms are components that benefit from increased density, but density shouldn’t be used for every component. For example, don’t apply, density to components that involve focused tasks or alert. The user of changes such as snack bars or dialogues, applying high density to alerts reduces their ability to command attention. A series of new styling classes on the web allows for us to access density in three ways: the default component size a comfortable size which provides a higher density display, while respecting minimum touch, target size and compact, which may be used for pages.

With a lot of information but may be inappropriate for user actions, materials at i/o got an update as well. We now provide a cross-platform view of all of our component offerings on a dedicated components page. This page allows for quick access to components and an overview of cross platform. Availability should make it easier to navigate our product and implement it, for your needs, check out material, do slash components to browse them all yourself and finally, we’re kicking off a new initiative.

This year to focus on supporting material across web frameworks, why we know that most of you are developing web apps using a framework and the open source community has stepped up immensely, both in components for some of the most adopted web frameworks out there. We want to celebrate this work and help bring the material design vision to life along with our open source community. So many of you have already built your own wrapper libraries using MVC, webs components, foundations and adapters and we’re working more closely with the rest of the open source community as well.

We’ve updated material to i/o to link to three of the most popular open source component. Libraries they’ve already uncovered bugs in the material design guidelines and asked great questions, helping us to make material even better and we’re helping them to follow the spec and the material guidelines more closely as well. We look forward to continuing the conversation and working to bring the material design vision to every platform and framework, making it easier for everyone to use material design on the web.

There’s so much to explore and play with from theming to density, to data tables to new website features and our open source community. It’s an exciting time to be building of material, so check out material, dot, IO and the links below where you can find all the resources that I mentioned today can’t wait to see what you build material I’ll, see you on the web. You

 

Categories
Online Marketing

Accessibility Testing – Totally Tooling Tips

It’s good. Did you get a haircut? I did a haircut new accent, new new new. Look. You feel it’s good! It’s good you’re, looking better than before. You feel better than before. You’re, not mad. I am NOT no hi, I’m Rob Dodson, I’m a developer advocate on the chrome team, sure Rob just just sell, sell yourself. I mean hello and also uh you’re selling stuff, also host a little show on the chrome Developers.

Youtube blog called alley cast world-renown. Is that what we’re calling it yes well world renowned, I see people around the world have renowned it. I think, okay, all right, believe what you want to believe, but today we’re going to be talking about accessibility, audit, Angley right. What is your workflow for that? Look? Like yeah, so over here on, my laptop I’ve got a site that I’ve been working on.

This is called lifestyle. It’s got some cool like hipster photos and stuff, like that people have styles of the accessible and famous all right yeah, and what I usually do when I’m you know working on improving the accessibility of a site is, I will use the new audits panel in chrome, Dev tools, which is very very nice if you go to create a new audit, you’ll, see that you’ve got like a number of options inside of there, so you could look at PW, anus, best practices, etc.

One of the topic areas is accessibility, so you can just go run, just an accessibility audit. If you don’t, you don’t feel like doing the other tests. Here’s one that I ran against the page and it’s doing pretty. Okay right. It’s got on anyone not so bad, but there’s definitely a few issues that we need to fix and in particular one that I see a lot is, is color contrast, so you’ve got your your your foreground text.

Maybe is a little too light on the background. Color one of the nice things that we can do with the audits panel is we can actually dive in and we can see which elements specifically have failing contrast. So here I can see that I’ve got this like product card price element and if I click on that and stretch this out a little bit, you can see. It’ll take me over to my elements panel and I can actually scroll in to view the actual element that is failing just this price right, y’all, nice and it already selects the domnode for you, that’s cool, yeah, and so one of the things that’s really helpful.

Is you know really this is this? Allow me to sort of quickly identify this node, but one of the things we’re working on, which is over here in Chrome, Canary right now, is actually a color picker. That will make it a little bit easier for you to fix those contrast issues. So if you’re in something like Chrome Canary, you can go into Chrome, colon, slash, slash flags, you can look for the word: developer tools, experiments, oh you’re, in flags and experiments.

You look like to live dangerously, oh yeah, oh yeah, so dangerously, so we enable the developer tools, experiments right. We step into the future, it’ll refresh our browser for us. We can go back over here pop up in as the dev tools click on this little Settings. Menu good, where it says experiments da da and here we can see, we’ve got accessible the inspection as well as color contrast ratio line.

So let’s see what that does so we’ll go, find that same node. That was giving us problems over here. Inspect it and then we can see in our Styles panel I got a little color sread and click on that and you’ll see that there’s this little line inside of my color palettes. This is actually a sea mmmmm-hmm. This was actually telling us like. Where are our colors needs to be in order to have sufficient color contrast? So, since we’re above the line, we get this little warning that says, we’ve got a little contrast.

I happen to know that this is not like the final look for this piece of UI. It’s still being iterated on, but it’ll be something like this, where you’ve got a line and you can sort of tell which side is the good side of the bad side. So I can actually just drag this below the line. That warning goes away. You can see over here. It’s also like updating my element live in the document and it’ll sort of tell me what the good color contrast ratio is.

So I can just grab that value right off here and then go back and just fix it in my CSS. That’s pretty neat, so I was trying this out the other week and something that occurred to me was that you know if, if you use a developer, realize that the contrast is a little bit off, do you need to go back to your designers at that point, And say: well, is this okay for our brand and thing is that’s when they should be factored in earlier on in the process I ideal.

Yeah like this is there’s, there’s definitely other design tools out. There there’s, I think, there’s plug-ins for sketch, and things like that, which will also help you look at the color contrast for your designs and make sure things are not too low. Contrast, anytime, you can catch that earlier in the process, make sure all the designers are on board and all the stakeholders are on board and and that sort of like makes it easier when those things come downstream for folks to implement it, and it doesn’t kind of, Like a contentious issue or anything cool, that’s that’s awesome.

The house audit also had some other accessibility stuff in there as well right. So it had contrast. No, I was highlighting all the tributes to alt attributes, yep yep, so yeah. If we go back to that report, let’s see here so yeah a few of the things that that this site was failing. It’s missing some alt attributes. We’ve got form elements that don’t have associated labels: the big problem there is you land on a control, and maybe it says that it’s a button, but it doesn’t tell you what kind of button right is it the you know, sin my social security number to hackers Button, I don’t want to click that button right.

I want to make sure that I’m clicking the right kind of controls. I know what I’m interacting with we’ve got over. I think 32 tests, or maybe even over 35 tests in in the lighthouse accessibility checker here and under the hood. These tests are all based on a library called axe core which is made by some folks at a DQ so yeah. We we work at the axe, core library we leverage to the test from inside of it and we sort of integrated into dev tools.

You can hop around and inspect the notes. Real, quick, that’s awesome, so this is great again for locally checking on your accessibility issues. What about CI and continuously monitoring your accessibility? Is there a story for that too yeah? Absolutely so the the lighthouse library itself can be used as a standalone node module. So you can pull that into your CI process. If you want to do that or alternatively, you could use the axe core library that is powering these tests and you could use that standalone.

The the nice thing there is, you can sort of decide which accessibility tests you want to turn on or off, depending on sort of the criteria that you’re trying to meet very cool. So we’ve got lots of great tooling for accessibility, auditing. What about docks or education material? Yes, we have that as well. So if you go to developers.Google.Com/live Sunda mental, slash accessibility, we have a whole section there on getting started with accessibility for the web, and it also includes links to our Udacity course.

So that’s like a multi-week kind of hands-on experience where you actually like build stuff and read a bunch of articles and kind of get up to speed on accessibility, very cool yeah. I feel, like my lifestyle, is more accessible, already yeah cool yeah, thanks for having me today, yeah thanks for coming down awesome yeah people should check out ala cast: oh yeah, oh yeah,

 

Categories
Online Marketing

Developer tools for designers – Designing in the Browser

Today, we’re going to dive into the tools that browsers give us to quite literally design in them will be using chrome, dev tools, a material design as our baseline to see where we can adjust and play. Let’s dive in like design tools, developer tools, help designers and developers build test and debug in the browser.

Luckily, there are a ton of great tools and plugins that make this process of prototyping iterating so much fun. There are tools from everything from color selection to finessing animation, to ensuring a nice user experience on a variety of devices and even testing load at various network speeds. Dev tools help us not only to see under the hood but to also make changes and decisions and see what those decisions look like in the browser, the medium in which we’re delivering the final product.

That’s why the series is so important as designers. We have to work in this medium and use it to our advantage to really have the most control and power over our designs and what’s the first tool that we need inspect element. This is the primary entry of dev tools. Inspect element is often how I open up dev tools just by left-clicking, an element and finding that inspect item in the drop down, inspect element lets you select an elements and get information inside of it.

This information includes the Cascade of styles, styles on various States, computed values, classes, shape and size and more you can even change the text content in order, the Dom of the element within the elements panel. You do so like this, so here I’m going to left-click on this heading and hit inspect, and now I’m opening up this information here – and this is the elements panel you can see. The sizing here is 350 pixels by 32 pixels and Heights.

We have the class name here of headlines, 6 and all of the class styles inside of that. You can see here that this Moz OSX font smoothing, is not being applied in favor of the WebKit font smoothing. So it shows you which styles are being applied and which ones are being applied. We also can see here this h1, so we’re getting styles from the h1 as well as the clasp on top of it, and it shows you which styles are being overridden.

For example, this font size of 2 M is being overridden in favor of a font size of 1.25 bream with the class MVC typography headline 6. There’s also a variety of element classes that I can play with here, and I think that this is a really great way to prototype. So inside of this, if I started typing MVC typography, we get an autocomplete evolve, the different type of graphic options, so you can just sort of scroll through and start to see what these would look like within here.

So you can see that headline. One highlight two aren’t actually making a difference and that’s because I still have MVC headline six selected, so you want to uncheck that and now we can see what the headline two looks like. So if you truly want to play with a baseline for the styling here, remove all the classes and then start to search the classes that are relevant to this element. So here we can see all the typographic styles and decide which ones make sense.

This also lets you separate your logic from your styling. Your logic is the date of the text content here. So this is a header one in this form fields element, but you can apply a class on top of it to style it. However, you want say we want to style this headline, one like a headline: five or headline six. We can do that and we can test that inside of this elements panel, I’m going to select the button now so here I’m just going to hit inspect on the button and it’s going to go right to that element, and we can see that this button has A few classes as well so right now we’re using the MVC buttons raised style.

But here I could select this outline style as well and put that in there. You can play with density inside of buttons, and these are all classes that I’ve just sort of playing with earlier applying them, seeing what they looked like testing this in the browser. So it’s a really powerful tool and there’s a ton that you can do by changing. Some of these Styles around you can reorder things in the Dom as well.

I’m going to just grow back into my UI here so say we want this headline. Maybe after the paragraph we could do that we’ll probably want to change that to be not an h1. In that case, you know make sure that your Dom still makes sense, but you could reorder things you could reorder the buns. You could reorder this remember this device text there and really just start to play with your UI in the browser.

So here you could even change the text of what this says: I’m finding this label here and now I can change this to always Pat disco, and now I’m checking I’m always going to Pat disco. This is a place where you can test our front language if you’re unsure how a piece of text will fit into an element on your screen, then you can test that and you can test this at various sizes. Let’s look at the color palette now.

In this example, we have a custom properties based theme playground for material design if you click to inspect the page and we’re opening up that panel and inside the HTML. You can see this route here with all the custom properties and their color values. So here we can start to play with what our colors look like. So if I want to change the primary theme color, I could click on that square and I have this whole array of color here that I can start to pick and choose and play with and see what that looks like in my UI.

Maybe I want like a bright paint color here. You can also change the color type, so here’s the hex code, if I click on these arrows here it changes from hex to RGB a to hsla and speaking of alpha. You can also use this alpha toggle to toggle the Alpha, which is the amount from transparent to full color and how much will show through to elma behind it. So we have all of these capabilities and another fun one.

Is this color palette, so in this color palette we get a base palette of colors, but we can also start to pick color from the page. So you see these page colors here were the initial page colors. These color variable is that the dev tools have found from the page as most proud colors on that page. So, if you’re working within a design – and you have a pallet that you’re working with you – can easily find the colors from that pallet inside of this dev tool here, there’s also the CSS variables that are being pulled out here that we can get the color values From and we can just start to really play with color in this way so say I want this to be a bright pink.

That sounds good. Maybe we want to change the color on that primary here. We can also change this color value. We can change the we can change the secondary color value, so we can change this to maybe a purple value and you can start to see how this cascades throughout the entire application. So now, if I scroll through, you can see that all the secondary values, like the check boxes, the switches.

This is all live code and we can see that this is in the browser, transitioned and transformed all these elements to be pulling in those colors in the drawer. Here we see a background on the active elements and that is also pulling from the primary color but being all but faded behind, so you can still see a contrast with the text on top of it. So by applying these color changed in the browser, you can really see what that looks like in various elements and in various states of those elements.

So let’s go back to the top up here and select this button. What we can also do in dev tools is figure out if something is accessible or not, which is a really great shortcut to have so here on the button, we have a color value on a background, color value. If I click on this color value, you can see that we have a contrast. Ratio of 8.5 point 1, that’s great. If we made that color value a little bit more closer to the background color that contrast ratio starts to get lower and you can see that that’s no longer accessible.

So we get a lot of help here when you have a color and background color within an element to help us make decisions on contrast and on colors that are accessible for our users. If we click this open, we can see where that’s accessible. So we can see that’s accessible for double a for a larger text and not necessarily for Triple A which means that we will have to have that white value for it to be triple a contrast, accessible and for this to work for our users.

Make sure that you’re keeping accessibility in mind at all times and you can use the color palette inside of dev tools to help you to do that, especially when it comes to color selection and readability on various elements. Let’s talk about the animations palette in episode 1, where we talk about motion on the web, we recreated this wringing button. So let’s inspect this element in dev tools and explore what that looks like behind the scenes.

So here I’m going to hit inspect on this button. I want to make sure that I have the button selected here and then in the bottom. Here we have this animations palette. Now, if you don’t have this, you can find it in this drop-down menu, this little kebab menu and you can hit more tools in the drop-down and then animations is the first item in that secondary drop-down. So that’s what’s going to bring up this animations palette for us so now, inside of here we see that we have multiple animations happening.

If I click open on those animations, we can find that on the button we have this grow animation, where it’s growing over time and on the icon. Inside of that button, we have this ring and I can actually toggle back and forth between here like this. Is a keyframe, I can go forwards and backwards. I can pause. I can play I’m going to pull this up a little bit here. So what I can also do is I can adjust the time stamps.

These are percentage based animations. So if I wanted to make this grow really long, this will break up the effect of ringing as it grows, but just to show you, I now have it sort of off-kilter. It’s ringing its ringing still sort of not changing its size, so you can start to really break things down here. I have it ringing very tightly in this section here. I could break that up too. You can move these around, so I can move it back and forth.

I can have this start to grow before I have the ring happening, I’m ruining this animation, but the idea is to show you that you can have animations that are separate from each other and then also test what this looks like together. So now I have it ringing off kilter from the size changes, but here, if you have a lot of animations that are complexed and you have to orchestrate them together, you can take a look at what that is what that looks like you can take a look At what the animations are happening inside of this element, so we have a box shadow change to as its growing and changing color there and then start to play with this start to finesse in the browser – and this is a really great opportunity for prototyping, because if Things are off, it’s a lot easier to see it visually.

That is, to try to read the code and figure out what’s a little bit off when those time stamps are different too. If you want to slow this down to get a little bit more of a finesse and detail here, you can also change the speed at which you’re animating. So here I’ve set 25 %, and I have this very slowly now, starting to grow and shake here. Starting to ring very slowly so this is another opportunity for you to adjust speeds and see where things are in a very precise way.

10 % is another speed option for very complex animations. Again, you can start to really get in there in the details and intricacies of these animations. Let’s talk about the device panel. Now I use this tool all the time and we’re going to showcase it. I’ve opened up the material dot, IO websites and I’m just going to hit inspect from any part of the page to open up dev tools, and here is that device toggle toolbar.

So I could also hit command shift M on my Mac computer, but anywhere that you’re using Chrome. You could always, let’s click into the browser, screen and open up dev tools, so I’ve clicked this open here. I have a few options. I have a responsive option, so I could see what this looks like at various screen sizes by dragging it over. You also have a drop-down here with some default devices like the Galaxy s5, the pixel to excel, to see what this looks like at various screen sizes.

We have the iPad pro here and you’re also able to adjust this from horizontal to vertical. So you can see what that looks like when you flip that device. That’s a little bit more dramatic on a phone here. So if you flip that you get a completely different layouts, you can also again use this responsive mode. You can even edit what the devices are that you want to showcase. So here in the dev tools, I’m going to pull this out and going to hit edit, and I have a bunch of devices here – you can add a custom device.

You can add devices that aren’t currently in your drop-down by default. So if you want to test, for example, on the iPhone 4 or if you want to test on the Nexus 7, I will now have these inside the drop-down. When I next open it so there they are iPhone 4 and the Nexus 7 somewhere in this drop-down right here. So you can see that that focal looks completely different than that iPhone 4 and that’s important for you to know.

As a designer. We also have various breakpoints here that allow for you to just quickly change between common sizes, mobile medium, large tablet, sizes, laptop sizes, and you get a percentage based visualization here, that’s scaled down to fit inside of this browser screen. So if you want, you can make this 100 % view you can make it a even larger view. If you want to sort of zoom into that, you can make it 50 % sort of fit in this area, and then you can see really large screens, 4k screens you’ve.

Even and if you don’t have a 4k screen, you can still test on those devices. Your design does change, based on the DPI of your screen and kind of is determinate of whether you have a Retina screen or non-retina screen, and that can also come into play when you’re deciding what images to send to your users. So if you want to test those, I have an example here with disco right how this high-res image and now inside of my dev tools, I can actually test to see that I’m sending a lower res image with the lower resolution browsers in my CSS.

I have a media query where I’m sending a different image based on the density of the screen. So here, if I have a high density, Retina screen, I’m sending a high resolution in and if I don’t it’s going to fall back to this low resolution image. So I can actually test this with a medium dpi screen inside of my dev tools, and this becomes really useful if you’re sending a lot of large images. And you want to think about performance for your users and for their devices.

And if all of those aren’t enough for you, there are some tools that you can use to extend these capabilities and make designing of the browser even easier. One of those tools is called this bug created by Adam Argyle. We’re going to fly over to him to have him explain why it’s so useful for designers right now. Hmm this page, I like the layout – I think, there’s a lot going for it, but it’s lacking some color.

Don’t you think? Well, let’s have fun and and try it out. Let’s make some color in here with this bug. All I have to do is launch it. In fact, I’m going to scoot it down off of here so that it’s not conflicting with the header and I’m going to start with the header. It’s just asking for a nice, bold color, don’t you think? What do you think of, like a purple, ooh, pink, a hot pink, I’m always down with hot pink all right? I’m actually settled that that’s great okay, you can see our guides tool is trying to help us make some alignment checks here, as we as we hover on other elements, you can get distance between them all right, but I’m also interested in changing this image up here And I’m going to drag in a new one.

Will I have an SVG icon here? It looks like this. Oh thanks for that that didn’t work out very well, but if I drop it up here, look at that. I replaced it. That’s kind of nice all right. So what about all of this these cards? I feel like they’re a little tight. I want to check. I want to check out their spacing here. So if I select I’m trying to select the card element in here and I’m having a little bit of a trouble because there’s so many elements in here look, I can actually select the elements inside of here.

That’s crazy town, but in order to get to these grid items, I’m going to select the parent and use keyboard navigation to help me get there. Someone hit Enter, which is going to select the first item as a child, so I selected the grid container. I hit enter and I selected the first one I hit command shift E, which is going to expand my selection. It’s going to find all the other elements to match.

I found them there. I still have the margin tool. So if I hit shift down twice, I’m going to add 20 pixels to the bottom, and that’s going to give me a little bit of spacing between my rows super neat. I can actually continue using this multi selection of I hit enter. I’m going to find that that each of these cards had a rapper element I hit enter again and I’m going to get the imaged container. That’s in the upper part.

If I hit tab I’ll find the next element in the layer tree – and I want to change the alignment of these, so I’m going to grab my flex box a line tool, I’m going to hit left and right and find a nice alignment and I’m going to Pick the center and I’m going to hit enter again and we’ll find that there’s a span inside of that container, and I want to change the text size of this. I grabbed the text tool I’m going to hit up on the the keyboard a few times here.

I’m going to hit command down to change the font weight and, of course it needs some hot pink. So I’m going to go over here to my color picker and grab that hot, pink from up top close out and see what I did and look at that. We brought some color to that page, really pretty quick and we’re able to just sort of express ourselves in a nice fast manner. That was fun. I hope you enjoyed seeing a little bit of taste of what vis bug can do for you super cool.

Thank you. Adam, I really love using dev tools. I use them every day for designing directly in the browser for prototyping for making decisions, and I find that these tools are just getting better and better and better, and that’s really exciting. For me, as somebody who likes to design and build the browser, what are your favorite to have tools? Are there any that we missed in the show, and that we didn’t mention tools that you use every day? I would love to hear your thoughts.

Please leave a comment below and thanks for reading the show we’ll see you next time save I just go.

 

Categories
Online Marketing

Design Systems with Brad Frost – The State of the Web

My guest is Brad, frost, web designer and author of atomic design and today we’re talking about Design Systems. Let’s get started so Brett thanks a lot for being here. Thanks for having me, I want to show off by asking you: has the metaphor of a web page exceeded its usefulness, yeah, it certainly has, as what designers we’ve been thinking about.

The web is in terms of pages for a long time right, it’s been with us since the web’s beginning right. We scope things out in terms of pages. If things don’t load in the browser says this web page hasn’t loaded and that’s had a really big impact on sort of how we structure our teams, how we scope our projects and how things are actually executed from from a web design and development standpoint. So, for instance, I work with a lot of large organizations and so they’ll have a team, that’s responsible for the home page and then they’ll have a team, that’s responsible for the product page and another team, that’s responsible for the checkout page and all of those teams Are doing things sort of independent of one another right, because they’re just focused on this notion of pages and as it happens, all of those pages are actually made of the same stuff right.

If we were to break things down, you have buttons, you have form fields. You have blocks and cards and heroes, and all these other things – and we end up with whenever you have these different teams working on different pages and thinking about things. In that way, you end up with you know one button looking similar but different than the next team, that’s working on the next page and so on and so forth, and you, you know, repeat that a number of times and span that out over a number of Years and you end up with a giant mess on your hands, it’s not to suggest that we should stop using the term.

It’s probably still useful for users. Yeah only see things as a flat page, but from a design and development perspective. It’s kind of updated yeah. Yeah, that’s right exactly it’s it’s! It still comes together as a cohesive whole and I think, that’s important, especially as people get into talking about design systems. A lot of people have a big misconception that oh design mean you just sort of isolate things at their component level and just designed the button and just design the sort of headings and just designed the card in isolation.

But that’s just not true. That’s you know. It’s important to sort of realize that yeah things do all of those components, do come together and form a cohesive page at the end of the day and that’s what the user sees and interacts with. So it’s important. It’s not an either-or thing, but we just have to be more considerate about how we make the parts of that page as the web and technology as a whole progresses forward.

How has that changed the way that web designers think about serving pages to users and the ways that the websites are accessed yeah? Well from like an access standpoint or from like a design and build process? The fact that a user could be I mean even these days like accessing the web from their refrigerator. You never know the form factor or anything about the user’s device. You can’t make any assumptions: yeah yeah, that’s right and again it’s gotten really complicated and that’s why I think design systems have become as popular as they’ve been because the devices haven’t slowed down right.

The device proliferation is still happening right. The number of contexts – and you know, screen sizes and form factors and, and you know, yeah native web embedded devices different screens. Different sort of you know. Mouse and keyboard touch inputs, and you know voice and, like all this. Other stuff is just the amount of things that users have or that that designers and developers have to consider as they’re, creating user interfaces and creating these experiences I’ve just sort of accelerated, and we can’t keep up right.

We can’t create bespoke pages, for you know: here’s our small screen view and here’s our tablet view and here’s our desktop view. It’s it’s so we’ve had to sort of pull back out a necessity just because we’re on the hook to deliver more features, more services to more users and more context using more devices in more ways than ever before, and it’s like unfortunate. Our budgets have been increased and our resources haven’t increased with that same sort of exponential curves.

So that’s what’s like sort of forced us to sort of step back and and reconsider how this all gets done, given that there are so many different viewport sizes and everything does that mean that the flat Photoshop file is no longer very useful as a means of Conveying the design, yeah, yeah and and still to this day, I’m working in if Photoshop might be a little long in the tooth when it comes to web design, but same thing happens in sketch in figma.

Just last week I got from the clients designers, you know a mobile version of the comp and a tablet version of a competent desktop version of a comp and and a lot of that’s just sort of wasted effort. Really because all three of those things in isolation are sort of one they’re already alive, because it’s a picture of a website not an actual website, but all those spaces in between is where things really fall down right.

You can sort of paint a picture, especially in a in a static design tool where there’s artboards and you could just sort of move things around in free space like that’s, not how things work in the actual browser right. There’s things like some order considerations and all that you can’t just sort of go on this side screen. I just want to move this from here to here, or this I’m just going to swap this around it’s it’s.

It’s really important to sort of make sure you’re. Considering the actual medium that this user interface is going to come alive and and do that much sooner in your process, I want to ask you about concept reviews before called design Det. What does that mean, and how do you avoid going design bankrupt? There’s no design debt and design bankruptcy. I’ve never actually heard design bankruptcy. Before I like that, I I think a lot of places could declare its design bankruptcy.

I think you know just when it comes to design debt. It’s you have. You know number of teams working on different things and just those we were saying you know working on different pages or different products right across a company and you sort of can can take a cross-section and sort of see a lot of discrepancies. Just in that. But that’s just one moment in time when you stretch out that process over time, especially products that have been around for a long time, the googles of the world or eBay or whatever it becomes like a little sort of Benjamin Button.

Like experience as you click through pages, you get further back in time in these older crustier user interfaces, you’re like how did I end up in 1999 and all of a sudden? So so I think that that’s sort of that sort of that visceral feeling of design debt where it’s like you have all of this sort of old stuff that was created. It’s you know once upon a time and that whenever that was launched, it was the new hotness and the new hotness becomes the old crusty experience.

You know pretty quickly these days right so so I think that the more sort of deliberate and the more sort of systematize you could sort of control and wrangle all of those those sort of user interfaces that are, you know out there in the wild. The better. Your chances are going to be as sort of like reducing that that sort of design debt and that’s again, I think, a big crux like that. The crux of design systems is to sort of help.

You know eliminate that debt to basically take those $ 19.99 designs and say: okay, we’re going to update them with a new design language, but we’re going to do it in a very sort of systematic way so that the next time we do a big redesign. We have actual hooks in there that we could actually sort of lift up the quality of in you know so to evolve that design language like flip the switch and roll that out to a bunch of places, sort of simultaneously or or in very short order.

Instead of like, oh, we have to do this big monolithic redesign, and we have to do that for each of our products again and again and again so the developer experience must be a lot better when you can have like a single source source of truth. For your design, but also the user experience as well, could you describe like what it might be like for a user to be on a site that has designed yet yeah? I mean it.

This happens all the time I mean so. The e-commerce example is a great one, just because I think that you know ecommerce sites, you know super sexy homepage or the super splashy super current right. It’s like it’s got the latest. You know shop fall trends, their shop Christmas like coming up or whatever. That’s like you look very campaign driven. So it’s often like a very modern experience. You sort of like click into like that.

Maybe a product detail page or a product category page that sort of feels modern ish. You know it’s like sort of a little bit more meat and potatoes like e-commerce stuff. So it’s like those templates sort of probably feel pretty good, but then, like you, might get to the shop card or if you like, actually log into your account, it’s like those things feel way different and and then you get to the checkout flow.

And then you know that might be sort of way long in the tooth or it might be sort of built by you know an external vendor or something because they’re processing, credit cards and stuff like that. So it might not actually be integrated with like the rest of the site at all. So what ends up happening for? Why that matters from a user experience standpoint? It’s not just about other things, look different like because who cares as long as that’s effective, then that consistency shouldn’t ever be like the number one goal of any of this, and I think that that’s when we talk about Design Systems, I think that’s another misconception as That, oh, we just want everything to look the same everywhere and that’s just really not true, because if your metrics are doing well and stuff – and you know the buttons look different on the checkout page then on the the product detail page, then that’s fine right! No harm no foul, but the problem is, is whenever you’re, a user and you encounter say a date picker or something – and this is a favorite one of mine just because those are hard to build so often times developers just sort of go and grab something.

You know a library they find on the internet somewhere and if you’re, you know say like at an airline or a hotel chain, and you have four different developers grabbing four different date – pickers across the site. Now, all of a sudden, every time the user needs to pick a date, they have to relearn that new library and that, even if it’s just fractions of a second or a second or two or the, where they’re like oh wait, I’m used to booking from the Homepage, but this is a different convention that slows down that process right and that has a negative hit on you know, certainly when you’re talking about you know booking flights or hotels or something that’s going to cause it dip.

So that’s sort of consistency from a user experience standpoint right that ability of like oh yeah. I’ve encountered this pattern before and I know how this works. So I could just sort of roll on and sort of fill things out a lot faster or interact with this thing faster like that’s. That’s what we’re after right, so that consistency for consistency sake not so much, but consistency from a you know, sort of mapping to what users are used to already like yeah.

That’s, that’s! That’s where it’s at one of the people, problems on a design and development team is not sharing the same vocabulary or calling the same components: yeah consistent yeah. So what are some of the problems of that? And how can designers and developers get on the same wavelength? Yeah, so that’s one of the biggest things that I encounter is as an one exercise that I like to do with design development teams whenever I’m working on design systems with them is right out of the gate, we conduct what I call an interface inventory, so we Basically go across their entire sort of suite of products, or you know, whatever user interfaces could be served by their design system and and sort of divvy things up is like okay, you go hunting for buttons, I’m going to go hunting for sort of.

You know input fields or whatever, and then we sort of do that as a group and then what we do is we get together and sort of present what we found to each other and that’s where it’s really fun, because, especially whenever you have designers in the Room developers in the room, QA engineers, business people in the room right like the product owners, like all these different disciplines and you actually sort of have to articulate what your UI is right.

So so somebody will get up and it’s like. Oh and here’s this admin bar and then somebody gets admin bar. We call that the utility bar right and then the developers are like. Oh, we we just mark that up as the gray bar right, and so it’s like. Okay, there we go right. You got everything out on the table right, these inconsistent names for the same thing, and of course that means you have to have again just like that sort of user experience you have to like slow down.

You have to have have a meeting to figure out what you’re going to call this thing like, and you know a lot – can get lost in translation in between design team or different disciplines, but also different teams in general right. If team one is calling it a certain name and team, two is calling it something else. That’s a big deal right, so so again, so bringing this all back to Design Systems. What that it, what a design system can do is sort of centralize your sort of UI patterns call them names right, give write guidelines around them, so that everyone is like, literally speaking, the same language right.

They know what you mean when you say utility bar, and you know how to use it where it’s useful, but also crucial. One of the other things that we found really valuable in in creating design systems for clients is here’s. What this thing is: here’s where it’s useful, but also maybe here’s some gotchas or here’s where it might not be useful, and maybe you want to use this other thing. Instead, what are some of the trade-offs of investing in a bespoke design system versus taking something off? The shelf, like a bootstrap yeah, that’s a big one and I’d say it’s tough, because tools like bootstrap and material design are already made.

They’re they’re, they’re well tested right, they’re in use by giant companies like this company called. Have you heard of Google before it’s like? It’s pretty big one. It sounds familiar yeah, so so a lot of these people right who are using tools like bootstrap and material design, they’re like oh, this has been tested by these. You know giant companies, so I could just sort of grab this and go and I don’t have to do all that work myself and that might be true and there are sort of instances of that um.

I think one of the big things that is important to sort of recognize and consider whenever you’re reaching for these tools is that it’s like you, don’t own it and it might be attractive from sort of you know, inefficiencies sake at first but as time goes on Right at the end of the day, your boss or your you know your product owners or your clients or whoever they are they’re going to say. Oh, we need to do this this way or we need to add this feature and all of a sudden, you’re you’re.

You have to learn and become sort of fluent in this other sort of system that you didn’t write, so so it can work and you can do things and extend things and customize things that works with the grain and these frameworks, but oftentimes. What I found is I work with clients that end up sort of working against the grain and they end up having to sort of undo a bunch of stuff and write a bunch of other custom stuff.

And then they end up in this sort of like weird messy middle ground, where it’s like. This is our sort of hacky stuff that we’ve done to sort of make things our own. But then also crucially, I’ll say that, from like a more of like a front-end architecture standpoint, I think that it’s sort of like safe, you know you got good bones to build upon, but like material design and boots actually offer a sort of anesthetic right.

They provide anesthetic and that could be helpful because again it’s like oh here’s, some good, looking buttons, here’s some good, looking form fields, here’s some good, looking components that I could use, but if Nike Adidas Puma, if you know Reebok whatever, they were all to use bootstrap For their redesigns, they would look frightening Lee similar right and that’s sort of not what they’re going for so there’s like there is this sort of branding aspect of it right this own ability that sort of gets lost whenever you’re sort of all using the same thing.

What are some of the challenges or unsolved problems of design of design? I mean I, I think, sort of specifically to design systems like a lot of there’s some things that are around sort of you know, tooling, and sort of figuring out how to keep design tools and tools, expanding quiff. You know what’s in code, that’s definitely one of the most. I feel like tangible sort of problems that but there’s a bunch of teams, doing a lot of work to try to solve that and startups and stuff that there are really exciting.

And so a lot of them look promising. And I don’t necessarily think that that’s you know far and away the biggest problem. That’s out there. I think so. Many of the problems with with design systems have to do with the sort of people have to do with communication and collaboration and sort of figuring out like how do we get this stuff adopted into our products right? How do we sort of communicate when things aren’t working as planned like? How do we sort of you know, establish solid processes for releasing new versions of the design system and letting everyone know like here’s one? You want to use the design system or here’s one.

It’s sort of safe to sort of you know, deviate from that system or build upon it or extend it, and how do you roll that back into the system? So a lot of that sort of coordinating a bunch of different people who are all suddenly relying on this, this design system product that stuff, I feel is – is still very tough to crack because it involves people and your you know the health of your your you Know design and development culture and like how well everyone sort of you know, collaborates together and like, of course, that’s that’s tricky right, so you could like you.

Could I could say things like here’s how I would create a governance plan for a design sister for a design system and here’s how I would you know, get these teams to work. You know and communicate more buts and you know easier said than done. Okay, so how much of a design systems success depends on the designers as opposed to the developers? What is their role in the success of it? I think, and – and this might be a little controversial design systems is sort of an unfortunate name because design systems are like.

Oh, this is about design, and it’s really not. The design system is, as I define a design system is, is how the official story of how an organization designs and builds tadaryl products and there’s a lot of ingredients to that story. And yes, like the design language, you know what what the brand colors are, and you know the the rounded corners or not of the buttons and stuff like that sure that that matters.

But that’s actually like a pretty tiny slice of what a design system entails, and so so when it comes to the success of a design system. So much hinges on that design system living in code and living as a thing that engineers and developers can sort of pull down into their application and sort of you know import a component and sort of see that design systems button or whatever show up on their Screen and then they’re able to sort of you know pipe in whatever sort of attributes and click handlers and whatever to sort of make it.

You know, breathe life into it, make it real, but you they sort of get that stuff for free right. If all you have is like a sketch library or some like Zeppelin file or some like like little, it’s a style guide thing where it’s like: here’s, our colors and here’s or whatever, like there’s so much that gets lost yeah if all the developers are doing is Like copying and pasting some hex codes in there, you know sort of crappy like development environments, and it’s just you end up with a bunch of spaghetti, even if they’re all using like the same color blue.

It’s not like systematize right. So what you want to get to is, you want to say like if we change our brand color blue – and this actually just happened on a project of ours – got a brand color blue and actually it wasn’t passing the accessibility level that we wanted, and so they Actually had to sort of you know: tweet the the color blue in order to make that sort of pass. You know because sort of cut the accessibility, mustard and with a design system like you literally, have you know a variables file or is these design tokens? You sort of tweak that value there and then that ripples out to the entire sort of design system right and then that gets packaged up in a new release of the design system in code.

And then you know next time the developers pull that down. Those sort of get and see those updates, so so, coming back to it’s like yeah, like the design language part of it, like the look in the feel of it that matters, I’m not going to say it doesn’t matter, but it’s almost just like you’ll, like do Your thing make it look good like I, you know. I trust you be systematic about it right. Thinking about motifs that are going to sort of like you know, translate well the different components, but, like so much hinges on like getting that stuff into a place where it’s consumable by the actual sort of you know, environments that users will be interacting with your products And that’s what we spend, probably the overwhelming majority of our time and effort on is actually like building out those libraries with components right, an HTML, CSS JavaScript.

You know bundling that stuff up and like sort of working with development teams to make sure that they have what they need in order to use the system successfully. So, to what extent should a design system anticipate the chaos of user-generated content like errors and long names? What is the actual like breaking point of a design system yeah? Well, I think that the breaking point of the design system has everything to do with how well you consider all of that stuff right.

So if, if it’s user-generated content that you need to account for and you’re in your UIs, then you have to you know, consider things like character limits and things like that. But you know there’s many other flavors of that as well. You know internationalization right, right-to-left languages or just you know, German will wrap onto multiple lines, and things like that – and this is where I think again – sort of designing and building components in isolation is a bad idea because you could sort of you surf fall into the Trap of saying like well, here’s this like perfect scenario where you know everything’s filled in and the card has this nice sort of you know image I found from unsplash and it’s like really nice.

Looking and you know, as it happens, the users name is Sarah Smith and Sarah doesn’t even have an H on it, so it just fits so nicely onto one line and of course, the reality of of our user interfaces is anything but that, and this sort of Also comes back to like the trap, was sort of relying on these sort of static design tools to sort of handle that they’re up until very very recently, there weren’t even conventions in place to sort of handle like dynamic data, so that’s sort of how we handle That this is where atomic design as a methodology – I think, really shines.

So what atomic design does is basically helps people consider the whole the pages, the actual product screens in various states and configurations, as well as the sort of parts of that hole right. So the underlying components that build up those screens and at the page level of atomic design, what we’re able to do is articulate here’s. What our homepage looks like with this. You know the fall campaign with the leaves – and you know this tagline and this call to action button that takes people to this and and whatever, but then you’re also able to say, okay and then here’s what this that same page looks like in German or here’s.

What that that same page looks like with you know the Christmas campaign and oh that’s, sort of image that we’re using that has a bunch of Christmas ornaments that actually is sort of you know, impacting the the readability of the text. That’s sitting over that image or something like that right, so you could start seeing where the UI starts falling down and then what you’re able to do is is sort of take that and learn from that and sort of go back to that hero component.

At a more atomic level and sort of say, okay, we’re going to maybe add a variation of the hero component that adds like a little gradient overlay so that the the legibility of the text always sort of you know pops over the the image a bit more. So how we sort of do things like in our own workflow, with that we sort of will create sort of you know, try to represent the whole bell curve. So it’s like what does a card? Look like what does sort of like a kitchen sink card? Look like with like the maximum character count that you might be able to sort of upload as a user or something or what happens if the user uploads the profile picture, what if they don’t right, and so all those various states and sort of you know, mutations Of the other component, so to get that sort of commonly used case down.

Of course, as like a starting point but like you really do have to represent like here’s, the extreme and here’s the empty and sort of everything in between as well and the only real way to test. If that actually works is by sort of plugging in real products and Aereo’s into your user interfaces and by sort of having that best sort of atomic design system wired up where, like the pages, informs and influences the underlying components, you’re able to sort of make changes To those components with which, then, you know, inform and influence that the actual page design, so it’s sort of like a virtuous cycle between like the design system and the pages and screens that that system builds.

Finally, what resources would you recommend for people eager to learn? More about design, Cisco there’s a lot I feel like. I have a hard time, keeping up with them anymore. There’s a there’s a number of really great resources, one that I help maintain is a resource called style guides i/o, which is a collection of, I think, we’re over like 200 50 examples of public design systems and style guides that are out there in the wild as Well, as sort of talks and books and resources and tools around a design system, so that’s just like an open source resource repository that people contribute to and sort of, submit poor requests to.

There is design dot systems which is maintained by Gina Ann who’s done so much work for the design systems community. She has a clarity conference, which is a conference dedicated to design systems. We have a podcast, which is a little bit in hiatus, but where we interview people that work at different organizations who have spun up their design systems and what they’ve learned and sort of you know struggled with as they’ve as they’ve done it.

Stu Robson has a really fantastic design systems newsletter. That’s part of the design, dot systems, sort of universe there and then there’s also a slack group all about design systems as well. So I’d save it like that sort of has me covered for sure and again there’s like a lot of activity there and new stuffs happening every day and people are learning from things you know from each other and plugging them in at their organisations and sharing what They’ve learned and like that’s really for me, the most exciting part of all of this is just sort of you know.

Here’s some concepts here are some things that we’ve found useful share. Those people take them, learn from them validate or invalidate them and sort of share. What they’ve learned and then everyone benefits from it, so your book is also available for free to read online right where it is yeah yeah, so you could read it at atomic design. Brad Frost, calm great breath. This has been great. Thank you so much for pyrite.

Thanks so much for having me, you can check out the links to everything we talked about in the description below thanks for reading, we’ll see you next time.

 

Categories
Online Marketing

New Techniques for Responsive Design

We have different devices. Different needs even different data requirements, and this is at the core of the PWA attitude to building for the web. We need layouts and content that work across devices if your site doesn’t adapt to the user’s device, you break the illusion and lose trust.

These quotes are from Brad, Frost and Liza danger. Gardner. You should check out that blog post about responsive design, which are linked to from the course materials as Liza says, manage risk focus on content. You know you can make virtually any site usable simply by sizing elements and content correctly. The golden rule for great progressive web app content is not to let content inadvertently overflow horizontally, especially on mobile.

That sounds basic, but lots of sites break this rule by making images inputs and other large elements on the page with fixed sizes. Using relative measurement units and RAM percentages will reduce the severity of this issue. Adding a meta viewport tag will also solve a lot of problems. This tells the browser the size of the virtual viewport on which it renders a web page without setting the viewport meta tag correctly, most browsers scaled down the page to fit a virtual 980 pixel wide viewport.

I’ve seen some great examples of this in action on w3schools, we’ll give you the URLs for that in the course materials. With this article, the initial scale value sets the zoom default. For this page, don’t set a maximum value that will make it impossible for users to zoom and that’s a big problem for accessibility. One other thing you should be aware of the viewport meta tag will mess up the layout for fixed-width sites.

The Mater viewport tag is designed to work with responsive layout. If you use it in a fixed sized layout, it will break things until you convert the site to a responsive, lay out trade document.Documentelement client to see how the viewport meta tag affects the virtual viewport. Here’s another simple technique: this solves many layout problems, you’re setting the preferred size and the maximum size and works for article and audio too so yeah.

You might think that relative sizing would fix everything, in fact, for a while back in the day, some of us thought that relative sizing could solve everything we layout. We had, you know liquid layout, maybe even text could be relatively sized, but relative sizing isn’t enough simplistic. Relative sizing, like this a diagram, means that you have content areas that are too big on desktop and to smaller mobile.

This is why media queries were invented. It’s a simple concept, use different CSS for different sized viewport based on width. That doesn’t just mean making the same layout for every device on a phone. You might want a single column layout, a two column layout on a tablet. Maybe three columns for desktop and so on. You can use media queries to select different layouts depending on the viewport size, here’s a single column layout on mobile to column, on tablet and three columns for desktop.

So do you think about devices, and you might think you could get away with this? Ask yourself what could go wrong with this approach? What about new devices new viewport sizes? What about changing window sizes on desktop we’ll come back to this later now? Is that all there is, of course not. There is a better way go back to our original exercise. Remember content is king devices, keep changing and device, viewports are getting bigger and smaller, not to mention pixel density, pixel, shape, display quality and so on.

Don’t force your designers and developers to make a change every time a new device appears start. The design process with the smallest form factor then add the major breakpoints for the form factors that you work with phone tablets, laptops and widescreen devices. You can then create minor breakpoints to handle specific changes to elements that don’t affect all elements. The final detail to keep in mind is to optimize the content for reading, ideally keep the width of your content to 70 to 80 characters wider than that value makes content hard to read.

Now that doesn’t mean you stop thinking about devices and device classes. You might want one column for phones, two columns for tablets, three columns for desktop, like we’re saying or whatever you can find out more about these recommendations on web fundamentals. Now remember the earlier media queries example in the mobile first world of PWS. We need to turn that around make small viewports the default.

Look at the example here. By the way, there is no fixed rule about whether or not to include media queries, inline or use a separate file. Also, you might want to consider using m’s or REMS for units here, but I won’t go into that now. You’ll also do responsive layout in JavaScript. If you like, this is a simple way to do. Conditional content match media is well supported and there are polyfills. Calc is really useful in responsive design, where you want to use a combination of fixed widths and percentages.

In this example, we have two thumbnail images: side by side: 50 %, the width of the parent element with a 10 pixel margin between them, no matter what size. The viewport responsive design is about more than just changing layouts, as well as changing layouts. You might actually also want to manipulate content, depending on the viewport size and device type, for example, on a phone you might want to make sure page content is visible when the user goes to your home page, so you might opt for a hamburger menu for navigation And put banner ads lower on the page.

Also, if need be, you can just get rid of stuff on desktop. Your users will want full functionality, but not on mobile right wrong. Don’t guess your users needs based on viewport size, plan, content and functionality carefully and don’t assume users want less content or functionality on phones than desktop, for example. Again, this is a crucial part of the PWA attitude. Understand your users, don’t second-guess them.

Data-Driven design, design, content, layouts and transaction processes, so users can get to what they want as quickly as possible. Our data shows that every step to get to content loses 20 % of users rather than removing content. A more sensible option can be to choose different content. Now for images this is called art direction, choosing different images or different image crops and I’ll show an example of this later.

You might even want to provide different text for different viewports such as shorter headlines, but yeah be careful again not to assume that mobile users want less content for article. The general rule is to use a smaller resolution for smaller viewports. This can result in massive reductions in bite, size, playback performance and proven sand, also reduced streaming cost. The best way to do this is with adaptive streaming or HLS, not just media queries and yeah.

You can find out more about that more about adaptive streaming in the course materials. But just to reiterate, the key point here is that when you’re delivering article to mobile, don’t use resolutions larger than you need and talking about article content, don’t forget to caption articles using the track element. It’s really easy. Let’s take a look at the relatively new technique for creating responsive layouts, CSS flexbox provides flexible sizing and alignment element reordering and better performance than floats.

Css flexbox is well supported and we strongly recommend it easy centering is the holy grail of CSS. Take a look at the code here. It is incredibly simple. I still find it slightly thrilling by the way the materials that accompany this article have links to lots of flexbox examples, including this one. Let’s look at the CSS for the examples here. This uses CSS flexbox for three different layouts depending on the viewport width.

Let’s start with the defaults for smaller viewports, remember, mobile-first, the container is declared to use CSS flex. The flex flow property means child elements can wrap. Rather than being squashed onto the same line. You can also use inline flex, that’s shorthand for flex direction and flex wrap properties. The default is ro, no rap 100 % width for each div in the container add a different layout for slightly larger viewport and different again, once the width hits 800 pixels.

The container is now a fixed width and centered horizontally using margins. Let’s take a look at the example here. Once again, this uses CSS flexbox for three different layouts, depending on the viewport width and again, let’s start with the defaults for smaller viewports. For view puts over 600 pixels in width. The order is changed on the smaller viewports. We wanted to give child 1 full width, but for a slightly larger viewport, we can put it next to child 2.

I could go on anyway, to other properties. I’d like to draw your attention to justify content, how items are packed and aligned items how items are aligned. Css grid is in some ways related to the grid system concept, familiar to graphic designers. A page is thought of in terms of lines tracks between lines, cells and areas. Css grid is coming, and it’s already behind a flag in Chrome and Firefox you’ll find more information in the resources for this article.

The lab exercises that accompany this article will help you get started with media queries, breakpoints grids and with flexbox

 

Categories
Online Marketing

Introduction to Service Workers

You’Ll learn what a service worker is and what it can do for your apps. A service worker is a client-side programmable proxy between your web app and the outside world. It gives you fine control over network requests. For example, you can control the caching behavior of requests for your site HTML and treat them differently than requests for your site’s images.

Service workers also enable you to handle push messaging now. Service workers are a type of web worker, an object that execute the script separately from the main browser thread. Service workers run independent of the application they are associated with and can receive messages when not active either, because your application is in the background or not open or the browser is closed. The primary uses for a service workers are to act as a caching agent to handle network requests and to store content for offline use and, secondly, to handle push messaging.

The service worker becomes idle when not in use and restarts when it’s next needed. Now, if there is information that you need to persist and reuse a course restarts, then service workers can work with indexdb databases. Service workers are promised based now we cover this more in other materials, but at a high level a promise is an object. These are the kind of placeholder for the eventual results of a deferred and possibly asynchronous computation service workers also depend on to api’s to work effectively fetch a standard way to retrieve content from the network and cache a persistent content storage for application data.

This cache is persistent and independent from the browser, cache or network status now because of the power of a service worker and to prevent man-in-the-middle attacks where third parties track the content of your users. Communication with the server service workers are only available on secure origins served through TLS using the HTTP protocol will test service workers using local host, which is exempt from this policy.

By the way, if you’re hosting code on github, you can use github pages to serve content. Their provision with SSL by default services, like let’s encrypt, allow you to procure SSL certificates for free to install on your server Service Worker, enabled applications to control network requests, cache those requests to improve performance and to provide offline access to cached content. But this is just the tip of the iceberg.

We will explore some things you can do with service workers and related api’s caching. Assets for your application will make the content load faster under a variety of Network conditions. Two specific types of caching behavior suitable for use are available through service workers. The first type of caching is the precache assets during installation. If you have assets, HTML, CSS, JavaScript images so on, and these are shared across your application.

You can cache them when you first install the serviceworker when your web app is first opened. This technique is at the core of application. Shell architecture now note that using this technique does not preclude regular dynamic caching, you can combine the pre cache with dynamic caching. The second type of caching is to provide a fallback for offline access using the fetch API inside a serviceworker.

We can fetch request and then modify the response with content other than the object requested use this technique to provide alternative resources in case the requested resources are not available in cache, and the network is unreachable. Service workers can also act as a base for advanced features. Service workers are designed to work as the starting point for features that make web applications work like native apps, and some of these features are blog messaging API, which allows web workers and service workers to communicate with each other and with the host application examples of this Api include new content notifications and updates that require user interaction.

The notifications API is a way to integrate push notifications from your application to the operating system native notification system. The push API enables push services to send push messages to an application service can send messages at any time, even when the application or the browser is not running. Push messages are delivered to a service worker which can use the information in the message to update local state or display a notification to the user background.

Sync lets you defer actions until the user has stable connectivity, and this is really useful for ensuring that whatever the user wants to send is actually sent. This API also allows servers to push periodic updates to the app, so the app can update when its next on line. Every service worker goes through three steps in its lifecycle, registration, installation and activation to install the service worker.

You need to register it in your main JavaScript code. Registration tells the browser where your service worker is where it’s located and to start installing it. In the background, for example, you could include a script tag in your site’s index.Html file or whatever file you use. Is your applications entry point with code similar to the ones shown here? This code starts by checking for browser support by attempting to find Service Worker as a property in the navigator object.

The service worker is then registered with navigator dot Service Worker dot register, which returns a promise that resolves when the service worker has been successfully registered. The scope of the service worker is then logged with registration, dot scope. You can attempt to register a service worker every time, the page loads and the browser will only complete the registration. If the service worker is new or has been updated, the scope of the Service Worker determines from which path the service worker will intercept requests.

The default scope is the path to the Service Worker file and extends to all directories below it. So if the Service Worker script, for example, Service Worker dot gif, is located in the root directory, the Service Worker will control requests from all files at best domain. You can also set an arbitrary scope by passing in an additional parameter when registering in this example. We’Re setting the scope of the Service Worker to slash app, which means the service worker will control requests from pages like slap slap, slash, lower and slash out, slash, lower slash low directories like that, but not from pages like slash, app or slash, which are higher a Service worker cannot have a scope above its own path.

This is in your service worker file, service worker, dot, j s now thinking about installation. Once the browser registers a service worker, the install event can occur. This event will trigger if the browser considers the service worker to be new either, because this is the first service worker encountered for this page or because there is a bite difference between the current service worker and the previously installed one.

We can add an install event handler to perform actions during the install event. The install event is a good time to do stuff, like caching, the apps your static assets using the cache API. If this is the first encounter with the service worker, for this page, the service worker will install and if successful, transition to the activation stage upon success once activated, the service worker will control all pages that load within its scope and intercept corresponding network requests.

However, the pages in your app that are open will not be under the serviceworkers scope, since the serviceworker was not loaded when the page is opened to put currently open pages under serviceworker control, you must reload the page or pages. Until then, requests from this page will bypass the serviceworker and operate just like they normally would service workers maintain control as long as there are pages open that are dependent on that specific version.

This ensures that only one version of the serviceworker is running at any given time. If a new serviceworker is installed on a page with an existing serviceworker, the new serviceworker will not take over until the existing serviceworker is removed. Old service workers will become redundant and be deleted once all pages. Using it are closed. This will activate the new serviceworker and allow it to take over refreshing.

The page is not sufficient to transfer control to a new serviceworker, because there won’t be a time when the old serviceworker is not in use. The activation event is a good time to clean up stale data from existing caches. The application note that activation of a new serviceworker can be forced programmatically, with self dot skips waiting service workers are event-driven installation and activation events, fire off corresponding events to which the serviceworker can respond.

The install event is when you should prepare your serviceworker for use. For example, by creating a cache and adding assets to it, the activate event is a good time to clean up old caches and anything else associated with a previous version of your serviceworker. The serviceworker can receive information from other scripts through message. Events. There are also functional events, such as fetch push and think that the serviceworker can respond to to examine service workers navigate to the serviceworker section in your browsers, developer tools, different browsers, put the tools in different places, check debugging service workers in browsers for instructions for Chrome, Firefox and opera, a fetch event is fired every time a resource is requested.

In this example, we listen to the fetch event and instead of going to the network, returned the requested resource from the cache assuming it is. Their service workers can use background sync here. We start by registering the service worker and once the service worker is ready, we register a sync event with the tag foo. The service worker can listen to sync events. This example listens for the sync event, tagged foo in the previous slide.

Do something should return a promise indicating the success or failure of whatever it’s trying to do if it fulfills the sync is complete. If it fails, another sync will be scheduled to retry retry syncs also wait for connectivity and employ an exponential back-off. The service worker can listen for push events, push events are initiated by your back-end servers through a browsers push service. This example shows a notification when the push event is received.

The options object is used to customize the notification. The notification could contain the data that was pushed from the service service workers can be tested and debug in the supporting browsers, developer tools. Screenshot here shows the chrome dev tools application panel. There are lots of great resources to help you get started and find out more access them from the materials that accompany this article.

In the lab materials that accompany this article, you can practice working with service workers and learn more about intercepting Network requests.

Website management packages are important for any business these days. Check out the video from Allshouse Designs to see what can be done for your company and yes, for how much. 

 

Categories
Online Marketing

Intro to Web Push & Notifications

This diagram gives an overview on the client side. Your webpage interacts with service workers which in turn receive push events via the user agent, also known as the browser and on the backend.

You send messages from your application server to the push service, which then delivers them to the correct client. Let’S look at the notification API first, this allows developers to display notifications to the user. Before we can create a notification. We need to get permission from the user. This code will prompt the user permissions to show notifications. You can try this out from the browser console as you’ll see later, permission is requested automatically when subscribing to a push service.

So there’s no need to call this function when using just push notifications. Let’S take a look at some examples for configuring and displaying a notification from a service worker. We first check that permission has been granted. Then we call show notification on the service worker registration object and pass in the notification title. You can also try this out from the browser console. Try it on the new tab page now for push notifications.

You call show notification in the service worker in response to a push event. When a message arrives, we can specify an optional options: object to configure the notification. This is passed in as the second argument. In the show notification function, the body property is the body text displayed below the title icon? Is the image displayed at the top of notification? Vibrate is the vibration pattern for phones, in this case 100 milliseconds on 15 milliseconds off 130 seconds on so on, data is the arbitrary data we can retrieve in the service worker when the user interacts with the modification.

In this example, primarykey allows us to identify which notification was clicked when handling the interaction in the serviceworker. Let’S try that out. We can add action buttons to the notification that we can then handle each in a different way. Here’S what that looks like notification, interaction events are handled in the service worker tapping clicking or closing the notification. There are two notification interactions you can listen for in the service worker notification.

Close the notification close event only triggers when the notification is dismissed via a direct action on the notification. If the user dismisses all notifications, the event will not trigger, and this is done to save resources, notification, click. If the user clicks the notification or an action button in the notification, the notification click event is triggered. If the user clicked on an action, the action is attached to the event object of the notification click handler.

We can check which action was triggered and handle it separately. Now, let’s see how the two handlers work in a service worker. First notification close: we access the notification, object from the event object and we can get the data from the notification object. We might use the primary key property from the data to identify which notification was clicked in a notification click handler. We can determine what action button.

The user pressed by inspecting the action property on the event object. Note that each browser displays notification actions differently and some don’t display them at all to compensate. We put a default experience in this example in an else block after checking which action was clicked so that something will happen on a simple click of the notification. Now, let’s see how you send push messages from your server and handle incoming messages on your client web app.

Each browser manages push notifications through its own system called a push service when a user grants permission for push on your site, you subscribe them to the brow. Push service: this creates a subscription object that includes a public key to enable messages to be encrypted and an endpoint URL for the browser’s push service, which is unique for each user from your server. Send your push messages to this URL encrypted with the public key.

The push service sends the message to the right client. Now the service worker will be woken up to handle incoming push messages when a push event is fired, and this allows your app to react to push messages. For example, by displaying a notification using service worker registration show notification, your app doesn’t need to listen to or Pole for messages and the browser doesn’t even need to be open.

All the work is done under the hood as efficiently as possible by the browser and the operating system, and this is great for saving battery and CPU usage. Let’S go through that step by step in the apps main JavaScript call push manager subscribe on the serviceworker registration object, get the subscription object and convert it to jason, get the endpoint URL and public key and save this to your server, for example, by using a fetch Request send the message payload from your server to the endpoint URL encrypted with the public key.

The push message raises a push event in a serviceworker which we can handle in a push event handler in push event handler. We get the data from the message and display a notification. The push API allows users to subscribe to messages sent from your app server that are sent via the push service used by the browser and subscribing, of course, is done in the JavaScript. For the page, responding to push events, for example by displaying a notification, is done in the serviceworker, just to repeat subscribing to the push service and getting the subscription object happen in the JavaScript for the page.

First, we check if the user is already subscribed and update the page UI accordingly, if they are not subscribed, prompt them to subscribe, if they are already subscribed, update the server with the latest since that may have changed by the push service, since it was last used When the user grants permission for push on your site, you subscribe them to the browsers push service, as I said before, this creates a special subscription object that contains the endpoint URL for the push service, which is different for each browser, along with a public key.

We send the subscription object for this user to the server and save it now before you subscribe a user check if you already have a subscription object, if you don’t have the object again update the UI to prompt the user to enable push notifications, and if you Do have the subscription object, update your server database with the latest subscription object. The ready property of the service worker defines whether a service worker is ready to control the page or not.

It returns a promise which resolves to a serviceworker registration object. When the service worker becomes active, the get subscription function returns the subscription object or undefined. If it doesn’t exist, we need to perform this check every time. The user accesses our app because it is possible for subscription objects to change during their lifetime. This is the process of subscribing to the push service register, the service worker from the main page main jeaious.

This request goes to the user agent. The user agent returns the service worker registration, object, use the service worker at registration, object to access the push manager API and from that requests are subscribed to the push service. This request is passed on to the push service. The push service returns. The subscription object, which includes the endpoint URL and the public key, save the subscription object data to your server and send push messages from your server to the endpoint URL encrypted with the public key.

Like I said now before sending notifications, we must subscribe to a push service. We call push manager subscribe on the service worker registration object to subscribe and the resulting push subscription object includes all the information. The application needs to send a push me such an endpoint and encryption key needed for sending data each subscription is unique to a service worker. The end point for the subscription is a unique capability.

Url knowledge of the endpoint is all that is necessary to send a message to your application. The endpoint URL therefore needs to be kept secret or other applications might be able to send push messages to your application. Here’S an example of the subscription object. This is the object returned from the push service. When we call reg push manage, add subscribe. The subscription object has two parts.

The first part is an endpoint URL. The address on the push service to send messages to this includes an ID that enables the push service to send a message to the correct client and service worker. The second part of the subscription object is the keys property. The p25 6d H key is an elliptic curve, diffie-hellman ECD H public key for message. Encryption. The earth key is an authentication secret that your application server uses in authentication of its messages.

These keys are used by your application, server to encrypt and authenticate messages for the push subscription and, let’s see how the process of sending a message is done. The server generates a message encrypted with the public key and then sends it to the endpoint URL in the subscription object. The URL contains the address of the push service along with subscription ID, which allows the push service to identify the client to receive the message.

The message is received in the push service which routed to the right, client and the process of sending a push message from the server works. Like this. A back-end service on your server sends a push message to the push service using the endpoint URL from the subscription object. The message must be encrypted with the public key from the subscription object. The push service uses subscription IDs encoded in the endpoint URL, to send the message to the right user agent.

The push event is picked up by the service worker. The service worker gets the data from the message and displays a notification in this example. We’Re using Google’s web push library for nodejs to send a push message from a node.Js server. The TTL value in the options specifies the time in seconds that the push service should keep trying to deliver the message now. This is important to set correctly some messages.

Have a short life some may be valid for several hours or more. We then pass in the subscription object. Payload and options object to send notification. You need a way to ensure secure communication between the user and your server and between your server and the push service and between the push service and the user. In other words, the user needs to be sure that messages are from the domain. They claim to be from and have not been tampered with by the push service you need to make sure the user is who they claim to be valid, was created to solve this problem.

This vapid identification information can be used by the push service to attribute requests that are made by the same application server to a single entity. This can be used to reduce the secrecy for push subscription URLs by being able to restrict subscriptions to a specific application server. An application server is further able to include additional information. The operator of a push service can use to contact the operator of the application server in order to use vapid, we need to generate a public/private key pair and subscribe to the push service using the public key.

The public key must be first converted from URL base64 to a you in 8 array. This is then passed into the application. Server key parameter in the subscribed method. The web push library, provides a method generate vapid keys, which generates the keys. This should be used once in the command line when push generate vapid, keys, Jason and the keys stored somewhere safe. We can use the web push library to send a message with the required vapid details.

We add a vapid details, object in the options parameter. That includes the parameter required for the request signing now. Let’S look at messages from the receiving end in the web. App on the client handling push, events happens in the surface worker, the service worker will be woken up to handle incoming push messages and a push event is fired. This allows your app to react to push messages, for example, by displaying a notification using service worker registration, show notification to display a push notification.

You listen for the push event in the service worker. You get the push message. Data from the push event object in this example, we simply convert the message: data to text The Wrap, show notification in a wait until to extend the lifetime of the push event. Until the show notification promise resolves, the push event will not be reported as successfully completed until the notification has displayed.

You can practice working with the notification and the push API by following the lab that accompanies this article, one small gotcha, don’t use private or incognito mode for this lab for security reasons, push notifications are not supported in private or incognito mode. You

Website management packages are important for any business these days. Check out the video from Allshouse Designs to see what can be done for your company and yes, for how much. 

 

Categories
Online Marketing

Indexing your PWA (Discoverability & SEO) – Progressive Web App Training

Every search engine has a different way of ranking pages, but they all depend on a web crawler to gather information, and when you build a JavaScript driven site, the crawler might not be able to find everything you might need to give it a little help.

While every search engine has its own way of crawling, there are two fairly obvious rules. First, if the crawler can’t see it, it’s not going to be indexed and everything needs its own URL. There may be a trivial solution for your site if customers always search for a landing page or other static content, but those pages be static content. This won’t index client rendered content, but that may be exactly what you want.

This does raise an interesting distinction. A PWA does not have to be a single page app, you could add a serviceworker do every page in a website or a multi page app. As long as these pages have the same origin and path, they will share a serviceworker. Another option is to serve a render the dynamic content and then let the client take over rendering this lets any crawler see and index. All of your content.

You can use these solutions with any crawler since there’s no JavaScript involved, and if you want your app to be indexed everywhere, you’ll have to render it on the server. You can write code that renders on the client or as server-side JavaScript, it’s called isomorphic JavaScript, but that assumes you’re using node or another JavaScript server. And if you want an easy test, you can run lighthouse.

It includes some basic SEO. Discoverability tests lighthouse runs some basic SEO tests as if you have an HTML only crawler each test has instructions for fixing or improving shortcomings. Okay, so the universal answer is not to depend on JavaScript, but Google’s crawler can run JavaScript. So you can index client rendered sites. As long as you follow some rules, there are about a dozen rules, but the top five will take you most of the way we’ve already covered.

The first rule make your content crawlable. That means rendering it so the crawler can find it. If you’re writing a single page app, the top five rules become these top five tips. Many developers provide navigation links with a hash for the URL and use a click listener. Instead, these should point to actual paths in your app to trigger changes. You also need to avoid URL fragments the part that begins with a hash sign these break many tools and libraries and are now deprecated.

We used to recommend hash-bang prefixes for crawling a jet-powered sites as a way to change URLs without reloading the page. But now you should use the history API. Instead, the next rule is to use canonical URLs for duplicate content. For example, amp pages normally have a server rendered page and the client rendered amp page. The client rendered page has a link back to the server rendered page using the rel equals canonical attribute.

The crawler will index the canonical server rendered page some developers, even shadow, their client rendered pages, with server rendered pages and use the canonical link to point back to the server. This makes more of the app discoverable tip. Number 4 also gives you great accessibility, use the native HTML elements whenever possible. Crawlers know what to do with an actual button, but won’t recognize a div of class button in the same way, finally use progressive enhancement, use polyfills, where it makes sense to support older browsers.

You never know which version of a browser is used in a particular crawler, so play it safe. Some simple changes can improve your data quality and give users much better results. One is to use the schema.Org annotations for structured data there, a predefined schema for common areas, such as e-commerce, scheduling and job postings search engines, can use the schema annotations to parse your data accurately.

The same logic applies to the Open Graph protocol, which allows any web page to become a rich object in a social graph. Finally, the Twitter cards provide a rich media card that displays, when anyone links to your site from Twitter, it’s important to test your work and work iteratively. So the you can see the effects of each change. Testing on multiple browsers is not only a best practice for everyday development.

It ensures your site renders correctly on multiple crawlers testing with the Google webmasters search console will crawl your site and show the result, and you should always pay attention to loading performance. Use tools such as PageSpeed insights or webpage tests to measure the loading performance of your site remember about 40 % of consumers will leave a page that takes longer than 3 seconds to load.

Of course, the most important rule is to treat client-side rendering as a progressive enhancement. If you test on a range of browsers, you’re, probably fine. If you want to be certain, you can use the fetch as Google tool on the site. If that went by a little fast see the Google Webmaster central blog for the details on how to make your PWA search ready. Then come back here and I’ll. Tell you how to measure user engagement in your PW A’s thanks for reading

You have to try the best pumpkin seed snack from Spunks! Learn about the creators by watching the video below.