Categories
Online Marketing

Web Fonts – The State of the Web

”, My guest is Dave. Crossland He’s the program manager For Google Fonts And today we’re Going to be talking about the state of web fonts –, what are they, how to use them? Effectively and what’s new, Let’s get started, [ MUSIC PLAYING ], So Dave. Thank you. For being here, My first question is: About why web fonts, What do they bring to a website? Beyond the standard fonts like Helvetica DAVE, CROSSLAND Well, Web fonts really express a certain kind of Feeling for organizations They express a brand And you can have a web Page without a article, but you can’t have a Web page without text You have to have fonts And so a brand at its core Would be like a logo, a color and a typeface or a font, And so web fonts bring The kind of rich design that we have in print Media to the web, RICK VISCOMI And according To the HTTP Archive nearly one third of Websites use a font from the Google Fonts API, So why are developers turning To the Google Fonts API DAVE CROSSLAND, I would say That Google Fonts is fast, easy and free And so on.

Our Analytics page we’ve clocked up over 22 trillion. Font views in total since the service Launched in 2010 – And I think that being on Google’s content, distribution networks, we benefit From cross-site caching, So when you visit the First website that uses a font like Roboto, it’s downloaded and you may see Some latency there, But then on all Subsequent websites, which use the font From Google Fonts, then it’s in a cache And loads instantly across the different websites, We also try and Make it really easy So the font’s API Abstracts, a lot of the complexities of web Font technology from you, So we serve different formats.

To different browsers, For example, with better Compression formats, like WOFF2, only the newer Browsers support those, And so we serve WOFF2 files. To those newer browsers And we serve other Formats to older browsers And then finally We make things free and we have a directory of Hundreds of choices which everybody can choose from Now, of course, if you Want a particular typeface, then it may not be Available in Google Fonts and you would go and license That font for your usage, But not everybody, has the Sophistication in design or the resources To license fonts And I think it’s important That everyone in the world is able to do typography, RICK VISCOMI, So I don’t Know if developers truly appreciate how complicated Web fonts are under the hood.

I got a taste of this when I Was at YouTube a few years ago, I helped change the Default font to Roboto, and it was not as easy as just Changing the font-family CSS style, There’s a lot you need to do to Make sure that it goes smoothly for the users and they Have a good experience, For example, like YouTube users, Are from all around the world, They have different languages. Different alphabets, What are some of the Things that developers need to be concerned about For an international audience, DAVE CROSSLAND International Users face a challenge because the file sizes Of fonts, for them can be larger than just For European languages Traditionally Google Fonts has done a kind of slicing of Fonts into language or writing system sets, So we might have, for example, Latin Latin Extended Cyrillic Cyrillic Extended Greek Greek, Extended and Vietnamese: That’s your current support for Roboto that’s used on YouTube.

We also support Other languages — Hebrew, Arabic, Thai, Many different Indian writing systems And the biggest Challenge has been for Chinese Japanese And Korean fonts, A typical font for Indian languages can maybe be two or three times Larger than a European font, But for East Asia it can Be a hundred times bigger And so we’ve been able to Use a number of technologies, for example WOFF2 Compression which is now a W3C standard this year, And also the @ font-face Css has a new aspect called unicode-range.

Unicode-Range allows us to Slice, the fonts into pieces, dynamically And the browser will Only download the pieces that it needs, So that means that We were able to slice a Chinese, Japanese or Korean Font into over a hundred slices And therefore the Latency of each slice is similar to your European font, This means that the experience Latency is much better And because the Slices are cached across different Domains then the font gets faster and faster To load over time, RICK VISCOMI Custom fonts have Also been used for icon fonts to show images And more recently, they’ve Been used for emoji as well, So we’re moving beyond just Text and on to these other ways that we’re using to communicate, But it’s not without its Own challenges, right, DAVE, CROSSLAND, That’s right! Font technologies are always Improving and evolving And the use of emoji as a kind Of special case of icon fonts is particularly interesting.

I think that there’s a Debate in the web development community about how To best approach this Using images for icons, whether That’s PNG or SVG vector images is –. There are some advantages there. One of the advantages To using icon fonts is that aligning icons with Text in labels is often is a common use case And getting the alignment Onto the baseline of text can be tricky when You’re dealing with two elements: — a text Element and a image element And so icon fonts can Play a good role there.

They also have good legacy. Support because obviously text systems work everywhere. Unfortunately, for Emoji and color fonts that’s a little bit. More complicated because there are Different color formats for different platforms, And so one font file needs To have a lot of data to support all of the Platforms at once And they can look different On different platforms, So yeah emoji as web fonts Is still I think, kind of — is a cutting-edge thing, But it can add.

Consistency – and I hope we see more developments – Of that in the future RICK VISCOMI And going Back to the Roboto at YouTube example: one Of the things I remembered that was kind of tricky Was when we would have font-weight bold in our styles, That would default to Weight 700 by the browser, But our designers decided that It looked best as weight 500, So we actually had to go back. And change all of our styles from font-weight, bold To font-weight 500 And it became kind Of a new way that we had to ingrain into Our style development, But there’s something new.

