”. 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’r 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 ]
”. 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’r 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 ]
My guest today is Emily Schecter who’s here to tell us about HTTP, you probably know of it as the thing you need to enable to make your site secure, but Emily’s here as product manager on Chrome security team, to explain how it’s so much more than that. Let’s get started so Emily. Thank you for being here. Thanks for having me, I’m excited to be here.
Can you start by telling us about what is HTTPS and why is it so important yeah, so HTTPS is actually just HTTP but over a secure connection and what HTTPS actually gives us is identity, encryption and integrity. So what that means is, if you type HTTP google.Com into a web browser, you can be sure that you’re talking to the real google.Com, not some fake google.Com and also means that no attacker on the network can actually see or modify any of the traffic.
And this is actually really important, because the collection of sites that you’re browsing actually says a lot about your intentions, your behavior and your identity and the web isn’t really continuing to get even more powerful, as chrome tends to add new features to the web platform. For example, the web now has the geolocation API, which means that sites can see where I live, where I work, maybe where my doctor is, or my kids go to school, and we really only want that information to be private between myself and the site that I Trust so HTTP gives us these guarantees, and this is why we think it’s really important for the whole web to be HTTPS by default, so it’s been around for a while and it has kind of accumulated some misunderstandings around it.
Can you kind of help dispel some of the myths around it sure yeah, so HTTPS has actually been around for quite a long time, but for many years it actually was very expensive and very slow and really hands-on and confusing to set up HTTPS. But the reality is that people all over the web have worked hard to make that change and it’s become a lot cheaper and a lot easier to set up. Https people still now think you know some of these myths about how it used to be are still true, but the reality is that that has changed.
So, for example, you should be really expense to set up HTTPS because you had to buy a certificate from what’s called a certificate authority, but now their certificate authorities out there that will give you a free certificate and make it really automatic and easy to set up. One of the examples is, let’s encrypt, so this is actually changed HTTPS and made it much easier to adopt. So what is the state if HTTPS? Now I look at HTTP archive data and it says that adoption is around like sixty percent and when you go back and look through like seven years of data, you can see it’s actually rising like pretty steeply.
So what are the tools that you use to understand? The state of HTTPS and what is it so Chrome, has a public transparency report where we published out about what we’re seeing in chrome in terms of the amount of HTTPS usage, that’s out there on the web. So, for example, what we’re seeing is the usage in Chrome on all of the different chrome platforms on desktop and on mobile is been rising over the years and if you go on to the HTTP transparency report, you can see chrome platform how the usage is increasing.
You can also see not only this in terms of the pages that are loaded over HTTPS, but also browsing time, because, as you might imagine, people are spending different amounts of time on different sites, and we can see that that across the different chrome platform is growing. As well, it’s also broken down by country, which is pretty interesting, because you can see how different countries all over the world are doing on their adoption of HTTPS.
Some other things that are on the transparency report are HTTPS adoption actually at Google. So you can see you know, Google, it is a big site, just like any other site. It took us a long time to actually get this ramped up, and so it’s pretty cool that the transparency report also shows how HTTPS usage has grown at Google. For all of our different products, so what kinds of things is chrome doing to increase HTTPS adoption? So I would say there are two main areas where chrome has made slow changes over time to encourage HTTPS adoption and the first is in Chrome’s UI for connection security.
So chrome shows an icon in the address bar that indicates connection security and we’ve actually changed this icon over time to help users understand the lack of security in HTTP connections. So chrome used to show just this plain circled, I icon for HTTP connections and we thought that was actually a problem because it really doesn’t indicate to people at all that there’s no security with an HTTP connection and what we’d actually like to get to for all.
Http connections is this kind of scary: read not secure warning, but we think that if we just roll that out for all HTTP sites right away, it actually could cause some panic right because we don’t want the web to seem scary. We don’t want people to see this morning all the time and we’ve also seen that people get what’s called warning fatigue, which is that if they see warnings too many times over and over, they start to ignore them.
They stop paying attention to them. So we want to be honest with users without sort of inciting chaos and panic. So what we’ve done is we’ve actually rolled out the warning slowly over time increasing, so we first started showing this gray eye not secured in the address bar just for HTTP pages with passwords or credit cards, and then, sometime later, we started showing the warning also when Users enter data or for incognito pages, and we actually just announced that in July of this year, we’re going to start showing it on all HTTP pages.
So we’ve actually rolled that out over time we’ve seen the amount of HTTPS usage increase and because HTTP unit has increased, then we’re not too scared about the warning fatigue that would be shown from the warning, and so what about the technical API is on the web. Right so another thing that we’ve done in chrome, to encourage HTTPS adoption and also to you know make the web more secure is to require HTTPS for web api s that are very powerful so for new api’s that have come out like service workers, because serviceworker is Such a powerful API we’ve actually required HTTPS to use it.
This also goes for HTTP two, which really improves performance, and it actually requires HTTPS, but we’ve also taken a look at api. Is that already exists on the web and we’ve actually deprecated usage over? Not secure connections for the api’s that are very powerful, so an example here is geolocation, there’s also getusermedia, which is about getting the photos on your phone, and so now sites can no longer use those overage.
This is like patching holes and security on exactly that’s great. So where do you think we’re heading with HTTP? Are we going to achieve a hundred percent adoption and we can all like go home or is our job not yet done? As we talked about earlier, adoption is still, you know not at a hundred percent, yet there. So we still definitely have you know a ways to go. I don’t know that we’re going to get to a hundred percent because I think there’s always some kind of driftwood sites on the web, things that people don’t maintain, but I do.
I would like to see us get close, so you know, if you know any sites out there that are still HTTP, you should go, tell them to turn on HTTPS. They said. No then tell them to come talk to me and tell them why they should, and you know users on the web can also vote with their feet if, like their bank, isn’t secure like go, find a secure banking website put your money somewhere else. So what are some of the knots that websites need to untangle when they need to make that switch from HTTP to HTTPS yeah? So you know migrating your web site to HTTPS.
It’s not as easy as just you know, putting an S on the end of the name of the web site. It’s not as easy as just getting a security certificate. You actually have to look and make sure that all of the services that your site depends on. Also support HTTPS, so, for example, a large complex site might depend on many ad networks, maybe analytics providers, and so the sites have to sort of take an inventory to first see what are all of these third-party dependencies that I have and then do.
They actually support. Https and then, if they don’t, they might have to go out there and actually convince them to start supporting HTTPS. So it can actually be sort of a project management type project as well to like make sure that you you’ve sort of done spring cleaning of the whole site. Well, Emily. Thank you so much for being here and telling us about HTTPS, and I learned that there’s so much more to it than just the S at the end of the URL, where at the end of the protocol in the URL and how it’s actually like deeply ingrained With the API is that people use for being Sheriff thanks for every week, so if you’d like to weigh in on the HTTP discussion, leave a comment below we’re going to have links to everything we talked about in the description tune in next time.
”. 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 ]
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.
My guest is Adam Argyle he’s a developer advocate at Google and creator of the viz bug, design tool and today we’re talking about the state of design systems. Let’s get started Adam thanks for being here, so I want to ask you what purpose does design fulfill on a webpage? What are its goals? Mmm. That’s a good question at a high level. I feel like design, does a couple things we have.
You know it’s supposed to be guidance. You want to have credibility, so that’s like the better designed it is the more credible it feels right. You don’t want to spend money somewhere where it looks like there’s no design, even though that might not accurately reflect the product or what you’re investing in. But I like thinking about at a very, very high level. What design is doing is we have affirmative design and we have critical design and critical design.
It’s the type of design that is exploratory. It sort of provokes you Brutalism as a good example of critical design where you’re looking at something is like wow. This is like stark and shocking, even though it’s sort of retro in a way so there’s design, can do really interesting things to your psyche. In terms of like challenging you and or we can see more of this affirmative design, which is kind of getting more popular, it’s safer, where you’re sort of piling on to the social norms of like what’s going on in design because it’s safe and it’s familiar and So folks will visit your site and they might feel old into an action because they visit it and it’s beautiful and airy and they might be looking at something terribly, not attractive, like let’s say a scrubber.
For you know your sink. You can make a scrubber and a sink look very nice, so you visit the site and says: do you have problems with your sink feeling? Dirty and nasty. We’ve got the scrubber for you, so it’s like every design States the problem, and that brings in the solution and that’s sort of lulling you into this behavior there like eyes and this familiar you’re here it looks like a normal ad.
It has the normal flow. Let me guide you down this path and we’ll take you through this excellent experience. So design does both those things that’s really high-level, to does a whole bunch other stuff too, but yeah, I think that’s sort of what it’s trying to do is credibility flow. You know somebody else has done the work to organize it for me, so it’s supposed to be easy, I’m supposed to be here to consume quickly and get a task done, guiding the user towards the solution for that weapon yeah, and in that case it’s usually the Solution that the webpage wants you to go down, which is where you know, design, has a little bit of cunning in there.
Some people say design is a type of trickery as well, which right we have like dark patterns that are like legit trickery, or we have light patterns, which are it’s trickery or we’re just sort of like? No. This is just a healthy guidance. You can you could diverge it’s okay, yeah, so in terms of the tools that designers have what is a design system and what are its goals ooh, so a design system, that’s sort of it’s a hard one to nail down.
It’s gone through all these phases. Ah, my current opinion on what a design system is is where we previously had design deliverables that were sort of like a design system, and then we had engineering deliverables that were kind of like a design system. Well, we have with a design system, it’s a merging of the two where designers have their symbols and their files that generally represent the same components that engineers are making and there’s like this coming together moment and a design system.
That’s what I think we’re currently personifying that as we’re before engineering had like a pattern, library or component set, and then the designers had a style guide. So what are some of the principles of a good design system? Ah, yes, okay! So, at a high level, I think a design system intends to make future us have easier decisions like in the future. I shouldn’t have to invent a new button. I shouldn’t have to invent a new login form like these.
Things should be solved already, so at a high level. That’s one of its most. You know valuable propositions. Is that future you, or even, if you’re, being really consider it like other customers of your design system, customers being maybe other development teams or the designers? Maybe even like the marketing team? You have people that want to use that those are. I call them your customers. So a good design system is considerate of them and it empowers them.
But I like a low level when you’re implementing a design system, you should have things like reusability extendibility. You should have accessibility built in. Essentially, these LEGO pieces should have solved a bunch of problems for other people already and and be battle tested and have gone through. You know: ok, I’m gesturing right now, but the gesture is imagine a rock that I’m tumbling into a pearl like we’ll take and then we’ll have a bunch of pearls to give so that other people can and get their tests done easier and also there’s some something About that, where you need interactivity as part of your design system right, I have seen some design systems that don’t just talk about the component.
They give you levers to pull so you can visit a page and there’s some tools out there that do this. Like a story book is one we have other tools coming like frame racks, so there’s like design tools that are coming out very either very focused on this one particular use case, or you have ones that are a little bit more documentation focused so they’re less like Compose and build and more like no tinker and play and assess what component you need beforehand, and I like that tangible learning it.
It’s really nice, especially for someone visual like a designer to come into a design system website and peruse and find a component and be curious and play. It helps get really sticky the features and the capabilities of that in terms of the life cycle of a design system. Is it ever really done or is it more iterative? No, I think they really only grow. I have seen them be reborn or we, you know, we’ve seen them bring reborn with brands or they’re reborn as complete redesigns, but no, I don’t think they’re done.
I think they’re growing. I think we’re making teams now to facilitate these things, because they are so difficult and they only grow in complexity because well, there’s considerations that are often lost like mobile. You know. A lot of design systems are like a look at our sweet, desktop design system and they’re like cool what to do on mobile. We’re like we’ll get there same with like accessibility and layouts and there’s like a few other things that I think some design systems can do to grow and be even better, and I think that’s just what we’re discovering right now, like folks, are playing and they’re trying To figure out what aspects of the design system are really meaningful on? What’s crufty and you know for young industry we’re all still learning kind of like what this means.
Do you have any examples of older design systems that we draw inspiration from today? Whoo, yes, okay, whoo, okay, so old design systems. I have a bunch of them that I’m a big fan of we could go back in terms of like inspiration and things that are influencing what we’re doing today and go back to print and be like print. You made beautiful style, guides or brand guidelines. You would give Legos to a client and that client could go put them on an envelope.
They could put them on some stationery, so that was a very early set of like Lego deliverables that had some rules and some intentions. Then you have operating systems that feel very much like design systems as well right. The first iPhone had a design system for sure they even had a document, the hIgG right, the human interface guidelines. I would like to see more Design Systems have a hIgG. Are we super cool all right, and then we had Android with Halo.
These are inspirations to me, Android with Halo, and remember that one dark and glowy everything looked like it had like lightning, bolts or like neon around it. Actually, you know what it looked like that was looked like that Batman movie was. I was like a UI based on that was kind of cool. It’s right. We had platforms, we had web kits, oh yeah, so this is like material bootstrap, html5, boilerplate, jQuery, Mobile yeah, those were and what they call those right, those weren’t design systems.
They were component. Libraries at UI framework, UI framework, yeah pattern. Libraries, they had all these interesting names. I think we also take inspiration from fashion. We have this kind of goal right now. I have this metaphor. I like to think about a design system. It’s like you’re trying to make a capsule wardrobe. That’s everyone else in the company should want to wear right. You’re like okay, I’m the designer.
We need to make uniform, looking things across our site and they should be familiar and an elegant, blah blah blah. So what they do is they go make this this design system? That’s essentially like making a set of a wardrobe like you can’t screw this up. Just walk in the closet. Grab a shirt grab, some pants grab. Some shoes grab a hat. Who cares? It all goes together and that’s a that’s a term from well.
I learned it from Pinterest. I don’t know where else it came from though, but the capsule wardrobe idea is this yeah grab and go wardrobe and we’re trying to make a grab-and-go design system. I’m going to hoppy and grab a couple things make a new layout, be on my way, so fashion, I think, is influencing us in that way too. They want to be very minimal. Alright, it’s almost like Marie Kondo, your your wardrobe like go in and pull all the stuff that doesn’t fit in the capsule.
Make it reduced set like reduce your anxiety by you, know, reducing your options, but I have a question about that like when you limit your wardrobe or you limit like your UI elements. Is it true that you can have one size fits all UI elements or sometimes you need to reach out and use something new and different, whoo right cuz, you don’t want to wear my clothes. Do you know yeah you should like dude, your wardrobe is well.
It looks like your wardrobe right like what, if I want to have my own looking clothes, and this is where it comes down to like well, and I have two opinions here. One is, I don’t think designers want to wear other people’s clothes. So it’s to me it’s a little interesting that we’re trying to unite. I think the goal is super right, like that. We do need to make reusable Legos that are extendable and and are helpful for future problems, but at the same time, the more you try to abstract and reduce these like very subjective visual emotional things into like little units.
They start to feel very functional. They lose some of that that excitement that creativity and I think people want to start breaking out of your design system at that point they feel trapped. So there’s like a there’s, a there’s, a struggle here with design systems, which is we want to empower everybody, but we want to not be trapped. We want to be able to pick clothes every day that are really easy for us, but then we want to be able to go out to a fancy dinner and not look like we’re dressing from our capsule wardrobe and especially if you have customers, customers want to Have unique aspects of the site, and so naturally they’re always pushing on the design system to extend even more.
This is a good shout out to to material and Google material. The new version looked at what their customers were, doing, which the customers for materials tons right. People all over the world using it from dashboards to mobile apps, and in that case they looked at how people were using it and people were constantly customizing it right. They didn’t want material, vanilla. They wanted material with my Flair, whatever that Flair was like right, like I want crunch material, so oblong it doesn’t exist, but maybe I should make it no, but yeah that they looked at their customers and they empowered them to customize, in an extent material as a Base, I thought that was really observant and it was like research-based it’s just a very, very nice plan for the next version of a design system to lean so heavy into customization and enablement of people to fork.
It’s almost like they’re letting people fork to to manage their own and they can still pull updates in that’s a really great segue into my next question, which is there was a comment on our previous article in March, the state of CSS, with you know, Kravitz our Guests and this commenter is cool twisted TV says the problem. Seeing lately is that most websites now look the same. It’s like they all have this standard template or something, unlike back in the day when flash was a thing, people used to create out of bounds designs along with tons of nice animations, but nowadays everything is flat.
All gridded up the same way with a few minor positioning tweaks here and there I miss those kinds of designs that today we rarely now see all because everyone is now into this flat and blocky design. Look slap a few fonts on a page and add a few pics and color on the background and you’re done: that’s 2019 for you. What do you think about that? You know we’re. Can an agency even working at startups? We couldn’t take a lot of risks and we were moving so fast.
The only thing to do was affirmative design. I think what this question is kind of poking at is affirmative versus critical design and they’re upset that everybody’s gone affirmative they’re, like ah you’re, just piling on to the currently socially acceptable design patterns and strategies. That’s so lame, which I agree, because I built a lot of flash websites and yeah. You could land on one of my experiences and it was like you’re in a fishbowl right.
It’s like fishing yeah. You could hover over the treasure chest and would pop open and bubbles would come out. It was way more critical, design way more like experimentation and in creativity was like. You were unfettered, but at the same time, if we think back at that because there’s, I think, a lot of joy and and fun that was there, it was less serious and it wasn’t really achieving inclusive design as well.
I think one of the reasons folks other than you know you know being safe – is that flat and and choosing some these modern strategies. They really make accessibility easier because you’re not going critically, you don’t have to go undo something to be inclusive, so I think inclusive design, which is a really impressive and great push that we’re doing right now. It’s also kind of inhibiting some of our exploration because we want to be able to reach as many people as possible and affirmative design is lolling right.
You visit it you’re like all right. Well, I don’t really have to stress, while I’m here or do very much deep, diving, there’s the navigation menu, there’s my primary reaction, but if I scroll down nope, there’s three little things that tell me about the feature this: the other features of this product. Oh Harry Roberts, today, Harry Roberts today writes this thing, which basically is like recoating.
This person yeah, I have a quote here flat design in the rise of more and more digital products, does seem to have killed off a lot of that exuberance and experimentation, which is a huge shame. I missed the days of seeing what adventurous and out-there things people were trying to create. You would log in every day just to see what crazy stuff people built, whether it was flash or web. I feel that I think, there’s a there’s another tweet.
I can never remember that guy’s name, I think it’s John gold huh. I remembered someone’s name. Wow we’ll have it. I know your name, yeah, Rick Vesco me mm-hmm screen name. This tweet, though, had two images up and it was like which site? Are you building the one on the left? Are the one on the right and they’re pretty much identical? They they’re like big there’s an app bar at the top there’s, a big header image with big diner was text in it.
That’s like there’s a problem and then underneath that it’s like what’s a solution right and they’re, both there and they’re the same they’re like the practically the bootstrap templates that you could get for free they’re, practically the the theme for every WordPress site is now looks like This and the coolest and most creative and critical ones might have a article playing right. What text overtop like put some extra effort into that one that pictures animated? Do you consider bootstrap to be a design system? I do.
I don’t think they do well, and maybe this comes down to where I’m I’m curious about what a design system is and how it’s different than a pattern. Library. I think I think it’s that designers were more involved in a design system, whereas, like bootstrap is very developer, led, I think design kind of came in a little bit later after their Legos got really popular and so yeah. I think I think their design system that just kind of got there in a different way and the result, the thing that they have the tangible thing I can go pick up off the shelf and just like place in my tool belt right.
I’m I’m Wayne right now from Wayne’s World, so I just got my like from the back of the car. If anyone remembers the Shockers anyway, whatever that’s bootstrap right now, I could go get that off the shelf and be immediately useful with it and solve my future problems. It’s like the same value, props that I got and and we’re sharing about a design system. You could get them from bootstrap, but it doesn’t call itself a design system.
I can’t remember what their home page says. I think they’re one so, according to the HTTP archive bootstrap, is used, unlike one out of every four websites, at least in some fashion, which is a surprising stat who knows to y’all, but could that contribute to this feeling that websites are all looking the same? If 25 % of the web is using bootstrap with the same type of layout, is it possible that bootstrap is a victim of its own success in a way whoo? I, like that phrase victim of its own success, yeah.
Yes, I I think they are this. This is funny. This reminds me of two two metaphors I don’t want to share like bootstrap is funny it like. If you think back to high school, there was probably a super cool band that their album just came out and you really little dead band, so cool and you listen to him a ton. They made a second album with Chapter four made, a second album when you’re like this Bay, it’s still cool or bootstrap three, and then it gets really popular and everyone’s.
Listening to him. It’s like some fool who you don’t like, shows up wearing the band shirt and you’re like okay. That’s it done with this print and you start calling them a sellout and the reality is just like they’re now popular they’re, not making money they’re successful. You should be happy for them, but instead you’re turning your nose up and like this, like defensive, disgust like I don’t want to use it anymore, even though all the stuff you’ve built with it was great all the music and moments you had with that band.
We’re really nice, but it’s hard for anything to stay in fashion for too long, that’s kind of like the second metaphors, like the Wardrobe, we all had favorite stores we shopped at back in the day whether it was zoomies or gap or whatever right, and these were Like places, we went to go, make easy decisions that helped us get on with our day and that we were still picking something like relatively cool and meaningful, but then it just gets old we’re kind of rude as humans.
You know we we we burned through stuff. All the time we consume it and we’re like this is so good and then we throw it in the trash. So I think bootstrap is a victim of its own success, but it’s also very much still a success. I think being successful is hard. I mean look at any big framework of like whether it’s a JavaScript framework or big design tool. As soon as you hit the big shots and like you’re the cool one, everyone wants to take you down and that’s that’s a hard life to be in so bootstrap.
Stick it out, I think it’s still a great product. It’s obviously just reaching a different market. Almost like the pop band right, the pop band Green Day right loves their first couple. Albums third one came out, didn’t want to play that band anymore, but they reached a whole new set of people, and those folks fell in love with them. In a way that I didn’t – and I shouldn’t say that Green Day is bad.
I should say that Green Day is successful and they’re reaching new people and I still like their dewy, so you’ve spent a year as a UX engineer at the Google cloud team, as designed systems engineer so to speak yeah. What was your experience on that team? Yeah? That was really I was oh, so illuminating, so yeah I was a my title was really long ready for this. I was a UX engineer on the design systems team of GCP through a design lens, so they have two different types of UX engineers.
There’s UX engineer, engineer and then there’s UX engineer design, so I was in the design side. I was in a team of four or five other UX engineers who were supporting the design system, which had a big team, and I this was really cool to see how much commitment Google had to their design system. In so much that this team was made up. Of three teams there was a trifecta. It’s like a triforce of folks were managing that design system.
That design system is creating jobs, and it was really interesting to see how all of them were working together. What problems they were solving. There’s two things. I want to point out the first one I think is really interesting in meta, which is Google here I’ll just start with the first one it was built on angular, so is angular, which was transitioning from material one to Google, material and angular was doing a good Job at this work, the the struggles that they had were with how many customers that they had.
So this is where I like this meta comparison. You have Google clouds and their design system, which they call their design system, a condensed version of material. So it’s like a child seam. It’s like they forked Google material and made an enterprise, condensed version, that’s not as airy and fluffy. That’s interesting, because that means Google Cloud is a customer of another design system. Simultaneously, they have hundreds of customers, so they’ve got customers that are internal right, App Engine there’s like various products and each one of those products has a team.
Each one of those teams are consumers of this design system. That’s crazy! Then you have third-party players. People don’t want to add plugins or other support and other features into GCP that also want to use your design system. So they had this really really unique scenario where they were simultaneously a customer of a design system and a producer of a design system. Anyway, yeah. It’s meta I liked it and they were really adamant and very good at listening to all of these different customers and trying to make this thing work for everybody.
But it’s a very difficult task. They’re hiring they have tons of headcount, because this is GCP is humongous and they need help that and the UX teams they are really fun and really cool. So, if anyone’s looking for roles GCP in seattle, we’ll put a link in the description yeah sure so you mentioned something earlier. I want to come back to inclusive design. What is that, and what is the purpose of it? Oh man, this is so inclusive design.
We want this is so funny. It has a name, because I feel like it’s the thing that everybody’s wanted the whole time. We want our content to be accessible for as many people as possible right like. Why did we have to put a label on that? And I think the label is there and what it means is you need to have a site, that’s accessible, which really means you just need to test. First testing your site for accessibility is always this awesome.
Empathy experience where you’re like. Oh no, my sites, probably fine on that. Then you go tap through you’re like it works. It’s not elegant and that’s sort of like inclusive design, is like taking that extra step to empathize research. Ask folks and adjust your design to be more inclusive. So this can come down to things, like contrast, ratios font weights than this tab flows and stuff, like that, so looking ahead, what do you see the role of components and future Design Systems? I think we’re only going to get more complex as things go on we’re noticing now that our components aren’t good yet still, especially once you get to inclusive design areas where you thought you were done, and then you go test and you’re like.
Oh we’re not done. Sometimes those can shake the whole foundation of your application, and I think it’s healthy, though, that people are investigating that other future things. I would love to see you know voice. We have so much voice interaction coming in. Why don’t? We have a design system for a voice. I think that I’d be really interesting green lines. I would like to see design systems providing green lines.
Green lines are an accessibility indicator, so we’re a red line. Is you just saying I intend for this avatar to be 45 pixels wide and 45 pixels tall with a border radius of 50 percent? So it’s a circle like you’re. It’s a traditional way of marking up a document to encourage or or be precise, about, the presentation that you want. Accessibility is a similar, similar push. We’re like I’m going to go in here and I’m going to look at this little form input.
I’m going to look at this form button I’m going to go and indicate that these three areas should be tab. Indexed this way and it’s sort of a designer taking control of the accessibility, experience and saying, and I’m just being very deliberate and clear about what it is. They expect this to do and yeah it’s nice. It’s the designers making those decisions, as opposed to leaning on front-end, to do it and how about mobile mobile is usually forgotten.
All right, so we’ve got components or it’s funny. Material most of the opposite material is mobile first and then you sort of have to expand on a couple things to get desktop to work most Design Systems. I see these days our desktop focused and then they they start to squish things down as things go. So I’d love to see mobile, included, more components, yeah good call. How do you see the relationship between designer and developer evolving? I want to see them communicating a lot more.
John Maeda recently had a very provocative titled article, but ultimately, what he was pushing for is a switch and strategy where traditionally he was a proponent of design LED. He was like yeah. The designer should be at the top of the company, maybe even like making all the decision it’s like. If you do that, then elegance is sure to be achieved and that’s successful in a lot of ways. But what he’s seeing now after a few years of this is that engineering is really really important to engineering is required in order for elegant design to even be achieved.
So what he’s saying is no designer, I’m probably going to you, know, butcher this title, but no designer will be more successful than another designer unless they’re integrating themselves richly with engineering. The pitch is the designer isn’t necessarily the leader of the show anymore. He kind of says you should be a supporting actor or actress, and even though that might be a little hurt, some hurt some hurting to your ego.
You can still go see a movie where the supporting actor actress was the star of the show. There’s just a relationship that needs to happen here. That’s just richer and deeper integration. Designers needs to be included more across the the wide array of design decisions that are getting made and a lot of those design decisions are made in code, so designers get in there meet those folks sit with them every day and try to have rich conversations about The engineering side of things and getting greens they’ll ask you and they’ll want your opinion.
I think I felt like engineers make a lot of decisions today that they’d rather not make, and it’s just because no one is there to do the decision-making for them or to tell them what it is. So they kind of have to make it up as they go, which puts the front-end engineer into an interesting predicament. Wait. I just thought of something else. This one is this one’s huge for me. Okay, so we have in the front end, especially the dependency graph is getting really popular and we have back-end dependency graphs.
We have CIA CD dependency graphs, there’s no designer dependency graph. So what I want to see is like two really weird things. First off, I want to see design files pub/sub, where I want a design file to publish the colors and publish spacing units and like some of these, like really atomic units like think of tail wind tail. Wind is this: for I’m anali reduced design system, they have a file and I love it because it’s almost like, if you were to did you see the movie perfume the story of a murderer? No, I was a creepy movie, but he did something interesting which he was trying to distill the essence of beauty into like a thing that he could hold.
I feel like tale when did that they took a design system and they looked at all the different pieces and they started just like organizing and and plucking them and putting them into a nice list, and I, like that JSON object. I think it’s not JSON. Actually, it’s JavaScript, which is another cool feature of tooling anyway. It’s JavaScript file that is the most reduced design system into like atomic units that I’ve ever seen, and what I want to see is.
I want to see design files publishing something like that for a front-end to consume, and then I want to front-end to publish data models and other things for the design file to consume. I want to see a bi-directional communication happening between design, apps and front-end development that I want designers in that dependency graph publishing values. This is like why I want them in CI CD, like I want designers reviewing PRS, I want them creating PRS.
I imagine this like you’re in your design file. You changed a base color because it didn’t pass a contrast ratio. You know over here and some other tests, so you push and you save a change. You publish the change, which creates a PR that other people can go review designers, making PRS bypass the developer, bypassed the developer. I think it’s a decision the designers were already making. It just was like this long-winded feedback loop to get that work in they’re like I’ve got other crazy ideas too, or I think your design system should be a dependency graph.
Work clearly articulates what dependencies it has and what dependencies it creates for other things to consume. I’d like to see designers making kubernetes Canary deployments, I don’t even like to see I pitched GCP on this. I think there needs to be a design, focused cloud integration so that you’ve got. You know really rich cloud dev tooling, but we don’t have rich cloud design. Tooling, like their little design tabs over there, that a designer can go in create an a/b test which essentially makes a canary kubernetes container that gets deployed to five percent of the users.
Now designers can be in control of features of the front-end through some epic and really cool cloud integrations yeah. I want designers, I well here’s a challenge. I don’t know how to get designers into the backend dependency graph. I like pretty clear ideas on how to get the front-end and how to get them in CICE, but I’d love it if, like service designers, were included in API design and somehow there was again a pub/sub mechanism between these two or like the API team is publishing Something and the service design team is publishing something there’s just so much so much opportunity in this space for designers to get more richly integrated into the processes that are happening on the development side.
It’s not creepy. It’s super rad, like I want designers doing. Cember their design system should be versions just like the app and optimally they should match. It’d be really cool if, like the design system was out v 1.0 point twenty one, and so was the front end right because it was a consumer of that version. There’s a lot of opportunity. I think developers would like to have relinquished control over things like changing.
Colors and if the system is built well changing the value in one place like this master file and having it applied downstream to every button and everything else that depends on that color. I think they would love that. I I think so too. I think we just need some tooling. I there’s a bunch of people working on apps. I last time I did research. There was like 15 of them, but it’s sort of developers taking a design system building it and then publishing those Legos in like a design app, and so that’s what we’re seeing we’re seeing a bunch of design apps coming out where developers are saying, hey, I’ve exposed The levers to these components for you in this cool tool, where you can now go compose our Legos together and build something new and play in an almost production feeling like design tool, but really it’s still kind of prototyping, because the code it’s making is kind of Anyway, I think we’re headed towards a really cool integration layer there, between designers and developers, where they’re going to be richly working with each other and designers, will start to get more intimate with, like minor details about a component like what a boolean is and why a Boolean is different than an enum and why they should care and because those things are cool, I don’t think they’re scary all does viz bug actually fit into that vision.
This bug yeah. So if is bug school is it’s got a few of them? One of them is designer developer communication. You know a designer is often in their design tool. Land over here they’ve got an art board and everything’s placed XY, which made it really easy for them to. You know, highlight multiple and drag and delete. They had this. Like direct manipulation, but what is a bummer about that world is that it doesn’t translate.
Well, somebody’s, always translating it. So I was like a front-end engineer. I would receive one of those and I start looking at it, nice translating it to code and what viz bug does is it it sort of takes what the developers are making and lets? You inspect their work like it’s an art board and I’m I’m seeing folks that are having better communication with their engineers because they can feel things.
There’s like an empathy, that’s starting to happen, because the complexity that is the front end, is now something that designers can contribute to. They can go poke and inspect and modify and an experience why some of these things are complex or experience. How easy some of the stuff is, and so this book is definitely in there in the game to help designers and developers communicate better. It has some features where you know.
If you modify some CSS, you can show what changed in screenshot that and send it to an engineer so there’s an opportunity to even be like super articulate to a developer about what it is you need, but it’s also this book has to set their goal. So it’s kind of Sophie’s book is kind of like Firebug for designers. Its goal is to provide the same thing that Firebug did for developers, but it’s something for designers.
So give me tooling, that’s familiar to me in the end environment that can help me make better decisions, and it does that I think really. Well it a bunch of cool features too I’ll, just like breeze over and really quick, but there’s there’s guides. So you can hover and see lines and detect measure you can do measurements, you can inch. You can hover and instantly see any styles that are there, and I’ve done a lot of work to make sure that those styles that you see are the ones that designers want to see.
You’re not going to see all the craft. There’s an ally and accessibility inspector same deal. You click it. You just start hovering on stuff and it’ll. Tell you accessibility, details, there’s margin and spacing visualizations now, so you can hover and see, padding and see margin separate, so the dev tools shows them together and mine shows them separate and I support multi select. So you can multi select multiple things and as a designer or an engineer and see how the spacing is creating all that white space like where’s the white space coming from.
Is it a margin? Is it pushing or is it so? Those are interesting? You can also create, or you can’t create well now, you can’t create, but you can delete you can cut, you can copy, you can paste, you can double click, any text to change it. You can change any foreground color, you can change any SVG. You can there’s a position tool, you can just select something and then drag it around the screen and totally ignore the document flow.
So there’s tools to help you work with the flow tools to help you work out of the flow. It’s about, like you, feeling unfettered and getting an idea out right there, and, and it should feel fun like I wanted. It’s almost like. I wanted to break the glass four designers on a web page like we’re, constantly pulling down these magical pieces of paper and they feel so far away for designers like I can’t change that I’ll just go back over I’ll, just screenshot it I’ll come over here.
I’ll add a white box and cover up that – and you know like make this whole Franken thing and then ship that back to the developer and be like. Please like. Can you do this thing here and, and I’m hoping that folks start to do that in the browser which kind of comes into another value prop, but I do want to cover really quickly like this book wants to be more well. I have this phrase: it’s democratized the DOM and really what that means to me is.
I want the web and designing on the web to be more inclusive. I remember when it was easier and you know we were on MySpace and anybody could just go grab some CSS and paste it on the page and be like. Oh that’s, fun. That makes my brain tingle and a nice fun way better and worse for better or worse right. That’s vis bugs the same way. I’ve read or worse, people can go visit a page and play, but I think what that does is it opens up for children and adults too to feel like they can play like there’s like it’s now kind of a sandbox which simultaneously, I think we start to Like when you, when you start to learn by playing it first, there’s there’s just something different about starting that way than like going to school, and I starting all serious.
So I’m hoping that this can help people who are serious but also help people that aren’t that serious, be more inclusive and I forgot whatever. The second thing I was going to say was but yeah I mean, there’s lots of interesting features of his bug, but it’s trying to help wants to wants to be the design, debugging tools des tools. Perhaps oh I like that. So what resources would you recommend for people who want to learn more about design systems and everything else? We talked about yeah Design Systems, okay, so whoo, there’s folks, there’s three folks did I’m a big fan of dan mall.
You know Kravitz and Brad Frost there. They’re super articulate vocal public figures that are passionately talking about these topics and helping you ramp up or ramp down. Dan mall recently has been helping people not over focus on the Atomics of their design system, because you can get super like wrapped up in a button, and he did this really funny thing at a list of part. Recently he showed just was so good.
You should a button on the screen and then showed four companies that that could potentially be the button for and he’s like who’s button. Is that and everyone’s like? Oh, I don’t know, maybe that one, it was a blue button right and so the point was we can over focus on these little things and that’s not your brand and he’s essentially pushing you to real, like step back a little bit and determine like what’s unique About your business and and make make components and designs some out of those like your value prop like how are you different, because the Atomics are atomic, I thought that was really nice.
Yuna has a bunch of really cool things that she’s been pitching as well. She’s. Pitching accessibility in your components, which I think is really healthy and and she’s advocating for maybe you don’t need one so sometimes, and this is something I’m a believer in too, which is often we want to be the top dog like now, and so we go do Whatever the top dog is doing, we’re like alright, I need you know, legendary armor.
I need a sword of the gods of the ten thousand XP right, and so we like, we show up and we’re like level one, but we’ve got all the gear and we’re like this will make me good right and it does to a point. But it can also be a bunch of baggage and, like you, can’t even make it through the door of the first dungeon because you’re like to cover it in gear right. You got like magic shooting out of each fingers.
So I like that advice too, which is like look at the phase that you’re in as a team look at the phase Etrian as a product. You know notice that GCP, which is a very very large product, has an entire team dedicated to this. Now it’s that complex there is absolutely value coming out of a design system, but you got to look at the ROI like how much you putting in versus what you’re getting out, and I think that’s what that warning is it’s like.
You can spend a whole lot of time on the Atomics of your design system. You can spend a whole lot of time, making it really robust and then nobody uses it. So you got to make sure you have customers and anyway. Those three folks are really good to go. Look up and listen to they’ve got plenty of material for you to study. Well Adam. This has been great picks coming on the show, absolutely yeah. I was really fun.
You can check out the links to everything we talked about in the description below thanks for reading and we’ll see you next time.
My guest is jeff posnick, he’s on Google’s developer relations team and today we’re talking about service workers and how they’re elevating the capabilities of progressive web apps. Let’S get started all right, so Jeff, thanks for being here in the context of web technologies. What does it mean for a worker and what does it actually do so? The whole idea of a worker has been around for a while.
Traditionally there were web workers and it’s basically serves as almost like a background thread for the web, so a worker can execute JavaScript code, that’s kind of independent from the context of your actual web page and it’s a great way to kind of offload processing or I Do tasks that might take a certain amount of time without slowing down the main thread for your web page and yeah, that that’s kind of should been the traditional model for workers on the web.
So now what does it mean for a Service Worker? What does that? Actually do the service workers builds kind of on that concept and adds some superpowers really things that you were not able to do before so a service worker is similar to worker and that it’s, you know, running independent from your actual web page and it doesn’t have Access to things like the Dom you know or the global scope of your web page, but unlike workers, it could respond to specific events and some of those events relate to network traffic.
So one of the really cool things and most common use cases for a Service Worker is to respond to outgoing Network requests that your webpage might be making, and you can kind of sit in between your webpage and the network and almost serve as a proxy that You control and you could write code to take advantage of things like the cache, storage, API and say hey. You know, I know how to respond to this particular request without having to go to the network.
I could just use this cache response and thereby saving you know the uncertainty and unreliability that comes with coming against the network. It also enables capabilities like push notifications, etc. Yeah so there’s a whole bunch of kind of event based listeners that you can set up in the Service Worker, including responding to portion of vacations. That may come from a notification server and you know fetching requests and people other kind of interesting things are kinda slated for the future as well.
So what’s the status of its implementation and support? Yes, the service workers are well supported right now in modern browsers. So pretty much anything Chrome or chromium based, Firefox, Safari and edge at the moment, it’s great. They all have at least a basic level of support for service workers and some of the enabling technologies, like the cache storage API, so they’re they’re ready to use right now.
So web sites may experience Network reliability issues at any. Given time, would you recommend service workers for every website? Should they all be using one? Well, I mean it’s tempting to just throw a service worker up and see what happens. I would suggest to take a little bit more of a considerate approach before adding a Service Worker to your web app. Ideally, a service worker will kind of play the same role that your web server would play and maybe share the same logic for doing routing and templating that your web server would normally respond with.
And if you have a setup where, like your web server, for instance from a lot of single page apps, the web servers just can respond with some static HTML that could be used satisfy any sort of request. That’S pretty easy to map into a Service Worker behavior. We call that the app shell model or a service work role say: hey. You know, you’re navigating to XYZ URL. I could just respond with this HTML and it’ll always work.
So that’s a really good model for using a serviceworker. If you have a single page app we’re also seeing some success with partners or using models where their servers implemented in JavaScript, they have some routing logic and they have some templating logic. That’S on JavaScript, and that translates over really well to the serviceworker as well, where the serviceworker you just basically fill the role that the server would normally play.
I would say if you have a scenario where your back-end web server is doing a whole bunch of complex templating and remote API calls and language that is not JavaScript. It really might be hard to get your serviceworker to behave exactly the same way. So in those scenarios I mean you can add a serviceworker and we have some kind of provisions in place to not pay the price of having that serviceworker, intercepting all requests and then not doing anything and just going on against the network.
There are waves of saying, hey, you know we have a serviceworker, but we’re not going to be able to respond with HTML for navigation requests. In those scenarios it is still possible use the serviceworker for things like ok, show, custom offline page when you detect that a user’s network connection is down or implement a kind of interesting caching strategy, like still while revalidate for certain types of resources.
So it is still possible to add a serviceworker in those cases, but you won’t necessarily get the same performance and reliability benefits that you get when your serviceworker really respond to all navigations with HTML by essentially having a network proxy juggling requests and responses. Is there a latency cost of having a serviceworker yeah, so I mean you’re you’re running JavaScript code, that’s sitting in between your web app and then a work and that’s not for me.
Some of it depends upon whether the serviceworker is already running. One of the kind of neat features about a serviceworker is that just it’s particularly to preserve battery on mobile devices? It’S killed pretty aggressively. It doesn’t just keep running forever in the background. So sometimes you do have to startup the serviceworker again and there is a cost involved in that startup. There’S a really good talk from the chrome dev summit that just happened a couple of months ago that kind of goes into some metrics and real-world performance.
Timings of you know exactly how long it takes to startup a serviceworker, seeing tens to hundreds of milliseconds depending upon the actual device and things like the storage beautiful device. So you are going to be paying that cost. Potentially, when you’re using a serviceworker – and you know again – that’s really why it’s important to make sure that you have a strategy in place for responding to requests, hopefully by avoiding that work and just going against storage API.
Ideally, and if you’re doing that, then you should see the service worker give you an that positive in terms of performance, you know paying tens, maybe even hundreds of milliseconds is nothing compared to the multiple seconds. Simply didn’t see that you might expect from making a network request each time you navigate to a new URL right. What’S the saying the fastest request is the one that you never need to make indeed yeah.
So what are some anti patterns that you’ve seen the way that people have implemented service workers? There’S a lot of power involved in using a Service Worker? It is just JavaScript that you could write that will pretty much do whatever you want, so you can do all sorts of crazy things, some of which are kind of cool as proof of concepts, but not necessarily things you want to deploy to production in terms of The things that we’ve seen kind of as pain, points or things that are pretty easy to, unfortunately get wrong when implementing a Service Worker.
I think one of the things that it’s most common is caching requests and responses, as you go without having any sort of upper limit on the amount of data that you’re storing. So now you can imagine a website that maybe has a bunch of different articles. Each of those articles has images it’s pretty easy to write a serviceworker that just intercepts all those requests and takes the responses, save some in the cache, but those cached responses will never get cleaned up by default.
There’S not really any provision in the cache storage API for saying you know stop when you reach 50 or 100 entries, or something like that, so you could very easily just keep using up space on your users devices and potentially use up space for things that are Never going to be used again, you know if you have an article from a week ago and you’re caching, all the images and that article that’s kind of cool.
I guess if you’re going to be visit article immediately, but if it’s a page that users never going to go to again, then you’re, really just caching things for no reason. I would say that really one of the important things before you implement your serviceworker kind of have a strategy for each type of request and say: here’s my navigation requests that are being made for HTML; here’s how I’m going to respond to them here.
The image requests. I’M making you know, maybe it doesn’t make sense to cash them at all, or maybe certain it only cache certain images and not others. So thinking about that – and that really just means getting really comfortable with the kind of network info panel in the browser’s dev tools and just seeing the full list of requests are being made. You know. Sometimes your web app is making requests.
If you don’t even realize it’s happening and it’s coming from the third-party code and your service worker ends up seeing that too, so you want to make sure that you know what your service work is doing. You know what your web app is doing and just one other. I would know that a lot of times and kind of pain, point and things that could go wrong with me using a service work, but just has to do with controlling updates to resources.
So you know you are stepping in between. You know your web app and a web server you’re responding, potentially the cached resources, if you’re not sure that those cached resources are being updated. Every time you make changes to your actual website and you read – apply to your web server, it’s possible that your users will end up seeing stale content kind of indefinitely, and this is a trade-off like seeing stale content, but avoiding the network gives you performance benefits.
So that’s that’s good for a lot of scenarios, but you do need to have a provision in place for updating and making sure that you know. Maybe the user sees still content then the next time they visit the site. They get fresh content. So you know you could do that right. Unfortunately, you could get that part wrong and the users can end up the frustrating experience. So you maintain a tool called work box j/s.
What is that? What does it do sure so? Work box is open source and a set of libraries for dealing with service workers and kind of all aspects of building service workers. So we have some tools that integrated with build processes, including you know we have web pack plugin. We have a command line tool. We have a node module and that aspect of the tools, basically, is something you can drop in your current build process and kind of get a list of all of the assets that are being produced.
Every time you rebuild your site along with kind of some fingerprinting information like say you know, this is a particular version of your index. Dot HTML work backs will keep track of that for you and then it will efficiently cache all of those files that are being created by your build process for you and that just helps ensure that you don’t run into scenarios like I just described where you’ve rebuilt.
Your site – and you know you never get updates to your previously cached resources and we also have some tools as part of work box, that kind of harm or execute at runtime. That’S part of the serviceworker, so some libraries for doing common things like routing requests. We have there’s just kind of some canonical response strategies for dealing with caching, so things like still while we validate or going cache.
First, we have implementations of those strategies inside of work box, and then we have some kind of like value adds on top of what you get with the basic serviceworker spec in the cache stored specs. So we actually have an implementation of a cache expiration policy that you could apply to the caches that would otherwise just grow indefinitely, but using work box you could say, hey. You know it actually like to stop.
When I reach ten items and purge the least recently used items and just cache when that happens, and a few other kind of ran two modules, we see it as a bit of a kind of grab bag for all the things that somebody might want to do With a serviceworker and we kind of ship them as individual modules, you can choose the ones that you think would be useful for your particular use case. I don’t want to use something, that’s fine, you don’t have to incur the cost of you know downloading it or anything like that.
Do you foresee some of those caching and expiration policies making their way back into the cache storage API yeah. I mean it’s kind of interesting whenever you have something: that’s almost like a polyfill for some behavior on the web. You know whether that ends up being implemented back into the standards, and you know the the actual runtime could just fade away and just use the underlying standards.
And you know I’d like to see that. I think that where cost has been really great for kind of enabling folks to ship service workers in production and seeing the types of things that they actually need, when you’re shipping somebody in production and a lot of times when you could do that and get points. As a vision thing like yeah, you know it is actually important to have run time, cache expiration.
That could then be used. You know when going to different standards, groups and saying hey, we really do need to extend. You know, what’s supported natively in the platform, to take care of this really common use case. You know what that actually happens or not remains to be seen, but you know I think work box is positioned to help folks with kind of that initial, proving that these things are necessary stage kind of take it from there.
So, in terms of adoption, according to the HTTP archive, less than 1 % of websites tested actually include a serviceworker which is kind of a misleading number. For two reasons. The first is that it’s actually growing at a very fast rate and the websites that do include it are actually pretty popular websites. Can you give us some examples of those yeah? So I think you know the raw number of URLs unique URLs might be on the lower side, but I think in terms of traffic, you know sites as big as Google search have deployed a serviceworker for some types of clients.
You know partners that we’ve talked about using work box, in particular in the past and Gleevec Starbucks has a nice progressive web app, that’s implemented Pinterest as well, and there’s also some sites that you might have heard of like Facebook and Twitter that are using service workers. Not using work box but using them to kind of unlock things like you know, they’re progressive web app experience – or you know in some cases just showing notifications, which is important part of you know being on the web and having parity with native apps.
So you know, I think that the actual number of you know you visits to web pages is probably much higher than the 1 % number would indicate, and you know I mean there are challenges with adding a service worker into especially legacy sites. You know it does. Take that coordination that we talked about before tree, making sure that your service worker actually is behaving in a similar way that your web server would behave and yeah that doesn’t always fit into existing sites.
So a lot of times we’ve seen when working with partners in particular, is like you know: you’re planning a rewrite, re architecture of your site anyway, that’s a great time to add a service worker in and just kind of take care of that story as well. Are there any options for CMS users who may be using things like WordPress or Drupal? So there definitely are, and I think that you know first of all, I’d work for everybody back to another talk from the most recent chrome dev summit.
That really goes into some detail about the WordPress ecosystem in general, so they have a really cool solution, some folks from the dev rel team that Google have been working on it and I think it kind of works around one that that problem. I was saying where the architecture for your kind of back-end web server needs to match up with the serviceworker implementation I kind of just sending a baseline.
So it’s not an attempt to take any arbitrary, WordPress site that might be out there, which might be executing random PHP code depending upon you know what kind of themes and extensions and all the other stuff is going on. You really are not going to be able to successfully translate that into just a general-purpose serviceworker, but the approach that was subscribed and this talk. It seems to be building on top of a kind of a common baseline of using the amp plugin as a starting point.
So any site that has gone through the effort of kind of meeting all the requirements for using the amp plugin. So it means I don’t know the full set, but I think, like not running external scripts, not doing anything too crazy with other plugins. That’S inserting random HTML on the page building. On top of that, you can then have a serviceworker. That’S like okay. I actually do know how to handle this subset of activities that you know WordPress is doing when it’s using the unplug in and it can automatically generate that serviceworker for you.
So again, it’s part of a migration story. I think it’s not going to just drop into any existing legacy WordPress site, but it does give a nice path forward for folks who are planning on rewriting anyway are planning on making some changes anyway, and plugging into the CMS ecosystem is great way to increase adoption By tens of percents on what yeah absolutely so, what kinds of resources would you recommend for someone who’s just getting started with service workers? We have a lot of material available, some of which is more recent than others.
I would say that the things that I worked on most recently are the resiliency section of web dev. So if you were to go there kind of have something I would walk you through the various steps of thinking about adding a service worker to your website or just really thinking about making your website more resilient in general. So it’ll talk about you know identifying your network traffic it’ll talk about using the browser’s HTTP cache effectively, which is kind of your first line of defense, and then it all kind of go into how you could add work box to an existing site and the various Steps involved there, so if you want kind of a guided path, I would say that’s one option we’ll biased.
For that. I would say that if you want to just learn more about service workers in general and material written by my colleague, Jake Archibald, it’s probably the best that for folks who really want to deep dive on things, he was somebody who worked on the actual serviceworker specification And you know he knows more than anybody else about these things, so he was a really great article talking about the serviceworker lifecycle, just all the different events we have fired, and you know how you have to handle those events differently and implications that they have for You know the state of your caches and updates, and things like that so diving into that would be kind of my recommended starting point, and he has another article that talks about kind of a cookbook almost for recipes for caching, so implementations of the stove are valid.
A pattern cache first pattern: if you wanted to implement it yourself, instead of using work box, he kind of walks through the process. There is that the offline cookbook, yes, the offline cookbook, and if you want something, that’s really offline, there’s some actual physical books that that are pretty cool, related to service workers and progressive web apps in general. There’S a new book written by Jason, Grigsby, eight in particular, that I would recommend and just kind of talks a little bit about, I’m necessarily some of the technical aspects of service workers, but more about why you should think about adding a service worker to your site And why you might want to build progressive web app in general and that’s a really cool book, that kind of takes it from a slightly different angle, but gives some good perspective great Jeff.
Thank you again for being here. Absolutely you can find links to everything we talked about in the description below thanks a lot and we’ll see you next time.
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.
Jimmy's Internet Marketing Business Blog 