Designing for Everyone: Building great web experiences for any device : Build 2018

But hello. Welcome. My name is aaron gustafson. And i’m an accessibility and web standards for microsoft. I work for the edge team. And lately i have been doing a Lot of work for progressive web apps. Today i want to talk about building great web experiences. And building it for any device. Not making assumptions for what Our users are users to access the web. So back in 2016, there were all of these headlines about mobile Overtaking desktop. And It did happen. The stats actually show that it Did happen. That all of a sudden mobile Traffic exceeded the traffic that was taking place from desktop. But i would like to challenge that assumption. Because while it is true that mobile accounts for 56 Of all traffic, that Actually is not equally distributed across all The verticals that websites and apps exist in. So in the food and drink category, mobile dominants. So it’s a 50-50 split in the news space. And in finance, it’s actually 60 split towards desktop usage. And this shouldn’t be surprising. People use their phones to look up restaurants, find the hours And menus. Mobile ordering. They do their finances at their desk. Where a larger screen can be Helpful to look at spreed sheets and such. Desktop users spend more time on a site. Around 60. And the actual range is broken Down by industry range all the way up until 300 more time Spent on particular sites. So in the case of food, it’s 57 More time spent on a site. News it’s 238 more time is Spent on the sites in a desktop environment. And finance It’s 77. There’s a lot of debate as to The value of tracking bounce rates. You can take this with a grain of salt. Bounce rates are lower on desktop than mobile. Again, probably not surprising. People have a lot less patience On small screens an the desktops. They want to get in, accomplish whatever task they need to. And they want to move on to whatever the next thing is they Need to do. Or may bounce away anyway Because they get frustrated. And they go to a competitor. Desktop users actually view more pages as well in their sessions. So by about 59. And again, keeping with food, News, and finance. Food they view about 1.9 Times The number of pages. Almost two times the number of Pages that they do on mobile. News, it is two times what they Spend on mobile. And finance it’s about 1.7 Times. But the range actually goes from One and a half times to reading books. One and a half times of reading books longer on desktop to Sports being actually over three times the number of pages. So it really varies. So depending what you are Building, it’s important to look at these numbers. But what all of this comes together to mean is the desktop Experience really still matters. Okay. You might be surprised to learn That web is actually the number one activity on windows. Whether it’s in the browser or other parts of the operating System. It’s by far the number one Activity on window’s pc’s. And desktop matters even more in The context of pwas. We hear progressive web apps Discussed in topic of mobile. They matter on desktop as well. We’ll be hearing from josh in a moment. But starbucks found that 40 of their order ahead transactions Were coming from the starbucks pwa on the desktop. So they are not even promoting it as a desktop destination, but That’s true. And they don’t have this — this Is despite having higher mobile traffic numbers. And without having an installable pwa on a desktop System right now. And carnival cruise line saw a Significant push notifiction. Which is actually really high. And pwas on desktop is an Emerging area. But this is really promising Starting to show that pwas really have a lot to gain on the Desktop as well. So here at microsoft, we believe That the web can and should reach beyond the browser, which Is why we’re heavily invested in making pwas on windows. And we are not alone in this. Google. Apple is starting to get interested in this, too. And while the session is not exclusively about pwas, we have A number of sessions that are about pwas. I’m going to throw them up on the screen. There are a lot of great talks Here that will be getting into the weeds of progressive web apps more. Everybody got it that wanted to? five, four, three, two, one. All right. So, while this session isn’t pwa Focused, pwas provide a good framework for the discussion. Because pwas start with a great web experience and then enhance That experience for performance, for resilience, for Installation, and for engagement. Now, the really important pieces Here are that pwas are an enhancement. Okay? and an enhancement means you Have to start with something. That something that you need to Start with is a great web experience. Before you experiment with the manifest and such, you need to Start with a great web experience. That’s what i’m here to talk to You about today. Now, the hallmarks Include universal availability. Over any network on any device and in any browsing context. Universal accessibility. Not having any barriers between Users and content. And not having barriers between Users and interacting with the products that you are basically. So the first word in progressive web apps is progressive. That’s the p. Right? and with good reason. Progressive means to be developing gradually or in Stages, proceeding step by step. What does that actually look Like when it comes to web products? Let’s tuck into that. So the first step is to focus on What matters about your product. So if we take a trip back in Time, this was forbs.Com in 2007. This is an article page. The there somebody is coming for Is that bit of white on the bottom. 10 Of the screen. The core purpose of this page Was to come and read the content. But the content is completely hidden by all of these other Things that are drawing your attention away from the actual Purpose of the page. So the actual page content is at A distinct disadvantage when it came to this. Now, most of us, all of us hopefully, have learned from This. Have learned that this is not a Good way to throw everything up on the screen. So not fill every inch of real estate with content that Distracts users. We have gotten a bit more focused. And i think that mobile first as a concept has helped us to focus On that. Because when we start to think About narrow screens, it really forces us to focus on what the Experience. So mobile first isn’t saying That mobile is better or that that’s what we should be, you Know, concerned with building. It’s not mobile only. It’s just a mind set. It’s a framework for thinking of The experiences we build. Imagining you only have a Limited canvas to work with. Now, it helps in the mobile Context certainly. But it helps on desktop, too. Where we resize apps and put them side by side and stuff like That. Right? so what mobile first asks us to Do is it forces us to ask questions like why is the user here. What tasks do they need to accomplish. Is there anything on the screen That distracts them from the Accomplishes? inducted user interface. It’s in line with the idea of mobile first thinking. So we need to remember that text is actually the first interface. You know, a lot of times we get caught up in the interaction Effects that we can create on the web these days. But the reality is that text is the first interface. So it’s important to think, okay, is the copy written clearly? Does it use language that our users will easily understand? Is the copyright invoice appropriate to our organization? Does it strike the right tone? right. We often lose sight of it. Language influences how people use and think about our products. It can create friction in a user journey or foster delight. How you talk to your users matters because it makes them Care or not about your product. This is often, we developers struggle. If you are looking for somewhere to start, i highly recommend Checking out mill chimps voice and tone. Or there’s a great book by nicole and kate called nicely Said. Those are fantastic resources For learning about good copyrighting. So once we focused, we should flip it around and ask, are There things that are missing that we could add to help our Users be more successful? examples include helper text, Place holders, and things of that note. Now, i’m going to turn it over for a moment to josh from Starbucks to share a little bit about their process for finding Focus in their product.>>Thank you. [ Applause ]>>thanks.>>So josh williams, product manager at starbucks. I wanted to talk a little bit about our journey in figuring Out what matters to our customers. It’s hard to figure out where to start, especially if you are Thinking about transitioning technologies, thinking about Building the first pwa or really reinvisioning what your web Experience for your customers. This is not an easy journey to figure out. We really started out with focussing on that app-like experience. That pwa-led thought, mobile first thinking, what does that Transform into what our customers actually want to do on web? So it turns out, customers want to do things on web when it Comes to our usage that we saw on starbucks.Com We saw a lot of customers spending a majority of their Time on menu sections, on account management-related Activities, on sending e-gifts to friends, checking the star Balances. A lot of those transactional Components. When i say that, i am talking About mobile first. I’m talking about interaction App-like interaction. Not necessarily purchasing. But doing something and using our web app as a tool to in and Out use along their day. So, yeah, customers like to do Things with the features that we Build. So we focused on our key Customer journeys. If you know about starbucks, if You purchased a coffee or seen in-store placements, rewards Program is a big deal. It matters a lot to us. It matters a lot to our customers. Purchasing products becomes real And fun. You earn stars. We wanted to think about how do customers join. We wanted to focus on the transactions of enabling Customers to purchase coffee. Really big for our customers. And also when you think about that rewards program, how do Customers actually track their progress towards completion of Earning one of their free drinks or products. These are at a high level, these are the main journeys that we Are focussing on. And we have so many web pages as A retail company. I’m sure some of you can understand what it looks like. Figuring out just these customer journeys was a significant decision because it really cut Out a lot of other areas where we could be working on. We wanted to focus on what the customer was telling us that they wanted to spend their time On. Believe it or not, any retailer, You are going to see a store locater. Some way to find the nearest retail store, whatever it is. We started with the store locater. We have a lot of engineers Through transitioning technologies and trying to Figure out what is a pwa, how do i build with it, how do i take a Feature that we have and use, start with that, learn about it, And move on from there. So this is one of those areas we start to see. Even the way we built this, we didn’t introduce the language, We have it chromed in within our previous website’s chrome. From there then we talked about high level about the features we Were going to talk about. And we started going one by one Focussing on, all right, let’s rebuild our sign in page. Let’s rebuild the account create process. Even simple components like a connection and granting Permissions, rebuilding one of those so that we can learn more About the technology and also hone in on our overall web Experience. And then getting the bar code Pay, that’s something that led to one of our biggest successes In the mobile area. We brought it into the web. It was easy to take your mobile phone, walk into the store, and Pay for your coffee and earn stars. E-gift. And we started to snowball and Building in more and more features. That were heavily transactional focused. And the features our customers were using everyday. Again, you start to see, all right, we have a few of these components. We actually we’re building this functional app. You can go to the app and see what it looks like. And it eventually culminates into a web app. This is one of the features that we build the app was order ahead. Traditionally something that happened on the ios and android Native apps. I’m showing it in the desktop view. It’s an immersive experience. There is not the 10 content focused. In fact, we have a lot of white space to help the customer guide Their visual language through navigation, back navigation, All the way through primary Content area. Over time with narrowing down the vision and refining the Vision, we focused on key customer journeys. We focused on learning how to build with these new technologies. And then ultimately leading to something that customers can use On a day-to-day basis. Aaron, back to you.>>Thank you so much, josh.>>Great. [ Applause ]>>so once we’ve focused on what It is that we need to build, once we focused on what it is That matters, we can begin looking for ways to enhance that experience. And so the first way that we can begin doing that is by using Mark up appropriately. Using mark up that supports that Experience. If the words we choose matter, The mark up that we choose to kind of inskons those words Matter just as much. So i’m going to throw up quick html. This is div soup. It’s meaningless divisions of The page in order to accomplish certain design things using Different class names. But it provides no additional Context or meaning to the document. So i want to walk through it step by step and talk about how We could use better semantics to enhance the baseline text Experience to improve it for our users. So here we have the outer Division, which marks up a piece of self contained content. In this case, it is a teaser for a blog post. Or a full blog post. It’s a piece of self contained. Article actually has that explicit purpose. And changes like this can be easy, especially if you are Using some sort of class based css naming structure like ba M. You can leave that in place and It doesn’t affect the way your document is styled. Moving on, here we have the title of this particular blog post. It should be marked up as a heading. We have a bunch of heading Levels available to us. Each one elements are for the Most important elements. H 1. Moving down we have meta content. About the document. So footer is an option for this. Because that’s really for marking up meta information like this. Because this is multiple pieces of data, so it has a publish Date and it has reading time for it. A definition list is actually a Really good option here. There aren’t only for use in Things like glossaries. They could be used when you have A key value pair. And it creates explicit Associations between the elements. So you can see in the first row There, dt published. And then a dd. Dt is the term. And the dd is what’s defining that. And these even have flexibility to have multiple dt’s defined by A single dd. Dd act for definitions as dt’s. Or multiples and multiples. It’s really really flexible, which is Cool. Side bonus, we could mark up the Date information in a time element. Time would indicate that that is taking place at a certain time Or date or in a duration of time. Time around the 25 minutes as Well. And we can even use things like The date/time attribute to provide an expansion to allow us To do interesting things, which i’ll note later on. Moving down into the content. Here we have lines of text Separated by line breaks. And the number of sites i’ve Seen this on boggles my mind. But this doesn’t really provide Any meaning about what this content is. This is paragraphs. So we could mark them up in Div, which make them lay out on top Of each other. Because they are paragraphs, we Should be using paragraph elements. There are all these elements, Paragraphs, lists that add meaning to the document. And then ultimately provide more accessibility benefits for our users in the end. And give us a lot more flexibility in being able to do Things later on. Now, some of you in the audience Maybe wondering, okay, with css i can make it look the same Anyway. Why should i care? Why does it matter what my mark up is? Well, what happened if for some reason the css doesn’t reach the User, maybe it’s unreachable or goes down for some reason. If you had the div soup version, you would have something like this. Whereas if you had mark up in place, the browser defaults Styles would make it readable. You are providing a better Baseline experience for your users if something goes wrong, Which happens on occasion. Poor semantics is an Exclusionary design choice, which causes a mismatch of the Structure the person can infer and the structure available to Someone who uses assistive technologies. We actually create accessibility issues when we as designers fail To consider the variability of human experience. Using good semantics helps you to build it in from the beginning. Both visually, nonvisually. And so on and so forth. Standardization because all the browsers support these Standardized elements means it can be understood by a broader audience. It also means from an accessibility standpoint, all of The kind of under pinnings in order to provide that more Accessible experience provide all the correct accessibility Mappings and such is all on the browser rather than something we Have to shoulder ourselves. And most of the elements that Exist out there, form controls and such, as well provide usefulness via different Interaction methods for free, without adding additional code To make it happen. So it’s all about being able to Design for more people. And reach more people. Reach a broader audience. Create more opportunities for People to interact. Now it also allows our content To do more. When we have mark up, we could See, hey, cortana read me the top three headlines. It could query new york times, capture the first headline of The first three article elements in the top news. Or it could grab all of the articles on the page and find The latest three using the time element. So your code, this is a sample of javascript. What you end up doing is query selector javascript in order to Extract that information. And do something fun with it. Another thing that’s really important is that good mark up Makes your sites more resilient. It reduces the dependcies that Your sites from. So i’m going to give a simple Example of a button. Right? Probably one of the simplest interactions. Say you want a button that’s Able to submit a form. There are four ways that you Could possibly mark this up. As an input with a type of submit. A button element. You could do it as an anchor With a class of button on it. Or you could do it as a class of Div. Now, visually you might be able To make these look identical. The reality is they are not all Created equal. If we were to compare them Across a variety of different qualities, the input button is Displayed as a button by default. It has the semantics of being a button. It is focusable via the Keyboard, which is important for assistive technologies. And power users. It can be activated by a mouse, But touch, by the enter key or spacebar. And it’s capable of submitting a Form. The same is true of an input. A link, however, is displayed as a link by default, not a button. It is just a named generic in terms of the semantic Accessibility tree. It is focusable. And it’s activatable by the mouse touch and enter, but not The space. So that’s a gap. And it’s not capable of submitting forms. The div is worse. Because it’s a block level Element by default. It’s not exposed via the Accessibility tree at all in terms of its semantics. It’s not focusable, it’s not activatable, and it can’t submit A form. What we end up with is a bunch Of gaps need to be filled by more code. Right? So what we end up with is introducing more dependencies. In order to make the anchor and div display as though they are Buttons. We have aria we need to Introduce in order to make sure that the accessibility api Understands they are acting as buttons. We need to add extra html. And we need to introduce javascript in order to control The activation of those elements. And to submit the form. So all of this is just creating more potential points of failure For just this one interface element. Right? It’s just making it a more and more fragile experience. And the reason i say this is because we don’t actually Control what happens to our code once it leaves our server. We don’t control the networks that it travels along and who Might manipulate it. We don’t control the execution Environment, the device the user is on. We don’t control the browser they happen to use. It’s the wild west out there. There are a lot of unknowns. We should be striving to build It. I’ll talk about how we think Smartly about dependencies in a few minutes. So, yeah, i mention this going down. There could be errors in r code. There could be errorses in third party code that we are bringing In that cause issues, cause these dependencies. Plug-ins can cause problems, input methods. Actually i got this tweet from a colleague of mine the other day. He looped me in on this somewhat terrifying thing that happened. Chrome 66 is when google landed their effectively distrust for Semantic ssl certificates that were issued before june 1st of 2016. So what happened is if your site was running on https and using A — all of a sudden when chrome 66 hit that page, it no longer Truster that as a secure site. So it’s going to go ahead and Block any requests for security reasons to those assets. 200 Of his sites did not have css did not have javascript. They were just reduced to plain old html. Most were able to still work, which is incredible. And that’s what we should be striving to build. Now, this is not the first time that this sort of thing has happened. And in fact, the very next day, the j query had an issue where Their certificate expired. Anyone pulling j query, all of a Sudden they lost it. If their whole site was Dependent on j query, hole in the water. All of their customers just their customers, but all of Their customers, they are the largest provider in the uk, did Not get j query for like a day. This stuff happens. We don’t control a lot of stuff. That’s kind of a downer. We want to have as much control As possible. So let’s flip things around. Instead of thinking about it as a downer, let’s think about it As building a great core experience. And then using those tools, javascript, css, et cetera, to Enhance our core experiences that work no matter what. Right. So instead of trying to Basically cobble together dependencies in order to Overcome a ux problem, let’s actually use mark up that will Work. I’m going to walk through a Simple example of how we can do something like this. Here we have a basic input field for an email type. So in here, we have the type equals email. This was introduced in html five. And it creates. Whether or not the browser Supports the input type at all. If it doesn’t, the user gets a Plain old input. It falls back beautifully to a Normal input. Which is what we had for 15 Years before we got the email input type. Then there’s the question of Whether the browser has the Validation algorithm in place. They will be notified if there’s not a valid email. A lot of which gets written poorly and keeps barfing at my Address. We don’t have to maintain the Regular expressions. The browser can do it for us. A third delta is if we’re in a situation where the browser has A virtual keyboard, it can present the most appropriate keyboard. They get the at signal, and quickly enter things like email, Or enter numbers. A bunch of input types that allowed us to do that sort of thing. Moving on, we have the required attribute. That was just one attribute with All the deltas. Here we have the required one. Indicates that this field is required. So if somebody does have support For the algorithm, they will be prompted and they won’t be able To submit the form without it being filled in. Okay. Now the last little bit there. This is for the accessible rich Internet application speck. Now hopefully in the future it Will be mapped over to automatically. Right now this is what we have. In order for this to actually be exposed to somebody who is using Assistive technology, the browser first needs to expose it To the assistive technology via understanding what the required Property is. And the assistive tech needs to Know what to do with that. The user may get this Enhancement or may not. It’s easy to provide for them. So if we were to kind of graph this along the idea of enhancing The experience, we text input, and then we move up to having The required validation, required notifiction. And then a dedicated keyboard. All are enhancing this single Component. All just through adding three Particular attributes to an input type. That’s a great way to enhance things. So when you begin to think of user experience as a continuum That scales with capabilities, this progressive approach is Both elegant and powerful. All right. Moving on after mark up. Once we’ve got good market in Place, we can begin to think about how design can enhance That core experience. So if you were to think about This same arc in the concept of layout, for instance. Maybe you think of it as block layout, and floats and Positioning, flex box, and grid. This is a nice simple arc of how You can use different css approaches in a progressively Enhanced way. And interestingly, this is Totally possible to do within the same page. So manuel created this demo as part of a smashing magazine Article. And what he wanted to show is That you could start with a block based layout and then you Could have floated styles. And then you could also have in That same css some flex box related styles and some grid Realitied styles. And based on what the browser Understood because different levels of browser or different Levels of modernize, modernity, however you want to say it, Within browsers have different levels of support. If you use flex box, it throws out float. If you use grid, it throws out Flex box. These are made to be stacked on Top of each other. And can be done really easily. I’ll show how this sort of thing works shortly. So i love this quote from jeff. I have been amazed at how often Assume what we designers do is decoration. Because so much bad design is decoration. Good design isn’t. Good design is problem solving. Now, if you consider yourself a developer, i would say that you Are also a designer. You are still a designer. You are solving problems. And design is there to solve problems. It’s not just there as Decoration. Which is important to note. Now there are a number of tools that we have within the realm of Graphic design that help to provide meaning and structure Within the documents. That help to eliminate, really,s The content and the purpose of our interfaces. I don’t have time to get deep into all of these. I’m going to pick on a couple of them to focus on and give a Couple of examples of. Starbucks using alignment to a Great degree. And they do a wonderful job with this. Helps our eyes to move efficiently over interfaces and To go from one point to another. And to make sense of things. Medium does a great job with contrast. Contrast is used to draw our Eyes to more important areas and away from less important areas. How we size elements with relation to one another can Actually help layouts feel more natural. Such as in the golden — which is employed here in the layout. That is proportion. Proximity can help us to group Related elements, so you can see in this form, there’s a little Bit of space between the email field and the password label. And the labels are closer than the fields are to each other. Logically group email with email and password with password. There are semantic ways to do that as well. A consistent vertical rhythm can actually make a layout feel more Structured and improve the readability of your documents. And unity, for example, repeating a colour throughout a Design can make an interface feel more cohesive. I don’t know how many of you have been on sites where buttons Are ump-teen different colours. Obviously it’s something that’s Become a monster. We want to have consistency in Our designs and unity. It makes our users feel better About your products. Graphic design is traditionally Focused on print. Many are equal in the web space. While the web can be print-like, the web is not print. There are additional considerations we need to be Aware of. Screen size, resolution, Brightness, the colour density, user preferences, network speed And quality, and assistive technology. Now, some of these are fairly Straightforward in terms of what tech we have more addressing them. Screen size, responsive layouts. Media queries. Easy to address the availability of screen sizes. I highly recommend starting mobile first. For differing resolutions, svg’s That can be scaled to any size. Doesn’t matter the resolution, It’s always going to look crisp. And responsive images help us Out from a bit map standpoint to deliver the most appropriate Image to the user based on the current device and the amount of Screen real estate availability. For brightness, we have the Ability to tweak the context on the text on background. I’ll give more examples shortly. For color density. Thinking about the choices. And there’s media queries you Can use around this as well if you want to tweak your design in Different scenarios. I’m going to circle back to that momentarily. And finally the network speed and quality, which we can Address with responsive images. System fonts instead of loading Custom fonts. Which tend to be heavy. All those are ways to address things. User preferences and assistive technology. Because they are deeper to get into. Now, for user preference, people can set things like differently sized fonts. You might want to consider doing media queries based on m’s. Relative size. So what’s neat about using M-based media queries, you can have an interface that somebody Is on a 7 inch tablet, let’s say, and they bump up the font size. Instead of being a smaller two column layout, it can switch to The mobile large view. You are not forcing users to Scroll size to size because they enlarge their font. High contrast colours, you can Tie into the high contrast settings. If somebody has turned on high Contrast, we can apply certain styles. We can do the same thing for White on black or black on white. Those are neat things. If somebody has a disorder, for instance, we can provide reduced Motions, so remove the animations, remove the Transitions and stuff that may cause them issues. By using the prefers reduced motion media query, which is Pretty cool. So — and then on the Accessibility end of things, we have things like screen Magnifiers, screen readers, braille printers, braille displays. For people that have motor or mobility issues we have speech Recognition, mouse settings, keyboards or keyboard overlays As well as eye tracking devices. There’s foot med — Pedals and straws. And hearing we have captioning And subtitling, which we should be considering. So with all of these kind of things to consider and the Accessibility space, it can seem like quite a challenge. And it’s unlikely that you will ever be consider that your Product is 100 accessible. Right? but every barrier you remove Improves life for somebody when they are using your product. That’s important to remember. It’s easy to remove a lot of the Low hanging fruit barriers by starting to think about things Like color, they matter. About 2 of men and half a Person of woman suffer from red-green color blindness. Making sure we are not using colour alone to convey Information is important. It is important if you do Charting on the web. Don’t just have colours to Convey what a line or a bar is. You want patterns in there as Well so it’s easy for somebody to tell what it is they are Looking at. Similarly, we want to have good colour contrast. And the creator of this tool is up here in the audience. Shout out to you, thank you. There are a lot of great tools Out there for testing the contrast of your text. This is one of them. There’s a link to it in the Bottom there. Highly recommend doing that. Ensures that your content is readable. If you are referring — this happens quite a bit in Interfaces. Click the green button below. Not helpful with someone with colour blindness. There are possibilities with all the differences of layouts and Such, that button may not be below in certain instances. So we can do things like anchoring to that button or Anchoring to that figure. That’s what this code shows here. Here we have a reference to a figure. And then the figure further on in the mark up. And we can anchor down to that using an id reference. This can be especially useful to people using the keyboard to tab Through content. Helps them to move from place to Place. It’s important to provide ample Space around interactive elements. Microsoft, apple, google have guidelines on how to design Buttons. Everyone debates over the amount Of spaces you need between things. It’s good to consider how much space you have between buttons, So people don’t click the wrong button. Especially if they have a tremor Or something. Or if they have fat fingers like I do. Right? we also should consider what our Designs leave unsaid. And i think this is not employed Often enough. We make a lot of assumptions About somebody’s ability to visually connect. In nonvisual interfaces which is what cortana and such are in Addition to screen readers, we need to be thinking about how do We provide more information and context around links we are providing. Finish reading, you might have seven links on the page that say Finish reading. Those are connected to teasers On the page. As somebody is moving through The document, they don’t have the context. So we can provide that context though by adding additional Content into the link. This can be accomplished in a Variety of ways. This is a simple way of doing it. B element with a class of hidden. But now the link actually reads, You can finish reading the web should just work for everyone in Less than ten minutes. Okay. And from a visual standpoint, we can hide those things that are In the b. And for a sited user it says Finish reading. Okay. Again, it’s all about enhancing that experience for our users as We have opportunities to do so. So the next example i want to Show you or the next thing i want to cover, rather, is how we Can actually use css itself to enhance our designs. Based on the capabilities of the particular browser we’re in or The vintage of the browser. I’m going to start off with a Simple example of rule-based overrides. So in this example here, i have A paragraph with green and then another green that is at 80 Using rgba. Older browsers that don’t Understand these values will simply ignore them. They will ignore that second rule and apply the green colour to the paragraph. If a browser comes along that understands rgba it will Override the original value of green with that rgba value which Is 80 green. This is a simple example. Contrived. You are not going to be overriding greens. It is something you should be aware of if you are doing Colours and not using rgba. Some users may end up with black text. If you have it on a black background, that can be a Problem. Providing fallouts is generally A good idea. But this is a simple example of Overrides. This is similar to how the flex Css overrides causes the browser to throw out float-related Styles and so on and so forth. Moving up to the actual Declaration block itself, here we have this selects an h 1 that Has an adjacent paragraph. This is using a very very modern Css selector. So there aren’t a lot of Browsers that support this yet. Any browser that does not Support has would ignore this rule set. But a browser that does Understand it would apply the rule set. So the selectors that we choose matter. And this applies in the context Of selectors being grouped together. When you separate them, if any Of the selectors are not understood, the entire block Gets ignored. Just be aware. Taking it up another level. We can use media queries. In this case, at media only screen. The only keyword introduced. This could apply to multiple rules. If a browser doesn’t support it, It will ignore the entire block. Any rule sets in that Declaration. If a browser does support it, Then it will apply it. The same thing holds true if we Were to put a complex selector in there. It would throw it out if it didn’t understand. And so on. We’re just going up. A similar block that we have allows us to test for specific Features to be supported in the browser. The at supports block. So in this case we can test to see whether the browser supports Display grid. Css grid speck. If it doesn’t understand at supports, which is a relatively New konstrukt, it will i go no err that entirely. If it supports at supports and not display grid, it would Ignore the contents of that block. If it doesn’t understand grid and at supports, it can apply both. This can be used to selectively deliver certain styles to Certain classes of browser. Which can be really helpful. Now, all of this works because html and css are built to be Fault tolerant. Browsers are instructed to Ignore what they don’t understand. Which allows us to enhance our Designs and layouts and start to use new elements and start to Use new css without running the risk of breaking the layout or The design in older browsers. Or browsers that we maybe Haven’t considered. And new specks are smartly Overriding old browsers with conflicting syntax. That’s what enables it. Flex blocks Throws out float. Grid throws Out float and flex box. All about enhancing as we can. I want to give a run down of why Approaching design from a mobile first standpoint is a really Good idea. So this is again a very simple Example. And i’m going to use old school Css. But let’s say i wanted to have Two columns on a wide screen and one column in a small screen. Common scenario. If i were to approach this from The desktop first. So i took my desktop css. Okay. I’m going to add media queries. What you end up doing is having your primary and secondary divs Floating next to each other as your main code. And you write additional code to undo those styles. Which is not terribly efficient. If instead we switch from mobile First perspective, we’re using the default styles that are Applied in the browser which are to display the divs as blocks. And then only apply the floated layout when it’s appropriate to Do so, using a min width rather than a max width. We are not having to constantly undo styles we have created. And more about thinking about design as an enhancement. And enhancing the design as we have more real estate or Different capabilities. Other ways we can think about Design from a mobile first perspective include selectively Delivering advanced styles. To provide a basic mobile first style sheet. Where you are assuming everything is stacked on top of each other. And giving a separate advanced style sheet and limiting it to Only browsers that apply media query. So that way you could deliver to let’s say ie 8 and below. You can still support those browsers. You are just delivering them a baseline, here are font Adjustments and size of text adjustments, that’s about it. Very very baseline mobile experience. And you can deliver that great Experience to more modern browsers that understand media queries. You can also isolate css images within min width media query. If it doesn’t apply, the image won’t be downloaded. If you start from desktop and start putting them on, users are Having to download additional images. That can be problematic from a Performance standpoint. It’s a hidden tax on the user. Don’t hide content images using css. Please do not that. Again, a tax on the users. Use responsive images. The picture element and the source and attributes are great Enhancements to provide the most appropriate image to the user. And you let the browser decide. Prefer using system fonts. If you can avoid using a custom type face, please do. Those are really big. Or use font display optional, Which can allow the user to download the font in the background. It won’t be applied until the second page they load. They are not ending up with that weird flash of font shifting. Again, thinking about enhancing The experience with design as a tool. So once we used design, we can move on to using javascript to Enhance our experiences for our users. Enhancing that core experience. As i mentioned, when it comes to Html and css, browsers ignore what they don’t understand. Sadly that’s not the case with javascript. Because javascript is a Programming language, rules don’t apply. Different set of ruling apply. It’s a program. It has to be interpreted. Or es 6 depending on what you like to call it. What i have got going on here is i have a couple of rights taking Place to the document body. Can i count to four. And then i’m going to inject paragraphs counting to four Letting the keyword inside of that four loop. Right. And let just allows that variable to be scoped just to That block, if you are not familiar. And then output is success message at the end. So in pretty much, in every modern browser, you get what you Expect. You have the paragraphs injected Into the document. No problem. In any browser that doesn’t Understand the let keyboard, gets none of the javascript. So it doesn’t even just ignore that little bit that used the Let. It ignores the entirety of the javascript. It just fails. And browsers that fall into this Category is ie 10 or below. Upper mini which is 5 globally. The android browser, not chrome. The qq browser. Keyword. Right, but because the Interpreter doesn’t know what to do with it, it throws out the Entire program. Because it has no idea how to Build it. Again, more Dependentencies, more potential problems. This sort of stuff can happen. If your entire experience of Your website or your product depends on javascript, you can Run into issues. And it’s important because i’ve Had some people say to me, my analytics show we have no issues That are no javascript. Does your analytic software use Javascript to record that information? [ laughter ]>>And many of them scratch their chins and say, yes. There you go. Now you can track that sort of thing. I’m happy to discuss that afterwards. Don’t have time right now. But if we think — and approach javascript from a thoughtful standpoint. And we use it intentionally, we can actually embrace the idea of Enhancing our experiences and create really really robust experiences using javascript Without sacrificing the core experience that works for Anybody. Depending on the set up, Enabling routes to handle links and actions is a relatively easy Baseline. And then you can download the Javascript application code and take over the whole experience When you know it can run. There are few companies that do It. So your enhancement may look Like this. You have a baseline site that Works with links. And then you have this stellar Experience that uses a javascript framework. You can also do it at the feature level. As an example, consider web off — it’s a new speck. That actually allows you to use public private key combinations Where the browsers interacting with the os. So it’s not relying on sms texts or other things that could be Hacked, for instance. Not only does it provide a more Secure method of logging in. But it makes it easier for users to be getting authenticated. It’s something that we will be supporting. I’m going to show you a quick Demo here. Here we have a store demo that Uses it. I’m already logged into the Store and i have a credit card on file. When i chose to purchase a product and check out with a Card i already have on file, it prompts me for my password first. I enter the password so the site knows that i am who i say i am. And it notices that my browser supports it. At that point edge can negotiate with windows to get data from The hello. It can be a finger print — or a Token or something like that. Once the browser has that data, It can use the api to store the credential to the server. The next time i complete an action that requires Authentication, i can use windows hello or another one That is combatable with the api. Which is cool. In order to use something like This, we first need to test to see whether the particular tool Is available. In this case, i want to check For credential support. And there’s additional levels of Checking you can do as well. And i’m not going to get into The weeds of how to create credentials and stuff. This is above my pay grade. But we use the public key option In the web auth api. And this allows us to create the Public key private key pair. We submit that to the server. And we’re able to authenticate that back later by grabbing it Out of navigator credentials. Store it on the individual Device that you are on. What we end up with as an Enhancement is maybe we have a normal password experience for As our baseline for folks with older devices. And then we have the web auth feature for folks who can take Advantage of it. Now, os level feature Integration sounds like we’re getting into the pwa territory. The cool thing is you don’t need to be a pwa to take advantage of this. But speaking of pwas, you might be wondering, okay, don’t Progressive web apps and service workers require javascript? Well, yes. Service worker requires javascript. It is written in javascript. But service workers were Designed as an enhancement. They are not a requirement to Use the page. So in order to register a Service worker, we first want to query for whether service worker Is supported. Object detection to do that. Browsers know enough, that they know what they don’t know. That’s how we can test for objects existence. We can test for objects and methods. Sadly keywords like let are different. So we have a normal site that can all of a sudden transform Into being a pwa. Or if you want to think about it In terms of what service worker enables. We have a site and then the pwa And the browser, and maybe we have an installed pwa. We have a site, we have a site that has less network reliance Because service worker does a great job of allows us to cache Things. We have a site capable of Working offline. Individual syncs back to the Server. And we have the ability to send Push notification. So all of these are levels of enhancement that can be done Just within a service worker. And we’ll get more features over Time, i’m sure. And interestingly, when Installed on windows, pwas can get access to a bunch of host Level or host os level capabilities that you wouldn’t Consider, really, for a normal website. Settings information, such as Being able to switch into dark mode. So this api is cumbersome. First we check for the existence of the windows object on the window. In javascript. And so once we have that check In place. We know if that goes through, if We go inside of that conditional, if that is true, we Know we are in an installed pwa in windows. So then we can use those pwa or the uwp api’s within the Javascript. So the first thing i can do is Get access to the ui settings. This is where i will find Information about the colour. And then i can grab the Background colour that’s currently set in ui settings. So that’s where i can determine whether it’s black or white. Dark mode is black, light mode is white. And then i can test that object to see if it is, in fact, the black colour. And then apply certain rules for that website or swap style Sheets or add a class to the body that can tagle the website around. Now, i made a demo with a side loadable version of this. You can check out the code and download it by following the Link at the bottom. But basically what we have here Is an example of a pwa that actually responds to switching Back and forth between dark mode. There is an event that takes place when somebody switches. I have not been able to get it to work in javascript yet. But it at least works the next time they open it up. If somebody is constantly in dark mode, it would Automatically open in dark mode. People don’t tend to toggle back And forth too much. We can and should use javascript. We need to do so thoughtfully and intentionally. We need to be aware of the fact that somebody may not get our Javascript based enhancements. That’s okay. As long as we focus on the core experience, we’re going to provide better experiences for Our users. We should always be looking to Enhance our users’ experience. Not at the expense of a robust baseline. So as i mentioned earlier, pwas start with a great web Experience and then enhance that experience for performance, Resilience, installation, and engagement. And the most important thing is we start with that great web experience. We build great web experiences by focussing on what matters, by Using mark up that supports that core experience, by designing in Support of that core experience. And then using javascript to Enhance that core experience, to remove the ux friction. Thank you all, very much. And i’m happy to take questions. [ Applause ]>>we got 9 minutes before the Hook comes up. If you have questions, if you Want to line up behind the microphone. If not, enjoy the rest of your Build. And definitely check out the pwa Talks. Thank you.>>Yes, with service worker, is periodic sync coming? yes. We’re not at the point to have a timeline for when we’re going to Implement it. We’re watching it and Participating a lot in that area. So it will be coming in time.>>Can you throw up the page That has all the other pwa?>>could i put up the other Agenda ones here.>>Aaron: another question.>>Yeah. So what are some of the hardware Apr’s coming. Usb support.>>We are paying attention to a lot of them. Some of them are available — currently once your pwa is Installed. We are tracking things like Bluetooth api and the other ones rolling along. If you status microsoft edge. We had a status report that runs Down where we are at. Whether it’s under consideration.>>Excellent.>>My question was about using Javascript progressively, and how do you that with react?>>So in terms of using, really, any front-end javascript Framework and trying to enhance in this way, a lot of times you Have to do a server side render and just be able to handle the Routs and have real form submissions. That’s honestly the approach that air bnb have taken. It’s referred to isomorphic javascript. You are guaranteed users are going to get some experience. And you are handling whatever you need to. And then you load your javascript framework on top of That when it’s able to.>>Cool. Thank you.>>Hi, aaron. So this windows, is that Available in every browser in window or just edge?>>One of the windows ap ari if you are installed. That’s when those open up to you.>>Thanks.>>So if you want to test your site for accessibility, what are Some good screen reader tools to use to make sure that it’s Accessible for people to test it out.>>Testing in the actual screen readers are the best ideas. Jaws and such are really good. Narrator. Turning off your monitor and Trying to browse the site with a screen reader is possibly. Narrater has a developer mode, which is cool. It will black out just the app that you are currently Interacting with. And for edge, what it will look Like is it will as you move your focus pointer around using the Tab key, using the keyboard, it will visually show you where you Are on the page and what the text is that would be read out. Those can be helpful. I don’t know — There are a couple of good tools out there. It’s used to debug anything. And provides all the Accessibility mapping so you can see how things Are working. So you can see what element is Being exposed. And what it’s registering as a Button or not. That means that it becomes Automatable. You can use web driver and stuff Like that to check accessibility.>>Okay. All right.>>So this one i’m just more curious on. They serve similar purposes. What are the main differences Between the m unit and like view port units? At least when it comes to responsive text, i find that View port with the function and css seems to do the trick more smoothly.>>I totally agree. View ports and calc and having Percentage based things, all are fantastic in browsers that Support them. M as support way back to the beginning. You could provide that baseline, m based media queries and font Sizing, use view port widths and things. And use rem, based on the html Element. M’s can get tricky doing Nesting. But m units for media queries is Really easy. You know, you don’t have to get Into the crazy calculation. And you can do your font sizing And scaling using calc and all that stuff.>>Thank you.>>Combinations are good. Any other questions? all right. Thank you all very much.

Add a Comment

Your email address will not be published. Required fields are marked *