That’s Coming out called variable fonts, How would they help Address the situation, DAVE, CROSSLAND, Yeah Variable fonts can help a lot. It’s a very exciting. New technology, It’s part of the Opentype standard, which is the font format that that’s Widely supported in pretty much all platforms today And variations allows you To do runtime interpolation between different sort of styles, Or faces within a font family, So traditionally you would Have like a thin weight, a regular weight, a bold Weight and extra bold weight And in CSS you’ve only Had up to nine weights — 100 through 900 With variations, then you are Able to specify weight, 154 and dial in a very specific And dynamic weight You can animate these weight.

Changes using CSS animations And in CSS4 there’s more Direct support for this RICK VISCOMI So does that Mean that every font is now going to be able to be Completely customizable, Or are only a few fonts going To be eligible for this DAVE CROSSLAND Well, it is something that font developers Need to add to fonts, And so in that Way it breaks down the traditional wall between the Font maker and the font user And so variable Fonts create a kind of dialogue between the two, So as a font user, you Can customize the font, but only in ways which the Font maker has provided for, And so that means that you don’t Need to become a type designer yourself, but it means that you Have that flexibility that you didn’t have before And the variations are Not only for font weight, There’s, also font width, There’s slanting And there’s also optical size, And those are all part of The OpenType standard today Optical sizing, means that When you change your font size from 10 point to 70 Point then, the letter forms will actually react and Respond to that change, And so, as your font Size gets larger.

The letter forms will Become more elegant And as it gets smaller They can become more legible, more readable And there’s also all other kinds. Of variations, you can imagine, which aren’t part Of the standard and are specific to each font, Things like rounding and many creative options. Google Fonts is commissioned. To sort of experimental trial fonts from type designer David Berlow at Type Network.

The first is Decovar, which Has a lot of variations which are decorative so rounding Different kinds of serifs different kinds of Stroke patterns And this can be used as a Kind of graphical device, Because variations Can be animated, I think there’s a lot. Of potential there, The other typeface is Amstelvar And Amstelvar is A text typeface and it has a set Of parametric axes which go far beyond Just weight and width and into things like The ascender length descender length and A lot of variations which can be used together, To create more readable text, RICK VISCOMI, I’m Especially interested about variable fonts, We’re going to have to Have you back on the show once they’re a little Bit more established, Then we can talk about The state of them, But where could Developers go if they want to learn more about Any of these technologies DAVE CROSSLAND Microsoft Edge has on their developer site a Really good variable, fonts demo site That’s a great place to learn.

More about variable fonts, There’s also the Design.Google.Com/Fonts articles website, where the Google Fonts team publishes articles about type and Typography in collaboration with the Google Design team And then there’s Also material.Io, where you can get the Material Design, icons, font and learn more about Material Design guidelines, RICK VISCOMI, Well, there you go, The links are in The description so go check them out.

Share your web fonts stories. In the comments below Don’t forget to Like and subscribe so you can tune in For another episode of “, The State of the Web” Every other Wednesday, Thanks for reading and We’ll see you next time, [ MUSIC PLAYING ]


 

Categories
Online Marketing

Accessibility with Marcy Sutton – The State of the Web

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


 

Categories
Online Marketing

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


 

Categories
Online Marketing

Accessibility Testing – Totally Tooling Tips

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


 

Categories
Online Marketing

How We Designed Chrome – Designer vs. Developer #20

What you want? It’s always they want more and more, but they never use those things, and it’s really hard and quite brave thinks they know we’re going to script stuff away. There was internal talk about how chrome is built, and I think back to that time, where Internet Explorer was the dominant browser, Firefox was just was fighting and like the developer, tools were becoming quite prevalent and Safari was was, was just released.

I believe and Google designs to build a browser. So how do you start in that environment? Where there’s so much competition chrome was released in 2008 yeah, but actually we started on it in 2006, oh wow and the team at Google that started on Chrome was actually we were all working on Firefox. When I first joined Google, the beginning of 2005. The idea was to work on making the web better. One way to do that is work on making browsers better.

So we started out as a team working on making Firefox better a year and a half into it. We made the switch to actually building our own browser, and that was a big, big, complicated decision right, because you know we had already. We had been going down a certain path right. So looking back, I think or a number of factors right. First off we thought we could do a really good job, so that had to be true yeah, but also you know there were a lot of things about browsers in those days that I think created, frustrating user experience.

Yeah you got to go about going back 2006. You know applications like Gmail, yeah Maps and YouTube, and so on. These things were becoming popular and other folks were building complicated web applications like this and your typical browser. In that day, if you were to leave Gmail running overnight, you come back the next day and your browser to feel pretty sluggish and bogged down because of just the weight of these applications and so way back then we we had the idea.

That would be really nice to split up the browser into multiple processes. Right operating systems had gone through a revolution from the days of windows, 3.11 to Windows, NT and so on. Yeah we’re pre-emptive multitasking was the thing OS 9 to OS 10. Could we use pre-emptive multitasking? Could we take advantage of actually multiple processes on these systems for web browsing and seemed pretty pretty pretty like, actually seem possible? If you are thinking about a browser from scratch? Yeah I mean in terms of like the UX of again is like going back to the beginning of like browsers or the browser’s of that time.

It reminds me a bit like search before Google’s like search was basically portal sites and the search input field was like almost the most least important thing, but then Google came along. It’s like Nana, that’s the wrong user experience with when chrome came about. It was quite radically different because I know remember this phrase is a Content, not crime, yeah um, so just making that kind of UX decision of like you know, because it was all toolbars and remember when you install anything everything.

It’s all fact you back, then, is very common to find a user with internet explorer and they had installed multiple toolbars. So it’s not just one tool: Bartlett, multiple tours and there’s it’s great absurd. Screenshots of people was, you know those browsers had like five toolbars and it’s not a lot of room for the content right. So one of the things with Chrome’s content now chrome idea was to really remember that the whole point is people want to engage with the web application of the website.

The web content and the browser site try to get out of the way just facilitate helping. You use the web, and so even when we designed the extension system, we resisted the idea of having a first-class way or proper way to do toolbars or sidebars. We really didn’t want extensions over you really. You know using up screen space when that screen space to users really want that for the content. So we designed things, like extension buttons.

That would be the primary access point tried to guide things in a way that would um preserve that notion and even the UI of chrome itself. We tried to keep it very minimalistic. We you know we spent a lot of time in the early days. Thinking, if we’re going to introduce another browser, it’s got to be so awesome right, it’s got it and what does that mean? It’s got to have like the most amazing features.

It’s got it like have a whole new take on browsers. It’s got to be radically different. Ui, surely that would be the reason why we’re doing this right yeah, but in and we tried many different things: putting tabs on the side. You know fancy user gesture kinds of things, Mouse gesture types of things I mean none of that really felt right, and we can do that process. We came to realize what what actually we were doing and what really would set chrome apart is that as a browser, just works better yeah like creating software.

That’s not frustrating is actually hard to do yeah, and I think users appreciate it and so started to think about it, and what does that really mean for us? It was like all products should be pretty simple right should try to try to come up with elegant UI choices. Keep it simple: it should be performant but, like I said, browsers, browsers, have a history of being janky and not well-behaved, and and and you, the user has an expectation when they click on something, especially when it’s the chrome of the UI and when it’s the the Browser UI, they click on it.

They say close this tab. It should close right away yeah, you know par for the course. Those days was. You click close that click to close that tab, and you see you might see a beach ball on Mac, os10, yeah or nothing happens on Windows. You start to see the application not responsive problem right, but in chrome, because we went with this multi-process architecture. We were able to guarantee that if you click close on the tab, it’s gone yeah and those are examples of like responsive UI that you know.

Sometimes, when we talk about performance speed, we mean like how did welded perform on a benchmark, but a lot of times. It comes down to like was experience, smooth, responsive to the user input. Did it actually do what the user wanted it when the user wanted it, that kind of thing, so, simplicity, speed. We also put a big focus on security and stability, so we had these four s’s yeah, and that was the thing that we just repeated to ourselves: if you’re not sure what to work on work on one of those things.

Yes, work on making a simpler design work on making a more performant work on making it. You know more secure so and really with security we mean making it so users feel safe on the web. I feel in control of their privacy. They understand what’s going on, but also that it’s the system is protecting you from malware and so on and again our multi-process architecture not only helped us make something more performant, but also something more secure, a browser more secure and, finally, it helped a lot with stability.

We knew that starting from scratch, with a browser that might actually be the biggest concern, is it going to just crash? Is how do you? How do you exercise enough of the browser in your testing to know that you’ve got it right? We based the browser on not on Firefox, and we based it on WebKit, which is what, at those days that was Safari 2.0 Safari, 3 had just come out and WebKit Safari was known to not necessarily be the most compatible with the web right.

Modern web standards, driven by Firefox, were just becoming a thing. Internet Explorer has had a lot of quirks about it. Internet Explorer 6.0. A lot of quirks, especially thinking about like flowed yeah, that with the flow, though we had a box model. All these things were very impactful to like how web pages were built. If a developer was testing a lot with Internet Explorer, there would be the quirks that they would code to if they were testing.

A lot was Firefox we’d, see that and the Safari it was like. Well, probably, they weren’t testing with Safari, and so it was a big challenge in a big fear. When we launched Chrome, is it going to just crash all the time yeah? How are we going to? How are we going to manage that? So we put a lot of effort and in fact that same issue in forms like our choice of the user agent string. If anybody’s seen the user agent string of Chrome, it’s kind of hilarious because it mentions ever every browser ever since chrome came along.

And that was part of navigating this whole like does it work conundrum we always taught in software development and UX, add more features, because more features means more value, so I mean: was there ever pushback or was there like a fair, maybe we’re taking away too much From the browsing UI, we certainly ugly launched, and it originally chrome, without an extension support, and even the bookmark manager when was was, was revised quite a bit.

I’m going to post the initial beta things like this, so we we intentionally went with a very minimal approach, but we also really encouraged the team to try a lot of things with the idea that, knowing going into it that we would probably throw away things that Aren’t good yeah, that was the I don’t know the mantra if you will like. Let’s just try a lot of stuff and if it doesn’t work it’s okay, we just throw died, it’s not the end of the world.

We don’t have to ship everything we dry. I think that was really liberating and really helpful, because there were a lot of folks on the team who had different had had interesting ideas and and it’s empowering for people to try stuff. But it’s also, you know appropriate that we, we don’t just say because we built it, we should ship it looking back. What would you say were the best decisions you made and also for two part.

What would you regret in terms of like oh yeah, things that you did, that you’d wish you hadn’t? I mean you can also I’m an engineer. I was definitely an engineer at those days and I feel really good about some of the decisions we made. As an engineer from an engineering focus, you know we really put a lot of. We talked a lot about how important was that we were building a product, not building a platform.

I mean ultimately is a product that carries the web platform, but what I mean by not building a platform is that sometimes there’s a temptation as engineers to go off and build framework and and tools for creating the product that you’re actually there to create you. And we really resisted that a lot tried to make sure that we focused all as much of our energy on like actually building a browser which was very helpful to make sure that that that’s what we did so, for example, we said first we’re just building a Windows browser – and that meant, let’s just use win32 straightaway, all the Microsoft API is not looking for any cross-platform toolkit framework to build our UI.

Yes, one day we’ll bring this to Mac one day, we’ll bring it to Linux. You know, and so on, but like for now we’re just building a Windows application and when we went to finally build a Mac product a product for us 10, we told some of the engineers at Google. We said hey, you want to come work with us. We’d love for you to build the best browser for OS 10, and we want you to approach it. The same way that we approached building for Windows, which is all the UI, should be cocoa.

It should all be native, and we want you to have the freedom and flexibility to both embrace the native operating system primitives, but also move quickly as those primitives change, as the iOS evolves. So, let’s build a Mac focused product again with this idea that it’s we’re building product on a platform for building browsers, but what ends up happening as you do this and we did the same thing with Linux.

What ends up happening as you do this? Is you know we start to realize. We were coding same thing three times, yeah right and later on. Things like Android came along and iOS and Chrome OS, and so our world got a lot more complicated and what we ended up doing is, or is this arc from the singular I’m building a product to I’m starting to build platform things that helped me build that Product across and different platforms, yeah and that came afterwards – and I think that was actually somewhat healthy in a bit it.

To a certain extent. I kind of have some regrets that we built Chrome so much as a monolithic product. So while there is some code structure, that’s healthy and good, and – and there is somewhat of a layer cake, if you will there are – there – are some cuts that some some extra layers in the cake that should have been there. And now we have a lot of complexity because we didn’t make some of those cuts earlier.

We didn’t modularize necessarily as much as we should have. But again I think that came from that that focus some were just building this product and he does. I don’t need to be extra. We don’t need all that extra modular modularity, and now we find ourselves wishing he had a maybe done a little more, a little more forethought on that. What would you say, the decisions that were made that were actually really good to the success of a break, yeah yeah, so design examples in engineering examples.

There was this one one concept that was came up very early, which was – and we wrestled with this a bit. So the content area of a tab right, we started with the idea that there are some. We will actually have some browser UI that lives in the tab. So, for example, when you open a new tab, page there’s there’s some content shown to you, suggestions about things. You might want to do yeah. We started out building that natively and we started to find ourselves discovering an uncanny valley, because development users have this expectation that things inside the tab behave like web pages.

But building that not using web technologies meant that some things were subtly not right: yeah selection, behavior, wasn’t there context menus? Not there and the same. You know just things were subtly different, and so we scrapped that and we built the new tab page using web technology, and now it fit better everything we didn’t have all those little niggling little bugs you just felt natural. It felt natural it fit with the product.

On the flip side, we had some dialogues and some of those dialogues, mostly they were built natively, but a few of them were built using web and they never felt quite right, and so then we came to this. Discover that, like, let’s be opinionated about this, if it’s a dialog, it’s done natively and if it’s in the content area, it’s done with the tab, and then we avoid this sort of uncanny valley situation.

When chrome came out, there was a designing for best viewed in Internet Explorer, 6 yeah, and it’s interesting. You say like at the time. Webkit was not the priority of web developers. Now, we’ve shifted 10 years later, we’re seen best viewed in chrome or best viewed in WebKit browsers. So there’s this constant fear that we’re possibly entering back to the past, where, if, if, if development stops, then users and like the web technology becomes like a stagnant, oh yeah, that’s a great question.

I think that oh there’s a couple different things that happen with ie6 right, so, first off Microsoft stopped evolving the guys and we’re not stopping evolving api’s. We our mission, is to make the web better, and so it continued invest in that and the way we invest in that is, it’s very important to work with the standards community, the other browser vendors in particular and web developers, so that we get it right.

One of the dangers of shipping an API, if you’re the only one, only browser shipping it is that you might come to find that there’s a better way to do that. Api, yeah, a better design and then the end result is we’ll be tempted to ship. The new design as well the better design, but we won’t we’ll – have trouble leaving behind the old design so now we’ll ship, two ways to do something yeah or in the worst case three ways to do something.

If you look at CSS gradients, you will see. There’s multiple ways: yeah – and this comes from this – this this phenomenon. Where browser ships it early, then they learn that oh gee. I wish I’d done it differently and then they ship it that way too, and then oh yeah. I wish they would do it differently and they ship it that. Finally – and so you end up with a multitude of ways to do things in the web platform, gets really complicated and we don’t want the bad develop web developer to be thrashed by all of that.

Right, we want to keep it simple and make sure the api’s work well, so we want to do our do a good job, and that means spending time with other browser, vendors spending, time with web developers, learning understanding all the use cases and being very deliberate in The standards process, but we should still be able to ship something. Finally, and sometimes we do have to take some calculated risk yeah right.

Sometimes we are the first browser to ship an API, but we hope to do that in a way that stands the test of time, you’re looking for pain, points and you’re, trying to understand the why it is that people have these problems so that you understand their Mental model and you avoidable, designing in that way again.


 

Categories
Online Marketing

Developer tools for designers – Designing in the Browser

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


 

Categories
Online Marketing

Accessibility – The State of the Web

The theme for today’s episode is really important because you may have a fast website with the best content, but it’s all for nothing if people can’t actually use it. My guest is nektarios paisios, he’s a software engineer on the chrome, accessibility team and we’re talking about the state of accessibility. Let’s get started, how would you describe your role on the chrome accessibility team? I’m a software engineer.

This means that I’m a programmer. I write code. All day, which is something I enjoy a lot, I implement accessibility, features in chrome and I also fix accessibility bugs. I mostly work on Windows and Mac accessibility, but my team has lots of other people who work on many different platforms and for lots of features that we release as part of Chrome OS. So how would you explain, accessibility to someone who may be new to web development? Well, accessibility is a very important feature.

We should see it as a feature of our website and it’s part of usability the more accessible your website is the more usable it would be to everyone, so it doesn’t only affect people with disabilities. If we want to talk about the people with disabilities, they are according to the World Health Organization, 15 % of the population. So even for business reason you could say that you’re getting more customers if your website is more accessible.

But, aside from that, your website will be more usable if you abide by all the accessibility standards. If you follow all the best practices, your website will be both accessible. I provide better experience for the rest of your customers, so it’s a good business practice. It’s the right thing to do, but also it creates the best experience for everybody and what are the various ways that people with disabilities interact with the web depending on the disability that somebody has.

They used different sorts of assistive software. One of this piece of software is called screen reader, so if you’re blind, for example, you might be using the web through a piece of software that reads to you using synthetic speech, it reads to you the contents of the screen: that’s why it’s called a screen. Reader, if you’re partially sighted, you might be using a magnifier, so you might be enlarging the size of the font, the size of the text, the size of the whole page, the size of the images, even the size of article, so there’s different software that helps depending On the disability that you have, if you’re hearing-impaired, you might be using some captions or some software that can listen to what has been said and transcribe that into text.

If you have another disability like a motor disability, you could use a switch access, which is a device that allows you to move through the interface by flipping a switch or you could use eye tracking devices that track the movement of your eyes. If you cannot move your hands, you might be able to move your eyes. So by moving your eyes, you can move a cursor around the screen, so there are lots of different accommodations depending on the particular need.

So what are some things that you wish? Even the more experienced web developers would know about accessibility. Clearly, the web has offered a big opportunity for companies and organizations to showoff their branding. Different websites have different layouts. They use different font sizes, they use different colors. They have different ways of interacting with them different menu systems, different ways of navigating through them different workflows as a whole.

This is very good for branding every organization wants their website or their web app to differ from other organizations. We don’t want to have a monoculture. We want to have a platform that is full of life and diverse as possible. However, if you’re a person with some accessibility challenges, it takes much longer for you to get accustomed to the different workflows that are presented by different websites.

Let me give you an example: let’s say: you’re blind and you’re using a screen reader. What you have to do most likely is: you need to read the web page that you’re interacting with serially from top to bottom and if to get familiar with it, to familiarize yourself with it. So it takes you time to if the conventions are different from side to side. It takes you time to go through all the content. Just to be able to do.

Let’s say you might want to sign up for a newsletter or you might want to order or buy something from that particular company’s website. If the workflow for purchasing an item is different for each website, which for each website which most likely it is, then it was going to take you much longer to learn that workflow, because you don’t have the visual cues that the sighted person might have the placement Of icons, the placement of the different elements of the different buttons, you don’t have a clue, you know you don’t get those and clues.

You have to go and discover them by reading the contents of them of most of the website. The same goes: if you have a model disability, for example, you might need to use hardware device like switch access to go through the contents of the side and if you’d have muscle, you have developed a muscle memory that you know, for example, that if you press Your street chip specific number of times you get to a particular feature on most websites that say the top navigation menu.

But now you discover that for each website the navigation menu on the top is not the same location. So you cannot really develop muscle memory with your assistive device and you can imagine the similar issues with other groups of disabilities, so what I would suggest is try to follow existing conventions, and this brings me up to my second point. Not everybody uses the computer using a mouse or a phone using touch, they might be using some commands that come with your assistive software or hardware, and those commands require that your site is accessible using the keyboard and if your site is not accessible using the keyboard.

It’s a pointing device, then it might be hard for this assistive software or hardware to work with your website. Another point is: there are lots of accessibility standards and the web content. Accessibility guidelines is one of the most prominent standards and it’s better. If you go through those standards and try to follow as much as possible the guidelines that are out there, so that’s one of the ways your website will be consistent with established patterns.

The same goes for the keyboard navigation. I described before another thing that you should bear in mind is: if you don’t actually test with assistive software, you are not going to know the bottlenecks you’re not going to know what the issues your users are running into. So you could try some of the assistive software very easily. For example, if you have a Chromebook, you could easily turn on a screen reader that comes built-in to every colon book.

You could turn that on and every command, but the screen reader exposes is in a menu, so you can easily get to all the commands it. Doesn’t it’s not a very steep learning curve. The same goes for every other assistive feature. On that platform. You can turn on magnification color filtering on Android. You can turn on a feature whereby you could use the volume buttons of your phone to simulate a switch access device.

So somebody with a motor impairment that uses a hardware switch device. You could simulate that using the volume buttons of of your phone, so these are some of the tips that you could rely on when developing. What would you say that developers who may be well intentioned and try to be overly descriptive with, for example, their aria labels on elements, and they might just say too much about an element, it’s a bit of funny? But there is this notion that you know: if you have a disability, it means that you’re, you know, you don’t have the intellectual ability to understand what everybody else can understand and that’s actually not true.

We don’t need to go over the top when describing a UI element. For example, we don’t need if there is a button that lets say minimizes a article player, we don’t need to say things like collapses and reduces to a small size, the article player and places it at the bottom left side of the screen. You don’t need to say that just say minimize and people would understand from the context that it minimizes a article player.

Of course, we have to bear in mind that we have a group of disability users that are with intellectual disabilities or developmental disabilities, so we have to make cater to those users by using language that could be understood by a 9th grade level. We shouldn’t use complex and not very well known words, but other than that. We don’t need to go over and above and try to overcompensate. The other thing, though, that you should bear in mind, is what I was saying before with the keyboard.

If you wan na test your keyboard navigation, you should not only use the tab key, because tab is not the only key on the keyboard. So, coming back to your previous question, what I wished with developers knew is tap is not the only key on the keyboard and, if you look through, for example, the area, the rich internet applications practices for keyboard users, there are lots of shortcut keys that are listed In those practices in those authoring practices and tab is just one of them and I’ve cost you the importance of using semantic elements on the web so that the screen reader can understand what type of content is on the page instead of using a div or a Span element that doesn’t convey any semantic information, it’s better to rely on the existing html5 rich controls, if possible.

So let’s say you want the user to enter an email field, use the email input box. There is such a text field because an assistive software might provide autocomplete suggestions to a user, for example, if they detect that they’re trying to enter an email. But if you don’t use the correct control, the assistive software might not know that and offer no suggestions. The other problem is, let’s say you wan na enter a date.

There is a date control you when I use at least the original list box control in HTML try and use those controls. Unless you really have specific reasons, why not most people have issues with the styling? I do understand that, but if you are comfortable using the built-in controls, use them and take your time to read through the new controls that came out in the last few years, there. Instead, an array of rich form controls the number control.

There’s a telephone input do not ignore those controls, they might look the same as a text field, but under the hood they are very useful to somebody who is using an assistive software right. So, as the web capabilities have evolved over the years, people have started using the web in different ways. So what effects have translate these had on the ways that users actually use the web? The development of the web has given people with disabilities a workaround for many of us, including myself, I’m blind myself, including myself.

We have been liberated anyway by the proliferation of web applications, because if let’s say you want to go and visit a bank and make some transaction, you usually go to a bank and you have to complete some paperwork and that paperwork. If you’re blind, for example, you will need some assistance to help you do that if you’re deaf you the person who is at the bank most like it, doesn’t know any sign language, you might have difficulty explaining to them.

What needs to be done? If you have a model disability, it might be, there might be, no ramp is hard to get into the bank, and then you can go in there. So there are sort all sorts of issues when it comes to physical world that they completely disappear. When you use a website a website, also – and that’s also ever that’s another great point to remember – doesn’t have a bias. If you visit a place and you have a disability and people there, they don’t want accommodate you.

You might have a hard time convincing them that you have the right to be offered services, but a website doesn’t know that you have a disability, and this has also opened up the employment market to people with disabilities who can, through their computers they could perform the Tasks that before they needed, for example, a secretary or an assistant to help them perform their work duties. Another thing is reading books.

Let’s say you have learning disability, for example, or blindness. It would have been hard for you to read a book now with their software. That can read the book to you over the web and also for people with dyslexia. For example, there are tools that break up syllables or read the book using text-to-speech or have a dictionary that is on demand and easy, easily accessible on the computer or on your phone.

So it’s really easy to to get accommodated through the web and you can also feel very independent in that way because you’re using the same websites and the same web apps as everybody else. So this is a very nice feeling. You feel that you’re treated the same as every other customer of that particular business. However, on the negative side, the more complicated the web has become. The more important is for web developers to take care of accessibility challenges because on the flip side, if you do visit, let’s say a supermarket and you’re in a wheelchair, and you have trouble going through the aisle or the supermarket.

Unemploy might help you by fetching an item from the shop. However, if the website is inaccessible and you’re, a person with modern disability that is relying on eye tracking device to use the website and the website doesn’t have very good – let’s say, keyboard navigation or some kind of navigation that the functionality that would allow that assistive software To interact with it, then this person is stuck.

They can’t really negotiate with the machine because the machine is inflexible. So, yes, the web has removed a lot of the accessibility challenges. However, if we don’t pay attention to the accessibility of our websites, we’re going to erect much higher barriers that are inflexible and cannot removed by talking to a human being right and one of the solutions to that is standardization and the w3c web accessibility initiative is to Define strategies, standards and resources to make the web accessible to people with disabilities.

So what kinds of things have been done from the standardization side of things to make the web more accessible to people? There have been a lot of efforts, and actually I have been involved in the chrome accessibility team for a few years now, and we have a steamed colleague on the team that is part of has been a part of the standards for many years now and what They have been telling me is that at the beginning there was nothing and then they worked really hard for a few important standards to be put in place.

The accessible rich Internet application standard area for short, it’s very extensive and it defines specific attributes that you can add to your HTML that enable HTML elements that do not have any semantic information attached to them. It’s what I was describing before the use of divs and spans with visually, with visual information that conveys to the user what they do, for example, it might be a deed that represents a button check bar or a check box, but it doesn’t convey that to the Assistive software, it’s only conveyed visually.

However, if you use the Aria standard, there are some attributes. For example, rule you can say: role equals checkbox and suddenly all the assistive software knows that this is a checkbox. And then there is another attribute called aria checked and you can say: ok, that’s true, and that means that the checkbox is now checked. So what it is visually represented with a check mark is now also conveyed in the HTM and the assistive software can get to that information.

Another standard that has been evolving is the HTML standard itself. So, as I said before, in html5, there are new form controls, rich form, controls that you can use and those controls are accessible by default because they are implemented by the browser, their slider. There is a time range. There is email input, telephone input, etcetera. There are lots of controls, another standard is the web component standard and that’s an evolving standard, and that one enables you to create components and widgets that could be packaged as a unit and used in other web apps.

This is very helpful because once somebody creates an accessible widget, let’s say we want to create an accessible calendar widget we can create that publish it on the web and people can easily include it in their web apps before this web component standard it’s hard. It has been hard to include components from other sites, because when you paste in HTML and CSS, there might be conflicts with your own CSS, with your own HTML with your own JavaScript.

But this web component standard enables those widgets to isolate themselves from the rest of your web app. So I think that would help accessibility by enabling people to create accessible components once and distribute them to be used everywhere. And what is the accessibility object model? It is a standard that would enable web applications to expose some of the accessibility information and perform some day of the accessibility actions that were only available to desktop applications in the past, not only desktop, but also, I should say that we’re only available to native applications In the past, I’m talking about things like if a user performs a gesture, a specific gesture or uses a specific command with their assistive software, this command could be communicated to the web app itself and the web app could take action based on that command.

That came from the assistive software native apps could do that before web apps. Couldn’t we’re trying to create a standard to solve that? Another thing that this standard is trying to solve is the ability for the web app itself to create accessibility, information. That would only be visible to users of assistive software in the past. You couldn’t easily do that now. You can, if you have a complicated up that presents things using, let’s say converse or some other kind of graphical technology, but you want to create some equivalent semantically rich representation of what is visually conveyed to users of assistive software.

With this new standard, the accessibility object model standard. You can create your own accessibility objects, food, the information you want in them and expose them directly to assistive software. So, in effect, you can tell the assistive software what exactly exactly what you want did to see. So what types of tools are available for developers to understand how accessible their website is? Chrome actually has a lot of built-in tools.

We have the chrome, developer tools and inside the chrome, developer tools. If you go to the main panel, the panel where you can see the Dom tree, there is also a tab in there that allows you to see the accessibility tree. The accessibility is not the same as the Dom tree. The accessibility tree is the tree that is presented to assistive software and it is created based on the Dom tree and the layout tree.

So your HTML, your CSS, your JavaScript. All of that is used to create the accessibility tree which conveys the information about the page to assistive software and that’s the tree. You can manipulate with using them directly using the accessibility, object model standard that I have mentioned before, and also that’s the tree where in which all the Aria attributes you might have added to your website.

That’s where those attributes would appear. So, as you can see, the history is created from many different sources, but ultimately that is the information that assistive software sees and you can see it as well. If you go to the developer tools, there is a tab there. That shows the accessibility tree and you can use that to see. Let’s say if you have a screen door user. What are they going to experience if you visit your website, how are they going? What information are they going to see when they try to read the site using the screen reader? There is also another panel in the chrome developer tools.

It’s the audits panel and as part of the audience we have lighthouse lighthouse, can perform audits on your website and give you a list of errors or recommendations for to improve. So it’s very easy. You could go and click and run an audit accessibility audit on your website. I have to point out that it doesn’t catch all the errors. You ultimately do need to test with some assistive software or rely on user feedback, but it does help write a score of 100 percent doesn’t mean your website is fully accessible yep.

So the HTTP archive tracks, lighthouse accessibility, scores on over a million websites. The median lighthouse accessibility score is 62 % and another interesting stat, 42 % of pages correctly use alt attributes on images and only 12 % of pages correctly label form elements. So the state of accessibility right now shows a lot of room for improvement. Unfortunately, we do need to redouble our efforts and perhaps we need to provide more automated solutions for making web apps accessible.

We do need to pay attention to the web content, accessibility guidelines and there are three axes in those guidelines that I think everybody can understand. The apps in the app should be the website should be perceivable, so you should be able, as a person with disability, you should be able to perceive content that your disability prevents you from receiving low. So let’s say you have an image, it doesn’t have a description or we have a article that has only audio.

It doesn’t have captions for people who are deaf if you’re a person with some developmental disability, and there is language there that is not as to advanced and too complicated, or you have very long and long winded text and you’re unable to you know, read long pieces Of text and you’re going to have difficulties there, so there or you’re a person who doesn’t tolerate rabid animations. So it’s not hard for somebody who is developing a website to understand if they try and put their themselves in the shoes of a person with disabilities.

For a few minutes, it’s not hard of them to understand what it means when we say that your website needs to be perceivable. It just takes some time to put yourself in the shoes of this other person and then realize oh wait a moment. This might be. Might create some trouble for for people another thing in the web content. Accessibility guidelines is your app needs to be. Your website needs to be robust, so the HTML needs to validate.

You need to be using the correct attributes and form labels is actually part of that. You need your your forms to have labels your your form fields, to have labels to indicate errors in a clear manner and to suggest corrections if possible. So I I don’t think it’s hard for somebody to follow those standards if they try and get in the shoes of the user that is trying to use the website. I do realize that some of the standards are vague and too technical.

They use complicated language, but I think, if you’re a developer, that wants to learn how different people with accessibility needs use your website, you could try and find articles on how different people use assistive software and then try and imagine yourself being in the shoes of those Users, so, as web capabilities continue to evolve, we have technologies like AR and VR around the corner. How do we make sure that we’re not leaving people with disabilities behind a lot of the changes happen organically? They grow from past experience and slowly-slowly solutions get developed.

For example, assistive software has been developing for 25 or 30 years, and it has been a gradual process. However, if there is a technology shift like the move to a touchscreen mobile phone, for example, or the use of VR AR virtual reality, it would be very difficult for somebody to wait for this progress that happened gradually, because then you would expect a big gap in The number of the amount of time that you have to wait, if you’re a person with disabilities to get your hands on this new technology, so here is where we need a new research.

The innovation! That’s why I to encourage people who are interested in the field of accessibility, to pursue a career in this field and also get a degree on accessibility. There is a notion that accessibility is easy, that you just add some labels and some alt text some keyboard navigation. However, your question about virtual reality: they points the finger to the big changes that could happen in the lives of people with disabilities.

If an innovation takes place and we’re not going to get an innovation, if people are not going to work hard and try to be creative, with the accessibility with providing solutions to those accessibility challenges. Finally, what resources would you recommend for web developers who want to make the web more accessible? My program manager, Laura, has produced a few articles that you can read. We have a Udacity course that some of my co-workers have created that you can read on.

It explains to you how you could add accessibility to your website, also, the web content, accessibility, guidelines from the w3c and the Aria standard, accessible, rich Internet application, standard, the authoring guide for the area standard and the examples and are provided so nektarios. Thank you again for being here my pleasure. You can find links to everything we talked about in the description and also share your perspective on the state of accessibility.

In the comments below thanks for reading and we’ll see you next time.


 

Categories
Online Marketing

Design Systems – The State of the Web

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.


 

Categories
Online Marketing

Service Workers – The State of the Web

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.